Merge pull request #2376 from mzedel/fix/monitors-notification

improved monitor config absence notification granularity
mendersoftware · Jan 14, 2022 · b9b5456 · b9b5456
2 parents a7dfd73 + 6355777
commit b9b5456
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 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
@@ -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
@@ -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