#RI-3483 - add highlighting big keys

Author: rsergeenko

redisinsight/ui/src/pages/databaseAnalysis/components/top-keys/Table.spec.tsx

@@ -9,14 +9,14 @@ const mockedProps = mock<Props>()
 const mockData = [
   {
     name: 'name',
-    type: 'HASH',
-    memory: 1000,
-    length: 10,
+    type: 'hash',
+    memory: 10_000_000,
+    length: 100_000_000,
     ttl: 10
   },
   {
     name: 'name_1',
-    type: 'HASH',
+    type: 'hash',
     memory: 1000,
     length: null,
     ttl: -1
@@ -48,4 +48,10 @@ describe('Table', () => {
     expect(screen.getByTestId('length-empty-name_1')).toHaveTextContent('-')
     expect(screen.getByTestId('length-value-name')).toHaveTextContent('10')
   })
+
+  it('should highlight big keys', () => {
+    render(<Table {...instance(mockedProps)} data={mockData} />)
+    expect(screen.getByTestId('nsp-usedMemory-value=10000000-highlighted')).toBeInTheDocument()
+    expect(screen.getByTestId('length-value-name-highlighted')).toBeInTheDocument()
+  })
 })

redisinsight/ui/src/pages/databaseAnalysis/components/top-keys/Table.tsx

@@ -1,32 +1,46 @@
-import React, { useState } from 'react'
 import {
   EuiBasicTableColumn,
+  EuiButtonEmpty,
   EuiInMemoryTable,
   EuiTextColor,
   EuiToolTip,
-  EuiButtonEmpty,
   PropertySort
 } from '@elastic/eui'
+import cx from 'classnames'
 import { isNull } from 'lodash'
