#RI-781 - Tree view

babel.config.js

@@ -48,6 +48,8 @@ module.exports = (api) => {
       require('@babel/plugin-syntax-import-meta'),
       [require('@babel/plugin-proposal-class-properties'), { loose: true }],
       require('@babel/plugin-proposal-json-strings'),
+      [require('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
+      [require('@babel/plugin-proposal-private-methods'), { loose: true }],
 
       ...(development ? developmentPlugins : productionPlugins),
     ],

configs/webpack.config.renderer.dev.babel.js

@@ -209,6 +209,7 @@ export default merge(baseConfig, {
       BASE_API_URL: 'http://localhost',
       RESOURCES_BASE_URL: 'http://localhost',
       SCAN_COUNT_DEFAULT: '500',
+      SCAN_TREE_COUNT_DEFAULT: '10000',
       BUILD_TYPE: 'ELECTRON',
       APP_VERSION: version,
       SEGMENT_WRITE_KEY:

configs/webpack.config.renderer.dev.dll.babel.js

@@ -51,6 +51,7 @@ export default merge(baseConfig, {
       BASE_API_URL: 'http://localhost',
       RESOURCES_BASE_URL: 'http://localhost',
       SCAN_COUNT_DEFAULT: '500',
+      SCAN_TREE_COUNT_DEFAULT: '10000',
       SEGMENT_WRITE_KEY:
         'SEGMENT_WRITE_KEY' in process.env ? process.env.SEGMENT_WRITE_KEY : 'SOURCE_WRITE_KEY',
     }),

configs/webpack.config.renderer.prod.babel.js

@@ -197,6 +197,7 @@ export default merge(baseConfig, {
       RESOURCES_BASE_URL: process.env.SERVER_TLS_CERT && process.env.SERVER_TLS_KEY ? 'https://localhost' : 'http://localhost',
       APP_ENV: 'electron',
       SCAN_COUNT_DEFAULT: '500',
+      SCAN_TREE_COUNT_DEFAULT: '10000',
       SEGMENT_WRITE_KEY:
         'SEGMENT_WRITE_KEY' in process.env ? process.env.SEGMENT_WRITE_KEY : 'SOURCE_WRITE_KEY',
     }),

configs/webpack.config.renderer.stage.babel.js

@@ -20,6 +20,7 @@ export default merge(baseConfig, {
       RESOURCES_BASE_URL: process.env.SERVER_TLS_CERT && process.env.SERVER_TLS_KEY ? 'https://localhost' : 'http://localhost',
       APP_ENV: 'electron',
       SCAN_COUNT_DEFAULT: '500',
+      SCAN_COUNT_MEMORY_ANALYSES: '10000',
       SEGMENT_WRITE_KEY:
         'SEGMENT_WRITE_KEY' in process.env ? process.env.SEGMENT_WRITE_KEY : 'SOURCE_WRITE_KEY',
     }),

configs/webpack.config.web.dev.babel.js

@@ -183,10 +183,11 @@ export default merge(commonConfig, {
       NODE_ENV: 'development',
       APP_ENV: 'web',
       API_PREFIX: 'api',
-      API_PORT: '5000',
+      API_PORT: '5001',
       BASE_API_URL: `http://${require('os').hostname()}`,
       RESOURCES_BASE_URL: `http://${require('os').hostname()}`,
       SCAN_COUNT_DEFAULT: '500',
+      SCAN_TREE_COUNT_DEFAULT: '10000',
       SEGMENT_WRITE_KEY:
         'SEGMENT_WRITE_KEY' in process.env ? process.env.SEGMENT_WRITE_KEY : 'SOURCE_WRITE_KEY',
     }),

configs/webpack.config.web.prod.babel.js

@@ -46,12 +46,13 @@ export default merge(commonConfig, {
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'production',
       APP_ENV: 'web',
-      API_PORT: '5000',
+      API_PORT: '5001',
       API_PREFIX: '',
       BASE_API_URL: 'api/',
       RESOURCES_BASE_URL:
         process.env.SERVER_TLS_CERT && process.env.SERVER_TLS_KEY ? 'https://localhost' : 'http://localhost',
       SCAN_COUNT_DEFAULT: '500',
+      SCAN_TREE_COUNT_DEFAULT: '10000',
       SEGMENT_WRITE_KEY:
         'SEGMENT_WRITE_KEY' in process.env ? process.env.SEGMENT_WRITE_KEY : 'SOURCE_WRITE_KEY',
     }),

package.json

@@ -134,7 +134,6 @@
     "@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
-    "@testing-library/react-hooks": "^5.0.3",
     "@types/axios": "^0.14.0",
     "@types/classnames": "^2.2.11",
     "@types/date-fns": "^2.6.0",
@@ -253,6 +252,9 @@
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-virtualized": "^9.22.2",
+    "react-virtualized-auto-sizer": "^1.0.6",
+    "react-vtree": "^3.0.0-beta.3",
+    "react-window": "^1.8.6",
     "rehype-stringify": "^9.0.2",
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.1",

redisinsight/ui/src/components/group-badge/GroupBadge.tsx

@@ -15,7 +15,7 @@ const GroupBadge = ({ type, name = '', className = '' }: Props) => (
     data-testid={`badge-${type} ${name}`}
   >
     <EuiText style={{ color: 'var(--euiTextSubduedColorHover)' }} className="text-uppercase" size="xs">
-      {type ? (GROUP_TYPES_DISPLAY as any)[type] ?? type.replace(/_/g, ' ') : ''}
+      {type ? (GROUP_TYPES_DISPLAY as any)[type] ?? type?.replace(/_/g, ' ') : ''}
     </EuiText>
   </EuiBadge>
 )

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render } from 'uiSrc/utils/test-utils'
+import KeysSummary, { Props } from './KeysSummary'
+
+const mockedProps = mock<Props>()
+
+describe('KeysSummary', () => {
+  it('should render', () => {
+    expect(render(<KeysSummary {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should "Scanning..." be in the document until loading and totalItemsCount == 0 ', () => {
+    const { queryByTestId } = render(
+      <KeysSummary {...instance(mockedProps)} loading totalItemsCount={0} />
+    )
+    expect(queryByTestId('scanning-text')).toBeInTheDocument()
+  })
+
+  it('should Keys summary be in the document meanwhile totalItemsCount != 0 ', () => {
+    const { queryByTestId } = render(
+      <KeysSummary {...instance(mockedProps)} totalItemsCount={2} />
+    )
+    expect(queryByTestId('keys-summary')).toBeInTheDocument()
+  })
+})

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

@@ -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} data-testid="keys-summary">
+        {!!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" data-testid="scanning-text">
+        Scanning...
+      </EuiText>
+    )}
+  </>
+)
+
+export default KeysSummary

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

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

redisinsight/ui/src/components/keys-summary/styles.module.scss

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

redisinsight/ui/src/components/main-router/interfaces.ts

@@ -1,50 +1,3 @@
-import { KeyTypes, UnsupportedKeyTypes } from 'uiSrc/constants'
-import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
-import { Maybe, Nullable } from 'uiSrc/utils'
-
 export interface RouteParams {
   instanceId: string;
 }
-
-export interface Key {
-  name: string;
-  type: KeyTypes;
-  ttl: number;
-  size: number;
-}
-
-export interface KeysStore {
-  loading: boolean;
-  error: string;
-  search: string;
-  filter: Nullable<KeyTypes | UnsupportedKeyTypes>;
-  isFiltered: boolean;
-  isSearched: boolean;
-  data: {
-    total: number;
-    scanned: number;
-    nextCursor: string;
-    keys: Key[];
-    shardsMeta: Record<string, {
-      cursor: number;
-      scanned: number;
-      total: number;
-      host?: string;
-      port?: number;
-    }>;
-    previousResultCount: number;
-    lastRefreshTime: Nullable<number>;
-  };
-  selectedKey: {
-    loading: boolean;
-    refreshing: boolean;
-    lastRefreshTime: Nullable<number>;
-    error: string;
-    data: Nullable<IKeyPropTypes>;
-    length: Maybe<number>;
-  };
-  addKey: {
-    loading: boolean;
-    error: string;
-  };
-}

redisinsight/ui/src/components/scan-more/ScanMore.spec.tsx

@@ -0,0 +1,40 @@
+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 "loadMoreItems"', () => {
+    const handleClick = jest.fn()
+
+    const renderer = render(
+      <ScanMore {...instance(mockedProps)} loadMoreItems={handleClick} totalItemsCount={1} />
+    )
+
+    expect(renderer).toBeTruthy()
+
+    fireEvent.click(screen.getByTestId('scan-more'))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('should button be hidden when totalItemsCount < scanned ', () => {
+    const { queryByTestId } = render(
+      <ScanMore {...instance(mockedProps)} scanned={2} totalItemsCount={1} />
+    )
+
+    expect(queryByTestId('scan-more')).not.toBeInTheDocument()
+  })
+  it('should button be shown when totalItemsCount > scanned ', () => {
+    const { queryByTestId } = render(
+      <ScanMore {...instance(mockedProps)} scanned={1} totalItemsCount={2} />
+    )
+
+    expect(queryByTestId('scan-more')).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/components/scan-more/ScanMore.tsx

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