Merge branch 'feature/RI-2932_Consumer_Groups' into feature/RI-2936_modify_last-id

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

Author: rsergeenko

redisinsight/ui/src/components/range-filter/index.ts

@@ -0,0 +1,3 @@
+import RangeFilter from './RangeFilter'
+
+export default RangeFilter

redisinsight/ui/src/components/virtual-table/styles.module.scss

@@ -151,12 +151,6 @@ $footerHeight: 38px;
   white-space: pre-wrap;
 }
 
-:global(.key-details-table) {
-  :global(.ReactVirtualized__Table__row) {
-    font-size: 13px;
-  }
-}
-
 :global(.key-list-table) {
   height: calc(100% - 58px);
 }
@@ -176,6 +170,9 @@ $footerHeight: 38px;
       }
     }
   }
+  :global(.ReactVirtualized__Table__row) {
+    font-size: 13px;
+  }
   :global(.ReactVirtualized__Table__headerRow) {
     border: 1px solid var(--tableLightestBorderColor) !important;
   }

redisinsight/ui/src/constants/api.ts

@@ -38,6 +38,7 @@ enum ApiEndpoints {
   STREAMS_CONSUMER_GROUPS = 'streams/consumer-groups',
   STREAMS_CONSUMER_GROUPS_GET = 'streams/consumer-groups/get',
   STREAMS_CONSUMERS_GET = 'streams/consumer-groups/consumers/get',
+  STREAMS_CONSUMERS_MESSAGES_GET = 'streams/consumer-groups/consumers/pending-messages/get',
   STREAMS = 'streams',
   CLI = 'cli',
   CLI_BLOCKING_COMMANDS = 'info/cli-blocking-commands',

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

@@ -1,30 +1,184 @@
-import { EuiProgress, EuiTab, EuiTabs } from '@elastic/eui'
-import React from 'react'
+import { EuiProgress } from '@elastic/eui'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { isNull, last } from 'lodash'
+import cx from 'classnames'
 
-import { streamSelector, setStreamViewType, streamGroupsSelector } from 'uiSrc/slices/browser/stream'
-import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import {
+  streamSelector,
+  streamGroupsSelector,
+  streamRangeSelector,
+  streamDataSelector,
+  fetchMoreStreamEntries,
+  updateStart,
+  updateEnd,
+  fetchStreamEntries
+} from 'uiSrc/slices/browser/stream'
 import { StreamViewType } from 'uiSrc/slices/interfaces/stream'
 
-import { streamViewTypeTabs } from './constants'
+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 ConsumersViewWrapper from './consumers-view'
 import GroupsViewWrapper from './groups-view'
+import MessagesViewWrapper from './messages-view'
 import StreamDataViewWrapper from './stream-data-view'
 import StreamTabs from './stream-tabs'
 
+import styles from './styles.module.scss'
+
 export interface Props {
   isFooterOpen: boolean
 }
 
 const StreamDetailsWrapper = (props: Props) => {
-  const { id: instanceId } = useSelector(connectedInstanceSelector)
-  const { viewType, loading } = useSelector(streamSelector)
+  const { viewType, loading, sortOrder: entryColumnSortOrder } = useSelector(streamSelector)
   const { loading: loadingGroups } = useSelector(streamGroupsSelector)
+  const { start, end } = useSelector(streamRangeSelector)
+  const {
+    firstEntry,
+    lastEntry,
+    entries,
+  } = useSelector(streamDataSelector)
+  const { name: key } = useSelector(selectedKeyDataSelector) ?? { name: '' }
+  const { id: instanceId } = useSelector(connectedInstanceSelector)
 
   const dispatch = useDispatch()
 
+  const firstEntryTimeStamp = useMemo(() => getTimestampFromId(firstEntry?.id), [firstEntry?.id])
+  const lastEntryTimeStamp = useMemo(() => getTimestampFromId(lastEntry?.id), [lastEntry?.id])
+
+  const startNumber = useMemo(() => (start === '' ? 0 : parseInt(start, 10)), [start])
+  const endNumber = useMemo(() => (end === '' ? 0 : parseInt(end, 10)), [end])
+
+  const shouldFilterRender = !isNull(firstEntry)
+    && (firstEntry.id !== '')
+    && !isNull(lastEntry)
+    && lastEntry.id !== ''
+
+  useEffect(() => {
+    if (isNull(firstEntry)) {
+      dispatch(updateStart(''))
+    }
+    if (start === '' && firstEntry?.id !== '') {
+      dispatch(updateStart(firstEntryTimeStamp.toString()))
+    }
+  }, [firstEntryTimeStamp])
+
+  useEffect(() => {
+    if (isNull(lastEntry)) {
+      dispatch(updateEnd(''))
+    }
+    if (end === '' && lastEntry?.id !== '') {
+      dispatch(updateEnd(lastEntryTimeStamp.toString()))
+    }
+  }, [lastEntryTimeStamp])
+
+  const loadMoreItems = () => {
+    const lastLoadedEntryId = last(entries)?.id
+    const lastLoadedEntryTimeStamp = getTimestampFromId(lastLoadedEntryId)
+
+    const lastRangeEntryTimestamp = end ? parseInt(end, 10) : getTimestampFromId(lastEntry?.id)
+    const firstRangeEntryTimestamp = start ? parseInt(start, 10) : getTimestampFromId(firstEntry?.id)
+    const shouldLoadMore = () => {
+      if (!lastLoadedEntryTimeStamp) {
+        return false
+      }
+      return entryColumnSortOrder === SortOrder.ASC
+        ? lastLoadedEntryTimeStamp <= lastRangeEntryTimestamp
+        : lastLoadedEntryTimeStamp >= firstRangeEntryTimestamp
+    }
+    const nextId = getNextId(lastLoadedEntryId, entryColumnSortOrder)
+
+    if (shouldLoadMore()) {
+      dispatch(
+        fetchMoreStreamEntries(
+          key,
+          entryColumnSortOrder === SortOrder.DESC ? start : nextId,
+          entryColumnSortOrder === SortOrder.DESC ? nextId : end,
+          SCAN_COUNT_DEFAULT,
+          entryColumnSortOrder,
+        )
+      )
+    }
+  }
+
+  const filterTelemetry = (data: GetStreamEntriesResponse) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.STREAM_DATA_FILTERED,
+      eventData: {
+        databaseId: instanceId,
+        total: data.total,
+      }
+    })
+  }
+
+  const resetFilterTelemetry = (data: GetStreamEntriesResponse) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.STREAM_DATA_FILTER_RESET,
+      eventData: {
+        databaseId: instanceId,
+        total: data.total,
+      }
+    })
+  }
+
+  const loadEntries = (telemetryAction?: (data: GetStreamEntriesResponse) => void) => {
+    dispatch(fetchStreamEntries(
+      key,
+      SCAN_COUNT_DEFAULT,
+      entryColumnSortOrder,
+      false,
+      telemetryAction
+    ))
+  }
+
+  const handleChangeStartFilter = useCallback(
+    (value: number, shouldSentEventTelemetry: boolean) => {
+      dispatch(updateStart(value.toString()))
+      loadEntries(shouldSentEventTelemetry ? filterTelemetry : undefined)
+    },
+    []
+  )
+
+  const handleChangeEndFilter = useCallback(
+    (value: number, shouldSentEventTelemetry: boolean) => {
+      dispatch(updateEnd(value.toString()))
+      loadEntries(shouldSentEventTelemetry ? filterTelemetry : undefined)
+    },
+    []
+  )
+
+  const handleResetFilter = useCallback(
+    () => {
+      dispatch(updateStart(firstEntryTimeStamp.toString()))
+      dispatch(updateEnd(lastEntryTimeStamp.toString()))
+      loadEntries(resetFilterTelemetry)
+    },
+    [lastEntryTimeStamp, firstEntryTimeStamp]
+  )
+
+  const handleUpdateRangeMin = useCallback(
+    (min: number) => {
+      dispatch(updateStart(min.toString()))
+    },
+    []
+  )
+
+  const handleUpdateRangeMax = useCallback(
+    (max: number) => {
+      dispatch(updateEnd(max.toString()))
+    },
+    []
+  )
+
   return (
-    <>
+    <div className={styles.container}>
       {(loading || loadingGroups) && (
         <EuiProgress
           color="primary"
@@ -33,17 +187,38 @@ const StreamDetailsWrapper = (props: Props) => {
           data-testid="progress-key-stream"
         />
       )}
+      {shouldFilterRender ? (
+        <RangeFilter
+          max={lastEntryTimeStamp}
+          min={firstEntryTimeStamp}
+          start={startNumber}
+          end={endNumber}
+          handleChangeStart={handleChangeStartFilter}
+          handleChangeEnd={handleChangeEndFilter}
+          handleResetFilter={handleResetFilter}
+          handleUpdateRangeMax={handleUpdateRangeMax}
+          handleUpdateRangeMin={handleUpdateRangeMin}
+        />
+      )
+        : (
+          <div className={styles.rangeWrapper}>
+            <div className={cx(styles.sliderTrack, styles.mockRange)} />
+          </div>
+        )}
       <StreamTabs />
       {viewType === StreamViewType.Data && (
-        <StreamDataViewWrapper {...props} />
+        <StreamDataViewWrapper loadMoreItems={loadMoreItems} {...props} />
       )}
       {viewType === StreamViewType.Groups && (
         <GroupsViewWrapper {...props} />
       )}
       {viewType === StreamViewType.Consumers && (
         <ConsumersViewWrapper {...props} />
       )}
-    </>
+      {viewType === StreamViewType.Messages && (
+        <MessagesViewWrapper {...props} />
+      )}
+    </div>
   )
 }
 

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

