#RI-3697 - add telemetry parameters to extrapolation controls

Author: rsergeenko

redisinsight/ui/src/pages/databaseAnalysis/components/analysis-data-view/AnalysisDataView.spec.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 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 { SectionName } from 'uiSrc/pages/databaseAnalysis'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { formatBytes, getGroupTypeDisplay } from 'uiSrc/utils'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
@@ -266,23 +267,28 @@ describe('AnalysisDataView', () => {
       <AnalysisDataView {...instance(mockedProps)} reports={mockReports} data={mockedData} />
     )
 
-    const clickAndCheckTelemetry = (el: HTMLInputElement) => {
+    const clickAndCheckTelemetry = (el: HTMLInputElement, section: SectionName) => {
       fireEvent.click(el)
       expect(sendEventTelemetry).toBeCalledWith({
         event: TelemetryEvent.DATABASE_ANALYSIS_EXTRAPOLATION_CHANGED,
         eventData: {
           databaseId: INSTANCE_ID_MOCK,
           from: !el.checked,
-          to: el.checked
+          to: el.checked,
+          section
         }
       })
       sendEventTelemetry.mockRestore()
     }
 
-    [summaryContainerId, analyticsTTLContainerId, topNameSpacesContainerId].forEach((id) => {
+    [
+      { id: summaryContainerId, section: SectionName.SUMMARY_PER_DATA },
+      { id: analyticsTTLContainerId, section: SectionName.MEMORY_LIKELY_TO_BE_FREED },
+      { id: topNameSpacesContainerId, section: SectionName.TOP_NAMESPACES },
+    ].forEach(({ id, section }) => {
       const extrapolateSwitch = within(screen.getByTestId(id)).getByTestId(extrapolateResultsId)
-      clickAndCheckTelemetry(extrapolateSwitch as HTMLInputElement)
-      clickAndCheckTelemetry(extrapolateSwitch as HTMLInputElement)
+      clickAndCheckTelemetry(extrapolateSwitch as HTMLInputElement, section)
+      clickAndCheckTelemetry(extrapolateSwitch as HTMLInputElement, section)
     })
   })
 })

redisinsight/ui/src/pages/databaseAnalysis/components/analysis-data-view/AnalysisDataView.tsx

@@ -4,7 +4,7 @@ import { isNull } from 'lodash'
 import { useParams } from 'react-router-dom'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { Nullable } from 'uiSrc/utils'
-import { DEFAULT_EXTRAPOLATION, EmptyMessage } from 'uiSrc/pages/databaseAnalysis/constants'
+import { DEFAULT_EXTRAPOLATION, EmptyMessage, SectionName } from 'uiSrc/pages/databaseAnalysis/constants'
 import {
   TopKeys,
   EmptyAnalysisMessage,
@@ -34,13 +34,14 @@ const AnalysisDataView = (props: Props) => {
     }
   }, [data])
 
