Merge pull request #928 from RedisInsight/feature/bugfixing

#RI-3289, #RI-3200, #RI-3133, #RI-3305

Author: egor-zalenski

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

@@ -2,13 +2,14 @@ import { decode } from 'html-entities'
 import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { useParams } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 
 import {
   cliSettingsSelector,
   createCliClientAction,
   setCliEnteringCommand,
   clearSearchingCommand,
+  toggleCli,
 } from 'uiSrc/slices/cli/cli-settings'
 import {
   concatToOutput,
@@ -36,6 +37,7 @@ import styles from './CliBody/styles.module.scss'
 const CliBodyWrapper = () => {
   const [command, setCommand] = useState('')
 
+  const history = useHistory()
   const dispatch = useDispatch()
   const { instanceId = '' } = useParams<{ instanceId: string }>()
   const { data = [] } = useSelector(outputSelector)
@@ -51,7 +53,7 @@ const CliBodyWrapper = () => {
   const { db: currentDbIndex } = useSelector(outputSelector)
 
   useEffect(() => {
-    !cliClientUuid && dispatch(createCliClientAction())
+    !cliClientUuid && dispatch(createCliClientAction(handleWorkbenchClick))
   }, [])
 
   useEffect(() => {
@@ -67,6 +69,18 @@ const CliBodyWrapper = () => {
     clearOutput(dispatch)
   }
 
+  const handleWorkbenchClick = () => {
+    dispatch(toggleCli())
+    history.push(Pages.workbench(instanceId))
+
+    sendEventTelemetry({
+      event: TelemetryEvent.CLI_WORKBENCH_LINK_CLICKED,
+      eventData: {
+        databaseId: instanceId
+      }
+    })
+  }
+
   const refHotkeys = useHotkeys<HTMLDivElement>('command+k,ctrl+l', handleClearOutput)
 
   const handleSubmit = () => {

redisinsight/ui/src/components/monitor/Monitor/styles.module.scss

@@ -206,5 +206,5 @@
 }
 
 .time {
-  color: var(--monitorTimeColor);
+  color: var(--defaultGreenColor);
 }

redisinsight/ui/src/constants/cliOutput.tsx

@@ -10,7 +10,20 @@ export enum CliOutputFormatterType {
   Raw = 'RAW',
 }
 
-export const InitOutputText = (host: string = '', port: number = 0, dbIndex: number = 0) => [
+export const InitOutputText = (host: string = '', port: number = 0, dbIndex: number = 0, onClick: () => void) => [
+  <span className="color-green" key={Math.random()}>
+    {'Try '}
+    <EuiLink
+      onClick={onClick}
+      className="color-green"
+      style={{ fontSize: 'inherit', fontFamily: 'inherit' }}
+      data-test-subj="cli-workbench-page-btn"
+    >
+      Workbench
+    </EuiLink>
+    , our advanced CLI. Check out our Quick Guides to learn more about Redis capabilities.
+  </span>,
+  '\n\n',
   'Connecting...',
   '\n\n',
   'Pinging Redis server on ',

redisinsight/ui/src/constants/storage.ts

@@ -1,5 +1,6 @@
 enum BrowserStorageItem {
   instancesCount = 'instancesCount',
+  instancesSorting = 'instancesSorting',
   theme = 'theme',
   browserViewType = 'browserViewType',
   cliClientUuid = 'cliClientUuid',

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx

@@ -49,7 +49,7 @@ const BulkActionsInfo = (props: Props) => {
         )}
         {status === BulkActionsStatus.Aborted && (
           <EuiText color="danger" className={styles.progress}>
-            Aborted
+            Stopped: {getApproximateNumber((total ? scanned / total : 1) * 100)}%
           </EuiText>
         )}
         {status === BulkActionsStatus.Completed && (

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/styles.module.scss

@@ -14,7 +14,7 @@
   flex-direction: column;
 
   .progressCompleted {
-    color: var(--monitorTimeColor) !important;
+    color: var(--defaultGreenColor) !important;
   }
 }
 
@@ -63,7 +63,7 @@
   }
 
   &Completed {
-    color: var(--monitorTimeColor) !important;
+    color: var(--defaultGreenColor) !important;
   }
 }
 

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteSummary/BulkDeleteSummary.tsx

@@ -17,8 +17,13 @@ const BulkDeleteSummary = () => {
   const { duration = 0, status } = useSelector(overviewBulkActionsSelector) ?? {}
 
   useEffect(() => {
-    const approximateCount = scanned >= total ? keys.length : (keys.length * total) / scanned
-    setTitle(`Expected amount: ~${numberWithSpaces(Math.round(approximateCount))} keys`)
+    if (scanned < total && !keys.length) {
+      setTitle('Expected amount: N/A')
+      return
+    }
+
+    const approximateCount = scanned < total ? (keys.length * total) / scanned : keys.length
+    setTitle(`Expected amount: ${scanned < total ? '~' : ''}${numberWithSpaces(Math.round(approximateCount))} keys`)
   }, [scanned, total, keys])
 
   return (

redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesList/DatabasesList.tsx

@@ -21,6 +21,8 @@ import { instancesSelector } from 'uiSrc/slices/instances/instances'
 import { Instance } from 'uiSrc/slices/interfaces'
 import { formatLongName, Nullable } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { localStorageService } from 'uiSrc/services'
+import { BrowserStorageItem } from 'uiSrc/constants'
 
 import styles from '../styles.module.scss'
 
@@ -80,7 +82,7 @@ function DatabasesList({
     }
   }, [width])
 
-  const sort: PropertySort = {
+  const sort: PropertySort = localStorageService.get(BrowserStorageItem.instancesSorting) ?? {
     field: 'lastConnection',
     direction: 'asc',
   }
@@ -116,6 +118,7 @@ function DatabasesList({
   const onTableChange = ({ sort, page }: Criteria<Instance>) => {
     // calls also with page changing
     if (sort && !page) {
+      localStorageService.set(BrowserStorageItem.instancesSorting, sort)
       sendEventSortedTelemetry(sort)
     }
   }

redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss

@@ -14,7 +14,7 @@
 }
 
 .time {
-  color: var(--monitorTimeColor);
+  color: var(--defaultGreenColor);
   width: 150px;
 }
 

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

@@ -175,14 +175,15 @@ export default cliSettingsSlice.reducer
 
 // Asynchronous thunk action
 export function createCliClientAction(
+  onWorkbenchClick: () => void,
   onSuccessAction?: () => void,
   onFailAction?: (message: string) => void
 ) {
   return async (dispatch: AppDispatch, stateInit: () => RootState) => {
     const state = stateInit()
     const { host, port, db } = connectedInstanceSelector(state)
     dispatch(processCliClient())
-    dispatch(concatToOutput(InitOutputText(host, port, db)))
+    dispatch(concatToOutput(InitOutputText(host, port, db, onWorkbenchClick)))
 
     try {
       const { data, status } = await apiService.post<CreateCliClientResponse>(