Merge pull request #1602 from RedisInsight/fe/feature/RI-3997_Display_indexes_in_Workbench_and_Analytics

egor-zalenski · web-flow · commit 21ea3baaba2e · 2023-01-17T19:38:55.000+08:00
#RI-3997 - [FE] Display db indexes in Workbench and Database analysis
diff --git a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx
@@ -22,6 +22,7 @@ import { sessionStorageService } from 'uiSrc/services'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { outputSelector, resetOutputLoading } from 'uiSrc/slices/cli/cli-output'
+import { getDbIndex } from 'uiSrc/utils'
 
 import styles from './styles.module.scss'
 
@@ -32,7 +33,7 @@ const CliHeader = () => {
 
   const { host, port } = useSelector(connectedInstanceSelector)
   const { db } = useSelector(outputSelector)
-  const endpoint = db > 0 ? `${host}:${port}[${db}]` : `${host}:${port}`
+  const endpoint = `${host}:${port}${getDbIndex(db)}`
 
   const removeCliClient = () => {
     const cliClientUuid = sessionStorageService.get(BrowserStorageItem.cliClientUuid) ?? ''
diff --git a/redisinsight/ui/src/components/cli/components/cli-input/CliInput/CliInput.spec.tsx b/redisinsight/ui/src/components/cli/components/cli-input/CliInput/CliInput.spec.tsx
@@ -23,7 +23,7 @@ describe('CliInput', () => {
     const dbIndexEl = queryByTestId('cli-db-index')
 
     expect(dbIndexEl).toBeInTheDocument()
-    expect(dbIndexEl).toHaveTextContent('[1]')
+    expect(dbIndexEl).toHaveTextContent('[db1]')
   })
 
   it('should not render db index if it is 0', () => {
diff --git a/redisinsight/ui/src/components/cli/components/cli-input/CliInput/CliInput.tsx b/redisinsight/ui/src/components/cli/components/cli-input/CliInput/CliInput.tsx
@@ -3,6 +3,7 @@ import { ContentEditableEvent } from 'react-contenteditable'
 
 import { ContentEditable } from 'uiSrc/components'
 import { parseContentEditableChangeHtml } from 'uiSrc/components/ContentEditable'
+import { getDbIndex } from 'uiSrc/utils'
 
 import styles from './styles.module.scss'
 
@@ -28,7 +29,7 @@ const CliInput = (props: Props) => {
   return (
     <>
       <span>
-        {dbIndex !== 0 && <span data-testid="cli-db-index">{`[${dbIndex}] `}</span>}
+        {dbIndex !== 0 && <span data-testid="cli-db-index">{`${getDbIndex(dbIndex)} `}</span>}
         &gt;&nbsp;
       </span>
       <ContentEditable
diff --git a/redisinsight/ui/src/components/query-card/QueryCard.tsx b/redisinsight/ui/src/components/query-card/QueryCard.tsx
@@ -40,6 +40,7 @@ export interface Props {
   loading?: boolean
   isNotStored?: boolean
   executionTime?: number
+  db?: number
   onQueryDelete: () => void
   onQueryReRun: () => void
   onQueryOpen: () => void
@@ -79,6 +80,7 @@ const QueryCard = (props: Props) => {
     emptyCommand,
     isNotStored,
     executionTime,
+    db,
   } = props
 
   const { visualizations = [] } = useSelector(appPluginsSelector)
@@ -178,6 +180,7 @@ const QueryCard = (props: Props) => {
           summary={summary}
           summaryText={getSummaryText(summary, resultsMode)}
           executionTime={executionTime}
+          db={db}
           toggleOpen={toggleOpen}
           toggleFullScreen={toggleFullScreen}
           setSelectedValue={changeViewTypeSelected}
@@ -194,6 +197,7 @@ const QueryCard = (props: Props) => {
                     <QueryCardCliResultWrapper
                       loading={loading}
                       query={command}
+                      db={db}
                       resultsMode={resultsMode}
                       result={result}
                       isNotStored={isNotStored}
diff --git a/redisinsight/ui/src/components/query-card/QueryCardCliGroupResult/QueryCardCliGroupResult.tsx b/redisinsight/ui/src/components/query-card/QueryCardCliGroupResult/QueryCardCliGroupResult.tsx
@@ -9,10 +9,11 @@ import { CommonErrorResponse } from '../QueryCardCommonResult'
 export interface Props {
   result?: Maybe<CommandExecutionResult[]>
   isFullScreen?: boolean
+  db?: number
 }
 
 const QueryCardCliGroupResult = (props: Props) => {
-  const { result = [], isFullScreen } = props
+  const { result = [], isFullScreen, db } = props
 
   return (
     <div data-testid="query-cli-default-result" className="query-card-output-response-success">
@@ -23,7 +24,7 @@ const QueryCardCliGroupResult = (props: Props) => {
           if (React.isValidElement(commonError)) {
             return ([wbSummaryCommand(item.command), commonError])
           }
-          return flatten(cliParseCommandsGroupResult(item))
+          return flatten(cliParseCommandsGroupResult(item, db))
         }))}
       />
     </div>
diff --git a/redisinsight/ui/src/components/query-card/QueryCardCliResultWrapper/QueryCardCliResultWrapper.tsx b/redisinsight/ui/src/components/query-card/QueryCardCliResultWrapper/QueryCardCliResultWrapper.tsx
@@ -20,10 +20,11 @@ export interface Props {
   resultsMode?: ResultsMode
   isNotStored?: boolean
   isFullScreen?: boolean
+  db?: number
 }
 
 const QueryCardCliResultWrapper = (props: Props) => {
-  const { result = [], query, loading, resultsMode, isNotStored, isFullScreen } = props
+  const { result = [], query, loading, resultsMode, isNotStored, isFullScreen, db } = props
 
   return (
     <div className={cx('queryResultsContainer', styles.container)}>
@@ -36,7 +37,7 @@ const QueryCardCliResultWrapper = (props: Props) => {
             </EuiText>
           )}
           {isGroupResults(resultsMode) && isArray(result[0]?.response)
-            ? <QueryCardCliGroupResult result={result} isFullScreen={isFullScreen} />
+            ? <QueryCardCliGroupResult result={result} isFullScreen={isFullScreen} db={db} />
             : (
               <QueryCardCliDefaultResult
                 isFullScreen={isFullScreen}
diff --git a/redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx b/redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx
@@ -64,6 +64,7 @@ export interface Props {
   loading?: boolean
   executionTime?: number
   emptyCommand?: boolean
+  db?: number
   toggleOpen: () => void
   toggleFullScreen: () => void
   setSelectedValue: (type: WBQueryType, value: string) => void
@@ -108,6 +109,7 @@ const QueryCardHeader = (props: Props) => {
     setSelectedValue,
     onQueryDelete,
     onQueryReRun,
+    db,
   } = props
 
   const { visualizations = [] } = useSelector(appPluginsSelector)
@@ -267,7 +269,7 @@ const QueryCardHeader = (props: Props) => {
         >
           <div className="copy-btn-wrapper">
             <EuiTextColor className={styles.title} color="subdued" component="div" data-testid="query-card-command">
-              <QueryCardTooltip query={query} summary={summaryText} />
+              <QueryCardTooltip query={query} summary={summaryText} db={db} resultsMode={resultsMode} />
             </EuiTextColor>
             <EuiButtonIcon
               iconType="copy"
diff --git a/redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.spec.tsx b/redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.spec.tsx
@@ -11,6 +11,14 @@ describe('QueryCardTooltip', () => {
     expect(render(<QueryCardTooltip {...instance(mockedProps)} />)).toBeTruthy()
   })
 
+  it('should show db index', () => {
+    const { queryByTestId } = render(
+      <QueryCardTooltip {...instance(mockedProps)} query={null} summary={null} db={2} />
+    )
+
+    expect(queryByTestId('query-card-tooltip-anchor')).toHaveTextContent('[db2]')
+  })
+
   it(`should show ${EMPTY_COMMAND} if command=null and summary=`, () => {
     const { queryByTestId } = render(
       <QueryCardTooltip {...instance(mockedProps)} query={null} summary={null} />
diff --git a/redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.tsx b/redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.tsx
@@ -3,14 +3,17 @@ import { EuiToolTip } from '@elastic/eui'
 import { take } from 'lodash'
 import cx from 'classnames'
 
-import { Nullable, truncateText } from 'uiSrc/utils'
+import { Nullable, getDbIndex, isGroupResults, truncateText } from 'uiSrc/utils'
 import { EMPTY_COMMAND } from 'uiSrc/constants'
+import { ResultsMode } from 'uiSrc/slices/interfaces'
 import styles from './styles.module.scss'
 
 export interface Props {
   query: Nullable<string>
   summary?: Nullable<string>
   maxLinesNumber?: number
+  resultsMode?: ResultsMode
+  db?: number
 }
 
 interface IQueryLine {
@@ -20,7 +23,8 @@ interface IQueryLine {
 }
 
 const QueryCardTooltip = (props: Props) => {
-  const { query = '', maxLinesNumber = 20, summary = '' } = props
+  const { query = '', maxLinesNumber = 20, summary = '', resultsMode, db } = props
+  const command = summary || query || EMPTY_COMMAND
 
   let queryLines: IQueryLine[] = (query || EMPTY_COMMAND).split('\n')
     .map((query: string, i) => ({
@@ -39,13 +43,14 @@ const QueryCardTooltip = (props: Props) => {
   const contentItems = queryLines
     .map((item: IQueryLine) => {
       const { value, index, isFolding } = item
-      return !isMultilineCommand ? <span key={index}>{value}</span> : (
+      const command = `${getDbIndex(db)} ${value}`
+      return !isMultilineCommand ? <span key={index}>{command}</span> : (
         <pre
           key={index}
           className={cx(styles.queryLine, styles.queryMultiLine, { [styles.queryLineFolding]: isFolding })}
         >
           <div className={styles.queryLineNumber}>{`${index + 1}`}</div>
-          <span>{value}</span>
+          <span>{command}</span>
         </pre>
       )
     })
@@ -57,7 +62,9 @@ const QueryCardTooltip = (props: Props) => {
       content={<>{contentItems}</>}
       position="bottom"
     >
-      <span data-testid="query-card-tooltip-anchor">{summary || query || EMPTY_COMMAND}</span>
+      <span data-testid="query-card-tooltip-anchor">
+        {`${!isGroupResults(resultsMode) ? getDbIndex(db) : ''} ${command}`}
+      </span>
     </EuiToolTip>
   )
 }
diff --git a/redisinsight/ui/src/constants/cliOutput.tsx b/redisinsight/ui/src/constants/cliOutput.tsx
@@ -1,6 +1,7 @@
 import { EuiLink, EuiTextColor } from '@elastic/eui'
 import React, { Fragment } from 'react'
 import { getRouterLinkProps } from 'uiSrc/services'
+import { getDbIndex } from 'uiSrc/utils'
 
 export const ClearCommand = 'clear'
 export const SelectCommand = 'select'
@@ -38,8 +39,7 @@ export const InitOutputText = (
   '\n\n',
   'Pinging Redis server on ',
   <EuiTextColor color="default" key={Math.random()}>
-    {`${host}:${port}`}
-    {dbIndex > 0 && `[${dbIndex}]`}
+    {`${host}:${port}${getDbIndex(dbIndex)}`}
   </EuiTextColor>,
 ]
 
diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.tsx
@@ -21,7 +21,7 @@ import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import AnalyticsTabs from 'uiSrc/components/analytics-tabs'
-import { Nullable } from 'uiSrc/utils'
+import { Nullable, getDbIndex } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { ShortDatabaseAnalysis } from 'apiSrc/modules/database-analysis/models'
 import { AnalysisProgress } from 'apiSrc/modules/database-analysis/models/analysis-progress'
@@ -57,11 +57,13 @@ const Header = (props: Props) => {
   const { treeViewDelimiter: delimiter = '' } = useSelector(appContextDbConfig)
 
   const analysisOptions: EuiSuperSelectOption<any>[] = items.map((item) => {
-    const { createdAt, id } = item
+    const { createdAt, id, db } = item
     return {
       value: id,
       inputDisplay: (
-        <span>{format(new Date(createdAt ?? ''), dateFormat)}</span>
+        <span>
+          {`${getDbIndex(db)} ${format(new Date(createdAt ?? ''), dateFormat)}`}
+        </span>
       ),
       'data-test-subj': `items-report-${id}`,
     }
diff --git a/redisinsight/ui/src/pages/home/components/DatabaseAlias/DatabaseAlias.tsx b/redisinsight/ui/src/pages/home/components/DatabaseAlias/DatabaseAlias.tsx
@@ -12,9 +12,10 @@ import {
 } from '@elastic/eui'
 import cx from 'classnames'
 import { useSelector } from 'react-redux'
+import { toNumber } from 'lodash'
 import { BuildType } from 'uiSrc/constants/env'
 import { appInfoSelector } from 'uiSrc/slices/app/info'
-import { Nullable } from 'uiSrc/utils'
+import { Nullable, getDbIndex } from 'uiSrc/utils'
 import { Theme } from 'uiSrc/constants'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import InlineItemEditor from 'uiSrc/components/inline-item-editor/InlineItemEditor'
@@ -177,7 +178,7 @@ const DatabaseAlias = (props: Props) => {
                     {!isCloneMode && (<span className={cx(styles.aliasTextEditing)}>{alias}</span>)}
                   </b>
                   <b>
-                    {database ? `[${database}]` : ''}
+                    {getDbIndex(toNumber(database))}
                   </b>
                   {!isCloneMode && (<EuiIcon type="pencil" className={cx(styles.aliasEditIcon)} />)}
                 </EuiText>
diff --git a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx
@@ -65,6 +65,7 @@ const WBResults = (props: Props) => {
           emptyCommand,
           isNotStored,
           executionTime,
+          db,
         }
       ) => (
         <QueryCard
@@ -83,6 +84,7 @@ const WBResults = (props: Props) => {
           mode={mode}
           activeResultsMode={activeResultsMode}
           resultsMode={resultsMode}
+          db={db}
           onQueryOpen={() => onQueryOpen(id)}
           onQueryReRun={() => onQueryReRun(
             command,
diff --git a/redisinsight/ui/src/utils/cliHelper.tsx b/redisinsight/ui/src/utils/cliHelper.tsx
@@ -13,6 +13,7 @@ import { ClusterNode, RedisDefaultModules, REDISEARCH_MODULES } from 'uiSrc/slic
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 import { Nullable } from './types'
 import formatToText from './transformers/cliTextFormatter'
+import { getDbIndex } from './longNames'
 
 export enum CliPrefix {
   Cli = 'cli',
@@ -71,20 +72,20 @@ const cliParseTextResponse = (
 
 const cliCommandOutput = (command: string, dbIndex = 0) => ['\n', bashTextValue(dbIndex), cliCommandWrapper(command), '\n']
 
-const bashTextValue = (dbIndex = 0) => (dbIndex > 0 ? `[${dbIndex}] > ` : '> ')
+const bashTextValue = (dbIndex = 0) => `${getDbIndex(dbIndex)} > `
 
 const cliCommandWrapper = (command: string) => (
   <span className="cli-command-wrapper" data-testid="cli-command-wrapper" key={Math.random()}>
     {command}
   </span>
 )
 
-const wbSummaryCommand = (command: string) => (
+const wbSummaryCommand = (command: string, db?: number) => (
   <span
     className="cli-command-wrapper"
     data-testid="wb-command"
   >
-    {`> ${command} \n`}
+    {`${getDbIndex(db)} > ${command} \n`}
   </span>
 )
 
@@ -93,9 +94,10 @@ const clearOutput = (dispatch: any) => {
 }
 
 const cliParseCommandsGroupResult = (
-  result: IGroupModeCommand
+  result: IGroupModeCommand,
+  db?: number,
 ) => {
-  const executionCommand = wbSummaryCommand(result.command)
+  const executionCommand = wbSummaryCommand(result.command, db)
 
   let executionResult = []
   if (result.status === CommandExecutionStatus.Success) {
@@ -198,5 +200,5 @@ export {
   checkUnsupportedModuleCommand,
   getDbIndexFromSelectQuery,
   getCommandNameFromQuery,
-  wbSummaryCommand
+  wbSummaryCommand,
 }
diff --git a/redisinsight/ui/src/utils/longNames.tsx b/redisinsight/ui/src/utils/longNames.tsx
@@ -24,7 +24,7 @@ export function formatNameShort(name = '') {
 }
 
 export function getDbIndex(db: number = 0) {
-  return db ? `[${db}]` : ''
+  return db ? `[db${db}]` : ''
 }
 
 export const truncateText = (text = '', maxLength = 0, separator = '...') =>
diff --git a/redisinsight/ui/src/utils/tests/cliHelper.spec.ts b/redisinsight/ui/src/utils/tests/cliHelper.spec.ts
@@ -2,7 +2,8 @@ import {
   getDbIndexFromSelectQuery,
   getCommandNameFromQuery,
   cliParseCommandsGroupResult,
-  CliPrefix
+  CliPrefix,
+  wbSummaryCommand
 } from 'uiSrc/utils'
 import { MOCK_COMMANDS_SPEC } from 'uiSrc/constants'
 import { render, screen } from 'uiSrc/utils/test-utils'
@@ -82,3 +83,19 @@ describe('cliParseCommandsGroupResult error status', () => {
 
   expect(screen.queryByTestId(`${CliPrefix.Cli}-output-response-fail`)).toBeInTheDocument()
 })
+
+const wbSummaryCommandTests: any[] = [
+  ['SET', 0, '> SET'],
+  ['iueigc h pb32 ueo', 0, '> iueigc h pb32 ueo'],
+  ['SET', 1, '[db1] > SET'],
+  ['INFO', 10, '[db10] > INFO'],
+  ['aoeuaoeu', 10, '[db10] > aoeuaoeu'],
+]
+
+describe('wbSummaryCommand', () => {
+  it.each(wbSummaryCommandTests)('for input: %s (command), should be output: %s',
+    (command, db, expected) => {
+      const { container } = render(wbSummaryCommand(command, db))
+      expect(container).toHaveTextContent(expected)
+    })
+})
diff --git a/redisinsight/ui/src/utils/tests/longNames.spec.ts b/redisinsight/ui/src/utils/tests/longNames.spec.ts
@@ -15,8 +15,8 @@ describe('formatLongName', () => {
 describe('getDbIndex', () => {
   it('should format long names', () => {
     expect(getDbIndex(0)).toEqual('')
-    expect(getDbIndex(1)).toEqual('[1]')
-    expect(getDbIndex(10)).toEqual('[10]')
+    expect(getDbIndex(1)).toEqual('[db1]')
+    expect(getDbIndex(10)).toEqual('[db10]')
   })
 })
 