-import { useParams, useHistory } from 'react-router-dom'
+import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import cx from 'classnames'
+import { useHistory, useParams } from 'react-router-dom'
+import { GroupBadge } from 'uiSrc/components'
+import { Pages } from 'uiSrc/constants'
+import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
+import {
+  resetBrowserTree,
+  setBrowserKeyListDataLoaded,
+  setBrowserSelectedKey,
+  setBrowserTreeDelimiter
+} from 'uiSrc/slices/app/context'
+import {
+  changeSearchMode,
+  fetchKeys,
+  keysSelector,
+  resetKeysData,
+  setFilter,
+  setSearchMatch
+} from 'uiSrc/slices/browser/keys'
+import { KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys'
 
 import {
   formatBytes,
   formatLongName,
+  HighlightType,
+  isBigKey,
+  stringToBuffer,
   truncateNumberToDuration,
   truncateNumberToFirstUnit,
-  truncateTTLToSeconds,
-  stringToBuffer
+  truncateTTLToSeconds
 } from 'uiSrc/utils'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
-import { GroupBadge } from 'uiSrc/components'
-import { setFilter, setSearchMatch, resetKeysData, fetchKeys, keysSelector, changeSearchMode } from 'uiSrc/slices/browser/keys'
-import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
-import { KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys'
-import { setBrowserKeyListDataLoaded, setBrowserSelectedKey, resetBrowserTree, setBrowserTreeDelimiter } from 'uiSrc/slices/app/context'
-import { Pages } from 'uiSrc/constants'
 import { Key } from 'apiSrc/modules/database-analysis/models/key'
 
 import styles from './styles.module.scss'
@@ -54,7 +68,7 @@ const Table = (props: Props) => {
     dispatch(setBrowserTreeDelimiter(delimiter))
     dispatch(setFilter(null))
     dispatch(setSearchMatch(name, SearchMode.Pattern))
-    dispatch(resetKeysData())
+    dispatch(resetKeysData(SearchMode.Pattern))
     dispatch(fetchKeys(
       SearchMode.Pattern,
       '0',
@@ -96,7 +110,7 @@ const Table = (props: Props) => {
       truncateText: true,
       render: (name: string) => {
         const tooltipContent = formatLongName(name)
-        const cellContent = name.substring(0, 200)
+        const cellContent = (name as string).substring(0, 200)
         return (
           <div data-testid="top-keys-table-name" className={cx(styles.delimiter, 'truncateText')}>
             <EuiToolTip
@@ -159,16 +173,25 @@ const Table = (props: Props) => {
       width: '9%',
       sortable: true,
       align: 'right',
-      render: (value: number) => {
+      render: (value: number, { type }) => {
         const [number, size] = formatBytes(value, 3, true)
-
+        const isHighlight = isBigKey(type, HighlightType.Memory, value)
         return (
           <EuiToolTip
-            content={`${numberWithSpaces(value)} B`}
+            content={(
+              <>
+                {isHighlight ? (<>Consider splitting it into multiple keys<br /></>) : null}
+                {numberWithSpaces(value)} B
+              </>
+            )}
+            anchorClassName={cx({ [styles.highlight]: isHighlight })}
             data-testid="usedMemory-tooltip"
           >
             <>
-              <span className={styles.count} data-testid={`nsp-usedMemory-value=${value}`}>
+              <span
+                className={styles.count}
+                data-testid={`nsp-usedMemory-value=${value}${isHighlight ? '-highlighted' : ''}`}
+              >
                 {number}
               </span>
               <span className={styles.valueUnit}>{size}</span>
@@ -183,18 +206,26 @@ const Table = (props: Props) => {
       width: '15%',
       sortable: ({ length }) => length ?? -1,
       align: 'right',
-      render: (value: number, { name }) => {
+      render: (value: number, { name, type }) => {
         if (isNull(value)) {
           return (
             <EuiTextColor color="subdued" style={{ maxWidth: '100%' }} data-testid={`length-empty-${name}`}>
               -
             </EuiTextColor>
           )
         }
+
+        const isHighlight = isBigKey(type, HighlightType.Length, value)
         return (
-          <span className={styles.count} data-testid={`length-value-${name}`}>
-            {numberWithSpaces(value)}
-          </span>
+          <EuiToolTip
+            content={isHighlight ? 'Consider splitting it into multiple keys' : ''}
+            anchorClassName={cx({ [styles.highlight]: isHighlight })}
+            data-testid="usedMemory-tooltip"
+          >
+            <span className={styles.count} data-testid={`length-value-${name}${isHighlight ? '-highlighted' : ''}`}>
+              {numberWithSpaces(value)}
+            </span>
+          </EuiToolTip>
         )
       }
     },

redisinsight/ui/src/pages/databaseAnalysis/components/top-keys/styles.module.scss

@@ -155,6 +155,19 @@
   padding: 12px;
 }
 
+.highlight {
+  background: var(--euiColorWarningLight);
+  color: var(--euiColorEmptyShade) !important;
+  border-radius: 4px;
+  padding: 1px 8px !important;
+  display: flex !important;
+  align-items: baseline;
+
+  .count, .valueUnit {
+    color: var(--euiColorEmptyShade) !important;
+  }
+}
+
 :global(.euiTableCellContent) .delimiter span {
   cursor: pointer;
   color: var(--buttonSecondaryTextColor);

redisinsight/ui/src/utils/comparisons/bigKeys.ts

@@ -0,0 +1,37 @@
+import { KeyTypes } from 'uiSrc/constants'
+
+enum HighlightType {
+  Length = 'length',
+  Memory = 'memory'
+}
+
+interface DefaultConfig { [key: string]: number }
+
+const defaultMemoryConfig: { [key: string]: number } = {
+  memory: 5_000_000
+}
+
+const defaultConfig: { [key: string]: number } = {
+  length: 5_000,
+  memory: 5_000_000
+}
+
+const bigKeysConfig: { [key: string]: DefaultConfig } = {
+  [KeyTypes.List]: defaultConfig,
+  [KeyTypes.ZSet]: defaultConfig,
+  [KeyTypes.Set]: defaultConfig,
+  [KeyTypes.Hash]: defaultConfig,
+}
+
+const isBigKey = (keyType: string, type: HighlightType, count: number): boolean => {
+  if (!count) return false
+  if (bigKeysConfig[keyType]?.[type]) return count >= bigKeysConfig[keyType][type]
+  if (defaultMemoryConfig[type]) return count >= defaultMemoryConfig[type]
+
+  return false
+}
+
+export {
+  HighlightType,
+  isBigKey
+}

redisinsight/ui/src/utils/comparisons/index.ts

@@ -1,3 +1,4 @@
 export * from './getDiffKeysOfObjectValues'
 export * from './compareVersions'
 export * from './compareConsents'
+export * from './bigKeys'

redisinsight/ui/src/utils/tests/comparisons/bigKeys.spec.ts

@@ -0,0 +1,23 @@
+import { KeyTypes } from 'uiSrc/constants'
+import { HighlightType, isBigKey } from 'uiSrc/utils'
+
+const isBigKeyTests: any[] = [
+  [KeyTypes.Hash, HighlightType.Memory, 100, false],
+  [KeyTypes.Hash, HighlightType.Memory, 5_000_000, true],
+  [KeyTypes.Hash, HighlightType.Length, 50_000_000, true],
+  [KeyTypes.String, HighlightType.Memory, 50_000_000, true],
+  [KeyTypes.String, HighlightType.Length, 50_000_000, false],
+  [KeyTypes.Stream, HighlightType.Memory, 50_000_000, true],
+  [KeyTypes.Stream, HighlightType.Length, 50_000_000, false],
+  [KeyTypes.Stream, HighlightType.Memory, 199, false],
+  ['newType', HighlightType.Memory, 98391283123123, true],
+  ['newType', HighlightType.Length, 98391283123123, false],
+]
+
+describe('isBigKey', () => {
+  it.each(isBigKeyTests)('for input: %s (keyType), %s (type), %s (count) should be output: %s',
+    (keyType, type, count, expected) => {
+      const result = isBigKey(keyType, type, count)
+      expect(result).toBe(expected)
+    })
+})