RI-6968: Send the number of keys in the Viewed Browser Page event (#4460)

Author: seth-riedel

redisinsight/ui/src/pages/browser/BrowserPage.test.tsx

@@ -7,7 +7,7 @@ import { KeyTypes } from 'uiSrc/constants'
 import { RootState } from 'uiSrc/slices/store'
 import { setSelectedKeyRefreshDisabled, toggleBrowserFullScreen } from 'uiSrc/slices/browser/keys'
 import { sendPageViewTelemetry, TelemetryPageView } from 'uiSrc/telemetry'
-import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { connectedInstanceOverviewSelector, connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import BrowserPage from './BrowserPage'
 import KeyList, { Props as KeyListProps } from './components/key-list/KeyList'
 
@@ -87,6 +87,7 @@ jest.mock('uiSrc/telemetry', () => ({
 jest.mock('uiSrc/slices/instances/instances', () => ({
   ...jest.requireActual('uiSrc/slices/instances/instances'),
   connectedInstanceSelector: jest.fn(),
+  connectedInstanceOverviewSelector: jest.fn(),
 }))
 /**
  * BrowserPage tests
@@ -114,6 +115,9 @@ describe('BrowserPage', () => {
     (connectedInstanceSelector as jest.Mock).mockImplementation(() => ({
       ...commonOptions,
       isFreeDb,
+    }));
+    (connectedInstanceOverviewSelector as jest.Mock).mockImplementation(() => ({
+      totalKeys: 25,
     }))
 
     render(<BrowserPage />)
@@ -123,6 +127,7 @@ describe('BrowserPage', () => {
       eventData: {
         databaseId: 'instanceId',
         isFree: isFreeDb,
+        totalKeys: 25,
       },
     })
   })

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -36,7 +36,7 @@ import {
 } from 'uiSrc/slices/app/context'
 import { resetErrors } from 'uiSrc/slices/app/notifications'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
-import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { connectedInstanceOverviewSelector, connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 
 import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
@@ -73,6 +73,7 @@ const BrowserPage = () => {
   const { type } = useSelector(selectedKeyDataSelector) ?? { type: '', length: 0 }
   const { viewType, searchMode } = useSelector(keysSelector)
   const { openedPanel: openedSidePanel } = useSelector(sidePanelsSelector)
+  const overview = useSelector(connectedInstanceOverviewSelector)
 
   const [isPageViewSent, setIsPageViewSent] = useState(false)
   const [arePanelsCollapsed, setArePanelsCollapsed] = useState(isOneSideMode(!!openedSidePanel))
@@ -134,10 +135,10 @@ const BrowserPage = () => {
   }, [openedSidePanel])
 
   useEffect(() => {
-    if (connectedInstanceName && !isPageViewSent) {
-      sendPageView(instanceId)
+    if (connectedInstanceName && overview?.totalKeys !== undefined && !isPageViewSent) {
+      sendPageView(instanceId, overview?.totalKeys)
     }
-  }, [connectedInstanceName, isPageViewSent])
+  }, [connectedInstanceName, overview, isPageViewSent])
 
   const updateWindowDimensions = () => {
     setArePanelsCollapsed(isOneSideMode(isSidePanelOpenRef.current))
@@ -150,12 +151,13 @@ const BrowserPage = () => {
     }))
   }, [])
 
-  const sendPageView = (instanceId: string) => {
+  const sendPageView = (instanceId: string, totalKeys: number | null) => {
     sendPageViewTelemetry({
       name: TelemetryPageView.BROWSER_PAGE,
       eventData: {
         databaseId: instanceId,
         isFree: isFreeDb,
+        totalKeys,
       }
     })
     setIsPageViewSent(true)
@@ -172,9 +174,9 @@ const BrowserPage = () => {
   }
 
   const handleAddKeyPanel = useCallback((value: boolean, keyName?: RedisResponseBuffer) => {
-    handlePanel(value, keyName);
-    setIsAddKeyPanelOpen(value);
-    dispatch(setBrowserSelectedKey(keyName || null));
+    handlePanel(value, keyName)
+    setIsAddKeyPanelOpen(value)
+    dispatch(setBrowserSelectedKey(keyName || null))
   }, [])
 
   const handleBulkActionsPanel = useCallback((value: boolean) => {
@@ -183,7 +185,7 @@ const BrowserPage = () => {
   }, [])
 
   const handleRemoveSelectedKey = useCallback(() => {
-    setBrowserSelectedKey(null);
+    setBrowserSelectedKey(null)
     handlePanel(true)
   }, [])
 
@@ -224,7 +226,7 @@ const BrowserPage = () => {
 
       dispatch(setInitialStateByType(prevSelectedType.current))
       setSelectedKey(rowData.name)
-      dispatch(setBrowserSelectedKey(rowData.name));
+      dispatch(setBrowserSelectedKey(rowData.name))
       closeRightPanels()
       prevSelectedType.current = rowData.type
     }