#RI-3883 - add telemtry in recommendations

redisinsight/ui/src/pages/databaseAnalysis/components/data-nav-tabs/DatabaseAnalysisTabs.spec.tsx

@@ -2,12 +2,19 @@ import React from 'react'
 import { cloneDeep } from 'lodash'
 import { instance, mock } from 'ts-mockito'
 import { MOCK_ANALYSIS_REPORT_DATA } from 'uiSrc/mocks/data/analysis'
+import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/analytics/clusterDetailsHandlers'
 import { render, screen, mockedStore, cleanup, fireEvent } from 'uiSrc/utils/test-utils'
 import { DatabaseAnalysisViewTab } from 'uiSrc/slices/interfaces/analytics'
 import { setDatabaseAnalysisViewTab } from 'uiSrc/slices/analytics/dbAnalysis'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import DatabaseAnalysisTabs, { Props } from './DatabaseAnalysisTabs'
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
 const mockedProps = mock<Props>()
 
 const mockReports = [
@@ -80,4 +87,68 @@ describe('DatabaseAnalysisTabs', () => {
       expect(screen.queryByTestId(`${DatabaseAnalysisViewTab.Recommendations}-tab`)).toHaveTextContent('Recommendations')
     })
   })
+
+  describe('Telemetry', () => {
+    it('should call DATABASE_ANALYSIS_DATA_SUMMARY_CLICKED telemetry event with 0 count', () => {
+      const sendEventTelemetryMock = jest.fn()
+      sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
+      const mockData = {
+        recommendations: []
+      }
+      render(<DatabaseAnalysisTabs {...instance(mockedProps)} reports={mockReports} data={mockData} />)
+
+      fireEvent.click(screen.getByTestId(`${DatabaseAnalysisViewTab.DataSummary}-tab`))
+
+      expect(sendEventTelemetry).toBeCalledWith({
+        event: TelemetryEvent.DATABASE_ANALYSIS_DATA_SUMMARY_CLICKED,
+        eventData: {
+          databaseId: INSTANCE_ID_MOCK,
+        }
+      })
+      sendEventTelemetry.mockRestore()
+    })
+
+    it('should call DATABASE_ANALYSIS_RECOMMENDATIONS_CLICKED telemetry event with 0 count', () => {
+      const sendEventTelemetryMock = jest.fn()
+      sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
+      const mockData = {
+        recommendations: []
+      }
+      render(<DatabaseAnalysisTabs {...instance(mockedProps)} reports={mockReports} data={mockData} />)
+
+      fireEvent.click(screen.getByTestId(`${DatabaseAnalysisViewTab.Recommendations}-tab`))
+
+      expect(sendEventTelemetry).toBeCalledWith({
+        event: TelemetryEvent.DATABASE_ANALYSIS_RECOMMENDATIONS_CLICKED,
+        eventData: {
+          databaseId: INSTANCE_ID_MOCK,
+          recommendationsCount: 0,
+        }
+      })
+      sendEventTelemetry.mockRestore()
+    })
+
+    it('should call DATABASE_ANALYSIS_RECOMMENDATIONS_CLICKED telemetry event with 2 count', () => {
+      const sendEventTelemetryMock = jest.fn()
+      sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
+      const mockData = {
+        recommendations: [{ name: 'luaScript' }, { name: 'luaScript' }]
+      }
+      render(<DatabaseAnalysisTabs {...instance(mockedProps)} reports={mockReports} data={mockData} />)
+
+      fireEvent.click(screen.getByTestId(`${DatabaseAnalysisViewTab.Recommendations}-tab`))
+
+      expect(sendEventTelemetry).toBeCalledWith({
+        event: TelemetryEvent.DATABASE_ANALYSIS_RECOMMENDATIONS_CLICKED,
+        eventData: {
+          databaseId: INSTANCE_ID_MOCK,
+          recommendationsCount: 2,
+        }
+      })
+      sendEventTelemetry.mockRestore()
+    })
+  })
 })

