#RI-3096 - Total keys are not formatted

#RI-3071 - Internal links for Monitor and PSubscribe

Author: egor-zalenski

redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.tsx

@@ -17,16 +17,16 @@ import {
   sendCliClusterCommandAction,
   processUnsupportedCommand,
   processUnrepeatableNumber,
-  processMonitorCommand,
-  processPSubscribeCommand,
 } from 'uiSrc/slices/cli/cli-output'
-import { CommandMonitor, CommandPSubscribe } from 'uiSrc/constants'
+import { CommandMonitor, CommandPSubscribe, Pages } from 'uiSrc/constants'
 import { getCommandRepeat, isRepeatCountCorrect } from 'uiSrc/utils'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { ClusterNodeRole } from 'uiSrc/slices/interfaces/cli'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { checkUnsupportedCommand, clearOutput, cliCommandOutput } from 'uiSrc/utils/cliHelper'
+import { cliTexts } from 'uiSrc/constants/cliOutput'
+import { showMonitor } from 'uiSrc/slices/cli/monitor'
 import { SendClusterCommandDto } from 'apiSrc/modules/cli/dto/cli.dto'
 
 import CliBody from './CliBody'
@@ -81,15 +81,15 @@ const CliBodyWrapper = () => {
 
     // Flow if MONITOR command was executed
     if (checkUnsupportedCommand([CommandMonitor.toLowerCase()], commandLine)) {
-      dispatch(processMonitorCommand(commandLine, resetCommand))
+      dispatch(concatToOutput(cliTexts.MONITOR_COMMAND_CLI(() => { dispatch(showMonitor()) })))
+      resetCommand()
       return
     }
 
     // Flow if PSUBSCRIBE command was executed
     if (checkUnsupportedCommand([CommandPSubscribe.toLowerCase()], commandLine)) {
-      dispatch(processPSubscribeCommand(commandLine, () => {
-        resetCommand()
-      }))
+      dispatch(concatToOutput(cliTexts.PSUBSCRIBE_COMMAND_CLI(Pages.pubSub(instanceId))))
+      resetCommand()
       return
     }
 

redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx

@@ -238,7 +238,7 @@ export const getOverviewMetrics = ({ theme, items, db = 0 }: Props): Array<IMetr
           title: 'Total Keys',
           content: (<b>{numberWithSpaces(totalKeys || 0)}</b>),
         },