@@ -10,24 +10,19 @@ import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
 import { ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
 import { selectedKeyDataSelector } from 'uiSrc/slices/browser/keys'
 import { SortOrder } from 'uiSrc/constants'
-import { StreamEntryDto } from 'apiSrc/modules/browser/dto/stream.dto'
+import { ConsumerDto } from 'apiSrc/modules/browser/dto/stream.dto'
 
 import styles from './styles.module.scss'
 
 const headerHeight = 60
 const rowHeight = 54
 const actionsWidth = 54
 const minColumnWidth = 190
-const noItemsMessageString = 'There are no Consumers in the Group.'
-
-interface IStreamEntry extends StreamEntryDto {
-  editing: boolean
-}
+const noItemsMessageString = 'Your Consumer Group has no Consumers available.'
 
 export interface Props {
-  data: IStreamEntry[]
+  data: ConsumerDto[]
   columns: ITableColumn[]
-  onEditConsumer: (consumerId:string, editing: boolean) => void
   onClosePopover: () => void
   onSelectConsumer: ({ rowData }: { rowData: any }) => void
   isFooterOpen?: boolean
@@ -55,7 +50,7 @@ const ConsumersView = (props: Props) => {
       <div
         className={cx(
           'key-details-table',
-          'stream-consumers-container',
+          'stream-details-table',
           styles.container,
           { footerOpened: isFooterOpen }
         )}

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

@@ -2,7 +2,7 @@
   display: flex;
   flex: 1;
   width: 100%;
-  padding: 16px 18px;
+  padding-top: 3px;
   background-color: var(--euiColorEmptyShade);
 
   :global {