#RI-2640 - final implementation, add tests

rsergeenko · rsergeenko · commit 367b9e7935c8 · 2022-04-18T16:35:01.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, setSocket, stopMonitor, toggleRunMonitor } from 'uiSrc/slices/cli/monitor'
+import { monitorSelector, setLoadingPause, 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,6 +52,7 @@ describe('MonitorConfig', () => {
     const { unmount } = render(<MonitorConfig />)
     const afterRenderActions = [
       setSocket(socket),
+      setLoadingPause(true)
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
 
@@ -66,14 +67,15 @@ describe('MonitorConfig', () => {
 
     const { unmount } = render(<MonitorConfig />)
 
-    socket.on(MonitorEvent.MonitorData, (data) => {
+    socket.on(MonitorEvent.MonitorData, (data: []) => {
       expect(data).toEqual(['message1', 'message2'])
     })
 
     socket.socketClient.emit(MonitorEvent.MonitorData, ['message1', 'message2'])
 
     const afterRenderActions = [
       setSocket(socket),
+      setLoadingPause(true)
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
 
@@ -88,7 +90,7 @@ describe('MonitorConfig', () => {
     })
     monitorSelector.mockImplementation(monitorSelectorMock)
 
-    socket.on(MonitorEvent.Exception, (error) => {
+    socket.on(MonitorEvent.Exception, (error: Error) => {
       expect(error).toEqual({ message: 'test', name: 'error' })
       // done()
     })
@@ -97,7 +99,8 @@ describe('MonitorConfig', () => {
 
     const afterRenderActions = [
       setSocket(socket),
-      toggleRunMonitor()
+      setLoadingPause(true),
+      stopMonitor()
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
 
@@ -112,15 +115,16 @@ describe('MonitorConfig', () => {
     })
     monitorSelector.mockImplementation(monitorSelectorMock)
 
-    socket.on(SocketEvent.ConnectionError, (error) => {
+    socket.on(SocketEvent.ConnectionError, (error: Error) => {
       expect(error).toEqual({ message: 'test', name: 'error' })
     })
 
     socket.socketClient.emit(SocketEvent.ConnectionError, { message: 'test', name: 'error' })
 
     const afterRenderActions = [
       setSocket(socket),
-      toggleRunMonitor()
+      setLoadingPause(true),
+      stopMonitor()
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
 
@@ -139,6 +143,7 @@ describe('MonitorConfig', () => {
 
     const afterRenderActions = [
       setSocket(socket),
+      setLoadingPause(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
@@ -10,13 +10,14 @@ import {
   stopMonitor,
   setError,
   resetMonitorItems,
-  setStartTimestamp
+  setStartTimestamp,
+  setLoadingPause
 } from 'uiSrc/slices/cli/monitor'
 import { getBaseApiUrl } from 'uiSrc/utils'
 import { MonitorErrorMessages, MonitorEvent, SocketErrors, SocketEvent } from 'uiSrc/constants'
 import { IMonitorDataPayload } from 'uiSrc/slices/interfaces'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances'
-import { IOnDatePayload } from 'apiSrc/modules/profiler/helpers/client-monitor-observer'
+import { IMonitorData } from 'apiSrc/modules/profiler/interfaces/monitor-data.interface'
 
 import ApiStatusCode from '../../constants/apiStatusCode'
 
@@ -59,7 +60,8 @@ const MonitorConfig = ({ retryDelay = 10000 } : IProps) => {
     let payloads: IMonitorDataPayload[] = []
 
     const handleMonitorEvents = () => {
-      newSocket.on(MonitorEvent.MonitorData, (payload:IOnDatePayload[]) => {
+      dispatch(setLoadingPause(false))
+      newSocket.on(MonitorEvent.MonitorData, (payload: IMonitorData[]) => {
         payloads = payloads.concat(payload)
 
         // set batch of payloads and then clear batch
@@ -121,8 +123,14 @@ const MonitorConfig = ({ retryDelay = 10000 } : IProps) => {
 
   useEffect(() => {
     if (!isRunning) return
-    !isPaused && socket?.emit(MonitorEvent.Monitor)
-    isPaused && socket?.emit(MonitorEvent.Pause)
+
+    const pauseUnpause = async () => {
+      !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(setLoadingPause(true))
+    pauseUnpause().catch(console.error)
   }, [isPaused, isRunning])
 
   useEffect(() => {
diff --git a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.spec.tsx b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.spec.tsx
@@ -8,6 +8,7 @@ import {
   screen,
 } from 'uiSrc/utils/test-utils'
 import {
+  monitorSelector,
   resetMonitorItems,
   setMonitorInitialState,
   toggleHideMonitor,
@@ -16,8 +17,21 @@ import {
 import MonitorHeader, { Props } from './MonitorHeader'
 
 const mockedProps = mock<Props>()
+const monitorPath = 'uiSrc/slices/cli/monitor'
 let store: typeof mockedStore
 
+jest.mock(monitorPath, () => {
+  const defaultState = jest.requireActual(monitorPath).initialState
+  return {
+    ...jest.requireActual(monitorPath),
+    monitorSelector: jest.fn().mockReturnValue({
+      ...defaultState,
+      isMinimizedMonitor: false,
+      isShowMonitor: true,
+    })
+  }
+})
+
 beforeEach(() => {
   cleanup()
   store = cloneDeep(mockedStore)
@@ -47,6 +61,10 @@ describe('MonitorHeader', () => {
 
   it('Should call handleRunMonitor after click on the play button', () => {
     const handleRunMonitor = jest.fn()
+    const monitorSelectorMock = jest.fn().mockReturnValue({
+      isStarted: true,
+    })
+    monitorSelector.mockImplementation(monitorSelectorMock)
     render(<MonitorHeader handleRunMonitor={handleRunMonitor} />)
 
     fireEvent.click(screen.getByTestId('toggle-run-monitor'))
@@ -55,6 +73,10 @@ describe('MonitorHeader', () => {
   })
 
   it('Should clear Monitor items after click on the clear button', () => {
+    const monitorSelectorMock = jest.fn().mockReturnValue({
+      isStarted: true,
+    })
+    monitorSelector.mockImplementation(monitorSelectorMock)
     render(<MonitorHeader {...instance(mockedProps)} />)
 
     fireEvent.click(screen.getByTestId('clear-monitor'))
diff --git a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx
@@ -29,7 +29,7 @@ export interface Props {
 
 const MonitorHeader = ({ handleRunMonitor }: Props) => {
   const { instanceId = '' } = useParams<{ instanceId: string }>()
-  const { isRunning, isPaused, isStarted, items, error } = useSelector(monitorSelector)
+  const { isRunning, isPaused, isStarted, items = [], error, loadingPause } = useSelector(monitorSelector)
   const isErrorShown = !!error && !isRunning
   const dispatch = useDispatch()
 
@@ -89,7 +89,7 @@ const MonitorHeader = ({ handleRunMonitor }: Props) => {
                 onClick={() => handleRunMonitor()}
                 aria-label="start/stop monitor"
                 data-testid="toggle-run-monitor"
-                disabled={isErrorShown}
+                disabled={isErrorShown || loadingPause}
               />
             </EuiToolTip>
             <EuiToolTip
diff --git a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.spec.tsx b/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.spec.tsx
@@ -0,0 +1,27 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import { resetProfiler, stopMonitor } from 'uiSrc/slices/cli/monitor'
+import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
+import MonitorLog from './MonitorLog'
+
+let store: typeof mockedStore
+
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+describe('MonitorLog', () => {
+  it('should render', () => {
+    expect(render(<MonitorLog />)).toBeTruthy()
+  })
+
+  it('should call proper actions on click reset profiler', () => {
+    render(<MonitorLog />)
+    fireEvent.click(screen.getByTestId('reset-profiler-btn'))
+
+    const expectedActions = [stopMonitor(), resetProfiler()]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+})
diff --git a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx b/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx
@@ -1,4 +1,4 @@
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui'
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'
 import { format, formatDuration, intervalToDuration } from 'date-fns'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
@@ -39,19 +39,29 @@ const MonitorLog = () => {
     dispatch(resetProfiler())
   }
 
+  const getPaddingByWidth = (width: number): number => {
+    if (width < 360) return 6
+    if (width < 460) return 12
+    return 18
+  }
+
   return (
     <div className={styles.monitorLogWrapper}>
       <AutoSizer disableHeight>
         {({ width }) => (
-          <div className={styles.container} style={{ width }}>
+          <div
+            className={styles.container}
+            style={{ width, paddingLeft: getPaddingByWidth(width), paddingRight: getPaddingByWidth(width) }}
+          >
             <EuiText size="xs" color="subdued" className={styles.time}>
               <EuiIcon type="clock" />
               {format(timestamp.start, 'hh:mm:ss')}
               &nbsp;&#8211;&nbsp;
-              {format(timestamp.end, 'hh:mm:ss')}
+              {format(timestamp.paused, 'hh:mm:ss')}
               &nbsp;(
               {duration}
-              &nbsp;Running time)
+              {width > 360 && ' Running time'}
+              )
             </EuiText>
             <EuiFlexGroup
               className={styles.actions}
@@ -61,17 +71,22 @@ const MonitorLog = () => {
               responsive={false}
             >
               <EuiFlexItem grow={false}>
-                <EuiButton
-                  size="s"
-                  color="secondary"
-                  href={linkToDownload}
-                  iconType="download"
-                  className={styles.btn}
-                  {...downloadBtnProps}
+                <EuiToolTip
+                  content="Download Profiler Log"
                 >
-                  {width > 360 && ' Download '}
-                  Log
-                </EuiButton>
+                  <EuiButton
+                    size="s"
+                    color="secondary"
+                    href={linkToDownload}
+                    iconType="download"
+                    className={styles.btn}
+                    data-testid="download-log-btn"
+                    {...downloadBtnProps}
+                  >
+                    {width > 360 && ' Download '}
+                    Log
+                  </EuiButton>
+                </EuiToolTip>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiButton
@@ -81,6 +96,7 @@ const MonitorLog = () => {
                   onClick={onResetProfiler}
                   iconType="refresh"
                   className={styles.btn}
+                  data-testid="reset-profiler-btn"
                 >
                   Reset
                   {width > 360 && ' Profiler'}
diff --git a/redisinsight/ui/src/components/monitor/MonitorLog/styles.module.scss b/redisinsight/ui/src/components/monitor/MonitorLog/styles.module.scss
@@ -3,7 +3,7 @@
   min-height: 72px;
 
   margin: 10px 6px 6px 6px;
-  padding: 6px 18px;
+  padding: 6px 0;
 
   background: var(--euiColorLightestShade);
   box-shadow: 0 3px 15px var(--controlsBoxShadowColor);
diff --git a/redisinsight/ui/src/components/monitor/MonitorWrapper.tsx b/redisinsight/ui/src/components/monitor/MonitorWrapper.tsx
@@ -19,7 +19,7 @@ const MonitorWrapper = () => {
 
   const handleRunMonitor = () => {
     sendEventTelemetry({
-      event: isRunning ? TelemetryEvent.PROFILER_STOPPED : TelemetryEvent.PROFILER_STARTED,
+      event: isPaused ? TelemetryEvent.PROFILER_RESUMED : TelemetryEvent.PROFILER_PAUSED,
       eventData: { databaseId: instanceId }
     })
     dispatch(togglePauseMonitor())
@@ -28,7 +28,10 @@ const MonitorWrapper = () => {
   const onRunMonitor = (isSaveToLog?: boolean) => {
     sendEventTelemetry({
       event: TelemetryEvent.PROFILER_STARTED,
-      eventData: { databaseId: instanceId }
+      eventData: {
+        databaseId: instanceId,
+        logSaving: isSaveToLog
+      }
     })
     dispatch(startMonitor(isSaveToLog))
   }
diff --git a/redisinsight/ui/src/slices/cli/monitor.ts b/redisinsight/ui/src/slices/cli/monitor.ts
diff --git a/redisinsight/ui/src/slices/interfaces/monitor.ts b/redisinsight/ui/src/slices/interfaces/monitor.ts
diff --git a/redisinsight/ui/src/slices/tests/cli/monitor.spec.ts b/redisinsight/ui/src/slices/tests/cli/monitor.spec.ts
diff --git a/redisinsight/ui/src/telemetry/events.ts b/redisinsight/ui/src/telemetry/events.ts
