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>

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"

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}

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()}`}

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;

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;

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;

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",

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.",
   },
 ];

frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx

@@ -179,6 +179,7 @@ const DeviceUserPage = ({
 
   const titleData = normalizeEmptyValues(
     pick(host, [
+      "id",
       "status",
       "issues",
       "memory",

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

@@ -329,6 +329,7 @@ const HostDetailsPage = ({
 
   const titleData = normalizeEmptyValues(
     pick(host, [
+      "id",
       "status",
       "issues",
       "memory",

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 &&

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.";
+}

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