RI-7218 Add telemetry collection for Vector Search (#4799)

- extract the common logic for the page view telemetry events in a custom hook
- add page view telemetry for the vector search page

re #RI-7218

Author: valkirilov

redisinsight/ui/src/pages/vector-search/VectorSearchPage.spec.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import * as reactRedux from 'react-redux'
+import { cleanup, render } from 'uiSrc/utils/test-utils'
+import { TelemetryPageView } from 'uiSrc/telemetry/pageViews'
+import { sendPageViewTelemetry } from 'uiSrc/telemetry'
+import {
+  INSTANCE_ID_MOCK,
+  INSTANCES_MOCK,
+} from 'uiSrc/mocks/handlers/instances/instancesHandlers'
+import { VectorSearchPage } from './VectorSearchPage'
+
+// Mock the telemetry module, so we don't send actual telemetry data during tests
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendPageViewTelemetry: jest.fn(),
+}))
+
+const renderVectorSearchPageComponent = () => render(<VectorSearchPage />)
+
+describe('VectorSearchPage', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  it('should render ', () => {
+    const { container } = renderVectorSearchPageComponent()
+
+    expect(container).toBeTruthy()
+  })
+
+  describe('Telemetry', () => {
+    let mockUseSelector: jest.SpyInstance
+
+    beforeEach(() => {
+      jest.clearAllMocks()
+
+      mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
+      mockUseSelector.mockReturnValue(INSTANCES_MOCK[0])
+    })
+
+    afterEach(() => {
+      jest.restoreAllMocks()
+    })
+
+    it('should send page view telemetry on mount', () => {
+      renderVectorSearchPageComponent()
+
+      expect(sendPageViewTelemetry).toHaveBeenCalledTimes(1)
+      expect(sendPageViewTelemetry).toHaveBeenCalledWith({
+        name: TelemetryPageView.VECTOR_SEARCH_PAGE,
+        eventData: { databaseId: INSTANCE_ID_MOCK },
+      })
+    })
+  })
+})

redisinsight/ui/src/pages/vector-search/VectorSearchPage.tsx

@@ -1,11 +1,22 @@
 import React from 'react'
