#RI-3130, #RI-3131

redisinsight/ui/src/pages/browser/components/stream-details/StreamDetailsWrapper.tsx

@@ -57,6 +57,11 @@ const StreamDetailsWrapper = (props: Props) => {
     && !isNull(lastEntry)
     && lastEntry.id !== ''
 
+  useEffect(() =>
+    () => {
+      dispatch(setStreamInitialState())
+    }, [])
+
   useEffect(() => {
     if (isNull(firstEntry)) {
       dispatch(updateStart(''))

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

@@ -7,7 +7,7 @@ import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { ApiEndpoints, SortOrder } from 'uiSrc/constants'
 import { refreshKeyInfoAction, } from 'uiSrc/slices/browser/keys'
 import { getApiErrorMessage, getUrl, isStatusSuccessful, Maybe, Nullable } from 'uiSrc/utils'
-import { getStreamRangeStart, getStreamRangeEnd } from 'uiSrc/utils/streamUtils'
+import { getStreamRangeStart, getStreamRangeEnd, updateConsumerGroups, updateConsumers } from 'uiSrc/utils/streamUtils'
 import successMessages from 'uiSrc/components/notifications/success-messages'
 import {
   AddStreamEntriesDto,
@@ -214,6 +214,9 @@ const streamSlice = createSlice({
     loadConsumersSuccess: (state, { payload }: PayloadAction<ConsumerDto[]>) => {
       state.groups.loading = false
 
+      const groups = updateConsumerGroups(state.groups.data, state.groups.selectedGroup?.name, payload)
+
+      state.groups.data = groups
       state.groups.selectedGroup = {
         ...state.groups.selectedGroup,
         lastRefreshTime: Date.now(),
@@ -244,8 +247,17 @@ const streamSlice = createSlice({
     loadConsumerMessagesSuccess: (state, { payload }: PayloadAction<PendingEntryDto[]>) => {
       state.groups.loading = false
 
+      const consumers = updateConsumers(
+        state.groups.selectedGroup?.data,
+        state.groups.selectedGroup?.selectedConsumer?.name,
+        payload
+      )
+      const groups = updateConsumerGroups(state.groups.data, state.groups.selectedGroup?.name, consumers)
+
+      state.groups.data = groups
       state.groups.selectedGroup = {
         ...state.groups.selectedGroup,
+        data: consumers,
         selectedConsumer: {
           ...state.groups.selectedGroup?.selectedConsumer,
           lastRefreshTime: Date.now(),

redisinsight/ui/src/utils/streamUtils.ts

@@ -2,7 +2,7 @@ import { format } from 'date-fns'
 import { orderBy } from 'lodash'
 import { SortOrder } from 'uiSrc/constants'
 import { SCAN_STREAM_START_DEFAULT, SCAN_STREAM_END_DEFAULT } from 'uiSrc/constants/api'
-import { ClaimPendingEntryDto, ConsumerDto } from 'apiSrc/modules/browser/dto/stream.dto'
+import { ClaimPendingEntryDto, ConsumerDto, ConsumerGroupDto, PendingEntryDto } from 'apiSrc/modules/browser/dto/stream.dto'
 
 export enum ClaimTimeOptions {
   RELATIVE = 'idle',
@@ -77,3 +77,20 @@ export const prepareDataForClaimRequest = (
     entries
   })
 }
+
+export const updateConsumerGroups = (groups: ConsumerGroupDto[], groupName: string, consumers: ConsumerDto[]) =>
+  groups?.map((group: ConsumerGroupDto) => {
+    if (group.name === groupName) {
+      group.consumers = consumers?.length
+      group.pending = consumers?.reduce(((a, { pending }) => a + pending), 0)
+    }
+    return group
+  })
+
+export const updateConsumers = (consumers: ConsumerDto[], consumerName: string, messages: PendingEntryDto[]) =>
+  consumers?.map((consumer: ConsumerDto) => {
+    if (consumer.name === consumerName) {
+      consumer.pending = messages?.length
+    }
+    return consumer
+  })