Merge pull request #37 from RedisInsight/feature/RI-2075_Telemetry_Workbench

#RI-2075 Telemetry for Workbench page

Author: egor-zalenski

redisinsight/ui/src/components/query-card/QueryCard.tsx

@@ -2,12 +2,15 @@ import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import cx from 'classnames'
 import { EuiLoadingContent, keys } from '@elastic/eui'
+import { useParams } from 'react-router-dom'
+
 import { WBQueryType } from 'uiSrc/pages/workbench/constants'
 import { getWBQueryType, Nullable, getVisualizationsByCommand, Maybe } from 'uiSrc/utils'
-
 import { appPluginsSelector } from 'uiSrc/slices/app/plugins'
 import { IPluginVisualization } from 'uiSrc/slices/interfaces'
 import { CommandExecutionStatus } from 'uiSrc/slices/interfaces/cli'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
 
 import QueryCardHeader from './QueryCardHeader'
 import QueryCardCliResult from './QueryCardCliResult'
@@ -34,10 +37,9 @@ const getDefaultPlugin = (views: IPluginVisualization[], query: string) =>
   getVisualizationsByCommand(query, views).find((view) => view.default)?.uniqId || ''
 
 const QueryCard = (props: Props) => {
-  const { visualizations = [] } = useSelector(appPluginsSelector)
   const {
     id,
-    query,
+    query = '',
     data,
     status,
     fromStore,
@@ -48,15 +50,19 @@ const QueryCard = (props: Props) => {
     loading
   } = props
 
+  const { visualizations = [] } = useSelector(appPluginsSelector)
+  const { commandsArray: REDIS_COMMANDS_ARRAY } = useSelector(appRedisCommandsSelector)
+
+  const { instanceId = '' } = useParams<{ instanceId: string }>()
   const [isOpen, setIsOpen] = useState(!fromStore)
   const [isFullScreen, setIsFullScreen] = useState<boolean>(false)
   const [result, setResult] = useState<Nullable<any>>(data)
   const [queryType, setQueryType] = useState<WBQueryType>(getWBQueryType(query, visualizations))
   const [viewTypeSelected, setViewTypeSelected] = useState<WBQueryType>(queryType)
+  const [summaryText, setSummaryText] = useState<string>('')
   const [selectedViewValue, setSelectedViewValue] = useState<string>(
     getDefaultPlugin(visualizations, query) || queryType
   )
-  const [summaryText, setSummaryText] = useState<string>('')
 
   useEffect(() => {
     window.addEventListener('keydown', handleEscFullScreen)
@@ -72,7 +78,17 @@ const QueryCard = (props: Props) => {
   }
 
   const toggleFullScreen = () => {
-    setIsFullScreen((value) => !value)
+    setIsFullScreen((isFull) => {
+      sendEventTelemetry({
+        event: TelemetryEvent.WORKBENCH_RESULTS_IN_FULL_SCREEN,
+        eventData: {
+          databaseId: instanceId,
+          state: isFull ? 'Close' : 'Open'
+        }
+      })
+
+      return !isFull
+    })
   }
 
   useEffect(() => {
@@ -94,8 +110,25 @@ const QueryCard = (props: Props) => {
     }
   }, [data, time])
 
+  const sendEventToggleOpenTelemetry = () => {
+    const matchedCommand = REDIS_COMMANDS_ARRAY.find((commandName) =>
+      query.toUpperCase().startsWith(commandName))
+
+    sendEventTelemetry({
+      event: isOpen
+        ? TelemetryEvent.WORKBENCH_RESULTS_COLLAPSED
+        : TelemetryEvent.WORKBENCH_RESULTS_EXPANDED,
+      eventData: {
+        databaseId: instanceId,
+        command: matchedCommand ?? query.split(' ')?.[0]
+      }
+    })
+  }
+
   const toggleOpen = () => {
     if (isFullScreen) return
+
+    sendEventToggleOpenTelemetry()
     setIsOpen(!isOpen)
 
     if (!isOpen && !data) {

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

@@ -12,11 +12,13 @@ import {
   EuiToolTip,
 } from '@elastic/eui'
 import { format } from 'date-fns'
+import { useParams } from 'react-router-dom'
 
 import { Theme } from 'uiSrc/constants'
 import { getVisualizationsByCommand, truncateText, urlForAsset } from 'uiSrc/utils'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { appPluginsSelector } from 'uiSrc/slices/app/plugins'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { getViewTypeOptions, WBQueryType } from 'uiSrc/pages/workbench/constants'
 
 import DefaultPluginIconDark from 'uiSrc/assets/img/workbench/default_view_dark.svg'
@@ -57,6 +59,7 @@ const QueryCardHeader = (props: Props) => {
   } = props
 
   const { visualizations = [] } = useSelector(appPluginsSelector)
+  const { instanceId = '' } = useParams<{ instanceId: string }>()
 
   const { theme } = useContext(ThemeContext)
 
@@ -66,6 +69,12 @@ const QueryCardHeader = (props: Props) => {
   }
 
   const handleCopy = (event: React.MouseEvent, text: string) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.WORKBENCH_COMMAND_COPIED,
+      eventData: {
+        databaseId: instanceId
+      }
+    })
     eventStop(event)
     navigator.clipboard.writeText(text)
   }
@@ -81,11 +90,23 @@ const QueryCardHeader = (props: Props) => {
   }
 
   const handleQueryDelete = (event: React.MouseEvent) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.WORKBENCH_COMMAND_DELETE_COMMAND,
+      eventData: {
+        databaseId: instanceId
+      }
+    })
     eventStop(event)
     onQueryDelete()
   }
 
   const handleQueryReRun = (event: React.MouseEvent) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.WORKBENCH_COMMAND_RUN_AGAIN,
