From 1681603baeb326a1a77376cba53e7b7d39ed97f0 Mon Sep 17 00:00:00 2001
From: Sarah Gillespie <73313222+gillespi314@users.noreply.github.com>
Date: Tue, 12 Dec 2023 17:28:41 -0600
Subject: [PATCH] Fetch host count for software version detail page (#15610)

---
 .../SoftwareVersionDetailsPage.tsx            | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/SoftwarePage/SoftwareVersionDetailsPage/SoftwareVersionDetailsPage.tsx b/frontend/pages/SoftwarePage/SoftwareVersionDetailsPage/SoftwareVersionDetailsPage.tsx
index 65a285d2d3..7f7d2568bd 100644
--- a/frontend/pages/SoftwarePage/SoftwareVersionDetailsPage/SoftwareVersionDetailsPage.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareVersionDetailsPage/SoftwareVersionDetailsPage.tsx
@@ -5,6 +5,10 @@ import { RouteComponentProps } from "react-router";
 import softwareAPI, {
   ISoftwareVersionResponse,
 } from "services/entities/software";
+import hostsCountAPI, {
+  IHostsCountQueryKey,
+  IHostsCountResponse,
+} from "services/entities/host_count";
 import { ISoftwareVersion, formatSoftwareType } from "interfaces/software";
 import { GITHUB_NEW_ISSUE_LINK } from "utilities/constants";
 import { AppContext } from "context/app";
@@ -67,6 +71,21 @@ const SoftwareVersionDetailsPage = ({
     }
   );
 
+  // TODO: Confirm desired UX for error and loading states
+  const {
+    data: hostsCount,
+    // isError: isHostsCountError,
+    // isLoading: isHostsCountLoading,
+  } = useQuery<IHostsCountResponse, Error, number, IHostsCountQueryKey[]>(
+    [{ scope: "hosts_count", softwareVersionId: versionId }],
+    ({ queryKey }) => hostsCountAPI.load(queryKey[0]),
+    {
+      keepPreviousData: true,
+      staleTime: 10000, // stale time can be adjusted if fresher data is desired
+      select: (data) => data.count,
+    }
+  );
+
   const tableHeaders = useMemo(
     () =>
       generateSoftwareVersionDetailsTableConfig(
@@ -90,7 +109,7 @@ const SoftwareVersionDetailsPage = ({
             id={softwareVersion.id}
             title={`${softwareVersion.name}, ${softwareVersion.version}`}
             type={formatSoftwareType(softwareVersion)}
-            hosts={softwareVersion.hosts_count ?? 0}
+            hosts={hostsCount ?? 0}
             queryParam="software_version_id"
             name={softwareVersion.name}
             source={softwareVersion.source}