Merge pull request #818 from RedisInsight/main

new rc

Author: rsergeenko

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/pages/pubSub/PubSubPage.tsx

@@ -7,6 +7,7 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import InstanceHeader from 'uiSrc/components/instance-header'
 import { SubscriptionType } from 'uiSrc/constants/pubSub'
 import { sendPageViewTelemetry, TelemetryPageView } from 'uiSrc/telemetry'
+import { formatLongName, getDbIndex, setTitle } from 'uiSrc/utils'
 
 import { MessagesListWrapper, PublishMessage, SubscriptionPanel } from './components'
 
@@ -16,11 +17,14 @@ export const PUB_SUB_DEFAULT_CHANNEL = { channel: '*', type: SubscriptionType.PS
 
 const PubSubPage = () => {
   const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
-  const { name: connectedInstanceName } = useSelector(connectedInstanceSelector)
+  const { name: connectedInstanceName, db } = useSelector(connectedInstanceSelector)
   const { instanceId } = useParams<{ instanceId: string }>()
 
   const [isPageViewSent, setIsPageViewSent] = useState(false)
 
+  const dbName = `${formatLongName(connectedInstanceName, 33, 0, '...')} ${getDbIndex(db)}`
+  setTitle(`${dbName} - Pub/Sub`)
+
   useEffect(() => {
     if (connectedInstanceName && !isPageViewSent && analyticsIdentified) {
       sendPageView(instanceId)

redisinsight/ui/src/pages/slowLog/SlowLogPage.tsx

@@ -28,6 +28,7 @@ import {
   slowLogSelector
 } from 'uiSrc/slices/slowlog/slowlog'
 import { sendPageViewTelemetry, sendEventTelemetry, TelemetryEvent, TelemetryPageView } from 'uiSrc/telemetry'
+import { formatLongName, getDbIndex, setTitle } from 'uiSrc/utils'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 
 import { SlowLog } from 'apiSrc/modules/slow-log/models'
@@ -47,7 +48,7 @@ const countOptions: EuiSuperSelectOption<string>[] = [
 ]
 
 const SlowLogPage = () => {
-  const { connectionType, name: connectedInstanceName } = useSelector(connectedInstanceSelector)
+  const { connectionType, name: connectedInstanceName, db } = useSelector(connectedInstanceSelector)
   const { data, loading, durationUnit, config } = useSelector(slowLogSelector)
   const { slowlogLogSlowerThan = 0, slowlogMaxLen } = useSelector(slowLogConfigSelector)
   const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
@@ -59,6 +60,8 @@ const SlowLogPage = () => {
   const dispatch = useDispatch()
 
   const lastTimestamp = minBy(data, 'time')?.time
+  const dbName = `${formatLongName(connectedInstanceName, 33, 0, '...')} ${getDbIndex(db)}`
+  setTitle(`${dbName} - Slow Log`)
 
   useEffect(() => {
     getConfig()

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
+  })