RI-6336 - Allow to hide/show columns in Browser - basic functional implementation

Author: KIvanow

redisinsight/api/src/modules/browser/keys/dto/get.keys-info.dto.ts

@@ -4,7 +4,7 @@ import { IsRedisString, RedisStringType } from 'src/common/decorators';
 import { RedisString } from 'src/common/constants';
 import { KeyDto, RedisDataType } from './key.dto';
 
-export class GetKeyInfoDto extends KeyDto {}
+export class GetKeyInfoDto extends KeyDto { }
 
 export class GetKeysInfoDto {
   @ApiProperty({
@@ -31,4 +31,20 @@ export class GetKeysInfoDto {
   })
   @IsOptional()
   type?: RedisDataType;
+
+  @ApiPropertyOptional({
+    description: 'Flag to determine if keys should be requested and shown in the response',
+    type: Boolean,
+    default: true,
+  })
+  @IsOptional()
+  getSize?: boolean;
+
+  @ApiPropertyOptional({
+    description: 'Flag to determine if TTL should be requested and shown in the response',
+    type: Boolean,
+    default: true,
+  })
+  @IsOptional()
+  getTtl?: boolean;
 }

redisinsight/api/src/modules/browser/keys/keys.service.ts

@@ -41,7 +41,7 @@ export class KeysService {
     private readonly keyInfoProvider: KeyInfoProvider,
     private readonly browserHistory: BrowserHistoryService,
     private readonly recommendationService: DatabaseRecommendationService,
-  ) {}
+  ) { }
 
   public async getKeys(
     clientMetadata: ClientMetadata,
@@ -103,7 +103,8 @@ export class KeysService {
     try {
       const client = await this.databaseClientFactory.getOrCreateClient(clientMetadata);
       const scanner = this.scanner.getStrategy(client.getConnectionType());
-      const result = await scanner.getKeysInfo(client, dto.keys, dto.type);
+      console.log('getKeysInfo', dto, client.getConnectionType(), clientMetadata);
+      const result = await scanner.getKeysInfo(client, dto.keys, dto.type, dto.getSize, dto.getTtl);
 
       this.recommendationService.check(
         clientMetadata,

redisinsight/api/src/modules/browser/keys/scanner/scanner.interface.ts

@@ -31,5 +31,5 @@ export interface IScannerStrategy {
    */
   getKeys(client: RedisClient, args: IScannerGetKeysArgs): Promise<IScannerNodeKeys[]>;
 
-  getKeysInfo(client: RedisClient, keys: RedisString[], type?: RedisDataType): Promise<GetKeyInfoResponse[]>;
+  getKeysInfo(client: RedisClient, keys: RedisString[], type?: RedisDataType, getSize?: boolean, getTtl?: boolean): Promise<GetKeyInfoResponse[]>;
 }

redisinsight/api/src/modules/browser/keys/scanner/strategies/scanner.strategy.ts

@@ -16,5 +16,7 @@ export abstract class ScannerStrategy implements IScannerStrategy {
     client: RedisClient,
     keys: RedisString[],
     filterType?: RedisDataType,
+    getSize?: boolean,
+    getTtl?: boolean,
   ): Promise<GetKeyInfoResponse[]>;
 }

redisinsight/api/src/modules/browser/keys/scanner/strategies/standalone.scanner.strategy.ts

@@ -162,19 +162,33 @@ export class StandaloneScannerStrategy extends ScannerStrategy {
     client: RedisClient,
     keys: RedisString[],
     filterType?: RedisDataType,
+    getSize?: boolean,
+    getTtl?: boolean,
   ): Promise<GetKeyInfoResponse[]> {
-    const sizeResults = await this.getKeysSize(client, keys);
+    console.log('getKeysInfo', keys, filterType, getSize, getTtl);
+    const sizeResults = getSize ? await this.getKeysSize(client, keys) : [];
     const typeResults = filterType
       ? Array(keys.length).fill(filterType)
       : await this.getKeysType(client, keys);
-    const ttlResults = await this.getKeysTtl(client, keys);
+    const ttlResults = getTtl ? await this.getKeysTtl(client, keys) : [];
+    console.log('sizeResults', sizeResults);
+    console.log('typeResults', typeResults);
+    console.log('ttlResults', ttlResults);
     return keys.map(
-      (key: string, index: number): GetKeyInfoResponse => ({
-        name: key,
-        type: typeResults[index],
-        ttl: ttlResults[index],
-        size: sizeResults[index],
-      }),
+      (key: string, index: number): GetKeyInfoResponse => {
+        const data: GetKeyInfoResponse = {
+          name: key,
+          type: typeResults[index],
+        }
+        console.log('data bgetTtl', getTtl);
+        if (getTtl) {
+          data.ttl = ttlResults[index];
+        }
+        if (getSize) {
+          data.size = sizeResults[index];
+        }
+        return data;
+      },
     );
   }
 }

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

@@ -1,16 +1,17 @@
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/no-this-in-sfc */
-import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'
+import { EuiButton, EuiButtonIcon, EuiCheckbox, EuiPopover, EuiToolTip } from '@elastic/eui'
 import cx from 'classnames'
-import React, { FC, Ref, SVGProps, useRef } from 'react'
+import React, { FC, Ref, SVGProps, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import AutoSizer from 'react-virtualized-auto-sizer'
+import ColumnsIcon from 'uiSrc/assets/img/icons/columns.svg?react'
 import TreeViewIcon from 'uiSrc/assets/img/icons/treeview.svg?react'
 import KeysSummary from 'uiSrc/components/keys-summary'
 import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { resetBrowserTree, setBrowserKeyListDataLoaded, } from 'uiSrc/slices/app/context'
 
-import { changeKeyViewType, fetchKeys, keysSelector, resetKeysData, } from 'uiSrc/slices/browser/keys'
+import { changeKeyViewType, fetchKeys, keysSelector, resetKeysData, setGetSize, setGetTtl, } from 'uiSrc/slices/browser/keys'
 import { redisearchSelector } from 'uiSrc/slices/browser/redisearch'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { KeysStoreData, KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys'
@@ -57,9 +58,11 @@ const KeysHeader = (props: Props) => {
   } = props
 
   const { id: instanceId } = useSelector(connectedInstanceSelector)
-  const { viewType, searchMode, isFiltered } = useSelector(keysSelector)
+  const { viewType, searchMode, isFiltered, getSize, getTtl } = useSelector(keysSelector)
   const { selectedIndex } = useSelector(redisearchSelector)
 
+  const [columnsConfigShown, setColumnsConfigShown] = useState(false)
+
   const rootDivRef: Ref<HTMLDivElement> = useRef(null)
 
   const dispatch = useDispatch()
@@ -113,6 +116,8 @@ const KeysHeader = (props: Props) => {
     height: '36px !important',
   }
 
+  const toggleColumnsConfigVisibility = () => setColumnsConfigShown(!columnsConfigShown)
+
   const handleRefreshKeys = () => {
     dispatch(fetchKeys(
       {
@@ -237,6 +242,46 @@ const KeysHeader = (props: Props) => {
                   onChangeAutoRefreshRate={handleChangeAutoRefreshRate}
                   testid="keys"
                 />
+                <div className={styles.columnsButtonPopup}>
+                  <EuiPopover
+                    ownFocus={false}
+                    anchorPosition="downLeft"
+                    isOpen={columnsConfigShown}
+                    anchorClassName={styles.anchorWrapper}
+                    panelClassName={styles.popoverWrapper}
+                    closePopover={() => setColumnsConfigShown(false)}
+                    button={(
+                      <EuiButton
+                        size="s"
+                        color="secondary"
+                        iconType={ColumnsIcon}
+                        onClick={toggleColumnsConfigVisibility}
+                        className={styles.columnsButton}
+                        data-testid="btn-columns-actions"
+                        aria-label="columns"
+                      >
+                        <span className={styles.columnsButtonText}>Columns</span>
+                      </EuiButton>
+                    )}
+                  >
+                    <EuiCheckbox
+                      id="show-key-size"
+                      name="show-key-size"
+                      label="Key size"
+                      checked={getSize}
+                      onChange={(e) => dispatch(setGetSize(e.target.checked))}
+                      data-testid="show-key-size"
+                    />
+                    <EuiCheckbox
+                      id="show-ttl"
+                      name="show-ttl"
+                      label="TTL"
+                      checked={getTtl}
+                      onChange={(e) => dispatch(setGetTtl(e.target.checked))}
+                      data-testid="show-ttl"
+                    />
+                  </EuiPopover>
+                </div>
                 {ViewSwitch()}
               </div>
             </div>

redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx

@@ -66,3 +66,13 @@
   align-items: center;
   margin: 4px 4px 4px auto;
 }
+
+.columnsButton {
+  padding: 4px 6px 4px 4px;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.columnsButtonPopup {
+  margin-left: 20px;
+}

redisinsight/ui/src/pages/browser/components/keys-header/styles.module.scss

@@ -79,6 +79,8 @@ export const initialState: KeysStore = {
   isBrowserFullScreen: false,
   searchMode: localStorageService?.get(BrowserStorageItem.browserSearchMode) ?? SearchMode.Pattern,
   viewType: localStorageService?.get(BrowserStorageItem.browserViewType) ?? KeyViewType.Browser,
+  getSize: true,
+  getTtl: true,
   data: {
     total: 0,
     scanned: 0,
@@ -421,7 +423,13 @@ const keysSlice = createSlice({
     },
     setSelectedKeyRefreshDisabled: (state, { payload }: PayloadAction<boolean>) => {
       state.selectedKey.isRefreshDisabled = payload
-    }
+    },
+    setGetSize: (state, { payload }: PayloadAction<boolean>) => {
+      state.getSize = payload
+    },
+    setGetTtl: (state, { payload }: PayloadAction<boolean>) => {
+      state.getTtl = payload
+    },
   },
 })
 
@@ -472,6 +480,8 @@ export const {
   deleteSearchHistorySuccess,
   deleteSearchHistoryFailure,
   setSelectedKeyRefreshDisabled,
+  setGetSize,
+  setGetTtl,
 } = keysSlice.actions
 
 // A selector
@@ -537,7 +547,7 @@ export function fetchPatternKeysAction(
           type,
           match: match || DEFAULT_SEARCH_MATCH,
           keysInfo: false,
-          scanThreshold
+          scanThreshold,
         },
         {
           params: { encoding },
@@ -1036,12 +1046,18 @@ export function fetchKeysMetadata(
   return async (_dispatch: AppDispatch, stateInit: () => RootState) => {
     try {
       const state = stateInit()
+      const { getSize, getTtl } = state.browser.keys
       const { data } = await apiService.post<GetKeyInfoResponse[]>(
         getUrl(
           state.connections.instances?.connectedInstance?.id,
           ApiEndpoints.KEYS_METADATA
         ),
-        { keys, type: filter || undefined },
+        {
+          keys,
+          type: filter || undefined,
+          getSize,
+          getTtl
+        },
         { params: { encoding: state.app.info.encoding }, signal }
       )
 
@@ -1067,12 +1083,18 @@ export function fetchKeysMetadataTree(
   return async (_dispatch: AppDispatch, stateInit: () => RootState) => {
     try {
       const state = stateInit()
+      const { getSize, getTtl } = state.browser.keys
       const { data } = await apiService.post<GetKeyInfoResponse[]>(
         getUrl(
           state.connections.instances?.connectedInstance?.id,
           ApiEndpoints.KEYS_METADATA
         ),
-        { keys: keys.map(([, nameBuffer]) => nameBuffer), type: filter || undefined },
+        {
+          keys: keys.map(([, nameBuffer]) => nameBuffer),
+          type: filter || undefined,
+          getSize,
+          getTtl
+        },
         { params: { encoding: state.app.info.encoding }, signal }
       )
 

redisinsight/ui/src/slices/browser/keys.ts

@@ -52,6 +52,8 @@ export interface KeysStore {
     data: null | Array<SearchHistoryItem>
     loading: boolean
   }
+  getSize: boolean
+  getTtl: boolean
 }
 
 export interface SearchHistoryItem {