From 073af3819b975ff254a7af4a0fed4f6da064643d Mon Sep 17 00:00:00 2001
From: "Roman.Sergeenko" <roman.sergeenko@softeq.com>
Date: Thu, 21 Apr 2022 13:27:37 +0400
Subject: [PATCH] #RI-2745 - fix showing log #RI-2738 - add state with borders
 when monitor is running #RI-2390 - change label

---
 .../components/monitor/Monitor/Monitor.tsx    | 13 +++----
 .../monitor/Monitor/styles.module.scss        |  5 +++
 .../monitor/MonitorLog/MonitorLog.tsx         | 34 ++++++++++---------
 .../InstanceForm/InstanceForm.tsx             |  2 +-
 4 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx b/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx
index ded2f055c6..03cef23227 100644
--- a/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx
+++ b/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>
diff --git a/redisinsight/ui/src/components/monitor/Monitor/styles.module.scss b/redisinsight/ui/src/components/monitor/Monitor/styles.module.scss
index 3daa1c1f52..3a2c9bfa63 100644
--- a/redisinsight/ui/src/components/monitor/Monitor/styles.module.scss
+++ b/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 {
diff --git a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx b/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx
index 6c296fb130..a6490f4fa2 100644
--- a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx
+++ b/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
diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx
index 7a7598e88e..f40ac54e01 100644
--- a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx
+++ b/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"