fix pr comments

rsergeenko · rsergeenko · commit 8cfb16ef7e24 · 2022-04-18T17:56:10.000+03:00
diff --git a/redisinsight/ui/src/components/monitor-config/MonitorConfig.spec.tsx b/redisinsight/ui/src/components/monitor-config/MonitorConfig.spec.tsx
@@ -3,7 +3,7 @@ import { cloneDeep } from 'lodash'
 import React from 'react'
 import MockedSocket from 'socket.io-mock'
 import socketIO from 'socket.io-client'
-import { monitorSelector, setLoadingPause, setSocket, stopMonitor } from 'uiSrc/slices/cli/monitor'
+import { monitorSelector, setMonitorLoadingPause, setSocket, stopMonitor } from 'uiSrc/slices/cli/monitor'
 import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
 import { MonitorEvent, SocketEvent } from 'uiSrc/constants'
 import MonitorConfig from './MonitorConfig'
@@ -52,7 +52,7 @@ describe('MonitorConfig', () => {
     const { unmount } = render(<MonitorConfig />)
     const afterRenderActions = [
       setSocket(socket),
-      setLoadingPause(true)
+      setMonitorLoadingPause(true)
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
 
@@ -75,7 +75,7 @@ describe('MonitorConfig', () => {
 
     const afterRenderActions = [
       setSocket(socket),
-      setLoadingPause(true)
+      setMonitorLoadingPause(true)
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
 
@@ -99,7 +99,7 @@ describe('MonitorConfig', () => {
 
     const afterRenderActions = [
       setSocket(socket),
-      setLoadingPause(true),
+      setMonitorLoadingPause(true),
       stopMonitor()
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
@@ -123,7 +123,7 @@ describe('MonitorConfig', () => {
 
     const afterRenderActions = [
       setSocket(socket),
-      setLoadingPause(true),
+      setMonitorLoadingPause(true),
       stopMonitor()
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
@@ -143,7 +143,7 @@ describe('MonitorConfig', () => {
 
     const afterRenderActions = [
       setSocket(socket),
-      setLoadingPause(true),
+      setMonitorLoadingPause(true),
       stopMonitor()
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
diff --git a/redisinsight/ui/src/components/monitor-config/MonitorConfig.tsx b/redisinsight/ui/src/components/monitor-config/MonitorConfig.tsx
@@ -11,7 +11,7 @@ import {
   setError,
   resetMonitorItems,
   setStartTimestamp,
-  setLoadingPause
+  setMonitorLoadingPause
 } from 'uiSrc/slices/cli/monitor'
 import { getBaseApiUrl } from 'uiSrc/utils'
 import { MonitorErrorMessages, MonitorEvent, SocketErrors, SocketEvent } from 'uiSrc/constants'
@@ -60,7 +60,7 @@ const MonitorConfig = ({ retryDelay = 10000 } : IProps) => {
     let payloads: IMonitorDataPayload[] = []
 
     const handleMonitorEvents = () => {
-      dispatch(setLoadingPause(false))
+      dispatch(setMonitorLoadingPause(false))
       newSocket.on(MonitorEvent.MonitorData, (payload: IMonitorData[]) => {
         payloads = payloads.concat(payload)
 
@@ -125,11 +125,11 @@ const MonitorConfig = ({ retryDelay = 10000 } : IProps) => {
     if (!isRunning) return
 
     const pauseUnpause = async () => {
-      !isPaused && await new Promise<void>((resolve) => { socket?.emit(MonitorEvent.Monitor, () => resolve()) })
+      !isPaused && await new Promise<void>((resolve) => socket?.emit(MonitorEvent.Monitor, () => resolve()))
       isPaused && await new Promise<void>((resolve) => socket?.emit(MonitorEvent.Pause, () => resolve()))
-      dispatch(setLoadingPause(false))
+      dispatch(setMonitorLoadingPause(false))
     }
-    dispatch(setLoadingPause(true))
+    dispatch(setMonitorLoadingPause(true))
     pauseUnpause().catch(console.error)
   }, [isPaused, isRunning])
 
diff --git a/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx b/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx
@@ -14,7 +14,7 @@ import AutoSizer from 'react-virtualized-auto-sizer'
 import { IMonitorDataPayload } from 'uiSrc/slices/interfaces'
 import { ReactComponent as BanIcon } from 'uiSrc/assets/img/monitor/ban.svg'
 
-import MonitorLog from '../MonitorLog/MonitorLog'
+import MonitorLog from '../MonitorLog'
 import MonitorOutputList from '../MonitorOutputList'
 
 import styles from './styles.module.scss'
@@ -87,14 +87,12 @@ const Monitor = (props: Props) => {
           content="Profiler log is saved to a file on your local machine with no size limitation.
           The temporary log file will be automatically rewritten when the Profiler is reset"
         >
-          <>
-            <EuiSwitch
-              compressed
-              label={<span>Save Log</span>}
-              checked={saveLogValue}
-              onChange={(e) => setSaveLogValue(e.target.checked)}
-            />
-          </>
+          <EuiSwitch
+            compressed
+            label={<span>Save Log</span>}
+            checked={saveLogValue}
+            onChange={(e) => setSaveLogValue(e.target.checked)}
+          />
         </EuiToolTip>
       </div>
     </div>
diff --git a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx b/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx
@@ -9,7 +9,9 @@ import { monitorSelector, resetProfiler, stopMonitor } from 'uiSrc/slices/cli/mo
 import { cutDurationText, getBaseApiUrl } from 'uiSrc/utils'
 
 import styles from './styles.module.scss'
-import 'react-virtualized/styles.css'
+
+const MIDDLE_SCREEN_RESOLUTION = 460
+const SMALL_SCREEN_RESOLUTION = 360
 
 const MonitorLog = () => {
   const { timestamp } = useSelector(monitorSelector)
@@ -40,8 +42,8 @@ const MonitorLog = () => {
   }
 
   const getPaddingByWidth = (width: number): number => {
-    if (width < 360) return 6
-    if (width < 460) return 12
+    if (width < SMALL_SCREEN_RESOLUTION) return 6
+    if (width < MIDDLE_SCREEN_RESOLUTION) return 12
     return 18
   }
 
@@ -60,7 +62,7 @@ const MonitorLog = () => {
               {format(timestamp.paused, 'hh:mm:ss')}
               &nbsp;(
               {duration}
-              {width > 360 && ' Running time'}
+              {width > SMALL_SCREEN_RESOLUTION && ' Running time'}
               )
             </EuiText>
             <EuiFlexGroup
@@ -83,7 +85,7 @@ const MonitorLog = () => {
                     data-testid="download-log-btn"
                     {...downloadBtnProps}
                   >
-                    {width > 360 && ' Download '}
+                    {width > SMALL_SCREEN_RESOLUTION && ' Download '}
                     Log
                   </EuiButton>
                 </EuiToolTip>
@@ -99,7 +101,7 @@ const MonitorLog = () => {
                   data-testid="reset-profiler-btn"
                 >
                   Reset
-                  {width > 360 && ' Profiler'}
+                  {width > SMALL_SCREEN_RESOLUTION && ' Profiler'}
                 </EuiButton>
               </EuiFlexItem>
             </EuiFlexGroup>
diff --git a/redisinsight/ui/src/components/monitor/MonitorLog/index.ts b/redisinsight/ui/src/components/monitor/MonitorLog/index.ts
@@ -0,0 +1,3 @@
+import MonitorLog from './MonitorLog'
+
+export default MonitorLog
diff --git a/redisinsight/ui/src/components/monitor/MonitorOutputList/MonitorOutputList.tsx b/redisinsight/ui/src/components/monitor/MonitorOutputList/MonitorOutputList.tsx
@@ -17,6 +17,8 @@ export interface Props {
 }
 
 const PROTRUDING_OFFSET = 2
+const MIDDLE_SCREEN_RESOLUTION = 460
+const SMALL_SCREEN_RESOLUTION = 360
 
 const MonitorOutputList = (props: Props) => {
   const { compressed, items = [], width = 0, height = 0 } = props
@@ -67,13 +69,13 @@ const MonitorOutputList = (props: Props) => {
           <div onLoad={measure} className={styles.item} ref={registerChild} style={style}>
             {!isError && (
               <>
-                {width > 460 && (
+                {width > MIDDLE_SCREEN_RESOLUTION && (
                   <span className={cx(styles.time)}>
                     {getFormatTime(time)}
                     &nbsp;
                   </span>
                 )}
-                {width > 360 && (<span>{`[${database} ${source}] `}</span>)}
+                {width > SMALL_SCREEN_RESOLUTION && (<span>{`[${database} ${source}] `}</span>)}
                 <span>{getArgs(args)}</span>
               </>
             )}
diff --git a/redisinsight/ui/src/slices/cli/monitor.ts b/redisinsight/ui/src/slices/cli/monitor.ts
@@ -81,7 +81,7 @@ const monitorSlice = createSlice({
       }
     },
 
-    setLoadingPause: (state, { payload }) => {
+    setMonitorLoadingPause: (state, { payload }) => {
       state.loadingPause = payload
     },
 
@@ -139,7 +139,7 @@ export const {
   togglePauseMonitor,
   startMonitor,
   setStartTimestamp,
-  setLoadingPause,
+  setMonitorLoadingPause,
   stopMonitor,
   resetProfiler,
   concatMonitorItems,

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import MonitorLog from './MonitorLog'`
	`2`	`+`
	`3`	`+export default MonitorLog`