Merge pull request #1368 from RedisInsight/fe/feature/RI-3716_Redisearch_telemetry

#RI-3716 - Cover Search capability with telemetry

Author: AlenaSY

redisinsight/ui/src/pages/browser/components/browser-right-panel/BrowserRightPanel.tsx

@@ -69,7 +69,8 @@ const BrowserRightPanel = (props: Props) => {
     sendEventTelemetry({
       event: TelemetryEvent.SEARCH_INDEX_ADD_CANCELLED,
       eventData: {
-        databaseId: instanceId
+        databaseId: instanceId,
+        view: viewType,
       }
     })
   }
@@ -140,7 +141,10 @@ const BrowserRightPanel = (props: Props) => {
         />
       )}
       {isCreateIndexPanelOpen && every([!isAddKeyPanelOpen, !isBulkActionsPanelOpen], Boolean) && (
-        <CreateRedisearchIndex onClosePanel={onCloseRedisearchPanel} />
+        <CreateRedisearchIndex
+          onCreateIndex={closePanel}
+          onClosePanel={onCloseRedisearchPanel}
+        />
       )}
     </>
   )

redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx

@@ -20,6 +20,9 @@ import Divider from 'uiSrc/components/divider/Divider'
 import AddItemsActions from 'uiSrc/pages/browser/components/add-items-actions/AddItemsActions'
 import { createIndexStateSelector, createRedisearchIndexAction } from 'uiSrc/slices/browser/redisearch'
 import { stringToBuffer } from 'uiSrc/utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { keysSelector } from 'uiSrc/slices/browser/keys'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { CreateRedisearchIndexDto } from 'apiSrc/modules/browser/dto/redisearch'
 
 import { FIELD_TYPE_OPTIONS, KEY_TYPE_OPTIONS, RedisearchIndexKeyType } from './constants'
@@ -28,6 +31,7 @@ import styles from './styles.module.scss'
 
 export interface Props {
   onClosePanel: () => void
+  onCreateIndex: () => void
 }
 
 const keyTypeOptions = KEY_TYPE_OPTIONS.map((item) => {
@@ -49,8 +53,10 @@ const fieldTypeOptions = FIELD_TYPE_OPTIONS.map(({ value, text }) => ({
 
 const initialFieldValue = (id = 0) => ({ id, identifier: '', fieldType: fieldTypeOptions[0].value })
 
-const CreateRedisearchIndex = ({ onClosePanel }: Props) => {
+const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => {
+  const { viewType } = useSelector(keysSelector)
   const { loading } = useSelector(createIndexStateSelector)
+  const { id: instanceId } = useSelector(connectedInstanceSelector)
 
   const [keyTypeSelected, setKeyTypeSelected] = useState<RedisearchIndexKeyType>(keyTypeOptions[0].value)
   const [prefixes, setPrefixes] = useState<EuiComboBoxOptionOption[]>([])
@@ -97,7 +103,22 @@ const CreateRedisearchIndex = ({ onClosePanel }: Props) => {
       }))
     }
 
-    dispatch(createRedisearchIndexAction(data, onClosePanel))
+    dispatch(createRedisearchIndexAction(data, onSuccess))
+  }
+
+  const onSuccess = (data: CreateRedisearchIndexDto) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.SEARCH_INDEX_ADDED,
+      eventData: {
+        databaseId: instanceId,
+        view: viewType,
+        dataType: data.type,
+        countOfPrefixes: data.prefixes?.length || 0,
+        countOfFieldNames: data.fields?.length || 0,
+      }
+    })
+
+    onCreateIndex()
   }
 
   const isClearDisabled = (item: any): boolean => fields.length === 1 && !(item.identifier.length)

redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndexWrapper.tsx

@@ -15,9 +15,10 @@ import styles from './styles.module.scss'
 
 export interface Props {
   onClosePanel: () => void
+  onCreateIndex: () => void
 }
 
