Fleet UI: Clarify last fetched and last seen time on Manage Host Page (#8087)

changes/issue-7310-clarify-last-seen-last-fetched

@@ -0,0 +1 @@
+* Clarify last seen time and last fetched time in Fleet UI

frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx

@@ -13,6 +13,7 @@ import IssueCell from "components/TableContainer/DataTable/IssueCell/IssueCell";
 import LinkCell from "components/TableContainer/DataTable/LinkCell/LinkCell";
 import StatusCell from "components/TableContainer/DataTable/StatusCell/StatusCell";
 import TextCell from "components/TableContainer/DataTable/TextCell/TextCell";
+import TooltipWrapper from "components/TooltipWrapper";
 import {
   humanHostMemory,
   humanHostLastRestart,
@@ -285,12 +286,23 @@ const allHostTableHeaders: IDataColumn[] = [
   },
   {
     title: "Last fetched",
-    Header: (cellProps: IHeaderProps) => (
-      <HeaderCell
-        value={cellProps.column.title}
-        isSortedDesc={cellProps.column.isSortedDesc}
-      />
-    ),
+    Header: (headerProps: IHeaderProps): JSX.Element => {
+      const titleWithToolTip = (
+        <TooltipWrapper
+          tipContent={`
+            The last time the host reported vitals.
+          `}
+        >
+          Last fetched
+        </TooltipWrapper>
+      );
+      return (
+        <HeaderCell
+          value={titleWithToolTip}
+          isSortedDesc={headerProps.column.isSortedDesc}
+        />
+      );
+    },
     accessor: "detail_updated_at",
     Cell: (cellProps: ICellProps) => (
       <TextCell
@@ -301,12 +313,23 @@ const allHostTableHeaders: IDataColumn[] = [
   },
   {
     title: "Last seen",
-    Header: (cellProps: IHeaderProps) => (
-      <HeaderCell
-        value={cellProps.column.title}
-        isSortedDesc={cellProps.column.isSortedDesc}
-      />
-    ),
+    Header: (headerProps: IHeaderProps): JSX.Element => {
+      const titleWithToolTip = (
+        <TooltipWrapper
+          tipContent={`
+            The last time the host was online.
+          `}
+        >
+          Last seen
+        </TooltipWrapper>
+      );
+      return (
+        <HeaderCell
+          value={titleWithToolTip}
+          isSortedDesc={headerProps.column.isSortedDesc}
+        />
+      );
+    },
     accessor: "seen_time",
     Cell: (cellProps: ICellProps) => (
       <TextCell value={cellProps.cell.value} formatter={humanHostLastSeen} />

frontend/utilities/helpers.ts

@@ -588,7 +588,7 @@ export const humanHostLastSeen = (lastSeen: string): string => {
   if (!lastSeen || lastSeen < "2016-07-28T00:00:00Z") {
     return "Never";
   }
-  return format(new Date(lastSeen), "MMM d yyyy, HH:mm:ss");
+  return formatDistanceToNow(new Date(lastSeen), { addSuffix: true });
 };
 
 export const humanHostEnrolled = (enrolled: string): string => {