Merge pull request #2575 from RedisInsight/fe/feature/RI-4865_Send_frontend_events_in_batches

#RI-4865 - [FE] send frontend events in batches

Author: egor-zalenski

redisinsight/ui/src/components/cli/components/cli-header/CliHeader.spec.tsx

@@ -126,5 +126,5 @@ it('should "processCliClient" action be called after close cli with mocked sessi
     resetCliSettings(),
     resetOutputLoading(),
   ]
-  expect(store.getActions()).toEqual(expectedActions)
+  expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
 })

redisinsight/ui/src/components/config/Config.tsx

@@ -17,13 +17,9 @@ import {
 } from 'uiSrc/slices/user/user-settings'
 import {
   fetchServerInfo,
-  appAnalyticsInfoSelector,
   appServerInfoSelector,
-  setAnalyticsIdentified,
 } from 'uiSrc/slices/app/info'
 
-import { getTelemetryService } from 'uiSrc/telemetry'
-import { checkIsAnalyticsGranted } from 'uiSrc/telemetry/checkAnalytics'
 import { setFavicon, isDifferentConsentsExists } from 'uiSrc/utils'
 import { fetchUnsupportedCliCommandsAction } from 'uiSrc/slices/cli/cli-settings'
 import { fetchRedisCommandsInfo } from 'uiSrc/slices/app/redis-commands'
@@ -39,8 +35,6 @@ const SETTINGS_PAGE_PATH = '/settings'
 const Config = () => {
   const serverInfo = useSelector(appServerInfoSelector)
   const { config, spec } = useSelector(userSettingsSelector)
-  const { segmentWriteKey } = useSelector(appAnalyticsInfoSelector)
-
   const { pathname } = useLocation()
 
   const dispatch = useDispatch()
@@ -73,15 +67,6 @@ const Config = () => {
   }, [spec])
 
   useEffect(() => {
-    if (serverInfo && checkIsAnalyticsGranted()) {
-      (async () => {
-        const telemetryService = getTelemetryService(segmentWriteKey)
-        await telemetryService.identify({ installationId: serverInfo.id, sessionId: serverInfo.sessionId })
-
-        dispatch(setAnalyticsIdentified(true))
-      })()
-    }
-
     featuresHighlight()
     onboardUsers()
   }, [serverInfo, config])

redisinsight/ui/src/constants/api.ts