+import { TelemetryPageView } from 'uiSrc/telemetry'
+import { usePageViewTelemetry } from 'uiSrc/telemetry/usePageViewTelemetry'
 
 import { VectorSearchCreateIndex } from './create-index/VectorSearchCreateIndex'
 import { VectorSearchQuery } from './query/VectorSearchQuery'
 
 export const VectorSearchPage = () => {
   const hasIndexes = true
 
+  usePageViewTelemetry({
+    page: TelemetryPageView.VECTOR_SEARCH_PAGE,
+  })
+
+  // TODO: Set title, once we know the name of the page
+  // setTitle(
+  //   `${formatLongName(connectedInstanceName, 33, 0, '...')} ${getDbIndex(db)} - Vector Search`,
+  // )
+
   if (!hasIndexes) {
     return <VectorSearchCreateIndex />
   }

redisinsight/ui/src/telemetry/pageViews.ts

@@ -13,4 +13,5 @@ export enum TelemetryPageView {
   RDI_CONFIG = 'RDI Configuration',
   RDI_JOBS = 'RDI Jobs',
   RDI_STATUS = 'RDI Status',
+  VECTOR_SEARCH_PAGE = 'Vector Search',
 }

redisinsight/ui/src/telemetry/tests/usePageViewTelemetry.spec.ts

@@ -0,0 +1,104 @@
+import { renderHook, act, cleanup } from '@testing-library/react-hooks'
+import * as reactRedux from 'react-redux'
+import { faker } from '@faker-js/faker'
+import { cloneDeep } from 'lodash'
+
+import { mockedStore } from 'uiSrc/utils/test-utils'
+import { sendPageViewTelemetry } from 'uiSrc/telemetry'
+import {
+  INSTANCE_ID_MOCK,
+  INSTANCES_MOCK,
+} from 'uiSrc/mocks/handlers/instances/instancesHandlers'
+
+import { usePageViewTelemetry } from '../usePageViewTelemetry'
+import { TelemetryPageView } from '../pageViews'
+
+// Mock the telemetry module, so we don't send actual telemetry data during tests
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendPageViewTelemetry: jest.fn(),
+}))
+
+describe('usePageViewTelemetry', () => {
+  let store: typeof mockedStore
+  let mockUseSelector: jest.SpyInstance
+
+  const mockPage = faker.helpers.enumValue(TelemetryPageView)
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    cleanup()
+    store = cloneDeep(mockedStore)
+    store.clearActions()
+
+    mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
+    mockUseSelector.mockReturnValue(INSTANCES_MOCK[0])
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('should send page view telemetry on mount if connected to instance', () => {
+    renderHook(() => usePageViewTelemetry({ page: mockPage }))
+
+    expect(sendPageViewTelemetry).toHaveBeenCalledTimes(1)
+    expect(sendPageViewTelemetry).toHaveBeenCalledWith({
+      name: mockPage,
+      eventData: { databaseId: INSTANCE_ID_MOCK },
+    })
+  })
+
+  it('should not send page view telemetry if instanceId is not available', () => {
+    mockUseSelector.mockReturnValueOnce(null)
+
+    renderHook(() => usePageViewTelemetry({ page: mockPage }))
+
+    expect(sendPageViewTelemetry).not.toHaveBeenCalled()
+  })
+
+  it('should not send page view telemetry if already sent', () => {
+    const { rerender } = renderHook(() =>
+      usePageViewTelemetry({ page: mockPage }),
+    )
+
+    // Verify initial telemetry call
+    expect(sendPageViewTelemetry).toHaveBeenCalledTimes(1)
+
+    // Simulate instance id change in the selector
+    mockUseSelector.mockReturnValue(INSTANCES_MOCK[1])
+    rerender()
+
+    // Should not send telemetry again
+    expect(sendPageViewTelemetry).toHaveBeenCalledTimes(1)
+  })
+
+  it('should send page view telemetry with when called manually', () => {
+    const { result } = renderHook(() =>
+      usePageViewTelemetry({ page: mockPage }),
+    )
+
+    // Verify initial telemetry call
+    expect(sendPageViewTelemetry).toHaveBeenCalledTimes(1)
+    expect(sendPageViewTelemetry).toHaveBeenCalledWith({
+      name: mockPage,
+      eventData: { databaseId: INSTANCE_ID_MOCK },
+    })
+
+    // Call the sendPageView method manually, with custom parameters
+    const customPage = faker.helpers.enumValue(TelemetryPageView)
+    const customInstanceId = 'custom-instance-1'
+
+    act(() => {
+      result.current.sendPageView(customPage, customInstanceId)
+    })
+
+    // Verify that the telemetry was sent with the custom parameters
+    expect(sendPageViewTelemetry).toHaveBeenCalledTimes(2)
+    expect(sendPageViewTelemetry).toHaveBeenCalledWith({
+      name: customPage,
+      eventData: { databaseId: customInstanceId },
+    })
+  })
+})

redisinsight/ui/src/telemetry/usePageViewTelemetry.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+
+import { sendPageViewTelemetry, TelemetryPageView } from 'uiSrc/telemetry'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+
+interface PageViewTelemetryProps {
+  page: TelemetryPageView
+}
+
+interface PageViewTelemetryHook {
+  sendPageView: (page: TelemetryPageView, instanceId: string) => void // Let the developers manually send page view telemetry, with custom parameters when needed
+}
+
+export const usePageViewTelemetry = ({
+  page,
+}: PageViewTelemetryProps): PageViewTelemetryHook => {
+  const [isPageViewSent, setIsPageViewSent] = useState(false)
+  const { id: instanceId } = useSelector(connectedInstanceSelector)
+
+  // By default, send page view telemetry on page mount if instanceId is available
+  useEffect(() => {
+    if (instanceId && !isPageViewSent) {
+      sendPageView(page, instanceId)
+    }
+  }, [instanceId, isPageViewSent])
+
+  const sendPageView = (page: TelemetryPageView, instanceId: string) => {
+    sendPageViewTelemetry({
+      name: page,
+      eventData: {
+        databaseId: instanceId,
+      },
+    })
+    setIsPageViewSent(true)
+  }
+
+  return {
+    sendPageView,
+  }
+}