diff --git a/redisinsight/ui/src/pages/browser/components/stream-details/StreamDetailsWrapper.tsx b/redisinsight/ui/src/pages/browser/components/stream-details/StreamDetailsWrapper.tsx index c3a83d14e8..e18516973c 100644 --- a/redisinsight/ui/src/pages/browser/components/stream-details/StreamDetailsWrapper.tsx +++ b/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('')) diff --git a/redisinsight/ui/src/slices/browser/stream.ts b/redisinsight/ui/src/slices/browser/stream.ts index fe739c0540..94e9dc0064 100644 --- a/redisinsight/ui/src/slices/browser/stream.ts +++ b/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) => { 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) => { 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(), diff --git a/redisinsight/ui/src/utils/streamUtils.ts b/redisinsight/ui/src/utils/streamUtils.ts index cb8ae807da..859f695548 100644 --- a/redisinsight/ui/src/utils/streamUtils.ts +++ b/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 + })