UI: make diskspace graph behavior os-dependent (#8792)

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

changes/issue-7902-disk-space-formatting-for-linux

@@ -0,0 +1 @@
+* Remove tooltips and conditional coloring in the disk space graph for Linux hosts

frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx

@@ -7,6 +7,7 @@ interface IDiskSpaceGraphProps {
   gigsDiskSpaceAvailable: number | string;
   percentDiskSpaceAvailable: number;
   id: string;
+  platform: string;
 }
 
 const DiskSpaceGraph = ({
@@ -14,28 +15,31 @@ const DiskSpaceGraph = ({
   gigsDiskSpaceAvailable,
   percentDiskSpaceAvailable,
   id,
+  platform,
 }: IDiskSpaceGraphProps): JSX.Element => {
-  const diskSpaceIndicator = () => {
-    switch (true) {
-      case gigsDiskSpaceAvailable < 16:
+  const getDiskSpaceIndicatorColor = (): string => {
+    // return space-dependent graph colors for mac and windows hosts, green for linux
+    if (platform === "darwin" || platform === "windows") {
+      if (gigsDiskSpaceAvailable < 16) {
         return "red";
-      case gigsDiskSpaceAvailable < 32:
+      } else if (gigsDiskSpaceAvailable < 32) {
         return "yellow";
-      default:
-        return "green";
+      }
     }
+    return "green";
   };
 
-  const diskSpaceTooltip = (): string | undefined => {
-    switch (true) {
-      case gigsDiskSpaceAvailable < 16:
+  const diskSpaceTooltipText = ((): string | undefined => {
+    if (platform === "darwin" || platform === "windows") {
+      if (gigsDiskSpaceAvailable < 16) {
         return "Not enough disk space available to install most small operating systems updates.";
-      case gigsDiskSpaceAvailable < 32:
+      } else if (gigsDiskSpaceAvailable < 32) {
         return "Not enough disk space available to install most large operating systems updates.";
-      default:
-        return "Enough disk space available to install most operating systems updates.";
+      }
+      return "Enough disk space available to install most operating systems updates.";
     }
-  };
+    return undefined;
+  })();
 
   if (gigsDiskSpaceAvailable === 0 || gigsDiskSpaceAvailable === "---") {
     return <span className={`${baseClass}__data`}>No data available</span>;
@@ -46,29 +50,35 @@ const DiskSpaceGraph = ({
       <div
         className={`${baseClass}__disk-space-wrapper tooltip`}
         data-tip
-        data-for={id}
+        data-for={`tooltip-${id}`}
       >
         <div className={`${baseClass}__disk-space`}>
           <div
-            className={`${baseClass}__disk-space--${diskSpaceIndicator()}`}
+            className={`${baseClass}__disk-space--${getDiskSpaceIndicatorColor()}`}
             style={{
-              width: `${100 - percentDiskSpaceAvailable}%`,
+              width: `${percentDiskSpaceAvailable}%`,
             }}
+            title="disk space indicator"
           />
         </div>
       </div>
-      <ReactTooltip
-        className={"disk-space-tooltip"}
-        place="top"
-        type="dark"
-        effect="solid"
-        id={id}
-        backgroundColor="#3e4771"
-      >
-        <span className={`${baseClass}__tooltip-text`}>
-          {diskSpaceTooltip()}
-        </span>
-      </ReactTooltip>
+      {diskSpaceTooltipText && (
+        <ReactTooltip
+          className={"disk-space-tooltip"}
+          place="top"
+          type="dark"
+          effect="solid"
+          id={`tooltip-${id}`}
+          backgroundColor="#3e4771"
+        >
+          <span
+            className={`${baseClass}__tooltip-text`}
+            title="disk space tooltip"
+          >
+            {diskSpaceTooltipText}
+          </span>
+        </ReactTooltip>
+      )}
       {gigsDiskSpaceAvailable} GB{baseClass === "info-flex" && " available"}
     </span>
   );

frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx

@@ -248,14 +248,18 @@ const allHostTableHeaders: IDataColumn[] = [
     ),
     accessor: "gigs_disk_space_available",
     Cell: (cellProps: INumberCellProps): JSX.Element => {
-      const { id, percent_disk_space_available } = cellProps.row.original;
-
+      const {
+        id,
+        platform,
+        percent_disk_space_available,
+      } = cellProps.row.original;
       return (
         <DiskSpaceGraph
           baseClass="gigs_disk_space_available__cell"
           gigsDiskSpaceAvailable={cellProps.cell.value}
           percentDiskSpaceAvailable={percent_disk_space_available}
           id={`disk-space__${id}`}
+          platform={platform}
         />
       );
     },

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -334,6 +334,7 @@ const HostDetailsPage = ({
       "issues",
       "memory",
       "cpu_type",
+      "platform",
       "os_version",
       "osquery_version",
       "enroll_secret_name",

frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx

@@ -155,7 +155,8 @@ const HostSummary = ({
             baseClass="info-flex"
             gigsDiskSpaceAvailable={titleData.gigs_disk_space_available}
             percentDiskSpaceAvailable={titleData.percent_disk_space_available}
-            id={"disk-space-tooltip"}
+            id={`disk-space-tooltip-${titleData.id}`}
+            platform={titleData.platform}
           />
         </div>
         {typeof diskEncryption?.enabled === "boolean" &&