From a568c28124fb07005cab5c1ff83edaed9129bcdb Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Tue, 22 Nov 2022 14:15:17 -0800
Subject: [PATCH] UI: Add {on|off}line status tooltips and refactor HostSummary
 to use StatusCell (#8750)

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Co-authored-by: Luke Heath <luke@fleetdm.com>
---
 ...nd-offline-on-hosts-and-host-details-pages |  1 +
 .../DiskSpaceGraph/DiskSpaceGraph.tsx         |  2 +-
 .../DataTable/IssueCell/IssueCell.tsx         |  2 +-
 .../DataTable/StatusCell/StatusCell.tsx       | 38 +++++++++++++++++--
 .../DataTable/StatusCell/_styles.scss         | 10 +++++
 .../components/TooltipWrapper/_styles.scss    |  2 +-
 .../hosts/ManageHostsPage/HostTableConfig.tsx | 33 +++++++++++++---
 .../pages/hosts/ManageHostsPage/constants.ts  |  8 ++--
 .../details/DeviceUserPage/DeviceUserPage.tsx |  1 +
 .../HostDetailsPage/HostDetailsPage.tsx       |  1 +
 .../details/cards/HostSummary/HostSummary.tsx | 16 ++++++--
 frontend/pages/hosts/helpers.ts               |  6 +++
 frontend/styles/global/_global.scss           |  1 +
 13 files changed, 101 insertions(+), 20 deletions(-)
 create mode 100644 changes/issue-7309-explain-online-and-offline-on-hosts-and-host-details-pages
 create mode 100644 frontend/pages/hosts/helpers.ts

diff --git a/changes/issue-7309-explain-online-and-offline-on-hosts-and-host-details-pages b/changes/issue-7309-explain-online-and-offline-on-hosts-and-host-details-pages
new file mode 100644
index 0000000000..d819411bce
--- /dev/null
+++ b/changes/issue-7309-explain-online-and-offline-on-hosts-and-host-details-pages
@@ -0,0 +1 @@
+* On Hosts and Host Details pages, add tooltips and update dropdown choices to clarify the meanings of  "Status: Online" and "Status: Offline"
\ No newline at end of file
diff --git a/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx b/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx
index 6433ae564c..6c51a54150 100644
--- a/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx
+++ b/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx
@@ -59,7 +59,7 @@ const DiskSpaceGraph = ({
       </div>
       <ReactTooltip
         className={"disk-space-tooltip"}
-        place="bottom"
+        place="top"
         type="dark"
         effect="solid"
         id={id}
diff --git a/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tsx b/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tsx
index 0f3275b94a..bcd2d7d8d4 100644
--- a/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tsx
+++ b/frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tsx
@@ -28,7 +28,7 @@ const IssueCell = ({ issues, rowId }: IIssueCellProps<any>): JSX.Element => {
         <img alt="host issue" src={IssueIcon} />
       </span>
       <ReactTooltip
-        place="bottom"
+        place="top"
         effect="solid"
         backgroundColor="#3e4771"
         id={`host-issue__${rowId.toString()}`}
diff --git a/frontend/components/TableContainer/DataTable/StatusCell/StatusCell.tsx b/frontend/components/TableContainer/DataTable/StatusCell/StatusCell.tsx
index c8a58b4bf4..60bf7895da 100644
--- a/frontend/components/TableContainer/DataTable/StatusCell/StatusCell.tsx
+++ b/frontend/components/TableContainer/DataTable/StatusCell/StatusCell.tsx
@@ -1,8 +1,13 @@
 import React from "react";
 import classnames from "classnames";
+import ReactTooltip from "react-tooltip";
 
 interface IStatusCellProps {
   value: string;
+  tooltip?: {
+    id: number;
+    tooltipText: string;
+  };
 }
 
 const generateClassTag = (rawValue: string): string => {
@@ -12,13 +17,38 @@ const generateClassTag = (rawValue: string): string => {
   return rawValue.replace(" ", "-").toLowerCase();
 };
 
-const StatusCell = ({ value }: IStatusCellProps): JSX.Element => {
+const StatusCell = ({ value, tooltip }: IStatusCellProps): JSX.Element => {
+  const classTag = generateClassTag(value);
   const statusClassName = classnames(
     "data-table__status",
-    `data-table__status--${generateClassTag(value)}`
+    `data-table__status--${classTag}`,
+    `status--${classTag}`
   );
-
-  return <span className={statusClassName}>{value}</span>;
+  const cellContent = tooltip ? (
+    <>
+      <span
+        className="host-status tooltip tooltip__tooltip-icon"
+        data-tip
+        data-for={`status-${tooltip.id}`}
+        data-tip-disable={false}
+      >
+        {value}
+      </span>
+      <ReactTooltip
+        className="status-tooltip"
+        place="top"
+        type="dark"
+        effect="solid"
+        id={`status-${tooltip.id}`}
+        backgroundColor="#3e4771"
+      >
+        {tooltip.tooltipText}
+      </ReactTooltip>
+    </>
+  ) : (
+    <>{value}</>
+  );
+  return <span className={statusClassName}>{cellContent}</span>;
 };
 
 export default StatusCell;
diff --git a/frontend/components/TableContainer/DataTable/StatusCell/_styles.scss b/frontend/components/TableContainer/DataTable/StatusCell/_styles.scss
index bb380269ef..1012c8c510 100644
--- a/frontend/components/TableContainer/DataTable/StatusCell/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/StatusCell/_styles.scss
@@ -26,6 +26,16 @@
     background-color: $ui-offline;
   }
 
+  &--online,
+  &--offline {
+    .status-tooltip {
+      display: block;
+      white-space: normal;
+      max-width: 308px;
+      text-transform: none;
+    }
+  }
+
   // policy status
   &--yes:before {
     padding-right: 10px;
diff --git a/frontend/components/TooltipWrapper/_styles.scss b/frontend/components/TooltipWrapper/_styles.scss
index 81fbdc6e2e..26131b30d1 100644
--- a/frontend/components/TooltipWrapper/_styles.scss
+++ b/frontend/components/TooltipWrapper/_styles.scss
@@ -43,7 +43,7 @@
   &__tip-text {
     width: max-content;
     max-width: 341px;
-    padding: 12px;
+    padding: 6px;
     color: $core-white;
     background-color: $core-fleet-blue;
     font-weight: $regular;
diff --git a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
index 800bbce75e..56c323cad7 100644
--- a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
@@ -27,7 +27,7 @@ import { ITeamSummary } from "interfaces/team";
 import { IUser } from "interfaces/user";
 import PATHS from "router/paths";
 import permissionUtils from "utilities/permissions";
-import IssueIcon from "../../../../assets/images/icon-issue-fleet-black-16x16@2x.png";
+import getHostStatusTooltipText from "../helpers";
 
 interface IGetToggleAllRowsSelectedProps {
   checked: boolean;
@@ -196,12 +196,35 @@ const allHostTableHeaders: IDataColumn[] = [
   },
   {
     title: "Status",
-    Header: "Status",
+    Header: (headerProps: IHeaderProps): JSX.Element => {
+      const titleWithToolTip = (
+        <TooltipWrapper
+          tipContent={`
+             Online hosts will respond to a live query. Offline<br/>
+             hosts won’t respond to a live query because<br/>
+             they may be shut down, asleep, or not<br/>
+             connected to the internet.`}
+        >
+          Status
+        </TooltipWrapper>
+      );
+      return (
+        <HeaderCell
+          value={titleWithToolTip}
+          isSortedDesc={headerProps.column.isSortedDesc}
+        />
+      );
+    },
     disableSortBy: true,
     accessor: "status",
-    Cell: (cellProps: ICellProps) => (
-      <StatusCell value={cellProps.cell.value} />
-    ),
+    Cell: (cellProps: ICellProps) => {
+      const value = cellProps.cell.value;
+      const tooltip = {
+        id: cellProps.row.original.id,
+        tooltipText: getHostStatusTooltipText(value),
+      };
+      return <StatusCell value={value} tooltip={tooltip} />;
+    },
   },
   {
     title: "Issues",
diff --git a/frontend/pages/hosts/ManageHostsPage/constants.ts b/frontend/pages/hosts/ManageHostsPage/constants.ts
index 82fa5734a6..4b3bb27a33 100644
--- a/frontend/pages/hosts/ManageHostsPage/constants.ts
+++ b/frontend/pages/hosts/ManageHostsPage/constants.ts
@@ -9,19 +9,19 @@ export const HOST_SELECT_STATUSES = [
     disabled: false,
     label: "All hosts",
     value: "",
-    helpText: "All hosts that have been enrolled to Fleet.",
+    helpText: "All hosts added to Fleet.",
   },
   {
     disabled: false,
     label: "Online hosts",
     value: "online",
-    helpText: "Hosts that have recently checked in to Fleet.",
+    helpText: "Hosts that will respond to a live query.",
   },
   {
     disabled: false,
     label: "Offline hosts",
     value: "offline",
-    helpText: "Hosts that have not checked in to Fleet recently.",
+    helpText: "Hosts that won’t respond to a live query.",
   },
   {
     disabled: false,
@@ -33,6 +33,6 @@ export const HOST_SELECT_STATUSES = [
     disabled: false,
     label: "New hosts",
     value: "new",
-    helpText: "Hosts that have been enrolled to Fleet in the last 24 hours.",
+    helpText: "Hosts added to Fleet in the last 24 hours.",
   },
 ];
diff --git a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
index 7d598ae86d..6047243cd5 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
@@ -179,6 +179,7 @@ const DeviceUserPage = ({
 
   const titleData = normalizeEmptyValues(
     pick(host, [
+      "id",
       "status",
       "issues",
       "memory",
diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
index ccedafb575..59936a5fa2 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
@@ -329,6 +329,7 @@ const HostDetailsPage = ({
 
   const titleData = normalizeEmptyValues(
     pick(host, [
+      "id",
       "status",
       "issues",
       "memory",
diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
index 4e7997367d..74e294116b 100644
--- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
+++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
@@ -10,6 +10,9 @@ import {
   humanHostDetailUpdated,
   wrapFleetHelper,
 } from "utilities/helpers";
+import getHostStatusTooltipText from "pages/hosts/helpers";
+import StatusCell from "components/TableContainer/DataTable/StatusCell";
+// TODO: Refactor StatusCell into smaller non-table-specific StatusIndicator component to be wrapped by StatusCell
 import IssueIcon from "../../../../../../assets/images/icon-issue-fleet-black-50-16x16@2x.png";
 
 const baseClass = "host-summary";
@@ -72,7 +75,7 @@ const HostSummary = ({
           </Button>
         </div>
         <ReactTooltip
-          place="bottom"
+          place="top"
           effect="solid"
           id="refetch-tooltip"
           backgroundColor="#3e4771"
@@ -129,13 +132,18 @@ const HostSummary = ({
   );
 
   const renderSummary = () => {
+    const { status, id } = titleData;
     return (
       <div className="info-flex">
         <div className="info-flex__item info-flex__item--title">
           <span className="info-flex__header">Status</span>
-          <span className={`${statusClassName} info-flex__data`}>
-            {titleData.status}
-          </span>
+          <StatusCell
+            value={status || ""} // temporary work around of integration test bug
+            tooltip={{
+              id,
+              tooltipText: getHostStatusTooltipText(status),
+            }}
+          />
         </div>
         {titleData.issues?.total_issues_count > 0 &&
           isPremiumTier &&
diff --git a/frontend/pages/hosts/helpers.ts b/frontend/pages/hosts/helpers.ts
new file mode 100644
index 0000000000..3438313e86
--- /dev/null
+++ b/frontend/pages/hosts/helpers.ts
@@ -0,0 +1,6 @@
+export default function getHostStatusTooltipText(status: string): string {
+  if (status === "online") {
+    return "Online hosts will respond to a live query.";
+  }
+  return "Offline hosts won’t respond to a live query because they may be shut down, asleep, or not connected to the internet.";
+}
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index 290dad2435..ebdacc4427 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -22,6 +22,7 @@ body {
   .__react_component_tooltip.show {
     opacity: 1; // Overrides 0.9 default opacity
     text-align: center;
+    padding: 6px;
   }
 }