redisinsight/ui/src/pages/databaseAnalysis/components/data-nav-tabs/DatabaseAnalysisTabs.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react'
+import { useParams } from 'react-router-dom'
 import { EuiTab, EuiTabs } from '@elastic/eui'
 import { isNull } from 'lodash'
 import { useDispatch, useSelector } from 'react-redux'
@@ -7,6 +8,7 @@ import { EmptyAnalysisMessage } from 'uiSrc/pages/databaseAnalysis/components'
 import { setDatabaseAnalysisViewTab, dbAnalysisViewTabSelector } from 'uiSrc/slices/analytics/dbAnalysis'
 import { DatabaseAnalysisViewTab } from 'uiSrc/slices/interfaces/analytics'
 import { Nullable } from 'uiSrc/utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { ShortDatabaseAnalysis, DatabaseAnalysis } from 'apiSrc/modules/database-analysis/models'
 
 import { databaseAnalysisTabs } from './constants'
@@ -23,11 +25,30 @@ const DatabaseAnalysisTabs = (props: Props) => {
 
   const viewTab = useSelector(dbAnalysisViewTabSelector)
 
+  const { instanceId } = useParams<{ instanceId: string }>()
+
   const dispatch = useDispatch()
 
   const selectedTabContent = useMemo(() => databaseAnalysisTabs.find((tab) => tab.id === viewTab)?.content, [viewTab])
 
   const onSelectedTabChanged = (id: DatabaseAnalysisViewTab) => {
+    if (id === DatabaseAnalysisViewTab.DataSummary) {
+      sendEventTelemetry({
+        event: TelemetryEvent.DATABASE_ANALYSIS_DATA_SUMMARY_CLICKED,
+        eventData: {
+          databaseId: instanceId,
+        }
+      })
+    }
+    if (id === DatabaseAnalysisViewTab.Recommendations) {
+      sendEventTelemetry({
+        event: TelemetryEvent.DATABASE_ANALYSIS_RECOMMENDATIONS_CLICKED,
+        eventData: {
+          databaseId: instanceId,
+          recommendationsCount: data?.recommendations?.length,
+        }
+      })
+    }
     dispatch(setDatabaseAnalysisViewTab(id))
   }
 

redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.spec.tsx

@@ -1,11 +1,18 @@
 import React from 'react'
 import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import { dbAnalysisSelector } from 'uiSrc/slices/analytics/dbAnalysis'
+import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/analytics/clusterDetailsHandlers'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import Recommendations from './Recommendations'
 
 const mockdbAnalysisSelector = jest.requireActual('uiSrc/slices/analytics/dbAnalysis')
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
 jest.mock('uiSrc/slices/analytics/dbAnalysis', () => ({
   ...jest.requireActual('uiSrc/slices/analytics/dbAnalysis'),
   dbAnalysisSelector: jest.fn().mockReturnValue({
@@ -227,24 +234,44 @@ describe('Recommendations', () => {
     expect(screen.queryByTestId('configuration_changes')).toBeInTheDocument()
   })
 
-  it('should collapse/expand', () => {
+  it('should collapse/expand and sent proper telemetry event', () => {
     (dbAnalysisSelector as jest.Mock).mockImplementation(() => ({
       ...mockdbAnalysisSelector,
       data: {
         recommendations: [{ name: 'luaScript' }]
       }
     }))
 
+    const sendEventTelemetryMock = jest.fn()
+
+    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
     const { container } = render(<Recommendations />)
 
     expect(screen.queryAllByTestId('luaScript-accordion')[0]?.classList.contains('euiAccordion-isOpen')).toBeTruthy()
 
     fireEvent.click(container.querySelector('[data-test-subj="luaScript-button"]') as HTMLInputElement)
 
     expect(screen.queryAllByTestId('luaScript-accordion')[0]?.classList.contains('euiAccordion-isOpen')).not.toBeTruthy()
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.DATABASE_ANALYSIS_RECOMMENDATIONS_COLLAPSED,
+      eventData: {
+        databaseId: INSTANCE_ID_MOCK,
+        recommendation: 'luaScript',
+      }
+    })
+    sendEventTelemetry.mockRestore()
 
     fireEvent.click(container.querySelector('[data-test-subj="luaScript-button"]') as HTMLInputElement)
 
     expect(screen.queryAllByTestId('luaScript-accordion')[0]?.classList.contains('euiAccordion-isOpen')).toBeTruthy()
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.DATABASE_ANALYSIS_RECOMMENDATIONS_EXPANDED,
+      eventData: {
+        databaseId: INSTANCE_ID_MOCK,
+        recommendation: 'luaScript',
+      }
+    })
+    sendEventTelemetry.mockRestore()
   })
 })

redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { useParams } from 'react-router-dom'
 import { isNull } from 'lodash'
 import {
   EuiAccordion,
@@ -8,6 +9,7 @@ import {
 } from '@elastic/eui'
 import { dbAnalysisSelector } from 'uiSrc/slices/analytics/dbAnalysis'
 import recommendationsContent from 'uiSrc/constants/dbAnalysisRecommendations.json'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import { renderContent, renderBadges } from './utils'
 import styles from './styles.module.scss'
@@ -16,6 +18,18 @@ const Recommendations = () => {
   const { data, loading } = useSelector(dbAnalysisSelector)
   const { recommendations = [] } = data ?? {}
 
+  const { instanceId } = useParams<{ instanceId: string }>()
+
+  const handleToggle = (isOpen: boolean, id: string) => sendEventTelemetry({
+    event: isOpen
+      ? TelemetryEvent.DATABASE_ANALYSIS_RECOMMENDATIONS_EXPANDED
+      : TelemetryEvent.DATABASE_ANALYSIS_RECOMMENDATIONS_COLLAPSED,
+    eventData: {
+      databaseId: instanceId,
+      recommendation: id,
+    }
+  })
+
   if (loading) {
     return (
       <div className={styles.loadingWrapper} data-testid="recommendations-loader" />
@@ -44,6 +58,7 @@ const Recommendations = () => {
               buttonProps={{ 'data-test-subj': `${id}-button` }}
               className={styles.accordion}
               initialIsOpen
+              onToggle={(isOpen) => handleToggle(isOpen, id)}
               data-testId={`${id}-accordion`}
             >
               <EuiPanel className={styles.accordionContent} color="subdued">

redisinsight/ui/src/telemetry/events.ts

@@ -185,6 +185,10 @@ export enum TelemetryEvent {
   DATABASE_ANALYSIS_STARTED = 'DATABASE_ANALYSIS_STARTED',
   DATABASE_ANALYSIS_HISTORY_VIEWED = 'DATABASE_ANALYSIS_HISTORY_VIEWED',
   DATABASE_ANALYSIS_EXTRAPOLATION_CHANGED = 'DATABASE_ANALYSIS_EXTRAPOLATION_CHANGED',
+  DATABASE_ANALYSIS_RECOMMENDATIONS_CLICKED = 'DATABASE_ANALYSIS_RECOMMENDATIONS_CLICKED',
+  DATABASE_ANALYSIS_DATA_SUMMARY_CLICKED = 'DATABASE_ANALYSIS_DATA_SUMMARY_CLICKED',
+  DATABASE_ANALYSIS_RECOMMENDATIONS_EXPANDED = 'DATABASE_ANALYSIS_RECOMMENDATIONS_EXPANDED',
+  DATABASE_ANALYSIS_RECOMMENDATIONS_COLLAPSED = 'DATABASE_ANALYSIS_RECOMMENDATIONS_COLLAPSED',
 
   USER_SURVEY_LINK_CLICKED = 'USER_SURVEY_LINK_CLICKED',