Merge pull request #666 from RedisInsight/feature/bugfix

#RI-2920 - add units converter for configure popup

Author: rsergeenko

redisinsight/ui/src/pages/slowLog/SlowLogPage.tsx

@@ -159,7 +159,7 @@ const SlowLogPage = () => {
           )}
         </AutoSizer>
         {isEmptySlowLog
-          ? <EmptySlowLog />
+          ? <EmptySlowLog slowlogLogSlowerThan={slowlogLogSlowerThan} durationUnit={durationUnit} />
           : <SlowLogTable items={data} loading={loading} durationUnit={durationUnit} />}
       </div>
     </>

redisinsight/ui/src/pages/slowLog/components/EmptySlowLog/EmptySlowLog.spec.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
+import { DurationUnits } from 'uiSrc/constants'
 import { render } from 'uiSrc/utils/test-utils'
 
 import EmptySlowLog from './EmptySlowLog'
 
 describe('EmptySlowLog', () => {
   it('should render', () => {
-    expect(render(<EmptySlowLog />)).toBeTruthy()
+    expect(render(
+      <EmptySlowLog durationUnit={DurationUnits.milliSeconds} slowlogLogSlowerThan={100} />
+    )).toBeTruthy()
   })
 })

redisinsight/ui/src/pages/slowLog/components/EmptySlowLog/EmptySlowLog.tsx

@@ -1,19 +1,33 @@
 import { EuiText, EuiTitle } from '@elastic/eui'
 import React from 'react'
+import { DurationUnits } from 'uiSrc/constants'
+import { convertNumberByUnits } from 'uiSrc/pages/slowLog/utils'
+import { numberWithSpaces } from 'uiSrc/utils/numbers'
 
 import styles from '../styles.module.scss'
 
-const EmptySlowLog = () => (
-  <div className={styles.noSlowLogWrapper} data-testid="empty-slow-log">
-    <div className={styles.noSlowLogText}>
-      <EuiTitle className={styles.noFoundTitle}>
-        <h4>No Slow Logs found</h4>
-      </EuiTitle>
-      <EuiText color="subdued">
-        Either no commands exceeding 10000 µs were found or Slow Log is disabled on the server.
-      </EuiText>
+export interface Props {
+  durationUnit: DurationUnits
+  slowlogLogSlowerThan: number
+}
+
+const EmptySlowLog = (props: Props) => {
+  const { durationUnit, slowlogLogSlowerThan } = props
+
+  return (
+    <div className={styles.noSlowLogWrapper} data-testid="empty-slow-log">
+      <div className={styles.noSlowLogText}>
+        <EuiTitle className={styles.noFoundTitle}>
+          <h4>No Slow Logs found</h4>
+        </EuiTitle>
+        <EuiText color="subdued">
+          Either no commands exceeding&nbsp;
+          {numberWithSpaces(convertNumberByUnits(slowlogLogSlowerThan, durationUnit))} {durationUnit}
+          &nbsp;were found or Slow Log is disabled on the server.
+        </EuiText>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default EmptySlowLog

redisinsight/ui/src/pages/slowLog/components/SlowLogConfig/SlowLogConfig.tsx

@@ -8,6 +8,7 @@ import {
   EuiSuperSelect,
   EuiText,
 } from '@elastic/eui'
+import { toNumber } from 'lodash'
 import React, { ChangeEvent, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
@@ -28,6 +29,7 @@ import { patchSlowLogConfigAction, slowLogConfigSelector, slowLogSelector } from
 import { errorValidateNegativeInteger, validateNumber } from 'uiSrc/utils'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { openCli } from 'uiSrc/slices/cli/cli-settings'
+import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { convertNumberByUnits } from '../../utils'
 import styles from './styles.module.scss'
 
@@ -152,6 +154,19 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
     </>
   )
 
+  const unitConverter = () => {
+    if (durationUnit === DurationUnits.microSeconds) {
+      const value = numberWithSpaces(convertNumberByUnits(toNumber(slowerThan), DurationUnits.milliSeconds))
+      return `${value} ${DurationUnits.milliSeconds}`
+    }
+
+    if (durationUnit === DurationUnits.milliSeconds) {
+      const value = numberWithSpaces(toNumber(slowerThan) * 1000)
+      return `${value} ${DurationUnits.microSeconds}`
+    }
+    return null
+  }
+
   return (
     <div className={cx(styles.container, { [styles.containerCluster]: connectionType === ConnectionType.Cluster })}>
       {connectionType === ConnectionType.Cluster && (clusterContent())}
@@ -183,7 +198,7 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
                   data-test-subj="select-default-unit"
                 />
                 <div className={styles.helpText}>
-                  <div>10 ms</div>
+                  <div data-testid="unit-converter">{unitConverter()}</div>
                   <div>
                     Execution time to exceed in order to log the command.
                     <br />

redisinsight/ui/src/pages/slowLog/components/SlowLogTable/SlowLogTable.tsx

@@ -7,7 +7,6 @@ import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
 import { DurationUnits, SortOrder, TableCellAlignment, TableCellTextAlignment } from 'uiSrc/constants'
 import { convertNumberByUnits } from 'uiSrc/pages/slowLog/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { Nullable } from 'uiSrc/utils'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 
 import styles from '../styles.module.scss'
@@ -17,7 +16,7 @@ export const DATE_FORMAT = 'HH:mm:ss d LLL yyyy'
 export interface Props {
   items: any
   loading: boolean
-  durationUnit: Nullable<DurationUnits>
+  durationUnit: DurationUnits
 }
 
 const sortByTimeStamp = (items = [], order: SortOrder) =>

redisinsight/ui/src/slices/interfaces/slowlog.ts

@@ -8,5 +8,5 @@ export interface StateSlowLog {
   data: SlowLog[]
   lastRefreshTime: Nullable<number>,
   config: Nullable<SlowLogConfig>,
-  durationUnit: Nullable<DurationUnits>
+  durationUnit: DurationUnits
 }

redisinsight/ui/src/slices/slowlog/slowlog.ts

@@ -27,8 +27,10 @@ const slowLogSlice = createSlice({
     getSlowLogs: (state) => {
       state.loading = true
     },
-    getSlowLogsSuccess: (state, { payload: [data, durationUnit] }:
-    PayloadAction<[SlowLog[], Nullable<DurationUnits> ]>) => {
+    getSlowLogsSuccess: (
+      state,
+      { payload: [data, durationUnit] }: PayloadAction<[SlowLog[], DurationUnits]>
+    ) => {
       state.loading = false
       state.data = data
       state.durationUnit = durationUnit
@@ -52,8 +54,10 @@ const slowLogSlice = createSlice({
     getSlowLogConfig: (state) => {
       state.loading = true
     },
-    getSlowLogConfigSuccess: (state, { payload: [data, durationUnit] }:
-    PayloadAction<[SlowLogConfig, Nullable<DurationUnits> ]>) => {
+    getSlowLogConfigSuccess: (
+      state,
+      { payload: [data, durationUnit] }: PayloadAction<[SlowLogConfig, Nullable<DurationUnits> ]>
+    ) => {
       state.loading = false
       state.config = data
 
@@ -203,10 +207,6 @@ export function patchSlowLogConfigAction(
 ) {
   return async (dispatch: AppDispatch) => {
     try {
-      console.log('instanceId', instanceId)
-      console.log('config', config)
-      console.log('durationUnit', durationUnit)
-
       dispatch(getSlowLogConfig())
 
       const { data, status } = await apiService.patch<SlowLogConfig>(