#RI-916-add telemetry events (#676)

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/range-filter/RangeFilter.tsx

@@ -12,8 +12,8 @@ export interface Props {
   min: number
   start: number
   end: number
-  handleChangeStart: (value: number) => void
-  handleChangeEnd: (value: number) => void
+  handleChangeStart: (value: number, shouldSentEventTelemetry: boolean) => void
+  handleChangeEnd: (value: number, shouldSentEventTelemetry: boolean) => void
   handleResetFilter: () => void
 }
 
@@ -51,14 +51,14 @@ const RangeFilter = (props: Props) => {
 
   const onMouseUpStart = useCallback(
     ({ target: { value } }) => {
-      handleChangeStart(value)
+      handleChangeStart(value, true)
     },
     []
   )
 
   const onMouseUpEnd = useCallback(
     ({ target: { value } }) => {
-      handleChangeEnd(value)
+      handleChangeEnd(value, true)
     },
     []
   )
@@ -103,10 +103,10 @@ const RangeFilter = (props: Props) => {
 
   useEffect(() => {
     if (max && prevValue && prevValue.max !== max && end === prevValue.max) {
-      handleChangeEnd(max)
+      handleChangeEnd(max, false)
     }
     if (min && prevValue && prevValue.min !== min && start === prevValue.min) {
-      handleChangeStart(min)
+      handleChangeStart(min, false)
     }
   }, [prevValue])
 

redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx

@@ -81,8 +81,23 @@ const HashDetails = (props: Props) => {
     setDeleting(`${field + suffix}`)
   }, [])
 
+  const onSuccessRemoved = () => {
+    sendEventTelemetry({
+      event: getBasedOnViewTypeEvent(
+        viewType,
+        TelemetryEvent.BROWSER_KEY_VALUE_REMOVED,
+        TelemetryEvent.TREE_VIEW_KEY_VALUE_REMOVED
+      ),
+      eventData: {
+        databaseId: instanceId,
+        keyType: KeyTypes.Hash,
+        numberOfRemoved: 1,
+      }
+    })
+  }
+
   const handleDeleteField = (field = '') => {
-    dispatch(deleteHashFields(key, [field]))
+    dispatch(deleteHashFields(key, [field], onSuccessRemoved))
     closePopover()
   }
 

redisinsight/ui/src/pages/browser/components/key-details-add-items/add-hash-fields/AddHashFields.tsx

@@ -10,13 +10,16 @@ import {
   EuiFieldText,
   EuiPanel,
 } from '@elastic/eui'
-import { selectedKeyDataSelector } from 'uiSrc/slices/browser/keys'
+import { selectedKeyDataSelector, keysSelector } from 'uiSrc/slices/browser/keys'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import {
   updateHashValueStateSelector,
   resetUpdateValue,
   addHashFieldsAction,
 } from 'uiSrc/slices/browser/hash'
 import { AddFieldsToHashDto } from 'apiSrc/modules/browser/dto/hash.dto'
+import { KeyTypes } from 'uiSrc/constants'
+import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import AddItemsActions from 'uiSrc/pages/browser/components/add-items-actions/AddItemsActions'
 
 import styles from '../styles.module.scss'
@@ -43,6 +46,8 @@ const AddHashFields = (props: Props) => {
   const [fields, setFields] = useState<IHashFieldState[]>([{ ...INITIAL_HASH_FIELD_STATE }])
   const { loading } = useSelector(updateHashValueStateSelector)
   const { name: selectedKey = '' } = useSelector(selectedKeyDataSelector) ?? { name: undefined }
+  const { viewType } = useSelector(keysSelector)
+  const { id: instanceId } = useSelector(connectedInstanceSelector)
   const lastAddedFieldName = useRef<HTMLInputElement>(null)
 
   useEffect(() =>
@@ -84,6 +89,22 @@ const AddHashFields = (props: Props) => {
     setFields(newState)
   }
 
+  const onSuccessAdded = () => {
+    onCancel()
+    sendEventTelemetry({
+      event: getBasedOnViewTypeEvent(
+        viewType,
+        TelemetryEvent.BROWSER_KEY_VALUE_ADDED,
+        TelemetryEvent.TREE_VIEW_KEY_VALUE_ADDED
+      ),
+      eventData: {
+        databaseId: instanceId,
+        keyType: KeyTypes.Hash,
+        numberOfAdded: fields.length,
+      }
+    })
+  }
+
   const handleFieldChange = (formField: string, id: number, value: any) => {
     const newState = fields.map((item) => {
       if (item.id === id) {
@@ -105,7 +126,7 @@ const AddHashFields = (props: Props) => {
         value: item.fieldValue,
       })),
     }
-    dispatch(addHashFieldsAction(data, onCancel))
+    dispatch(addHashFieldsAction(data, onSuccessAdded))
   }
 
   const isClearDisabled = (item: IHashFieldState): boolean =>

redisinsight/ui/src/pages/browser/components/key-details-add-items/add-list-elements/AddListElements.tsx

@@ -13,8 +13,11 @@ import {
   EuiSuperSelectOption,
 } from '@elastic/eui'
 
-import { selectedKeyDataSelector } from 'uiSrc/slices/browser/keys'
+import { selectedKeyDataSelector, keysSelector } from 'uiSrc/slices/browser/keys'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { insertListElementsAction } from 'uiSrc/slices/browser/list'
+import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { KeyTypes } from 'uiSrc/constants'
 import { PushElementToListDto } from 'apiSrc/modules/browser/dto'
 
 import { AddListFormConfig as config } from '../../add-key/constants/fields-config'
@@ -50,6 +53,8 @@ const AddListElements = (props: Props) => {
   const [element, setElement] = useState<string>('')
   const [destination, setDestination] = useState<ListElementDestination>(TAIL_DESTINATION)
   const { name: selectedKey = '' } = useSelector(selectedKeyDataSelector) ?? { name: undefined }
+  const { viewType } = useSelector(keysSelector)
+  const { id: instanceId } = useSelector(connectedInstanceSelector)
 
   const elementInput = useRef<HTMLInputElement>(null)
 
@@ -60,13 +65,29 @@ const AddListElements = (props: Props) => {
     elementInput.current?.focus()
   }, [])
 
+  const onSuccessAdded = () => {
+    onCancel()
+    sendEventTelemetry({
+      event: getBasedOnViewTypeEvent(
+        viewType,
+        TelemetryEvent.BROWSER_KEY_VALUE_ADDED,
+        TelemetryEvent.TREE_VIEW_KEY_VALUE_ADDED
+      ),
+      eventData: {
+        databaseId: instanceId,
+        keyType: KeyTypes.List,
+        numberOfAdded: 1,
+      }
+    })
+  }
+
   const submitData = (): void => {
     const data: PushElementToListDto = {
       keyName: selectedKey,
       element,
       destination,
     }
-    dispatch(insertListElementsAction(data, props.onCancel))
+    dispatch(insertListElementsAction(data, onSuccessAdded))
   }
 
   return (

redisinsight/ui/src/pages/browser/components/key-details-add-items/add-set-members/AddSetMembers.tsx

@@ -11,8 +11,11 @@ import {
   EuiPanel,
 } from '@elastic/eui'
 
-import { selectedKeyDataSelector } from 'uiSrc/slices/browser/keys'
+import { selectedKeyDataSelector, keysSelector } from 'uiSrc/slices/browser/keys'
 import { addSetMembersAction, setSelector } from 'uiSrc/slices/browser/set'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { KeyTypes } from 'uiSrc/constants'
+import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import AddItemsActions from '../../add-items-actions/AddItemsActions'
 import { AddZsetFormConfig as config } from '../../add-key/constants/fields-config'
@@ -39,12 +42,30 @@ const AddSetMembers = (props: Props) => {
   const [members, setMembers] = useState<ISetMemberState[]>([{ ...INITIAL_SET_MEMBER_STATE }])
   const { loading } = useSelector(setSelector)
   const { name: selectedKey = '' } = useSelector(selectedKeyDataSelector) ?? { name: undefined }
+  const { viewType } = useSelector(keysSelector)
+  const { id: instanceId } = useSelector(connectedInstanceSelector)
   const lastAddedMemberName = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     lastAddedMemberName.current?.focus()
   }, [members.length])
 
+  const onSuccessAdded = () => {
+    onCancel()
+    sendEventTelemetry({
+      event: getBasedOnViewTypeEvent(
+        viewType,
+        TelemetryEvent.BROWSER_KEY_VALUE_ADDED,
+        TelemetryEvent.TREE_VIEW_KEY_VALUE_ADDED
+      ),
+      eventData: {
+        databaseId: instanceId,
+        keyType: KeyTypes.Set,
+        numberOfAdded: members.length,
+      }
+    })
+  }
+
   const addMember = () => {
     const lastField = members[members.length - 1]
     const newState = [
@@ -90,7 +111,7 @@ const AddSetMembers = (props: Props) => {
       keyName: selectedKey,
       members: members.map((item) => item.name),
     }
-    dispatch(addSetMembersAction(data, onCancel))
+    dispatch(addSetMembersAction(data, onSuccessAdded))
   }
 
   const isClearDisabled = (item: ISetMemberState): boolean => members.length === 1 && !item.name.length

redisinsight/ui/src/pages/browser/components/key-details-add-items/add-stream-entity/AddStreamEntries.tsx

@@ -4,12 +4,14 @@ import { keyBy, mapValues, toNumber } from 'lodash'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { entryIdRegex } from 'uiSrc/utils'
-import { selectedKeyDataSelector } from 'uiSrc/slices/browser/keys'
+import { selectedKeyDataSelector, keysSelector } from 'uiSrc/slices/browser/keys'
 import { addNewEntriesAction, streamDataSelector } from 'uiSrc/slices/browser/stream'
-
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { AddStreamFormConfig as config } from 'uiSrc/pages/browser/components/add-key/constants/fields-config'
 import { INITIAL_STREAM_FIELD_STATE } from 'uiSrc/pages/browser/components/add-key/AddKeyStream/AddKeyStream'
 import { StreamEntryFields } from 'uiSrc/pages/browser/components/key-details-add-items'
+import { KeyTypes } from 'uiSrc/constants'
+import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { AddStreamEntriesDto } from 'apiSrc/modules/browser/dto/stream.dto'
 
 import styles from './styles.module.scss'
@@ -22,6 +24,8 @@ const AddStreamEntries = (props: Props) => {
   const { onCancel } = props
   const { lastEntry } = useSelector(streamDataSelector)
   const { name: keyName = '' } = useSelector(selectedKeyDataSelector) ?? { name: undefined }
+  const { viewType } = useSelector(keysSelector)
+  const { id: instanceId } = useSelector(connectedInstanceSelector)
 
   const [entryID, setEntryID] = useState<string>('*')
   const [entryIdError, setEntryIdError] = useState('')
@@ -70,6 +74,22 @@ const AddStreamEntries = (props: Props) => {
     setEntryIdError('Must be greater than the last ID')
   }
 
+  const onSuccessAdded = () => {
+    onCancel()
+    sendEventTelemetry({
+      event: getBasedOnViewTypeEvent(
+        viewType,
+        TelemetryEvent.BROWSER_KEY_VALUE_ADDED,
+        TelemetryEvent.TREE_VIEW_KEY_VALUE_ADDED
+      ),
+      eventData: {
+        databaseId: instanceId,
+        keyType: KeyTypes.Stream,
+        numberOfAdded: fields.length,
+      }
+    })
+  }
+
   const submitData = (): void => {
     if (isFormValid) {
       const data: AddStreamEntriesDto = {
@@ -79,7 +99,7 @@ const AddStreamEntries = (props: Props) => {
           fields: mapValues(keyBy(fields, 'fieldName'), 'fieldValue')
         }]
       }
-      dispatch(addNewEntriesAction(data, onCancel))
+      dispatch(addNewEntriesAction(data, onSuccessAdded))
     }
   }
 

redisinsight/ui/src/pages/browser/components/key-details-remove-items/remove-list-elements/RemoveListElements.tsx

@@ -119,14 +119,30 @@ const RemoveListElements = (props: Props) => {
     setIsPopoverOpen(false)
   }
 
+  const onSuccessRemoved = () => {
+    onCancel()
+    sendEventTelemetry({
+      event: getBasedOnViewTypeEvent(
+        viewType,
+        TelemetryEvent.BROWSER_KEY_VALUE_REMOVED,
+        TelemetryEvent.TREE_VIEW_KEY_VALUE_REMOVED
+      ),
+      eventData: {
+        databaseId: instanceId,
+        keyType: KeyTypes.List,
+        numberOfRemoved: toNumber(count),
+      }
+    })
+  }
+
   const submitData = (): void => {
     const data: DeleteListElementsDto = {
       keyName: selectedKey,
       count: toNumber(count),
       destination,
     }
     closePopover()
-    dispatch(deleteListElementsAction(data, props.onCancel))
+    dispatch(deleteListElementsAction(data, onSuccessRemoved))
   }
 
   const RemoveButton = () => (

redisinsight/ui/src/pages/browser/components/set-details/SetDetails.tsx

@@ -60,8 +60,23 @@ const SetDetails = (props: Props) => {
     setDeleting(`${member + suffix}`)
   }
 
+  const onSuccessRemoved = () => {
+    sendEventTelemetry({
+      event: getBasedOnViewTypeEvent(
+        viewType,
+        TelemetryEvent.BROWSER_KEY_VALUE_REMOVED,
+        TelemetryEvent.TREE_VIEW_KEY_VALUE_REMOVED
+      ),
+      eventData: {
+        databaseId: instanceId,
+        keyType: KeyTypes.Set,
+        numberOfRemoved: 1,
+      }
+    })
+  }
+
   const handleDeleteMember = (member = '') => {
-    dispatch(deleteSetMembers(key, [member]))
+    dispatch(deleteSetMembers(key, [member], onSuccessRemoved))
     closePopover()
   }