From 9ce5ef2f5999a078c3e09048720747ef3ca5bd53 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 14 Jul 2022 10:21:36 -0400
Subject: [PATCH] Host Details Page UI: Granulated disk space levels (#6586)

---
 changes/issue-6551-disk-space-host-details    |  1 +
 .../integration/all/app/fleetdesktop.spec.ts  |  6 +-
 .../TargetDetails/TargetDetails.jsx           |  4 +-
 .../hosts/details/DeviceUserPage/_styles.scss | 24 +++++-
 .../details/HostDetailsPage/_styles.scss      | 18 ++++-
 .../details/cards/HostSummary/HostSummary.tsx | 76 ++++++++++++++++---
 frontend/styles/global/_global.scss           |  5 ++
 7 files changed, 113 insertions(+), 21 deletions(-)
 create mode 100644 changes/issue-6551-disk-space-host-details

diff --git a/changes/issue-6551-disk-space-host-details b/changes/issue-6551-disk-space-host-details
new file mode 100644
index 000000000..f63346c3d
--- /dev/null
+++ b/changes/issue-6551-disk-space-host-details
@@ -0,0 +1 @@
+* Host details page shows new disk space tooltip and 3 status levels
\ No newline at end of file
diff --git a/cypress/integration/all/app/fleetdesktop.spec.ts b/cypress/integration/all/app/fleetdesktop.spec.ts
index 5790d58f9..08920e940 100644
--- a/cypress/integration/all/app/fleetdesktop.spec.ts
+++ b/cypress/integration/all/app/fleetdesktop.spec.ts
@@ -21,9 +21,9 @@ describe("Fleet Desktop", () => {
       cy.findByText(/my device/i).should("exist");
       cy.getAttached(".status--online").should("exist");
       cy.getAttached(".info-flex").within(() => {
-        cy.findByText(/operating system/i)
-          .next()
-          .contains(/ubuntu 20/i);
+        cy.findByText(/ubuntu 20/i)
+          .prev()
+          .contains(/operating system/i);
       });
       cy.getAttached(".info-grid").within(() => {
         cy.findByText(/private ip address/i)
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
index 79c22d172..8b7b4dfbf 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
@@ -114,11 +114,11 @@ class TargetDetails extends Component {
               </td>
             </tr>
             <tr>
-              <th>Operating System</th>
+              <th>Operating system</th>
               <td>{osVersion}</td>
             </tr>
             <tr>
-              <th>Osquery Version</th>
+              <th>Osquery version</th>
               <td>{osqueryVersion}</td>
             </tr>
             <tr>
diff --git a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
index a1ef98681..2bbb64839 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
@@ -75,6 +75,14 @@
         }
       }
 
+      &__disk-space-wrapper {
+        display: inline-block;
+
+        &:hover {
+          cursor: help;
+        }
+      }
+
       &__disk-space {
         display: inline-block;
         height: 4px;
@@ -83,18 +91,24 @@
         border-radius: 2px;
         margin-right: $pad-small;
         overflow: hidden;
+        margin-bottom: 2px;
       }
 
-      &__disk-space-used {
+      &__disk-space-green {
         background-color: $ui-success;
         height: 100%;
       }
 
-      &__disk-space-warning {
+      &__disk-space-yellow {
         background-color: $ui-warning;
         height: 100%;
       }
 
+      &__disk-space-red {
+        background-color: $ui-error;
+        height: 100%;
+      }
+
       &__header {
         color: $core-fleet-black;
         font-weight: $bold;
@@ -419,7 +433,11 @@
     margin: 0;
   }
 
-  .section--policies .data-table-block .data-table__table thead .response__header {
+  .section--policies
+    .data-table-block
+    .data-table__table
+    thead
+    .response__header {
     width: $col-md;
   }
 }
diff --git a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
index c6ec52c95..1d9ae77c2 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
@@ -72,6 +72,14 @@
         }
       }
 
+      &__disk-space-wrapper {
+        display: inline-block;
+
+        &:hover {
+          cursor: help;
+        }
+      }
+
       &__disk-space {
         display: inline-block;
         height: 4px;
@@ -80,18 +88,24 @@
         border-radius: 2px;
         margin-right: $pad-small;
         overflow: hidden;
+        margin-bottom: 2px;
       }
 
-      &__disk-space-used {
+      &__disk-space-green {
         background-color: $ui-success;
         height: 100%;
       }
 
-      &__disk-space-warning {
+      &__disk-space-yellow {
         background-color: $ui-warning;
         height: 100%;
       }
 
+      &__disk-space-red {
+        background-color: $ui-error;
+        height: 100%;
+      }
+
       &__header {
         color: $core-fleet-black;
         font-weight: $bold;
diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
index 046b19b0f..ba60fc48f 100644
--- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
+++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
@@ -123,6 +123,49 @@ const HostSummary = ({
   );
 
   const renderDiskSpace = () => {
+    const diskSpaceTooltip = () => {
+      const diskSpaceAvailable = titleData.gigs_disk_space_available;
+      switch (true) {
+        case diskSpaceAvailable < 16:
+          return (
+            <span className={`${baseClass}__tooltip-text`}>
+              Not enough disk space <br />
+              available to install most <br />
+              small operating systems <br />
+              updates.
+            </span>
+          );
+        case diskSpaceAvailable < 32:
+          return (
+            <span className={`${baseClass}__tooltip-text`}>
+              Not enough disk space <br />
+              available to install most <br />
+              large operating systems <br />
+              updates.
+            </span>
+          );
+        default:
+          return (
+            <span className={`${baseClass}__tooltip-text`}>
+              Enough disk space available <br />
+              to install most operating <br />
+              systems updates.
+            </span>
+          );
+      }
+    };
+
+    const diskSpaceIndicator = () => {
+      const diskSpaceAvailable = titleData.gigs_disk_space_available;
+      switch (true) {
+        case diskSpaceAvailable < 16:
+          return "red";
+        case diskSpaceAvailable < 32:
+          return "yellow";
+        default:
+          return "green";
+      }
+    };
     if (
       titleData &&
       (titleData.gigs_disk_space_available > 0 ||
@@ -130,18 +173,29 @@ const HostSummary = ({
     ) {
       return (
         <span className="info-flex__data">
-          <div className="info-flex__disk-space">
-            <div
-              className={
-                titleData.percent_disk_space_available > 20
-                  ? "info-flex__disk-space-used"
-                  : "info-flex__disk-space-warning"
-              }
-              style={{
-                width: `${100 - titleData.percent_disk_space_available}%`,
-              }}
-            />
+          <div
+            className="info-flex__disk-space-wrapper"
+            data-tip
+            data-for="disk-space-tooltip"
+          >
+            <div className="info-flex__disk-space">
+              <div
+                className={`info-flex__disk-space-${diskSpaceIndicator()}`}
+                style={{
+                  width: `${100 - titleData.percent_disk_space_available}%`,
+                }}
+              />
+            </div>
           </div>
+          <ReactTooltip
+            place="bottom"
+            type="dark"
+            effect="solid"
+            id="disk-space-tooltip"
+            backgroundColor="#3e4771"
+          >
+            {diskSpaceTooltip()}
+          </ReactTooltip>
           {titleData.gigs_disk_space_available} GB available
         </span>
       );
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index f1139558f..04d054f7a 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -18,6 +18,11 @@ body {
 html,
 body {
   height: 100%;
+
+  .__react_component_tooltip.show {
+    opacity: 1; // Overrides 0.9 default opacity
+    text-align: center;
+  }
 }
 
 .wrapper,