Merge pull request #684 from RedisInsight/feature/RI-2932_Consumer_Groups

#RI-2932 - Show Consumer groups

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