#RI-2745 - fix showing log

#RI-2738 - add state with borders when monitor is running
#RI-2390 - change label

Author: rsergeenko

redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx

@@ -83,9 +83,9 @@ const Monitor = (props: Props) => {
       </div>
       <div className={styles.saveLogContainer}>
         <EuiToolTip
-          title="Allows you to download the generated log file after pausing the Profiler."
+          title="Allows you to download the generated log file after pausing the Profiler"
           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"
+          The temporary log file will be automatically rewritten when the Profiler is reset."
         >
           <EuiSwitch
             compressed
@@ -122,7 +122,7 @@ const Monitor = (props: Props) => {
 
   return (
     <>
-      <div className={styles.container} data-testid="monitor">
+      <div className={cx(styles.container, { [styles.isRunning]: isRunning && !isPaused })} data-testid="monitor">
         {(error && !isRunning)
           ? (<MonitorError />)
           : (
@@ -151,12 +151,7 @@ const Monitor = (props: Props) => {
             )}
           </div>
         )}
-        {isRunning && isPaused && !isSaveToFile && (
-          <div data-testid="monitor-stopped" className={styles.monitorStoppedText}>
-            Profiler is paused.
-          </div>
-        )}
-        {(isStarted && isPaused && isSaveToFile) && (
+        {(isStarted && isPaused) && (
           <MonitorLog />
         )}
       </div>

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

@@ -22,6 +22,11 @@
 
   z-index: 10;
   overflow: auto;
+
+  &.isRunning {
+    outline: 1px solid var(--euiColorPrimary);
+    border-top-color: transparent;
+  }
 }
 
 .listWrapper {

redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx

@@ -15,7 +15,7 @@ const MIDDLE_SCREEN_RESOLUTION = 460 - PADDINGS_OUTSIDE
 const SMALL_SCREEN_RESOLUTION = 360 - PADDINGS_OUTSIDE
 
 const MonitorLog = () => {
-  const { timestamp, logFileId } = useSelector(monitorSelector)
+  const { timestamp, logFileId, isSaveToFile } = useSelector(monitorSelector)
   const dispatch = useDispatch()
 
   const duration = cutDurationText(
@@ -74,22 +74,24 @@ const MonitorLog = () => {
               responsive={false}
             >
               <EuiFlexItem grow={false}>
-                <EuiToolTip
-                  content="Download Profiler Log"
-                >
-                  <EuiButton
-                    size="s"
-                    color="secondary"
-                    href={linkToDownload}
-                    iconType="download"
-                    className={styles.btn}
-                    data-testid="download-log-btn"
-                    {...downloadBtnProps}
+                {isSaveToFile && (
+                  <EuiToolTip
+                    content="Download Profiler Log"
                   >
-                    {width > SMALL_SCREEN_RESOLUTION && ' Download '}
-                    Log
-                  </EuiButton>
-                </EuiToolTip>
+                    <EuiButton
+                      size="s"
+                      color="secondary"
+                      href={linkToDownload}
+                      iconType="download"
+                      className={styles.btn}
+                      data-testid="download-log-btn"
+                      {...downloadBtnProps}
+                    >
+                      {width > SMALL_SCREEN_RESOLUTION && ' Download '}
+                      Log
+                    </EuiButton>
+                  </EuiToolTip>
+                )}
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiButton

redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx

@@ -723,7 +723,7 @@ const AddStandaloneForm = (props: Props) => {
             <EuiCheckbox
               id={`${htmlIdGenerator()()} over db`}
               name="showDb"
-              label="Select the Redis logical database"
+              label="Select Logical Database"
               checked={!!formik.values.showDb}
               onChange={handleChangeDbIndexCheckbox}
               data-testid="showDb"