From 6355777ab36fe560728612701a2e099deec5bbf6 Mon Sep 17 00:00:00 2001
From: Manuel Zedel <manuel.zedel@northern.tech>
Date: Fri, 14 Jan 2022 17:10:44 +0100
Subject: [PATCH] improved monitor config absence notification granularity -
 this primarily takes existing alerts into account - unfortunately there is
 still a chance for the notification to be misleading - especially in case of
 offline devices

Changelog: None
Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>
---
 .../__snapshots__/monitoring.test.js.snap     | 65 ++++++++++++-------
 .../devices/device-details/monitoring.js      | 13 ++--
 2 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/src/js/components/devices/device-details/__snapshots__/monitoring.test.js.snap b/src/js/components/devices/device-details/__snapshots__/monitoring.test.js.snap
index fb9585105e..bdb1c204d7 100644
--- a/src/js/components/devices/device-details/__snapshots__/monitoring.test.js.snap
+++ b/src/js/components/devices/device-details/__snapshots__/monitoring.test.js.snap
@@ -5,7 +5,7 @@ exports[`DeviceMonitoring Component renders correctly 1`] = `
   class="margin-bottom "
 >
   <div
-    class=" flexbox space-between"
+    class="clickable flexbox space-between"
     style="align-items: flex-start;"
   >
     <div
@@ -33,44 +33,63 @@ exports[`DeviceMonitoring Component renders correctly 1`] = `
           Add-on
         </span>
       </button>
-      <div
-        style="height: 48px; width: 48px;"
-      />
+      <button
+        class="MuiButtonBase-root MuiIconButton-root"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
     </div>
   </div>
   <div>
     <div
-      class="flexbox text-muted"
+      class="flexbox center-aligned padding-small device-detail-notification  red column-data "
+      style="margin-bottom: 8px; padding-bottom: 12px; padding-top: 12px;"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
+        class="MuiSvgIcon-root red"
         focusable="false"
-        style="margin-right: 8px;"
+        style="margin-right: 16px;"
         viewBox="0 0 24 24"
       >
         <path
-          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
         />
       </svg>
-      <p
-        class="MuiTypography-root MuiTypography-body1"
-        style="text-transform: none; text-align: left;"
+      <div
+        class="flexbox center-aligned"
       >
-        No alert monitor is currently configured for this device.
-        <br />
-        Please
-         
-        <a
-          href="https://docs.mender.io/undefinedadd-ons/monitor"
-          rel="noopener noreferrer"
-          target="_blank"
+        <div
+          class="key text-muted margin-right-small"
         >
-          see the documentation
-        </a>
+          <b>
+            Device offline
+          </b>
+        </div>
+        Last check-in over 
+        24
          
-        for a description on how to configure different kinds of monitors.
-      </p>
+        hours
+         ago
+      </div>
     </div>
   </div>
   <div
diff --git a/src/js/components/devices/device-details/monitoring.js b/src/js/components/devices/device-details/monitoring.js
index 91a8cce204..0d219b659f 100644
--- a/src/js/components/devices/device-details/monitoring.js
+++ b/src/js/components/devices/device-details/monitoring.js
@@ -48,24 +48,25 @@ export const DeviceMonitoring = ({ alerts, device, docsVersion, getAlerts, inner
   }, [open]);
 
   const { monitors = [], updated_ts = '' } = device;
+  const hasMonitorsDefined = !!(monitors.length || alerts.length || latestAlerts.length);
 
-  const toggleOpen = monitors.length ? () => setOpen(!open) : undefined;
+  const toggleOpen = hasMonitorsDefined ? () => setOpen(!open) : undefined;
 
   return (
     <DeviceDataCollapse
       header={
-        !monitors.length ? (
-          <DeviceMonitorsMissingNote docsVersion={docsVersion} />
-        ) : (
+        hasMonitorsDefined || isOffline ? (
           <>
-            {!latestAlerts.length && <NoAlertsHeaderNotification />}
+            {hasMonitorsDefined && !latestAlerts.length && <NoAlertsHeaderNotification />}
             {!open &&
               latestAlerts.map(alert => (
                 <MonitoringAlert alert={alert} key={alert.id} onDetailsClick={onDetailsClick} style={{ marginBottom: theme.spacing() }} />
               ))}
             {isOffline && <DeviceOfflineHeaderNotification />}
-            {!open && <a onClick={toggleOpen}>show more</a>}
+            {!!(!isOffline || alerts.length || latestAlerts.length) && !open && <a onClick={toggleOpen}>show more</a>}
           </>
+        ) : (
+          <DeviceMonitorsMissingNote docsVersion={docsVersion} />
         )
       }
       isAddOn