From b131839b7f5f4313fb19e15696d78d64d1f30008 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Tue, 22 Nov 2022 14:43:30 -0800
Subject: [PATCH] UI: make diskspace graph behavior os-dependent (#8792)

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 ...issue-7902-disk-space-formatting-for-linux |  1 +
 .../DiskSpaceGraph/DiskSpaceGraph.tsx         | 66 +++++++++++--------
 .../hosts/ManageHostsPage/HostTableConfig.tsx |  8 ++-
 .../HostDetailsPage/HostDetailsPage.tsx       |  1 +
 .../details/cards/HostSummary/HostSummary.tsx |  3 +-
 5 files changed, 48 insertions(+), 31 deletions(-)
 create mode 100644 changes/issue-7902-disk-space-formatting-for-linux

diff --git a/changes/issue-7902-disk-space-formatting-for-linux b/changes/issue-7902-disk-space-formatting-for-linux
new file mode 100644
index 0000000000..82dd2aa36d
--- /dev/null
+++ b/changes/issue-7902-disk-space-formatting-for-linux
@@ -0,0 +1 @@
+* Remove tooltips and conditional coloring in the disk space graph for Linux hosts
diff --git a/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx b/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx
index 6c51a54150..8d55e54757 100644
--- a/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx
+++ b/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>
   );
diff --git a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
index 56c323cad7..1aa378c523 100644
--- a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
+++ b/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}
         />
       );
     },
diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
index 59936a5fa2..16e50ad995 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
+++ b/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",
diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
index 74e294116b..5f532c8a0e 100644
--- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
+++ b/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" &&