#RI-2932 - Show Consumer Groups

#RI-2766 - Show Consumer Information

Author: egor-zalenski

package.json

@@ -202,7 +202,6 @@
     "opencollective-postinstall": "^2.0.3",
     "react-hot-loader": "^4.13.0",
     "react-refresh": "^0.9.0",
-    "react-test-renderer": "^17.0.1",
     "redux-mock-store": "^1.5.4",
     "regenerator-runtime": "^0.13.5",
     "rimraf": "^3.0.2",

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

@@ -12,6 +12,7 @@ export interface Props {
   min: number
   start: number
   end: number
+  disabled?: boolean
   handleChangeStart: (value: number, shouldSentEventTelemetry: boolean) => void
   handleChangeEnd: (value: number, shouldSentEventTelemetry: boolean) => void
   handleUpdateRangeMax: (value: number) => void
@@ -33,6 +34,7 @@ const RangeFilter = (props: Props) => {
     min,
     start,
     end,
+    disabled = false,
     handleChangeStart,
     handleChangeEnd,
     handleUpdateRangeMax,
@@ -152,6 +154,7 @@ const RangeFilter = (props: Props) => {
           max={max}
           value={startVal}
           ref={minValRef}
+          disabled={disabled}
           onChange={onChangeStart}
           onMouseUp={onMouseUpStart}
           className={cx(styles.thumb, styles.thumbZindex3)}
@@ -163,6 +166,7 @@ const RangeFilter = (props: Props) => {
           max={max}
           value={endVal}
           ref={maxValRef}
+          disabled={disabled}
           onChange={onChangeEnd}
           onMouseUp={onMouseUpEnd}
           className={cx(styles.thumb, styles.thumbZindex4)}

redisinsight/ui/src/pages/browser/components/auto-refresh/AutoRefresh.tsx

@@ -29,7 +29,7 @@ export interface Props {
   testid?: string
   containerClassName?: string
   turnOffAutoRefresh?: boolean
-  onRefresh: (enableAutoRefresh?: boolean) => void
+  onRefresh: (enableAutoRefresh: boolean) => void
   onEnableAutoRefresh?: (enableAutoRefresh: boolean, refreshRate: string) => void
   onChangeAutoRefreshRate?: (enableAutoRefresh: boolean, refreshRate: string) => void
 }
@@ -49,7 +49,7 @@ const AutoRefresh = ({
   onChangeAutoRefreshRate,
 }: Props) => {
   let intervalText: NodeJS.Timeout
-  let timeoutRefresh: NodeJS.Timeout
+  let intervalRefresh: NodeJS.Timeout
 
   const [refreshMessage, setRefreshMessage] = useState(NOW)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
@@ -74,7 +74,7 @@ const AutoRefresh = ({
   useEffect(() => {
     if (turnOffAutoRefresh && enableAutoRefresh) {
       setEnableAutoRefresh(false)
-      clearInterval(timeoutRefresh)
+      clearInterval(intervalRefresh)
     }
   }, [turnOffAutoRefresh])
 
@@ -96,20 +96,20 @@ const AutoRefresh = ({
     updateLastRefresh()
 
     if (enableAutoRefresh && !loading) {
-      timeoutRefresh = setInterval(() => {
+      intervalRefresh = setInterval(() => {
         if (document.hidden) return
 
         handleRefresh()
       }, +refreshRate * 1_000)
     } else {
-      clearInterval(timeoutRefresh)
+      clearInterval(intervalRefresh)
     }
 
     if (enableAutoRefresh) {
       updateAutoRefreshText(refreshRate)
     }
 
-    return () => clearInterval(timeoutRefresh)
+    return () => clearInterval(intervalRefresh)
   }, [enableAutoRefresh, refreshRate, loading, lastRefreshTime])
 
   const getLastRefreshDelta = (time:Nullable<number>) => (Date.now() - (time || 0)) / 1_000

redisinsight/ui/src/pages/browser/components/key-details/KeyDetailsWrapper.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import {
   deleteKeyAction,
   editKey,
@@ -15,7 +15,14 @@ import { fetchString, resetStringValue } from 'uiSrc/slices/browser/string'
 import { refreshSetMembersAction } from 'uiSrc/slices/browser/set'
 import { refreshListElementsAction } from 'uiSrc/slices/browser/list'
 import { fetchReJSON } from 'uiSrc/slices/browser/rejson'
-import { refreshStreamEntries } from 'uiSrc/slices/browser/stream'
+import {
+  fetchConsumerGroups,
+  fetchConsumerMessages,
+  fetchConsumers,
+  refreshStreamEntries,
+  streamSelector,
+} from 'uiSrc/slices/browser/stream'
+import { StreamViewType } from 'uiSrc/slices/interfaces/stream'
 import KeyDetails from './KeyDetails/KeyDetails'
 
 export interface Props {
@@ -39,6 +46,8 @@ const KeyDetailsWrapper = (props: Props) => {
     keyProp
   } = props
 
+  const { viewType: streamViewType } = useSelector(streamSelector)
+
   const dispatch = useDispatch()
 
   useEffect(() => {
@@ -90,7 +99,18 @@ const KeyDetailsWrapper = (props: Props) => {
         break
       }
       case KeyTypes.Stream: {
-        dispatch(refreshStreamEntries(key, resetData))
+        if (streamViewType === StreamViewType.Data) {
+          dispatch(refreshStreamEntries(key, resetData))
+        }
+        if (streamViewType === StreamViewType.Groups) {
+          dispatch<any>(fetchConsumerGroups(resetData))
+        }
+        if (streamViewType === StreamViewType.Consumers) {
+          dispatch<any>(fetchConsumers(resetData))
+        }
+        if (streamViewType === StreamViewType.Messages) {
+          dispatch<any>(fetchConsumerMessages(resetData))
+        }
         break
       }
       default:

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

@@ -1,12 +1,18 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { render } from 'uiSrc/utils/test-utils'
-import StreamDataViewWrapper, { Props } from './StreamDetailsWrapper'
+import { render, screen } from 'uiSrc/utils/test-utils'
+import StreamDetailsWrapper, { Props } from './StreamDetailsWrapper'
 
 const mockedProps = mock<Props>()
 
 describe('StreamDetailsWrapper', () => {
   it('should render', () => {
-    expect(render(<StreamDataViewWrapper {...instance(mockedProps)} />)).toBeTruthy()
+    expect(render(<StreamDetailsWrapper {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should render Stream Data container', () => {
+    render(<StreamDetailsWrapper {...instance(mockedProps)} />)
+
+    expect(screen.getByTestId('stream-entries-container')).toBeInTheDocument()
   })
 })

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

@@ -15,15 +15,15 @@ import {
   fetchStreamEntries
 } from 'uiSrc/slices/browser/stream'
 import { StreamViewType } from 'uiSrc/slices/interfaces/stream'
-
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { getNextId, getTimestampFromId } from 'uiSrc/utils/streamUtils'
 import { SortOrder } from 'uiSrc/constants'
 import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { selectedKeyDataSelector } from 'uiSrc/slices/browser/keys'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { GetStreamEntriesResponse } from 'apiSrc/modules/browser/dto/stream.dto'
 import RangeFilter from 'uiSrc/components/range-filter'
+import { GetStreamEntriesResponse } from 'apiSrc/modules/browser/dto/stream.dto'
+
 import ConsumersViewWrapper from './consumers-view'
 import GroupsViewWrapper from './groups-view'
 import MessagesViewWrapper from './messages-view'
@@ -40,11 +40,7 @@ const StreamDetailsWrapper = (props: Props) => {
   const { viewType, loading, sortOrder: entryColumnSortOrder } = useSelector(streamSelector)
   const { loading: loadingGroups } = useSelector(streamGroupsSelector)
   const { start, end } = useSelector(streamRangeSelector)
-  const {
-    firstEntry,
-    lastEntry,
-    entries,
-  } = useSelector(streamDataSelector)
+  const { firstEntry, lastEntry, entries, } = useSelector(streamDataSelector)
   const { name: key } = useSelector(selectedKeyDataSelector) ?? { name: '' }
   const { id: instanceId } = useSelector(connectedInstanceSelector)
 
@@ -80,7 +76,7 @@ const StreamDetailsWrapper = (props: Props) => {
   }, [lastEntryTimeStamp])
 
   const loadMoreItems = () => {
-    const lastLoadedEntryId = last(entries)?.id
+    const lastLoadedEntryId = last(entries)?.id ?? ''
     const lastLoadedEntryTimeStamp = getTimestampFromId(lastLoadedEntryId)
 
     const lastRangeEntryTimestamp = end ? parseInt(end, 10) : getTimestampFromId(lastEntry?.id)
@@ -189,6 +185,7 @@ const StreamDetailsWrapper = (props: Props) => {
       )}
       {shouldFilterRender ? (
         <RangeFilter
+          disabled={viewType !== StreamViewType.Data}
           max={lastEntryTimeStamp}
           min={firstEntryTimeStamp}
           start={startNumber}

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

@@ -1,12 +1,22 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { render } from 'uiSrc/utils/test-utils'
-import GroupsView, { Props } from './ConsumersView'
+import { ConsumerDto } from 'apiSrc/modules/browser/dto/stream.dto'
+import ConsumersView, { Props } from './ConsumersView'
 
 const mockedProps = mock<Props>()
+const mockConsumers: ConsumerDto[] = [{
+  name: 'test',
+  idle: 123,
+  pending: 321,
+}, {
+  name: 'test2',
+  idle: 13,
+  pending: 31,
+}]
 
-describe('GroupsView', () => {
+describe('ConsumersView', () => {
   it('should render', () => {
-    expect(render(<GroupsView {...instance(mockedProps)} />)).toBeTruthy()
+    expect(render(<ConsumersView {...instance(mockedProps)} data={mockConsumers} />)).toBeTruthy()
   })
 })

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import cx from 'classnames'
 import { orderBy } from 'lodash'
@@ -16,8 +16,6 @@ import styles from './styles.module.scss'
 
 const headerHeight = 60
 const rowHeight = 54
-const actionsWidth = 54
-const minColumnWidth = 190
 const noItemsMessageString = 'Your Consumer Group has no Consumers available.'
 
 export interface Props {
@@ -36,13 +34,17 @@ const ConsumersView = (props: Props) => {
 
   const [consumers, setConsumers] = useState(data)
   const [sortedColumnName, setSortedColumnName] = useState<string>('name')
-  const [sortedColumnOrder, setSortedColumnOrder] = useState<SortOrder>(SortOrder.DESC)
+  const [sortedColumnOrder, setSortedColumnOrder] = useState<SortOrder>(SortOrder.ASC)
+
+  useEffect(() => {
+    setConsumers(orderBy(data, sortedColumnName, sortedColumnOrder?.toLowerCase()))
+  }, [data])
 
   const onChangeSorting = (column: any, order: SortOrder) => {
     setSortedColumnName(column)
     setSortedColumnOrder(order)
 
-    setConsumers(orderBy(consumers, 'name', order?.toLowerCase()))
+    setConsumers(orderBy(consumers, column, order?.toLowerCase()))
   }
 
   return (
@@ -54,24 +56,24 @@ const ConsumersView = (props: Props) => {
           styles.container,
           { footerOpened: isFooterOpen }
         )}
-        data-test-id="stream-consumers-container"
+        data-testid="stream-consumers-container"
       >
         <VirtualTable
           hideProgress
           onRowClick={onSelectConsumer}
           selectable={false}
           keyName={key}
-          totalItemsCount={data.length}
-          headerHeight={data?.length ? headerHeight : 0}
+          totalItemsCount={consumers.length}
+          headerHeight={consumers?.length ? headerHeight : 0}
           rowHeight={rowHeight}
           columns={columns}
           footerHeight={0}
           loading={loading}
-          items={data}
+          items={consumers}
           onWheel={onClosePopover}
           onChangeSorting={onChangeSorting}
           noItemsMessage={noItemsMessageString}
-          sortedColumn={data?.length ? {
+          sortedColumn={consumers?.length ? {
             column: sortedColumnName,
             order: sortedColumnOrder,
           } : undefined}

redisinsight/ui/src/pages/browser/components/stream-details/consumers-view/ConsumersView/index.ts

@@ -1,3 +1,5 @@
-import GroupsView from './ConsumersView'
+import ConsumersView from './ConsumersView'
 
-export default GroupsView
+export * from './ConsumersView'
+
+export default ConsumersView

redisinsight/ui/src/pages/browser/components/stream-details/consumers-view/ConsumersView/styles.module.scss

@@ -4,79 +4,9 @@
   width: 100%;
   padding-top: 3px;
   background-color: var(--euiColorEmptyShade);
-
-  :global {
-    .ReactVirtualized__Grid__innerScrollContainer {
-      .ReactVirtualized__Table__rowColumn {
-        border-right: 1px solid var(--tableDarkestBorderColor) !important;
-
-        &:last-of-type,
-        &:nth-last-of-type(2) {
-          border-right: none !important;
-        }
-      }
-
-      .ReactVirtualized__Table__row {
-        border-bottom: 1px solid var(--tableDarkestBorderColor) !important;
-        &:last-of-type {
-          border-bottom: none !important;
-        }
-      }
-
-      & > div:hover {
-        background: var(--euiColorLightestShade);
-
-        .value-table-actions {
-          background-color: var(--euiColorLightestShade) !important;
-        }
-
-        .streamEntry {
-          color: var(--inputTextColor) !important;
-        }
-
-        .streamEntryId {
-          color: var(--euiTextSubduedColor) !important;
-        }
-      }
-    }
-
-    .ReactVirtualized__Table__headerRow {
-      border: none !important;
-    }
-
-    .ReactVirtualized__Table__Grid {
-      border: 1px solid var(--tableDarkestBorderColor) !important;
-    }
-  }
-
-  .cellHeader {
-    border: none !important;
-  }
-}
-
-:global(.streamEntry) {
-  color: var(--euiTextSubduedColor) !important;
-  white-space: normal;
-  max-width: 100%;
-  word-break: break-all;
-}
-
-:global(.streamEntryId) {
-  color: var(--euiColorMediumShade) !important;
-  display: flex;
-}
-
-:global(.stream-entry-actions) {
-  margin-left: -5px;
 }
 
 .actions,
 .actionsHeader {
   width: 54px;
 }
-
-.actions {
-  :global(.value-table-actions) {
-    background-color: var(--euiColorEmptyShade) !important;
-  }
-}