-  const onSwitchExtrapolation = (value: boolean) => {
+  const onSwitchExtrapolation = (value: boolean, section: SectionName) => {
     sendEventTelemetry({
       event: TelemetryEvent.DATABASE_ANALYSIS_EXTRAPOLATION_CHANGED,
       eventData: {
         databaseId: instanceId,
         from: !value,
-        to: value
+        to: value,
+        section
       }
     })
   }

redisinsight/ui/src/pages/databaseAnalysis/components/analysis-ttl-view/ExpirationGroupsView.tsx

@@ -1,22 +1,24 @@
-import React, { useEffect, useState } from 'react'
 import { EuiSwitch, EuiTitle } from '@elastic/eui'
-import AutoSizer from 'react-virtualized-auto-sizer'
-import { useDispatch, useSelector } from 'react-redux'
-import cx from 'classnames'
 
-import { DEFAULT_EXTRAPOLATION } from 'uiSrc/pages/databaseAnalysis'
-import { extrapolate, formatBytes, formatExtrapolation, Nullable } from 'uiSrc/utils'
+import cx from 'classnames'
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import AutoSizer from 'react-virtualized-auto-sizer'
 import { AreaChart } from 'uiSrc/components/charts'
 import { AreaChartData, AreaChartDataType, DEFAULT_MULTIPLIER_GRID } from 'uiSrc/components/charts/area-chart/AreaChart'
+
+import { DEFAULT_EXTRAPOLATION, SectionName } from 'uiSrc/pages/databaseAnalysis'
 import { DBAnalysisReportsSelector, setShowNoExpiryGroup } from 'uiSrc/slices/analytics/dbAnalysis'
+import { extrapolate, formatBytes, formatExtrapolation, Nullable } from 'uiSrc/utils'
 import { DatabaseAnalysis } from 'apiSrc/modules/database-analysis/models'
+
 import styles from './styles.module.scss'
 
 export interface Props {
   data: Nullable<DatabaseAnalysis>
   loading: boolean
   extrapolation: number
-  onSwitchExtrapolation?: (value: boolean) => void
+  onSwitchExtrapolation?: (value: boolean, section: SectionName) => void
 }
 
 const ExpirationGroupsView = (props: Props) => {
@@ -90,7 +92,7 @@ const ExpirationGroupsView = (props: Props) => {
               checked={isExtrapolated}
               onChange={(e) => {
                 setIsExtrapolated(e.target.checked)
-                onSwitchExtrapolation?.(e.target.checked)
+                onSwitchExtrapolation?.(e.target.checked, SectionName.MEMORY_LIKELY_TO_BE_FREED)
               }}
               data-testid="extrapolate-results"
             />

redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.tsx

@@ -6,7 +6,7 @@ import { DonutChart } from 'uiSrc/components/charts'
 import { ChartData } from 'uiSrc/components/charts/donut-chart/DonutChart'
 import { KeyIconSvg, MemoryIconSvg } from 'uiSrc/components/database-overview/components/icons'
 import { GROUP_TYPES_COLORS, GroupTypesColors } from 'uiSrc/constants'
-import { DEFAULT_EXTRAPOLATION } from 'uiSrc/pages/databaseAnalysis'
+import { DEFAULT_EXTRAPOLATION, SectionName } from 'uiSrc/pages/databaseAnalysis'
 import { extrapolate, formatBytes, getGroupTypeDisplay, Nullable } from 'uiSrc/utils'
 import { getPercentage, numberWithSpaces } from 'uiSrc/utils/numbers'
 
@@ -18,7 +18,7 @@ export interface Props {
   data: Nullable<DatabaseAnalysis>
   loading: boolean
   extrapolation?: number
-  onSwitchExtrapolation?: (value: boolean) => void
+  onSwitchExtrapolation?: (value: boolean, section: SectionName) => void
 }
 
 const widthResponsiveSize = 1024
@@ -132,7 +132,7 @@ const SummaryPerData = ({ data, loading, extrapolation, onSwitchExtrapolation }:
             checked={isExtrapolated}
             onChange={(e) => {
               setIsExtrapolated(e.target.checked)
-              onSwitchExtrapolation?.(e.target.checked)
+              onSwitchExtrapolation?.(e.target.checked, SectionName.SUMMARY_PER_DATA)
             }}
             data-testid="extrapolate-results"
           />

redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/TopNamespace.tsx

@@ -1,19 +1,18 @@
-import React, { useEffect, useState } from 'react'
-import cx from 'classnames'
 import { EuiButton, EuiSwitch, EuiTitle } from '@elastic/eui'
-import { Nullable } from 'uiSrc/utils'
-import { DEFAULT_EXTRAPOLATION, TableView } from 'uiSrc/pages/databaseAnalysis'
+import cx from 'classnames'
+import React, { useEffect, useState } from 'react'
+import { DEFAULT_EXTRAPOLATION, SectionName, TableView } from 'uiSrc/pages/databaseAnalysis'
 import { TableLoader } from 'uiSrc/pages/databaseAnalysis/components'
+import { Nullable } from 'uiSrc/utils'
 import { DatabaseAnalysis } from 'apiSrc/modules/database-analysis/models'
-
 import Table from './Table'
 import styles from './styles.module.scss'
 
 export interface Props {
   data: Nullable<DatabaseAnalysis>
   loading: boolean
   extrapolation: number
-  onSwitchExtrapolation?: (value: boolean) => void
+  onSwitchExtrapolation?: (value: boolean, section: SectionName) => void
 }
 
 const TopNamespace = (props: Props) => {
@@ -70,7 +69,7 @@ const TopNamespace = (props: Props) => {
             checked={isExtrapolated}
             onChange={(e) => {
               setIsExtrapolated(e.target.checked)
-              onSwitchExtrapolation?.(e.target.checked)
+              onSwitchExtrapolation?.(e.target.checked, SectionName.TOP_NAMESPACES)
             }}
             data-testid="extrapolate-results"
           />

redisinsight/ui/src/pages/databaseAnalysis/constants.ts

@@ -17,3 +17,9 @@ export type Content = {
 }
 
 export const DEFAULT_EXTRAPOLATION = 1
+
+export enum SectionName {
+  SUMMARY_PER_DATA = 'SUMMARY_PER_DATA',
+  MEMORY_LIKELY_TO_BE_FREED = 'MEMORY_LIKELY_TO_BE_FREED',
+  TOP_NAMESPACES = 'TOP_NAMESPACES',
+}