Fleet UI: Add timestamps to host count on software detail pages

changes/24795-host-count

@@ -0,0 +1 @@
+- Fleet UI: Added timestamp for software, OS, and vulnerability detail pages for host count last update time

frontend/components/LastUpdatedHostCount/LastUpdatedHostCount.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import LastUpdatedHostCount from "./LastUpdatedHostCount";
+
+const meta: Meta<typeof LastUpdatedHostCount> = {
+  title: "Components/LastUpdatedHostCount",
+  component: LastUpdatedHostCount,
+  args: {
+    hostCount: 40,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LastUpdatedHostCount>;
+
+export const Basic: Story = {};
+
+export const WithLastUpdatedAt: Story = {
+  args: {
+    lastUpdatedAt: "2021-01-01T00:00:00Z",
+  },
+};

frontend/components/LastUpdatedHostCount/LastUpdatedHostCount.tests.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import LastUpdatedHostCount from ".";
+
+describe("Last updated host count", () => {
+  it("renders host count and updated text", () => {
+    const currentDate = new Date();
+    currentDate.setDate(currentDate.getDate() - 2);
+    const twoDaysAgo = currentDate.toISOString();
+
+    render(<LastUpdatedHostCount hostCount={40} lastUpdatedAt={twoDaysAgo} />);
+
+    const hostCount = screen.getByText(/40/i);
+    const updateText = screen.getByText("Updated 2 days ago");
+
+    expect(hostCount).toBeInTheDocument();
+    expect(updateText).toBeInTheDocument();
+  });
+  it("renders never if missing timestamp", () => {
+    render(<LastUpdatedHostCount />);
+
+    const text = screen.getByText("Updated never");
+
+    expect(text).toBeInTheDocument();
+  });
+
+  it("renders tooltip on hover", async () => {
+    render(<LastUpdatedHostCount hostCount={0} />);
+
+    await fireEvent.mouseEnter(screen.getByText("Updated never"));
+
+    expect(
+      screen.getByText(/last time host data was updated/i)
+    ).toBeInTheDocument();
+  });
+});

frontend/components/LastUpdatedHostCount/LastUpdatedHostCount.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import LastUpdatedText from "components/LastUpdatedText";
+
+const baseClass = "last-updated-host-count";
+
+interface ILastUpdatedHostCount {
+  hostCount?: string | number;
+  lastUpdatedAt?: string;
+}
+
+const LastUpdatedHostCount = ({
+  hostCount,
+  lastUpdatedAt,
+}: ILastUpdatedHostCount): JSX.Element => {
+  const tooltipContent = (
+    <>
+      The last time host data was updated. <br />
+      Click <b>View all hosts</b> to see the most
+      <br /> up-to-date host count.
+    </>
+  );
+
+  return (
+    <div className={baseClass}>
+      <>{hostCount}</>
+      <LastUpdatedText
+        lastUpdatedAt={lastUpdatedAt}
+        customTooltipText={tooltipContent}
+      />
+    </div>
+  );
+};
+
+export default LastUpdatedHostCount;

frontend/components/LastUpdatedHostCount/_styles.scss

@@ -0,0 +1,6 @@
+.last-updated-host-count {
+  display: flex;
+  align-items: baseline;
+  gap: $pad-small;
+  font-size: $x-small;
+}

frontend/components/LastUpdatedHostCount/index.ts

@@ -0,0 +1 @@
+export { default } from "./LastUpdatedHostCount";

frontend/components/LastUpdatedText/_styles.scss

@@ -1,5 +1,6 @@
 .component__last-updated-text {
   font-size: $xx-small;
+  font-weight: $regular;
   color: $ui-fleet-black-75;
 
   .tooltip {

frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx

@@ -72,13 +72,13 @@ const SoftwareOSDetailsPage = ({
   });
 
   const {
-    data: osVersionDetails,
+    data: { os_version: osVersionDetails, counts_updated_at } = {},
     isLoading,
     isError: isOsVersionError,
   } = useQuery<
     IOSVersionResponse,
     AxiosError,
-    IOperatingSystemVersion,
+    IOSVersionResponse,
     IGetOsVersionQueryKey[]
   >(
     [
@@ -93,7 +93,10 @@ const SoftwareOSDetailsPage = ({
       ...DEFAULT_USE_QUERY_OPTIONS,
       retry: false,
       enabled: !!osVersionIdFromURL,
-      select: (data) => data.os_version,
+      select: (data) => ({
+        os_version: data.os_version,
+        counts_updated_at: data.counts_updated_at,
+      }),
       onError: (error) => {
         if (!ignoreAxiosError(error, [403, 404])) {
           handlePageError(error);
@@ -154,7 +157,7 @@ const SoftwareOSDetailsPage = ({
             onTeamChange={onTeamChange}
           />
         )}
-        {isOsVersionError ? (
+        {isOsVersionError || !osVersionDetails ? (
           <DetailsNoHosts
             header="OS not detected"
             details="No hosts have this OS installed."
@@ -164,6 +167,7 @@ const SoftwareOSDetailsPage = ({
             <SoftwareDetailsSummary
               title={osVersionDetails.name}
               hosts={osVersionDetails.hosts_count}
+              countsUpdatedAt={counts_updated_at}
               queryParams={{
                 os_name: osVersionDetails.name_only,
                 os_version: osVersionDetails.version,

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareTitleDetailsPage.tsx

@@ -178,6 +178,7 @@ const SoftwareTitleDetailsPage = ({
             type={formatSoftwareType(softwareTitle)}
             versions={softwareTitle.versions?.length ?? 0}
             hosts={softwareTitle.hosts_count}
+            countsUpdatedAt={softwareTitle.counts_updated_at}
             queryParams={{
               software_title_id: softwareId,
               team_id: teamIdForApi,

frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSummary/SoftwareVulnSummary.tsx

@@ -11,6 +11,7 @@ import TooltipWrapper from "components/TooltipWrapper";
 import ViewAllHostsLink from "components/ViewAllHostsLink";
 import ProbabilityOfExploit from "components/ProbabilityOfExploit";
 import { HumanTimeDiffWithDateTip } from "components/HumanTimeDiffWithDateTip";
+import LastUpdatedHostCount from "components/LastUpdatedHostCount";
 
 const baseClass = "software-vuln-summary";
 
@@ -35,6 +36,7 @@ const SoftwareVulnSummary = ({
     cve_published,
     created_at,
     hosts_count,
+    hosts_count_updated_at,
   } = vuln;
 
   return (
@@ -126,7 +128,15 @@ const SoftwareVulnSummary = ({
             />
           }
         />
-        <DataSet title="Affected hosts" value={hosts_count} />
+        <DataSet
+          title="Affected hosts"
+          value={
+            <LastUpdatedHostCount
+              hostCount={hosts_count}
+              lastUpdatedAt={hosts_count_updated_at}
+            />
+          }
+        />
       </dl>
     </Card>
   );

frontend/pages/SoftwarePage/components/SoftwareDetailsSummary/SoftwareDetailsSummary.tsx

@@ -10,6 +10,7 @@ import { QueryParams } from "utilities/url";
 
 import ViewAllHostsLink from "components/ViewAllHostsLink";
 import DataSet from "components/DataSet";
+import LastUpdatedHostCount from "components/LastUpdatedHostCount";
 
 import SoftwareIcon from "../icons/SoftwareIcon";
 
@@ -19,6 +20,7 @@ interface ISoftwareDetailsSummaryProps {
   title: string;
   type?: string;
   hosts: number;
+  countsUpdatedAt?: string;
   /** The query param that will be added when user clicks on "View all hosts" link */
   queryParams: QueryParams;
   name?: string;
@@ -31,6 +33,7 @@ const SoftwareDetailsSummary = ({
   title,
   type,
   hosts,
+  countsUpdatedAt,
   queryParams,
   name,
   source,
@@ -46,7 +49,15 @@ const SoftwareDetailsSummary = ({
           {!!type && <DataSet title="Type" value={type} />}
 
           {!!versions && <DataSet title="Versions" value={versions} />}
-          <DataSet title="Hosts" value={hosts === 0 ? "---" : hosts} />
+          <DataSet
+            title="Hosts"
+            value={
+              <LastUpdatedHostCount
+                hostCount={hosts === 0 ? "---" : hosts}
+                lastUpdatedAt={countsUpdatedAt}
+              />
+            }
+          />
         </dl>
       </dl>
       <div>

frontend/pages/policies/ManagePoliciesPage/_styles.scss

@@ -295,8 +295,4 @@
       }
     }
   }
-
-  .component__last-updated-text {
-    font-weight: normal;
-  }
 }

frontend/services/entities/operating_systems.ts

@@ -48,6 +48,7 @@ export interface IGetOsVersionQueryKey extends IGetOsVersionOptions {
 }
 
 export interface IOSVersionResponse {
+  counts_updated_at?: string;
   os_version: IOperatingSystemVersion;
 }