#RI-781 - Tree view

Author: egor-zalenski

redisinsight/ui/src/assets/img/icons/treeview.svg

@@ -1,16 +1,14 @@
 import React, { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import cx from 'classnames'
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip, EuiSwitch, EuiSwitchEvent } from '@elastic/eui'
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui'
 
 import { Pages } from 'uiSrc/constants'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { connectedInstanceOverviewSelector, connectedInstanceSelector } from 'uiSrc/slices/instances'
 import ShortInstanceInfo from 'uiSrc/components/instance-header/components/ShortInstanceInfo'
 import DatabaseOverviewWrapper from 'uiSrc/components/database-overview/DatabaseOverviewWrapper'
-import { changeKeyViewType, keysSelector } from 'uiSrc/slices/keys'
-import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
 
 import styles from './styles.module.scss'
 
@@ -23,13 +21,10 @@ const InstanceHeader = () => {
     connectionType = ConnectionType.Standalone,
     db = 0
   } = useSelector(connectedInstanceSelector)
-  const { viewType } = useSelector(keysSelector)
   const { version } = useSelector(connectedInstanceOverviewSelector)
   const history = useHistory()
   const [windowDimensions, setWindowDimensions] = useState(0)
 
-  const dispatch = useDispatch()
-
   useEffect(() => {
     updateWindowDimensions()
     globalThis.addEventListener('resize', updateWindowDimensions)
@@ -46,10 +41,6 @@ const InstanceHeader = () => {
     history.push(Pages.home)
   }
 
-  const onChangeKeyViewType = (e: EuiSwitchEvent) => {
-    dispatch(changeKeyViewType(!e.target.checked ? KeyViewType.List : KeyViewType.Tree))
-  }
-
   return (
     <div className={cx(styles.container)}>
       <EuiFlexGroup gutterSize="none" responsive={false}>
@@ -99,13 +90,6 @@ const InstanceHeader = () => {
                 </EuiFlexGroup>
               </EuiToolTip>
             </div>
-            <div style={{ paddingLeft: '10px' }}>
-              <EuiSwitch
-                label="Tree view"
-                checked={viewType !== KeyViewType.List}
-                onChange={(e) => onChangeKeyViewType(e)}
-              />
-            </div>
           </div>
         </EuiFlexItem>
 

redisinsight/ui/src/assets/img/icons/treeview_active.svg

@@ -0,0 +1,25 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { fireEvent, screen, render } from 'uiSrc/utils/test-utils'
+import ScanMore, { Props } from './KeysSummary'
+
+const mockedProps = mock<Props>()
+
+describe('ActionBar', () => {
+  it('should render', () => {
+    expect(render(<ScanMore {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should call "onCloseActionBar"', () => {
+    const handleClick = jest.fn()
+
+    const renderer = render(
+      <ScanMore {...instance(mockedProps)} onCloseActionBar={handleClick} />
+    )
+
+    expect(renderer).toBeTruthy()
+
+    fireEvent.click(screen.getByTestId('cancel-selecting'))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+})

redisinsight/ui/src/assets/img/modules/RediStack.svg

@@ -0,0 +1,93 @@
+import React from 'react'
+import cx from 'classnames'
+import { EuiText, EuiTextColor } from '@elastic/eui'
+
+import { numberWithSpaces } from 'uiSrc/utils/numbers'
+import ScanMore from '../scan-more'
+
+import styles from './styles.module.scss'
+
+export interface Props {
+  loading: boolean
+  items: any[]
+  scanned?: number
+  totalItemsCount?: number
+  scanMoreStyle?: {
+    [key: string]: string | number;
+  }
+  loadMoreItems?: (config: any) => void
+}
+
+const KeysSummary = ({
+  items,
+  loading,
+  scanned = 0,
+  totalItemsCount = 0,
+  scanMoreStyle,
+  loadMoreItems,
+}: Props) => (
+  <>
+    {!!totalItemsCount && (
+      <div className={styles.content}>
+        {!!totalItemsCount && (
+        <EuiText size="xs">
+          {!!scanned && (
+            <>
+              <EuiTextColor className="eui-alignMiddle">
+                <b>
+                  Results:&nbsp;
+                  <span data-testid="keys-number-of-results">{numberWithSpaces(items.length)}</span>
+                  {' '}
+                  key
+                  {items.length === 1 ? '' : 's'}
+                  .&nbsp;
+                </b>
+                <EuiTextColor color="subdued">
+                  Scanned
+                  {' '}
+                  <span data-testid="keys-number-of-scanned">{numberWithSpaces(scanned)}</span>
+                  {' '}
+                  /
+                  {' '}
+                  <span data-testid="keys-total">{numberWithSpaces(totalItemsCount)}</span>
+                  {' '}
+                  keys
+                  <span
+                    className={cx([styles.loading, { [styles.loadingShow]: loading }])}
+                  />
+                </EuiTextColor>
+              </EuiTextColor>
+              <ScanMore
+                withAlert
+                fill={false}
+                style={scanMoreStyle}
+                scanned={scanned}
+                totalItemsCount={totalItemsCount}
+                loading={loading}
+                loadMoreItems={loadMoreItems}
+              />
+            </>
+          )}
+
+          {!scanned && (
+            <EuiText size="xs">
+              <b>
+                Total:&nbsp;
+                {numberWithSpaces(totalItemsCount)}
+              </b>
+            </EuiText>
+          )}
+
+        </EuiText>
+        )}
+      </div>
+    )}
+    {loading && !totalItemsCount && (
+      <EuiText size="xs">
+        Scanning...
+      </EuiText>
+    )}
+  </>
+)
+
+export default KeysSummary

redisinsight/ui/src/components/instance-header/InstanceHeader.tsx

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

redisinsight/ui/src/components/keys-summary/KeysSummary.spec.tsx

@@ -0,0 +1,7 @@
+.loading {
+  opacity: 0;
+}
+
+.loadingShow {
+  opacity: 1;
+}

redisinsight/ui/src/components/keys-summary/KeysSummary.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { fireEvent, screen, render } from 'uiSrc/utils/test-utils'
+import ScanMore, { Props } from './ScanMore'
+
+const mockedProps = mock<Props>()
+
+describe('ActionBar', () => {
+  it('should render', () => {
+    expect(render(<ScanMore {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should call "onCloseActionBar"', () => {
+    const handleClick = jest.fn()
+
+    const renderer = render(
+      <ScanMore {...instance(mockedProps)} onCloseActionBar={handleClick} />
+    )
+
+    expect(renderer).toBeTruthy()
+
+    fireEvent.click(screen.getByTestId('cancel-selecting'))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+})

redisinsight/ui/src/components/keys-summary/index.ts

@@ -0,0 +1,61 @@
+import React from 'react'
+import { EuiButton, EuiIcon, EuiToolTip } from '@elastic/eui'
+
+import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
+import styles from './styles.module.scss'
+
+export interface Props {
+  withAlert?: boolean
+  fill?: boolean
+  loading: boolean
+  scanned?: number
+  totalItemsCount?: number
+  style?: {
+    [key: string]: string | number;
+  }
+  loadMoreItems?: (config: any) => void
+}
+
+const WARNING_MESSAGE = 'Scanning additional keys may decrease performance and memory available.'
+
+const ScanMore = ({
+  fill = true,
+  withAlert = true,
+  scanned = 0,
+  totalItemsCount = 0,
+  loading,
+  style,
+  loadMoreItems,
+}: Props) => (
+  <>
+    {scanned < totalItemsCount && (
+      <EuiButton
+        fill={fill}
+        size="s"
+        color="secondary"
+        style={style ?? { marginLeft: 25, height: 26 }}
+        disabled={loading}
+        className={styles.btn}
+        onClick={() =>
+          loadMoreItems?.({
+            stopIndex: SCAN_COUNT_DEFAULT - 1,
+            startIndex: 0,
+          })}
+        data-testid="scan-more"
+      >
+        {withAlert && (
+          <EuiToolTip
+            content={WARNING_MESSAGE}
+            position="top"
+            display="inlineBlock"
+          >
+            <EuiIcon type="alert" />
+          </EuiToolTip>
+        )}
+        Scan more
+      </EuiButton>
+    )}
+  </>
+)
+
+export default ScanMore