#RI-2932 - Show Consumer groups

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/page-placeholder/PagePlaceholder.tsx

@@ -3,10 +3,15 @@ import { ReactComponent as LogoIcon } from 'uiSrc/assets/img/logo.svg'
 import { EuiLoadingLogo, EuiEmptyPrompt } from '@elastic/eui'
 
 const PagePlaceholder = () => (
-  <EuiEmptyPrompt
-    icon={<EuiLoadingLogo logo={LogoIcon} size="xl" style={{ fontSize: '40px' }} />}
-    titleSize="s"
-  />
+  <>
+    { process.env.NODE_ENV !== 'development' && (
+      <EuiEmptyPrompt
+        icon={<EuiLoadingLogo logo={LogoIcon} size="xl" style={{ fontSize: '40px' }} />}
+        titleSize="s"
+      />
+    )}
+  </>
+
 )
 
 export default PagePlaceholder

redisinsight/ui/src/components/popover-item-editor/PopoverItemEditor.spec.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+import PopoverItemEditor, { Props } from './PopoverItemEditor'
+
+const mockedProps = mock<Props>()
+
+describe('PopoverItemEditor', () => {
+  it('should render', () => {
+    expect(
+      render(
+        <PopoverItemEditor
+          {...instance(mockedProps)}
+          onDecline={jest.fn()}
+        >
+          <></>
+        </PopoverItemEditor>
+      )
+    ).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/popover-item-editor/PopoverItemEditor.tsx

@@ -0,0 +1,123 @@
+import React, {
+  FormEvent,
+  useEffect,
+  useState,
+} from 'react'
+
+import {
+  EuiButton,
+  EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiForm,
+  EuiPopover,
+} from '@elastic/eui'
+import styles from './styles.module.scss'
+
+export interface Props {
+  children: React.ReactElement
+  className?: string
+  onOpen: () => void
+  onApply: () => void
+  onDecline?: () => void
+  isLoading?: boolean
+  isDisabled?: boolean
+  declineOnUnmount?: boolean
+  btnTestId?: string
+  btnIconType?: string
+}
+
+const PopoverItemEditor = (props: Props) => {
+  const {
+    onOpen,
+    onDecline,
+    onApply,
+    children,
+    isLoading,
+    declineOnUnmount = true,
+    isDisabled,
+    btnTestId,
+    btnIconType,
+    className
+  } = props
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
+
+  useEffect(() =>
+    // componentWillUnmount
+    () => {
+      declineOnUnmount && onDecline?.()
+    },
+  [])
+
+  const onFormSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    handleApply()
+  }
+
+  const handleApply = (): void => {
+    setIsPopoverOpen(false)
+    onApply()
+  }
+
+  const handleDecline = () => {
+    setIsPopoverOpen(false)
+    onDecline?.()
+  }
+
+  const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation()
+    onOpen?.()
+    setIsPopoverOpen(true)
+  }
+
+  const isDisabledApply = (): boolean => !!(isLoading || isDisabled)
+
+  const button = (
+    <EuiButtonIcon
+      iconType={btnIconType || 'pencil'}
+      aria-label="Edit field"
+      color="primary"
+      disabled={isLoading}
+      onClick={handleButtonClick}
+      data-testid={btnTestId || 'popover-edit-bnt'}
+    />
+  )
+
+  return (
+    <EuiPopover
+      ownFocus
+      anchorPosition="downLeft"
+      isOpen={isPopoverOpen}
+      anchorClassName={className}
+      panelClassName={styles.popoverWrapper}
+      closePopover={handleDecline}
+      button={button}
+      data-testid="popover-item-editor"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <EuiForm component="form" onSubmit={onFormSubmit}>
+        <div className={styles.content}>
+          {children}
+        </div>
+        <EuiFlexGroup className={styles.footer} responsive={false} justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            <EuiButton color="secondary" onClick={() => handleDecline()} data-testid="cancel-btn">
+              Cancel
+            </EuiButton>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              fill
+              type="submit"
+              color="secondary"
+              isDisabled={isDisabledApply()}
+              data-testid="save-btn"
+            >
+              Save
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiForm>
+    </EuiPopover>
+  )
+}
+
+export default PopoverItemEditor

redisinsight/ui/src/components/popover-item-editor/index.ts

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

redisinsight/ui/src/components/popover-item-editor/styles.module.scss

@@ -0,0 +1,7 @@
+.content {
+
+}
+
+.footer {
+  margin-top: 6px !important;
+}

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/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

@@ -35,6 +35,10 @@ enum ApiEndpoints {
   REJSON_ARRAPPEND = 'rejson-rl/arrappend',
   STREAMS_ENTRIES = 'streams/entries',
   STREAMS_ENTRIES_GET = 'streams/entries/get',
+  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/constants/keys.ts

@@ -1,3 +1,4 @@
+import { StreamViewType } from 'uiSrc/slices/interfaces/stream'
 import { CommandGroup } from './commands'
 
 export enum KeyTypes {
@@ -114,11 +115,27 @@ export const KEY_TYPES_ACTIONS: KeyTypesActions = Object.freeze({
       name: 'Edit Value',
     },
   },
-  [KeyTypes.ReJSON]: {},
-  [KeyTypes.Stream]: {
-    addItems: {
-      name: 'New Entry',
-    },
+  [KeyTypes.ReJSON]: {}
+})
+
+export const STREAM_ADD_GROUP_VIEW_TYPES = [
+  StreamViewType.Groups,
+  StreamViewType.Consumers,
+  StreamViewType.Messages
+]
+
+export const STREAM_ADD_ACTION = Object.freeze({
+  [StreamViewType.Data]: {
+    name: 'New Entry'
+  },
+  [StreamViewType.Groups]: {
+    name: 'New Group'
+  },
+  [StreamViewType.Consumers]: {
+    name: 'New Group'
+  },
+  [StreamViewType.Messages]: {
+    name: 'New Group'
   }
 })
 

redisinsight/ui/src/constants/texts.tsx

@@ -25,3 +25,12 @@ export const ScanNoResultsFoundText = (
     </EuiText>
   </>
 )
+
+export const lastDeliveredIDTooltipText = (
+  <>
+    Specify the ID of the last delivered entry in the stream from the new group's perspective.
+    <EuiSpacer size="xs" />
+    Otherwise, <b>$</b> represents the ID of the last entry in the stream,&nbsp;
+    <b>0</b> fetches the entire stream from the beginning.
+  </>
+)

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/hash-details/HashDetails.tsx

@@ -159,7 +159,7 @@ const HashDetails = (props: Props) => {
         })
       }
       setMatch(match)
-      dispatch(fetchHashFields(key, 0, SCAN_COUNT_DEFAULT, match || matchAllValue, onSuccess))
+      dispatch(fetchHashFields(key, 0, SCAN_COUNT_DEFAULT, match || matchAllValue, true, onSuccess))
     }
   }