#RI-2809-add telemetry for consumer group (#749)

* #RI-2809-add telemetry for consumer group

Author: AmirAllayarovSofteq

redisinsight/ui/src/pages/browser/components/key-details-add-items/add-stream-group/AddStreamGroup.tsx

@@ -12,12 +12,14 @@ import {
 import cx from 'classnames'
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { lastDeliveredIDTooltipText } from 'uiSrc/constants/texts'
+import { useParams } from 'react-router-dom'
 
+import { lastDeliveredIDTooltipText } from 'uiSrc/constants/texts'
 import { selectedKeyDataSelector } from 'uiSrc/slices/browser/keys'
 import { addNewGroupAction } from 'uiSrc/slices/browser/stream'
 import { consumerGroupIdRegex, validateConsumerGroupId } from 'uiSrc/utils'
 import { CreateConsumerGroupsDto } from 'apiSrc/modules/browser/dto/stream.dto'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import styles from './styles.module.scss'
 
@@ -35,6 +37,8 @@ const AddStreamGroup = (props: Props) => {
   const [idError, setIdError] = useState<string>('')
   const [isIdFocused, setIsIdFocused] = useState<boolean>(false)
 
+  const { instanceId } = useParams<{ instanceId: string }>()
+
   const dispatch = useDispatch()
 
   useEffect(() => {
@@ -50,6 +54,16 @@ const AddStreamGroup = (props: Props) => {
     setIdError('')
   }, [id])
 
+  const onSuccessAdded = () => {
+    onCancel()
+    sendEventTelemetry({
+      event: TelemetryEvent.STREAM_CONSUMER_GROUP_CREATED,
+      eventData: {
+        databaseId: instanceId,
+      }
+    })
+  }
+
   const submitData = () => {
     if (isFormValid) {
       const data: CreateConsumerGroupsDto = {
@@ -59,7 +73,7 @@ const AddStreamGroup = (props: Props) => {
           lastDeliveredId: id,
         }],
       }
-      dispatch(addNewGroupAction(data, onCancel))
+      dispatch(addNewGroupAction(data, onSuccessAdded))
     }
   }
 

redisinsight/ui/src/pages/browser/components/stream-details/consumers-view/ConsumersViewWrapper.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { useParams } from 'react-router-dom'
 import { EuiToolTip, EuiText } from '@elastic/eui'
 
 import {
@@ -16,6 +17,7 @@ import { StreamViewType } from 'uiSrc/slices/interfaces/stream'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { selectedKeyDataSelector, updateSelectedKeyRefreshTime } from 'uiSrc/slices/browser/keys'
 import { formatLongName } from 'uiSrc/utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import { ConsumerDto } from 'apiSrc/modules/browser/dto/stream.dto'
 import ConsumersView from './ConsumersView'
@@ -37,6 +39,8 @@ const ConsumersViewWrapper = (props: Props) => {
     data: loadedConsumers = [],
   } = useSelector(selectedGroupSelector) ?? {}
 
+  const { instanceId } = useParams<{ instanceId: string }>()
+
   const dispatch = useDispatch()
 
   const [deleting, setDeleting] = useState<string>('')
@@ -45,19 +49,28 @@ const ConsumersViewWrapper = (props: Props) => {
     dispatch(updateSelectedKeyRefreshTime(lastRefreshTime))
   }, [])
 
-  const closePopover = useCallback(() => {
+  const closePopover = () => {
     setDeleting('')
-  }, [])
+  }
 
-  const showPopover = useCallback((consumer = '') => {
+  const showPopover = (consumer = '') => {
     setDeleting(`${consumer + suffix}`)
-  }, [])
+  }
 
-  const handleDeleteConsumer = (consumerName = '') => {
-    dispatch(deleteConsumersAction(key, selectedGroupName, [consumerName]))
+  const onSuccessDeletedConsumer = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.STREAM_CONSUMER_DELETED,
+      eventData: {
+        databaseId: instanceId,
+      }
+    })
     closePopover()
   }
 