+      eventData: {
+        databaseId: instanceId
+      }
+    })
     eventStop(event)
     onQueryReRun()
   }

redisinsight/ui/src/components/query/Query/Query.tsx

@@ -1,22 +1,31 @@
 import React, { useContext, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import { findIndex } from 'lodash'
+import { decode } from 'html-entities'
 import cx from 'classnames'
 import { EuiButtonIcon, EuiText, EuiToolTip } from '@elastic/eui'
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'
 import MonacoEditor from 'react-monaco-editor'
+import { useParams } from 'react-router-dom'
 
 import {
   Theme,
   MonacoLanguage,
   redisLanguageConfig,
   KEYBOARD_SHORTCUTS,
 } from 'uiSrc/constants'
+import {
+  getMultiCommands,
+  getRedisCompletionProvider,
+  getRedisMonarchTokensProvider,
+  removeMonacoComments,
+  splitMonacoValuePerLines
+} from 'uiSrc/utils'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
-import { getRedisCompletionProvider, getRedisMonarchTokensProvider } from 'uiSrc/utils'
 import { WBQueryType } from 'uiSrc/pages/workbench/constants'
 import { KeyboardShortcut } from 'uiSrc/components'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import styles from './styles.module.scss'
 
@@ -31,6 +40,8 @@ export interface Props {
 
 const Query = (props: Props) => {
   const { query = '', setQuery, onKeyDown, onSubmit, setQueryEl } = props
+  const { instanceId = '' } = useParams<{ instanceId: string }>()
+
   const {
     commandsArray: REDIS_COMMANDS_ARRAY,
     spec: REDIS_COMMANDS_SPEC
@@ -54,7 +65,35 @@ const Query = (props: Props) => {
     onKeyDown?.(e, query)
   }
 
+  const sendEventSubmitTelemetry = (commandInit = query) => {
+    const eventData = (() => {
+      const commands = splitMonacoValuePerLines(commandInit)
+
+      const [commandLine, ...rest] = commands.map((command = '') => {
+        const matchedCommand = REDIS_COMMANDS_ARRAY.find((commandName) =>
+          command.toUpperCase().startsWith(commandName))
+        return matchedCommand ?? command.split(' ')?.[0]
+      })
+      const multiCommands = getMultiCommands(rest)
+
+      const command = removeMonacoComments(decode([commandLine, multiCommands].join('\n')).trim())
+
+      return {
+        command,
+        databaseId: instanceId,
+        multiple: multiCommands ? 'Multiple' : 'Single'
+      }
+    })()
+
+    sendEventTelemetry({
+      event: TelemetryEvent.WORKBENCH_COMMAND_SUBMITTED,
+      eventData
+    })
+  }
+
   const handleSubmit = (value?: string) => {
+    sendEventSubmitTelemetry(value)
+
     onSubmit(value)
   }
 

redisinsight/ui/src/constants/index.ts

@@ -8,7 +8,6 @@ export * from './keys'
 export * from './table'
 export * from './redisinsight'
 export * from './commands'
-export * from './workbenchPreselects'
 export * from './monaco'
 export * from './monacoRedis'
 export * from './keyboardShortcuts'

redisinsight/ui/src/constants/workbenchPreselects.ts

@@ -1,17 +1,40 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { useParams } from 'react-router-dom'
+
 import { formatLongName, getDbIndex, setTitle } from 'uiSrc/utils'
 import { PageNames } from 'uiSrc/constants'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances'
 import { setLastPageContext } from 'uiSrc/slices/app/context'
 import { loadPluginsAction } from 'uiSrc/slices/app/plugins'
+import { sendPageViewTelemetry, TelemetryPageView } from 'uiSrc/telemetry'
+import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
 import WBViewWrapper from './components/wb-view'
 
 const WorkbenchPage = () => {
-  const { name, db } = useSelector(connectedInstanceSelector)
+  const [isPageViewSent, setIsPageViewSent] = useState(false)
+
+  const { name: connectedInstanceName, db } = useSelector(connectedInstanceSelector)
+  const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
+
+  const { instanceId } = useParams<{ instanceId: string }>()
 
   const dispatch = useDispatch()
-  setTitle(`${formatLongName(name, 33, 0, '...')} ${getDbIndex(db)} - Workbench`)
+  setTitle(`${formatLongName(connectedInstanceName, 33, 0, '...')} ${getDbIndex(db)} - Workbench`)
+
+  useEffect(() => {
+    if (connectedInstanceName && !isPageViewSent && analyticsIdentified) {
+      sendPageView(instanceId)
+    }
+  }, [connectedInstanceName, isPageViewSent, analyticsIdentified])
+
+  const sendPageView = (instanceId: string) => {
+    sendPageViewTelemetry({
+      name: TelemetryPageView.WORKBENCH_PAGE,
+      databaseId: instanceId
+    })
+    setIsPageViewSent(true)
+  }
 
   useEffect(() => {
     dispatch(loadPluginsAction())