* #RI-2918 - Event SLOWLOG_AUTO_REFRESH_ENABLED should be sent when user changes rate after enabling autorefresh

* #RI-2908 - The edit rate button should appear when hover on the rate value

Author: egor-zalenski

redisinsight/ui/src/pages/browser/components/auto-refresh/AutoRefresh.tsx

@@ -29,8 +29,9 @@ export interface Props {
   testid?: string
   containerClassName?: string
   turnOffAutoRefresh?: boolean
-  onRefresh: () => void
+  onRefresh: (enableAutoRefresh?: boolean) => void
   onEnableAutoRefresh?: (enableAutoRefresh: boolean, refreshRate: string) => void
+  onChangeAutoRefreshRate?: (enableAutoRefresh: boolean, refreshRate: string) => void
 }
 
 const TIMEOUT_TO_UPDATE_REFRESH_TIME = 1_000 * MINUTE // once a minute
@@ -45,6 +46,7 @@ const AutoRefresh = ({
   turnOffAutoRefresh,
   onRefresh,
   onEnableAutoRefresh,
+  onChangeAutoRefreshRate,
 }: Props) => {
   let intervalText: NodeJS.Timeout
   let timeoutRefresh: NodeJS.Timeout
@@ -126,18 +128,20 @@ const AutoRefresh = ({
     )
   }
 
-  const handleApplyAutoRefreshRate = (value: string) => {
-    setRefreshRate(+value > MIN_REFRESH_RATE ? value : `${MIN_REFRESH_RATE}`)
+  const handleApplyAutoRefreshRate = (initValue: string) => {
+    const value = +initValue >= MIN_REFRESH_RATE ? initValue : `${MIN_REFRESH_RATE}`
+    setRefreshRate(value)
     setEditingRate(false)
     localStorageService.set(BrowserStorageItem.autoRefreshRate + postfix, value)
+    onChangeAutoRefreshRate?.(enableAutoRefresh, value)
   }
 
   const handleDeclineAutoRefreshRate = () => {
     setEditingRate(false)
   }
 
   const handleRefresh = () => {
-    onRefresh()
+    onRefresh(enableAutoRefresh)
   }
 
   const onChangeEnableAutoRefresh = (value: boolean) => {
@@ -207,7 +211,7 @@ const AutoRefresh = ({
           {!editingRate && (
             <EuiTextColor
               color="subdued"
-              style={{ cursor: 'pointer' }}
+              className={styles.refreshRateText}
               onClick={() => setEditingRate(true)}
               data-testid="refresh-rate"
             >

redisinsight/ui/src/pages/browser/components/auto-refresh/styles.module.scss

@@ -115,3 +115,16 @@
     color: var(--euiColorPrimary) !important;
   }
 }
+
+.refreshRateText {
+  display: inline-block;
+  width: 80px;
+  height: 30px;
+  border: 1px solid transparent;
+  cursor: pointer;
+
+  &:hover {
+    padding-left: 5px;
+    border-color: var(--controlsBorderColor);
+  }
+}

redisinsight/ui/src/pages/browser/components/key-details-header/KeyDetailsHeader.tsx

@@ -178,18 +178,20 @@ const KeyDetailsHeader = ({
     })
   }
 
-  const handleRefreshKey = () => {
-    sendEventTelemetry({
-      event: getBasedOnViewTypeEvent(
-        viewType,
-        TelemetryEvent.BROWSER_KEY_DETAILS_REFRESH_CLICKED,
-        TelemetryEvent.TREE_VIEW_KEY_DETAILS_REFRESH_CLICKED
-      ),
-      eventData: {
-        databaseId: instanceId,
-        keyType: type
-      }
-    })
+  const handleRefreshKey = (enableAutoRefresh: boolean) => {
+    if (!enableAutoRefresh) {
+      sendEventTelemetry({
+        event: getBasedOnViewTypeEvent(
+          viewType,
+          TelemetryEvent.BROWSER_KEY_DETAILS_REFRESH_CLICKED,
+          TelemetryEvent.TREE_VIEW_KEY_DETAILS_REFRESH_CLICKED
+        ),
+        eventData: {
+          databaseId: instanceId,
+          keyType: type
+        }
+      })
+    }
     onRefresh(key, type)
   }
 

redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx

@@ -107,17 +107,19 @@ const KeysHeader = (props: Props) => {
     height: '36px !important',
   }
 
-  const handleRefreshKeys = () => {
-    sendEventTelemetry({
-      event: getBasedOnViewTypeEvent(
-        viewType,
-        TelemetryEvent.BROWSER_KEY_LIST_REFRESH_CLICKED,
-        TelemetryEvent.TREE_VIEW_KEY_LIST_REFRESH_CLICKED
-      ),
-      eventData: {
-        databaseId: instanceId
-      }
-    })
+  const handleRefreshKeys = (enableAutoRefresh: boolean) => {
+    if (!enableAutoRefresh) {
+      sendEventTelemetry({
+        event: getBasedOnViewTypeEvent(
+          viewType,
+          TelemetryEvent.BROWSER_KEY_LIST_REFRESH_CLICKED,
+          TelemetryEvent.TREE_VIEW_KEY_LIST_REFRESH_CLICKED
+        ),
+        eventData: {
+          databaseId: instanceId
+        }
+      })
+    }
     dispatch(fetchKeys(
       '0',
       viewType === KeyViewType.Browser ? SCAN_COUNT_DEFAULT : SCAN_TREE_COUNT_DEFAULT,

redisinsight/ui/src/pages/slowLog/components/Actions/Actions.tsx

@@ -19,8 +19,8 @@ import { slowLogSelector } from 'uiSrc/slices/slowlog/slowlog'
 import AutoRefresh from 'uiSrc/pages/browser/components/auto-refresh'
 import { Nullable } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import styles from './styles.module.scss'
 import SlowLogConfig from '../SlowLogConfig'
+import styles from './styles.module.scss'
 
 export interface Props {
   width: number
@@ -68,11 +68,25 @@ const Actions = (props: Props) => {
         : TelemetryEvent.SLOWLOG_AUTO_REFRESH_DISABLED,
       eventData: {
         databaseId: instanceId,
-        refreshRate: enableAutoRefresh ? refreshRate : undefined
+        refreshRate: enableAutoRefresh ? +refreshRate : undefined
       }
     })
   }
 
+  const handleChangeAutoRefreshRate = (enableAutoRefresh: boolean, refreshRate: string) => {
+    if (enableAutoRefresh) {
+      sendEventTelemetry({
+        event: enableAutoRefresh
+          ? TelemetryEvent.SLOWLOG_AUTO_REFRESH_ENABLED
+          : TelemetryEvent.SLOWLOG_AUTO_REFRESH_DISABLED,
+        eventData: {
+          databaseId: instanceId,
+          refreshRate: +refreshRate
+        }
+      })
+    }
+  }
+
   const ToolTipContent = (
     <div className={styles.popoverContainer}>
       <EuiIcon type="alert" color="danger" className={styles.warningIcon} />
@@ -116,6 +130,7 @@ const Actions = (props: Props) => {
           containerClassName={styles.refreshContainer}
           onRefresh={onRefresh}
           onEnableAutoRefresh={handleEnableAutoRefresh}
+          onChangeAutoRefreshRate={handleChangeAutoRefreshRate}
           testid="refresh-slowlog-btn"
         />
       </EuiFlexItem>

redisinsight/ui/src/telemetry/events.ts

@@ -52,6 +52,10 @@ export enum TelemetryEvent {
   BROWSER_KEYS_SCANNED = 'BROWSER_KEYS_SCANNED',
   BROWSER_KEYS_ADDITIONALLY_SCANNED = 'BROWSER_KEYS_ADDITIONALLY_SCANNED',
   BROWSER_KEYS_SCANNED_WITH_FILTER_ENABLED = 'BROWSER_KEYS_SCANNED_WITH_FILTER_ENABLED',
+  BROWSER_KEY_LIST_AUTO_REFRESH_ENABLED = 'BROWSER_KEY_LIST_AUTO_REFRESH_ENABLED',
+  BROWSER_KEY_LIST_AUTO_REFRESH_DISABLED = 'BROWSER_KEY_LIST_AUTO_REFRESH_DISABLED',
+  BROWSER_KEY_DETAILS_AUTO_REFRESH_ENABLED = 'BROWSER_KEY_DETAILS_AUTO_REFRESH_ENABLED',
+  BROWSER_KEY_DETAILS_AUTO_REFRESH_DISABLED = 'BROWSER_KEY_DETAILS_AUTO_REFRESH_DISABLED',
 
   CLI_OPENED = 'CLI_OPENED',
   CLI_CLOSED = 'CLI_CLOSED',
@@ -114,6 +118,10 @@ export enum TelemetryEvent {
   TREE_VIEW_KEYS_ADDITIONALLY_SCANNED = 'TREE_VIEW_KEYS_ADDITIONALLY_SCANNED',
   TREE_VIEW_DELIMITER_CHANGED = 'TREE_VIEW_DELIMITER_CHANGED',
   TREE_VIEW_KEY_ADDED = 'TREE_VIEW_KEY_ADDED',
+  TREE_VIEW_KEY_LIST_AUTO_REFRESH_ENABLED = 'TREE_VIEW_KEY_LIST_AUTO_REFRESH_ENABLED',
+  TREE_VIEW_KEY_LIST_AUTO_REFRESH_DISABLED = 'TREE_VIEW_KEY_LIST_AUTO_REFRESH_DISABLED',
+  TREE_VIEW_KEY_DETAILS_AUTO_REFRESH_ENABLED = 'TREE_VIEW_KEY_DETAILS_AUTO_REFRESH_ENABLED',
+  TREE_VIEW_KEY_DETAILS_AUTO_REFRESH_DISABLED = 'TREE_VIEW_KEY_DETAILS_AUTO_REFRESH_DISABLED',
 
   SLOWLOG_LOADED = 'SLOWLOG_LOADED',
   SLOWLOG_CLEARED = 'SLOWLOG_CLEARED',