-const CreateRedisearchIndexWrapper = ({ onClosePanel }: Props) => (
+const CreateRedisearchIndexWrapper = ({ onClosePanel, onCreateIndex }: Props) => (
   <div className={styles.page} data-testid="create-index-panel">
     <EuiFlexGroup
       justifyContent="center"
@@ -60,7 +61,10 @@ const CreateRedisearchIndexWrapper = ({ onClosePanel }: Props) => (
           </EuiText>
         </EuiFlexItem>
       </div>
-      <CreateRedisearchIndex onClosePanel={onClosePanel} />
+      <CreateRedisearchIndex
+        onCreateIndex={onCreateIndex}
+        onClosePanel={onClosePanel}
+      />
     </EuiFlexGroup>
   </div>
 )

redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx

@@ -249,7 +249,8 @@ const KeysHeader = (props: Props) => {
         eventData: {
           databaseId: instanceId,
           previous: searchMode,
-          current: mode
+          current: mode,
+          view: viewType,
         }
       })
     }

redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.tsx

@@ -82,7 +82,8 @@ const RediSearchIndexesList = (props: Props) => {
       sendEventTelemetry({
         event: TelemetryEvent.SEARCH_INDEX_ADD_BUTTON_CLICKED,
         eventData: {
-          databaseId: instanceId
+          databaseId: instanceId,
+          view: viewType,
         }
       })
 
@@ -100,10 +101,11 @@ const RediSearchIndexesList = (props: Props) => {
     ))
 
     sendEventTelemetry({
-      event: TelemetryEvent.SEARCH_INDEX_ADD_BUTTON_CLICKED,
+      event: TelemetryEvent.SEARCH_INDEX_CHANGED,
       eventData: {
         databaseId: instanceId,
-        totalNumberOfIndexes: list.length
+        totalNumberOfIndexes: list.length,
+        view: viewType,
       }
     })
   }

redisinsight/ui/src/slices/browser/redisearch.ts

@@ -9,6 +9,7 @@ import { bufferToString, getApiErrorMessage, getUrl, isEqualBuffers, isStatusSuc
 import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api'
 import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 import ApiErrors from 'uiSrc/constants/apiErrors'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import { GetKeysWithDetailsResponse } from 'apiSrc/modules/browser/dto'
 import { CreateRedisearchIndexDto, ListRedisearchIndexesResponse } from 'apiSrc/modules/browser/dto/redisearch'
@@ -249,6 +250,18 @@ export function fetchRedisearchKeysAction(
 
       if (isStatusSuccessful(status)) {
         dispatch(loadKeysSuccess([data, !!query]))
+
+        if (query) {
+          sendEventTelemetry({
+            event: TelemetryEvent.SEARCH_KEYS_SEARCHED,
+            eventData: {
+              view: state.browser.keys?.viewType,
+              databaseId: state.connections.instances?.connectedInstance?.id,
+              scanCount: data.scanned,
+            }
+          })
+        }
+
         onSuccess?.(data)
       }
     } catch (_err) {
@@ -351,7 +364,7 @@ export function fetchRedisearchListAction(
 }
 export function createRedisearchIndexAction(
   data: CreateRedisearchIndexDto,
-  onSuccess?: () => void,
+  onSuccess?: (data: CreateRedisearchIndexDto) => void,
   onFailed?: () => void,
 ) {
   return async (dispatch: AppDispatch, stateInit: () => RootState) => {
@@ -377,7 +390,7 @@ export function createRedisearchIndexAction(
         dispatch(createIndexSuccess())
         dispatch(addMessageNotification(successMessages.CREATE_INDEX()))
         dispatch(fetchRedisearchListAction())
-        onSuccess?.()
+        onSuccess?.(data)
       }
     } catch (_err) {
       const error = _err as AxiosError

redisinsight/ui/src/telemetry/events.ts

@@ -192,4 +192,6 @@ export enum TelemetryEvent {
   SEARCH_INDEX_CHANGED = 'SEARCH_INDEX_CHANGED',
   SEARCH_INDEX_ADD_BUTTON_CLICKED = 'SEARCH_INDEX_ADD_BUTTON_CLICKED',
   SEARCH_INDEX_ADD_CANCELLED = 'SEARCH_INDEX_ADD_CANCELLED',
+  SEARCH_KEYS_SEARCHED = 'SEARCH_KEYS_SEARCHED',
+  SEARCH_INDEX_ADDED = 'SEARCH_INDEX_ADDED',
 }