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

This reverts commit 3afb1a1.

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,20 +31,4 @@ 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,8 +103,7 @@ export class KeysService {
     try {
       const client = await this.databaseClientFactory.getOrCreateClient(clientMetadata);
       const scanner = this.scanner.getStrategy(client.getConnectionType());
-      console.log('getKeysInfo', dto, client.getConnectionType(), clientMetadata);
-      const result = await scanner.getKeysInfo(client, dto.keys, dto.type, dto.getSize, dto.getTtl);
+      const result = await scanner.getKeysInfo(client, dto.keys, dto.type);
 
       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, getSize?: boolean, getTtl?: boolean): Promise<GetKeyInfoResponse[]>;
+  getKeysInfo(client: RedisClient, keys: RedisString[], type?: RedisDataType): Promise<GetKeyInfoResponse[]>;
 }

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

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

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

@@ -1,17 +1,16 @@
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/no-this-in-sfc */
-import { EuiButton, EuiButtonIcon, EuiCheckbox, EuiPopover, EuiToolTip } from '@elastic/eui'
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'
 import cx from 'classnames'
-import React, { FC, Ref, SVGProps, useRef, useState } from 'react'
+import React, { FC, Ref, SVGProps, useRef } 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, setGetSize, setGetTtl, } from 'uiSrc/slices/browser/keys'
+import { changeKeyViewType, fetchKeys, keysSelector, resetKeysData, } 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'
@@ -58,11 +57,9 @@ const KeysHeader = (props: Props) => {
   } = props
 
   const { id: instanceId } = useSelector(connectedInstanceSelector)
-  const { viewType, searchMode, isFiltered, getSize, getTtl } = useSelector(keysSelector)
+  const { viewType, searchMode, isFiltered } = useSelector(keysSelector)
   const { selectedIndex } = useSelector(redisearchSelector)
 
-  const [columnsConfigShown, setColumnsConfigShown] = useState(false)
-
   const rootDivRef: Ref<HTMLDivElement> = useRef(null)
 
   const dispatch = useDispatch()
@@ -116,8 +113,6 @@ const KeysHeader = (props: Props) => {
     height: '36px !important',
   }
 
-  const toggleColumnsConfigVisibility = () => setColumnsConfigShown(!columnsConfigShown)
-
   const handleRefreshKeys = () => {
     dispatch(fetchKeys(
       {
@@ -242,46 +237,6 @@ 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,13 +66,3 @@
   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,8 +79,6 @@ 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,
@@ -423,13 +421,7 @@ 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
-    },
+    }
   },
 })
 
@@ -480,8 +472,6 @@ export const {
   deleteSearchHistorySuccess,
   deleteSearchHistoryFailure,
   setSelectedKeyRefreshDisabled,
-  setGetSize,
-  setGetTtl,
 } = keysSlice.actions
 
 // A selector
@@ -547,7 +537,7 @@ export function fetchPatternKeysAction(
           type,
           match: match || DEFAULT_SEARCH_MATCH,
           keysInfo: false,
-          scanThreshold,
+          scanThreshold
         },
         {
           params: { encoding },
@@ -1046,18 +1036,12 @@ 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,
-          getSize,
-          getTtl
-        },
+        { keys, type: filter || undefined },
         { params: { encoding: state.app.info.encoding }, signal }
       )
 
@@ -1083,18 +1067,12 @@ 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,
-          getSize,
-          getTtl
-        },
+        { keys: keys.map(([, nameBuffer]) => nameBuffer), type: filter || undefined },
         { params: { encoding: state.app.info.encoding }, signal }
       )
 

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

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