Host Details Page UI: Granulated disk space levels (#6586)

changes/issue-6551-disk-space-host-details

@@ -0,0 +1 @@
+* Host details page shows new disk space tooltip and 3 status levels

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)

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>

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;
   }
 }

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;

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-wrapper"
+            data-tip
+            data-for="disk-space-tooltip"
+          >
             <div className="info-flex__disk-space">
               <div
-              className={
-                titleData.percent_disk_space_available > 20
-                  ? "info-flex__disk-space-used"
-                  : "info-flex__disk-space-warning"
-              }
+                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>
       );

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,