#RI-3718 - fix page view event, fix page title

Author: rsergeenko

redisinsight/ui/src/pages/databaseAnalysis/DatabaseAnalysisPage.tsx

@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom'
 
 import {
   dbAnalysisSelector,
-  DBAnalysisReportsSelector,
+  dbAnalysisReportsSelector,
   fetchDBAnalysisAction,
   fetchDBAnalysisReportsHistory,
   setSelectedAnalysisId
@@ -14,6 +14,7 @@ import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
 import { sendPageViewTelemetry, sendEventTelemetry, TelemetryPageView, TelemetryEvent } from 'uiSrc/telemetry'
+import { formatLongName, getDbIndex, setTitle } from 'uiSrc/utils'
 
 import Header from './components/header'
 import AnalysisDataView from './components/analysis-data-view'
@@ -24,12 +25,14 @@ const DatabaseAnalysisPage = () => {
   const { viewTab } = useSelector(analyticsSettingsSelector)
   const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
   const { loading: analysisLoading, data } = useSelector(dbAnalysisSelector)
-  const { data: reports, selectedAnalysis } = useSelector(DBAnalysisReportsSelector)
-  const { name: connectedInstanceName } = useSelector(connectedInstanceSelector)
+  const { data: reports, selectedAnalysis } = useSelector(dbAnalysisReportsSelector)
+  const { name: connectedInstanceName, db } = useSelector(connectedInstanceSelector)
 
   const [isPageViewSent, setIsPageViewSent] = useState<boolean>(false)
 
   const dispatch = useDispatch()
+  const dbName = `${formatLongName(connectedInstanceName, 33, 0, '...')} ${getDbIndex(db)}`
+  setTitle(`${dbName} - Database Analysis`)
 
   useEffect(() => {
     dispatch(fetchDBAnalysisReportsHistory(instanceId))

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

@@ -8,7 +8,7 @@ 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 { dbAnalysisReportsSelector, setShowNoExpiryGroup } from 'uiSrc/slices/analytics/dbAnalysis'
 import { extrapolate, formatBytes, formatExtrapolation, Nullable } from 'uiSrc/utils'
 import { DatabaseAnalysis } from 'apiSrc/modules/database-analysis/models'
 
@@ -25,7 +25,7 @@ const ExpirationGroupsView = (props: Props) => {
   const { data, loading, extrapolation, onSwitchExtrapolation } = props
   const { totalMemory, totalKeys } = data || {}
 
-  const { showNoExpiryGroup } = useSelector(DBAnalysisReportsSelector)
+  const { showNoExpiryGroup } = useSelector(dbAnalysisReportsSelector)
   const [expirationGroups, setExpirationGroups] = useState<AreaChartData[]>([])
   const [isExtrapolated, setIsExtrapolated] = useState<boolean>(true)
 

redisinsight/ui/src/slices/analytics/dbAnalysis.ts

@@ -59,7 +59,7 @@ const databaseAnalysisSlice = createSlice({
 })
 
 export const dbAnalysisSelector = (state: RootState) => state.analytics.databaseAnalysis
-export const DBAnalysisReportsSelector = (state: RootState) => state.analytics.databaseAnalysis.history
+export const dbAnalysisReportsSelector = (state: RootState) => state.analytics.databaseAnalysis.history
 
 export const {
   setDatabaseAnalysisInitialState,

redisinsight/ui/src/slices/tests/analytics/dbAnalysis.spec.ts

@@ -15,7 +15,7 @@ import reducer, {
   fetchDBAnalysisAction,
   createNewAnalysis,
   fetchDBAnalysisReportsHistory,
-  DBAnalysisReportsSelector,
+  dbAnalysisReportsSelector,
   dbAnalysisSelector,
   setShowNoExpiryGroup,
 } from 'uiSrc/slices/analytics/dbAnalysis'
@@ -110,7 +110,7 @@ describe('db analysis slice', () => {
         const rootState = Object.assign(initialStateDefault, {
           analytics: { databaseAnalysis: nextState },
         })
-        expect(DBAnalysisReportsSelector(rootState)).toEqual(stateHistory)
+        expect(dbAnalysisReportsSelector(rootState)).toEqual(stateHistory)
       })
     })
 
@@ -235,7 +235,7 @@ describe('db analysis slice', () => {
         const rootState = Object.assign(initialStateDefault, {
           analytics: { databaseAnalysis: nextState },
         })
-        expect(DBAnalysisReportsSelector(rootState)).toEqual(stateHistory)
+        expect(dbAnalysisReportsSelector(rootState)).toEqual(stateHistory)
       })
     })
     describe('setShowNoExpiryGroup', () => {
@@ -254,7 +254,7 @@ describe('db analysis slice', () => {
         const rootState = Object.assign(initialStateDefault, {
           analytics: { databaseAnalysis: nextState },
         })
-        expect(DBAnalysisReportsSelector(rootState)).toEqual(stateHistory)
+        expect(dbAnalysisReportsSelector(rootState)).toEqual(stateHistory)
       })
     })
   })

redisinsight/ui/src/telemetry/pageViews.ts

@@ -7,5 +7,5 @@ export enum TelemetryPageView {
   SLOWLOG_PAGE = 'Slow Log',
   CLUSTER_DETAILS_PAGE = 'Overview',
   PUBSUB_PAGE = 'Pub/Sub',
-  DATABASE_ANALYSIS = 'Memory analysis'
+  DATABASE_ANALYSIS = 'Database Analysis'
 }