+  const handleDeleteConsumer = (consumerName = '') => {
+    dispatch(deleteConsumersAction(key, selectedGroupName, [consumerName], onSuccessDeletedConsumer))
+  }
+
   const handleRemoveIconClick = () => {
     // sendEventTelemetry({
     //   event: getBasedOnViewTypeEvent(

redisinsight/ui/src/pages/browser/components/stream-details/groups-view/GroupsViewWrapper.tsx

@@ -1,6 +1,7 @@
 import { EuiFieldText, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { useParams } from 'react-router-dom'
 import PopoverItemEditor from 'uiSrc/components/popover-item-editor'
 import { lastDeliveredIDTooltipText } from 'uiSrc/constants/texts'
 import { selectedKeyDataSelector, updateSelectedKeyRefreshTime } from 'uiSrc/slices/browser/keys'
@@ -19,8 +20,9 @@ import { consumerGroupIdRegex, formatLongName, validateConsumerGroupId } from 'u
 import { getFormatTime } from 'uiSrc/utils/streamUtils'
 import { TableCellTextAlignment } from 'uiSrc/constants'
 import { StreamViewType } from 'uiSrc/slices/interfaces/stream'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
-import { ConsumerGroupDto, UpdateConsumerGroupDto } from 'apiSrc/modules/browser/dto/stream.dto'
+import { ConsumerDto, ConsumerGroupDto, UpdateConsumerGroupDto } from 'apiSrc/modules/browser/dto/stream.dto'
 
 import GroupsView from './GroupsView'
 
@@ -53,6 +55,8 @@ const GroupsViewWrapper = (props: Props) => {
   const [idError, setIdError] = useState<string>('')
   const [isIdFocused, setIsIdFocused] = useState<boolean>(false)
 
+  const { instanceId } = useParams<{ instanceId: string }>()
+
   useEffect(() => {
     dispatch(updateSelectedKeyRefreshTime(lastRefreshTime))
   }, [lastRefreshTime])
@@ -74,19 +78,28 @@ const GroupsViewWrapper = (props: Props) => {
     setIdError('')
   }, [editValue])
 
-  const closePopover = useCallback(() => {
+  const closePopover = () => {
     setDeleting('')
-  }, [])
+  }
 
-  const showPopover = useCallback((groupName = '') => {
+  const showPopover = (groupName = '') => {
     setDeleting(`${groupName + suffix}`)
-  }, [])
+  }
 
-  const handleDeleteGroup = (name: string) => {
-    dispatch(deleteConsumerGroupsAction(selectedKey, [name]))
+  const onSuccessDeletedGroup = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.STREAM_CONSUMER_GROUP_DELETED,
+      eventData: {
+        databaseId: instanceId,
+      }
+    })
     closePopover()
   }
 
+  const handleDeleteGroup = (name: string) => {
+    dispatch(deleteConsumerGroupsAction(selectedKey, [name], onSuccessDeletedGroup))
+  }
+
   const handleRemoveIconClick = () => {
     // sendEventTelemetry({
     //   event: getBasedOnViewTypeEvent(
@@ -101,11 +114,31 @@ const GroupsViewWrapper = (props: Props) => {
     // })
   }
 
+  const onSuccessSelectedGroup = (data: ConsumerDto[]) => {
+    dispatch(setStreamViewType(StreamViewType.Consumers))
+    sendEventTelemetry({
+      event: TelemetryEvent.STREAM_CONSUMERS_LOADED,
+      eventData: {
+        databaseId: instanceId,
+        length: data.length
+      }
+    })
+  }
+
+  const onSuccessApplyEditId = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.STREAM_CONSUMER_GROUP_ID_SET,
+      eventData: {
+        databaseId: instanceId,
+      }
+    })
+  }
+
   const handleSelectGroup = ({ rowData }: { rowData: any }) => {
     dispatch(setSelectedGroup(rowData))
     dispatch(fetchConsumers(
       false,
-      () => dispatch(setStreamViewType(StreamViewType.Consumers))
+      onSuccessSelectedGroup,
     ))
   }
 
@@ -116,7 +149,7 @@ const GroupsViewWrapper = (props: Props) => {
         name: groupName,
         lastDeliveredId: editValue
       }
-      dispatch(modifyLastDeliveredIdAction(data))
+      dispatch(modifyLastDeliveredIdAction(data, onSuccessApplyEditId))
     }
   }
 