-        content: truncateNumberToRange(totalKeys || 0),
+        content: (<b>{numberWithSpaces(totalKeys || 0)}</b>),
       },
       {
         id: 'overview-db-total-keys',

redisinsight/ui/src/components/query-card/QueryCardCommonResult/components/CommonErrorResponse/CommonErrorResponse.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import {
   checkUnsupportedCommand,
@@ -18,32 +18,23 @@ import { RSNotLoadedContent } from 'uiSrc/pages/workbench/constants'
 import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import ModuleNotLoaded from 'uiSrc/pages/workbench/components/module-not-loaded'
+import { showMonitor } from 'uiSrc/slices/cli/monitor'
 
 const CommonErrorResponse = (command = '', result?: any) => {
   const { instanceId = '' } = useParams<{ instanceId: string }>()
   const { unsupportedCommands: cliUnsupportedCommands, blockingCommands } = useSelector(cliSettingsSelector)
   const { modules } = useSelector(connectedInstanceSelector)
+  const dispatch = useDispatch()
   const unsupportedCommands = [SelectCommand.toLowerCase(), ...cliUnsupportedCommands, ...blockingCommands]
   const [commandLine, countRepeat] = getCommandRepeat(command)
 
   // Flow if MONITOR command was executed
   if (checkUnsupportedCommand([CommandMonitor.toLowerCase()], commandLine)) {
-    return cliParseTextResponse(
-      cliTexts.MONITOR_COMMAND,
-      commandLine,
-      CommandExecutionStatus.Fail,
-      CliPrefix.QueryCard,
-    )
+    return cliTexts.MONITOR_COMMAND(() => { dispatch(showMonitor()) })
   }
   // Flow if PSUBSCRIBE command was executed
   if (checkUnsupportedCommand([CommandPSubscribe.toLowerCase()], commandLine)) {
-    return cliParseTextResponse(
-      cliTexts.PSUBSCRIBE_COMMAND(Pages.pubSub(instanceId)),
-      commandLine,
-      CommandExecutionStatus.Fail,
-      CliPrefix.QueryCard,
-      true,
-    )
+    return cliTexts.PSUBSCRIBE_COMMAND(Pages.pubSub(instanceId))
   }
 
   const unsupportedCommand = checkUnsupportedCommand(unsupportedCommands, commandLine)

redisinsight/ui/src/constants/cliOutput.tsx

@@ -1,5 +1,6 @@
-import { EuiTextColor } from '@elastic/eui'
+import { EuiLink, EuiTextColor } from '@elastic/eui'
 import React from 'react'
+import { getRouterLinkProps } from 'uiSrc/services'
 
 export const ClearCommand = 'clear'
 export const SelectCommand = 'select'
@@ -36,14 +37,41 @@ export const cliTexts = {
     commandLine + unsupportedCommandTextWorkbench + commands,
   REPEAT_COUNT_INVALID: 'Invalid repeat command option value',
   CONNECTION_CLOSED: 'Client connection previously closed. Run the command after the connection is re-created.',
-  MONITOR_COMMAND: 'Use the "Profiler" tool to see all the requests processed by the server.',
-  PSUBSCRIBE_COMMAND: (href: string = '') =>
-    'Use Pub/Sub to see the messages published to all channels in your database.',
   UNABLE_TO_DECRYPT: 'Unable to decrypt. Check the system keychain or re-run the command.',
+  PSUBSCRIBE_COMMAND: (path: string = '') => (
+    <EuiTextColor color="danger" key={Date.now()}>
+      {'Use '}
+      <EuiLink {...getRouterLinkProps(path)} color="text" data-test-subj="pubsub-page-btn">
+        Pub/Sub
+      </EuiLink>
+      {' to see the messages published to all channels in your database.'}
+    </EuiTextColor>
+  ),
+  PSUBSCRIBE_COMMAND_CLI: (path: string = '') => (
+    [
+      cliTexts.PSUBSCRIBE_COMMAND(path),
+      '\n',
+    ]
+  ),
+  MONITOR_COMMAND: (onClick: () => void) => (
+    <EuiTextColor color="danger" key={Date.now()}>
+      {'Use '}
+      <EuiLink onClick={onClick} className="btnLikeLink" color="text" data-test-subj="monitor-btn">
+        Profiler
+      </EuiLink>
+      {' tool to see all the requests processed by the server.'}
+    </EuiTextColor>
+  ),
+  MONITOR_COMMAND_CLI: (onClick: () => void) => (
+    [
+      cliTexts.MONITOR_COMMAND(onClick),
+      '\n',
+    ]
+  ),
   CLI_ERROR_MESSAGE: (message: string) => (
     [
       '\n',
-      <EuiTextColor color="warning" key={Date.now()}>
+      <EuiTextColor color="danger" key={Date.now()}>
         {message}
       </EuiTextColor>,
       '\n\n',

redisinsight/ui/src/slices/cli/cli-output.ts

@@ -2,18 +2,18 @@ import { createSlice } from '@reduxjs/toolkit'
 
 import { CliOutputFormatterType, cliTexts, ConnectionSuccessOutputText, SelectCommand } from 'uiSrc/constants/cliOutput'
 import { apiService, localStorageService } from 'uiSrc/services'
-import { ApiEndpoints, BrowserStorageItem, CommandMonitor } from 'uiSrc/constants'
+import { ApiEndpoints, BrowserStorageItem, CommandMonitor, } from 'uiSrc/constants'
 import {
   cliParseTextResponseWithOffset,
-  cliParseTextResponseWithRedirect, getDbIndexFromSelectQuery,
+  cliParseTextResponseWithRedirect,
+  getDbIndexFromSelectQuery,
 } from 'uiSrc/utils/cliHelper'
 import { getApiErrorMessage, getApiErrorName, getUrl, isStatusSuccessful } from 'uiSrc/utils'
 import { cliUnsupportedCommandsSelector, updateCliClientAction } from 'uiSrc/slices/cli/cli-settings'
 import ApiErrors from 'uiSrc/constants/apiErrors'
 
 import { SendClusterCommandDto, SendClusterCommandResponse, SendCommandResponse, } from 'apiSrc/modules/cli/dto/cli.dto'
 
-import { showMonitor } from './monitor'
 import { AppDispatch, RootState } from '../store'
 import { CommandExecutionStatus, StateCliOutput } from '../interfaces/cli'
 
@@ -262,46 +262,6 @@ export function processUnrepeatableNumber(
   }
 }
 
-export function processMonitorCommand(
-  command: string = '',
-  onSuccessAction?: () => void
-) {
-  return async (dispatch: AppDispatch) => {
-    dispatch(showMonitor())
-
-    dispatch(
-      concatToOutput(
-        cliParseTextResponseWithOffset(
-          cliTexts.MONITOR_COMMAND,
-          command,
-          CommandExecutionStatus.Fail
-        )
-      )
-    )
-
-    onSuccessAction?.()
-  }
-}
-
-export function processPSubscribeCommand(
-  command: string = '',
-  onSuccessAction?: () => void
-) {
-  return async (dispatch: AppDispatch) => {
-    dispatch(
-      concatToOutput(
-        cliParseTextResponseWithOffset(
-          cliTexts.PSUBSCRIBE_COMMAND(),
-          command,
-          CommandExecutionStatus.Fail
-        )
-      )
-    )
-
-    onSuccessAction?.()
-  }
-}
-
 function handleRecreateClient(dispatch: AppDispatch, stateInit: () => RootState, command = ''): void {
   const state = stateInit()
   const { cliClientUuid } = state.cli.settings

redisinsight/ui/src/styles/components/_buttons.scss

@@ -1,4 +1,4 @@
-@import '../../../../../node_modules/@elastic/eui/src/global_styling/index';
+@import "../../../../../node_modules/@elastic/eui/src/global_styling/index";
 
 .euiButton {
   text-decoration: none !important;
@@ -11,7 +11,7 @@
   &.euiButton--secondary {
     color: var(--buttonSecondaryTextColor) !important;
     border-color: var(--euiColorSecondary);
-    &:not([class*='isDisabled']) {
+    &:not([class*="isDisabled"]) {
       &:hover {
         background-color: var(--buttonSecondaryHoverColor);
         border-color: var(--buttonSecondaryHoverColor);
@@ -27,7 +27,7 @@
     }
   }
   &.euiButton--primary {
-    &:not([class*='isDisabled']) {
+    &:not([class*="isDisabled"]) {
       box-shadow: none;
     }
   }
@@ -47,15 +47,15 @@
     border-color: var(--euiColorSecondary);
     background-color: var(--euiColorSecondary);
 
-    &:not([class*='isDisabled']) {
+    &:not([class*="isDisabled"]) {
       &:hover {
         background-color: var(--buttonSecondaryHoverColor);
         border-color: var(--buttonSecondaryHoverColor);
       }
       &:focus:not(:hover),
       &:focus-within:not(:hover) {
         border: 2px solid var(--euiColorPrimary);
-      }   
+      }
     }
   }
 }
@@ -109,7 +109,7 @@
 }
 
 .euiButton {
-  &.euiButton--warning.euiButton--fill:not([class*='isDisabled']) {
+  &.euiButton--warning.euiButton--fill:not([class*="isDisabled"]) {
     background-color: var(--buttonWarningColor);
     border-color: var(--buttonWarningColor);
 
@@ -128,18 +128,25 @@
   background-color: transparent;
   transition: color ease 0.3s, background-color ease 0.3s;
 
-  .euiButtonEmpty__text, .euiText {
+  .euiButtonEmpty__text,
+  .euiText {
     transition: color ease 0.3s;
     color: var(--euiTextSubduedColor) !important;
   }
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     text-decoration: none !important;
     background-color: var(--hoverInListColorDarken);
     color: var(--htmlColor);
 
-    .euiButtonEmpty__text, .euiText {
+    .euiButtonEmpty__text,
+    .euiText {
       color: var(--htmlColor) !important;
     }
   }
 }
+
+.btnLikeLink {
+  font: inherit !important;
+}

redisinsight/ui/src/utils/cliHelper.tsx

@@ -40,7 +40,7 @@ const cliParseTextResponseWithOffset = (
 ) => [cliParseTextResponse(text, command, status), '\n']
 
 const cliParseTextResponse = (
-  text: string = '',
+  text: string | JSX.Element = '',
   command: string = '',
   status: CommandExecutionStatus = CommandExecutionStatus.Success,
   prefix: CliPrefix = CliPrefix.Cli,