@@ -132,6 +132,9 @@ enum ApiEndpoints {
   CLOUD_ME_AUTODISCOVERY_GET_DATABASES = 'cloud/me/autodiscovery/get-databases',
   CLOUD_ME_AUTODISCOVERY_DATABASES = 'cloud/me/autodiscovery/databases',
   CLOUD_CAPI_KEYS = 'cloud/me/capi-keys',
+
+  ANALYTICS_SEND_EVENT = 'analytics/send-event',
+  ANALYTICS_SEND_PAGE = 'analytics/send-page',
 }
 
 export enum CustomHeaders {

redisinsight/ui/src/electron/components/ConfigElectron/ConfigElectron.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import {
-  appAnalyticsInfoSelector,
   appServerInfoSelector,
   appElectronInfoSelector
 } from 'uiSrc/slices/app/info'
@@ -10,7 +9,6 @@ import { ipcDeleteDownloadedVersion } from 'uiSrc/electron/utils/ipcDeleteStoreV
 
 const ConfigElectron = () => {
   let isCheckedUpdates = false
-  const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
   const { isReleaseNotesViewed } = useSelector(appElectronInfoSelector)
   const serverInfo = useSelector(appServerInfoSelector)
 
@@ -23,11 +21,11 @@ const ConfigElectron = () => {
   }, [serverInfo])
 
   useEffect(() => {
-    if (!isCheckedUpdates && serverInfo && analyticsIdentified) {
+    if (!isCheckedUpdates && serverInfo) {
       ipcSendEvents(serverInfo)
       isCheckedUpdates = true
     }
-  }, [serverInfo, analyticsIdentified])
+  }, [serverInfo])
 
   useEffect(() => {
     if (isReleaseNotesViewed) {

redisinsight/ui/src/mocks/handlers/app/index.ts

@@ -1,6 +1,7 @@
 import { DefaultBodyType, MockedRequest, RestHandler } from 'msw'
 
 import info from './infoHandlers'
+import telemetry from './telemetryHandlers'
 
-const handlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [].concat(info)
+const handlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [].concat(info, telemetry)
 export default handlers

redisinsight/ui/src/mocks/handlers/app/telemetryHandlers.ts

@@ -0,0 +1,16 @@
+import { rest, RestHandler } from 'msw'
+import { ApiEndpoints } from 'uiSrc/constants'
+import { getMswURL } from 'uiSrc/utils/test-utils'
+
+const handlers: RestHandler[] = [
+  // sendEventTelemetry
+  rest.post(getMswURL(ApiEndpoints.ANALYTICS_SEND_EVENT), async (req, res, ctx) => res(
+    ctx.status(200),
+  )),
+  // sendPageViewTelemetry
+  rest.post(getMswURL(ApiEndpoints.ANALYTICS_SEND_PAGE), async (req, res, ctx) => res(
+    ctx.status(200),
+  ))
+]
+
+export default handlers

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

@@ -33,7 +33,6 @@ import {
   setBrowserBulkActionOpen,
 } from 'uiSrc/slices/app/context'
 import { resetErrors } from 'uiSrc/slices/app/notifications'
-import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
 import InstanceHeader from 'uiSrc/components/instance-header'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
@@ -54,7 +53,6 @@ export const secondPanelId = 'keyDetails'
 const BrowserPage = () => {
   const { instanceId } = useParams<{ instanceId: string }>()
 
-  const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
   const { name: connectedInstanceName, db } = useSelector(connectedInstanceSelector)
   const {
     panelSizes,
@@ -119,10 +117,10 @@ const BrowserPage = () => {
   }, [selectedKey])
 
   useEffect(() => {
-    if (connectedInstanceName && !isPageViewSent && analyticsIdentified) {
+    if (connectedInstanceName && !isPageViewSent) {
       sendPageView(instanceId)
     }
-  }, [connectedInstanceName, isPageViewSent, analyticsIdentified])
+  }, [connectedInstanceName, isPageViewSent])
 
   const updateWindowDimensions = () => {
     setArePanelsCollapsed(globalThis.innerWidth < widthResponsiveSize)

redisinsight/ui/src/pages/clusterDetails/ClusterDetailsPage.tsx

@@ -8,7 +8,6 @@ import { Theme } from 'uiSrc/constants'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { clusterDetailsSelector, fetchClusterDetailsAction } from 'uiSrc/slices/analytics/clusterDetails'
 import { analyticsSettingsSelector, setAnalyticsViewTab } from 'uiSrc/slices/analytics/settings'
-import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
 import { sendPageViewTelemetry, TelemetryPageView } from 'uiSrc/telemetry'
@@ -37,7 +36,6 @@ const ClusterDetailsPage = () => {
     connectionType
   } = useSelector(connectedInstanceSelector)
   const { viewTab } = useSelector(analyticsSettingsSelector)
-  const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
   const { loading, data } = useSelector(clusterDetailsSelector)
 
   const [isPageViewSent, setIsPageViewSent] = useState(false)
@@ -100,10 +98,10 @@ const ClusterDetailsPage = () => {
   }, [data])
 
   useEffect(() => {
-    if (connectedInstanceName && !isPageViewSent && analyticsIdentified) {
+    if (connectedInstanceName && !isPageViewSent) {
       sendPageView(instanceId)
     }
-  }, [connectedInstanceName, isPageViewSent, analyticsIdentified])
+  }, [connectedInstanceName, isPageViewSent])
 
   const sendPageView = (instanceId: string) => {
     sendPageViewTelemetry({

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

@@ -10,7 +10,6 @@ import {
   setSelectedAnalysisId
 } from 'uiSrc/slices/analytics/dbAnalysis'
 import { analyticsSettingsSelector, setAnalyticsViewTab } from 'uiSrc/slices/analytics/settings'
-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'
@@ -22,7 +21,6 @@ import styles from './styles.module.scss'
 
 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, db, provider } = useSelector(connectedInstanceSelector)
@@ -69,10 +67,10 @@ const DatabaseAnalysisPage = () => {
   }
 
   useEffect(() => {
-    if (connectedInstanceName && !isPageViewSent && analyticsIdentified) {
+    if (connectedInstanceName && !isPageViewSent) {
       sendPageView(instanceId)
     }
-  }, [connectedInstanceName, isPageViewSent, analyticsIdentified])
+  }, [connectedInstanceName, isPageViewSent])
 
   const sendPageView = (instanceId: string) => {
     sendPageViewTelemetry({

redisinsight/ui/src/pages/home/HomePage.tsx

@@ -21,7 +21,6 @@ import {
 } from 'uiSrc/slices/instances/instances'
 import { localStorageService } from 'uiSrc/services'
 import { resetDataSentinel, sentinelSelector } from 'uiSrc/slices/instances/sentinel'
-import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
 import { fetchContentAction as fetchCreateRedisButtonsAction } from 'uiSrc/slices/content/create-redis-buttons'
 import { sendEventTelemetry, sendPageViewTelemetry, TelemetryEvent, TelemetryPageView } from 'uiSrc/telemetry'
 import AddDatabaseContainer, { AddDbType } from './components/AddDatabases/AddDatabasesContainer'
@@ -61,8 +60,6 @@ const HomePage = () => {
     data: editedInstance,
   } = useSelector(editedInstanceSelector)
 
-  const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
-
   const { contextInstanceId } = useSelector(appContextSelector)
 
   !welcomeIsShow && setTitle('My Redis databases')
@@ -97,13 +94,13 @@ const HomePage = () => {
   }, [isChangedInstance])
 
   useEffect(() => {
-    if (!isPageViewSent && !isChangedInstance && instances.length && analyticsIdentified) {
+    if (!isPageViewSent && !isChangedInstance && instances.length) {
       setIsPageViewSent(true)
       sendPageViewTelemetry({
         name: TelemetryPageView.DATABASES_LIST_PAGE
       })
     }
-  }, [instances, analyticsIdentified, isPageViewSent, isChangedInstance])
+  }, [instances, isPageViewSent, isChangedInstance])
 
   useEffect(() => {
     if (clusterCredentials || cloudCredentials || sentinelInstance) {