@@ -283,7 +316,7 @@ const GroupsViewWrapper = (props: Props) => {
               header={name}
               text={(
                 <>
-                  will be removed from <b>{selectedKey}</b>
+                  and all its consumers will be removed from <b>{selectedKey}</b>
                 </>
               )}
               item={name}

redisinsight/ui/src/pages/browser/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, ChangeEvent } from 'react'
 import { useSelector } from 'react-redux'
+import { useParams } from 'react-router-dom'
 import {
   EuiSuperSelect,
   EuiSuperSelectOption,
@@ -22,7 +23,8 @@ import { orderBy, filter } from 'lodash'
 import { selectedGroupSelector, selectedConsumerSelector } from 'uiSrc/slices/browser/stream'
 import { validateNumber } from 'uiSrc/utils'
 import { prepareDataForClaimRequest, getDefaultConsumer, ClaimTimeOptions } from 'uiSrc/utils/streamUtils'
-import { ClaimPendingEntryDto, ConsumerDto } from 'apiSrc/modules/browser/dto/stream.dto'
+import { ClaimPendingEntryDto, ClaimPendingEntriesResponse, ConsumerDto } from 'apiSrc/modules/browser/dto/stream.dto'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import styles from './styles.module.scss'
 
@@ -50,7 +52,11 @@ export interface Props {
   isOpen: boolean
   closePopover: () => void
   showPopover: () => void
-  claimMessage: (data: Partial<ClaimPendingEntryDto>, successAction: () => void) => void
+  claimMessage: (
+    data: Partial<ClaimPendingEntryDto>,
+    successAction: (data: ClaimPendingEntriesResponse) => void
+  ) => void
+  handleCancelClaim: () => void
 }
 
 const MessageClaimPopover = (props: Props) => {
@@ -59,17 +65,17 @@ const MessageClaimPopover = (props: Props) => {
     isOpen,
     closePopover,
     showPopover,
-    claimMessage
+    claimMessage,
+    handleCancelClaim
   } = props
 
   const {
     data: consumers = [],
   } = useSelector(selectedGroupSelector) ?? {}
-  const { name: currentConsumerName } = useSelector(selectedConsumerSelector) ?? { name: '' }
+  const { name: currentConsumerName, pending = 0 } = useSelector(selectedConsumerSelector) ?? { name: '' }
 
   const [isOptionalShow, setIsOptionalShow] = useState<boolean>(false)
   const [consumerOptions, setConsumerOptions] = useState<EuiSuperSelectOption<string>[]>([])
-
   const [initialValues, setInitialValues] = useState({
     consumerName: '',
     minIdleTime: '0',
@@ -79,16 +85,31 @@ const MessageClaimPopover = (props: Props) => {
     force: false
   })
 
+  const { instanceId } = useParams<{ instanceId: string }>()
+
   const formik = useFormik({
     initialValues,
     enableReinitialize: true,
     validateOnBlur: false,
     onSubmit: (values) => {
       const data = prepareDataForClaimRequest(values, [id], isOptionalShow)
-      claimMessage(data, handleClosePopover)
+      claimMessage(data, onSuccessSubmit)
     },
   })
 
+  const onSuccessSubmit = (data: ClaimPendingEntriesResponse) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.STREAM_CONSUMER_MESSAGE_CLAIMED,
+      eventData: {
+        databaseId: instanceId,
+        pending: pending - data.affected.length
+      }
+    })
+    setIsOptionalShow(false)
+    formik.resetForm()
+    closePopover()
+  }
+
   const handleClosePopover = () => {
     closePopover()
     setIsOptionalShow(false)
@@ -107,6 +128,11 @@ const MessageClaimPopover = (props: Props) => {
     }
   }
 
+  const handleCancel = () => {
+    handleCancelClaim()
+    handleClosePopover()
+  }
+
   useEffect(() => {
     const consumersWithoutCurrent = filter(consumers, (consumer) => consumer.name !== currentConsumerName)
     const sortedConsumers = orderBy(getConsumersOptions(consumersWithoutCurrent), ['name'], ['asc'])
@@ -288,7 +314,7 @@ const MessageClaimPopover = (props: Props) => {
             <EuiButton
               color="secondary"
               className={styles.footerBtn}
-              onClick={handleClosePopover}
+              onClick={handleCancel}
             >
               Cancel
             </EuiButton>