adjust the UI to show a refetching spinner on critical queries (#11868)

A possible solution for https://github.com/fleetdm/fleet/issues/11860,
this updates the "My Device" page to show the spinner rotating if
critical queries are being fetched:



https://github.com/fleetdm/fleet/assets/4419992/0a84508a-4df2-4da3-b9bc-b3e75bab5e82


# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [x] Manual QA for all new/changed functionality

cmd/fleetctl/testdata/expectedHostDetailResponseJson.json

@@ -12,6 +12,7 @@
     "seen_time": "0001-01-01T00:00:00Z",
     "software_updated_at": "0001-01-01T00:00:00Z",
     "refetch_requested": false,
+    "refetch_critical_queries_until": null,
     "hostname": "test_host",
     "uuid": "",
     "platform": "",

cmd/fleetctl/testdata/expectedHostDetailResponseYaml.yml

@@ -75,6 +75,7 @@ spec:
   primary_ip: ""
   primary_mac: ""
   refetch_requested: false
+  refetch_critical_queries_until: null
   seen_time: "0001-01-01T00:00:00Z"
   software_updated_at: "0001-01-01T00:00:00Z"
   status: offline

cmd/fleetctl/testdata/expectedListHostsJson.json

@@ -11,6 +11,7 @@
 		"seen_time": "0001-01-01T00:00:00Z",
 		"software_updated_at": "0001-01-01T00:00:00Z",
 		"refetch_requested": false,
+		"refetch_critical_queries_until": null,
 		"hostname": "test_host",
 		"display_name": "test_host",
 		"uuid": "",
@@ -79,6 +80,7 @@
 		"seen_time": "0001-01-01T00:00:00Z",
 		"software_updated_at": "0001-01-01T00:00:00Z",
 		"refetch_requested": false,
+		"refetch_critical_queries_until": null,
 		"hostname": "test_host2",
 		"uuid": "",
 		"platform": "",

cmd/fleetctl/testdata/expectedListHostsMDM.json

@@ -12,6 +12,7 @@
 			"seen_time": "0001-01-01T00:00:00Z",
 			"software_updated_at": "0001-01-01T00:00:00Z",
 			"refetch_requested": false,
+			"refetch_critical_queries_until": null,
 			"hostname": "test_host",
 			"display_name": "test_host",
 			"uuid": "",
@@ -80,6 +81,7 @@
 			"seen_time": "0001-01-01T00:00:00Z",
 			"software_updated_at": "0001-01-01T00:00:00Z",
 			"refetch_requested": false,
+			"refetch_critical_queries_until": null,
 			"hostname": "test_host2",
 			"uuid": "",
 			"platform": "",

cmd/fleetctl/testdata/expectedListHostsYaml.yml

@@ -50,6 +50,7 @@ spec:
   primary_ip: ""
   primary_mac: ""
   refetch_requested: false
+  refetch_critical_queries_until: null
   seen_time: "0001-01-01T00:00:00Z"
   software_updated_at: "0001-01-01T00:00:00Z"
   status: offline

frontend/interfaces/host.ts

@@ -203,6 +203,7 @@ export interface IHost {
   last_enrolled_at: string;
   seen_time: string;
   refetch_requested: boolean;
+  refetch_critical_queries_until: string;
   hostname: string;
   uuid: string;
   platform: string;

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

@@ -116,6 +116,18 @@ const DeviceUserPage = ({
   const refetchExtensions = () => {
     deviceMapping !== null && refetchDeviceMapping();
   };
+
+  const isRefetching = ({
+    refetch_requested,
+    refetch_critical_queries_until,
+  }: IHost) => {
+    const now = new Date();
+    const refetchUntil = new Date(refetch_critical_queries_until);
+    const isRefetchingCriticalQueries =
+      !isNaN(refetchUntil.getTime()) && refetchUntil > now;
+    return refetch_requested || isRefetchingCriticalQueries;
+  };
+
   const {
     isLoading: isLoadingHost,
     error: loadingDeviceUserError,
@@ -131,7 +143,7 @@ const DeviceUserPage = ({
       retry: false,
       select: (data: IDeviceUserResponse) => data,
       onSuccess: (returnedHost: IDeviceUserResponse) => {
-        setShowRefetchSpinner(returnedHost.host.refetch_requested);
+        setShowRefetchSpinner(isRefetching(returnedHost.host));
         setIsPremiumTier(returnedHost.license.tier === "premium");
         setHostSoftware(returnedHost.host.software ?? []);
         setHost(returnedHost.host);
@@ -144,7 +156,7 @@ const DeviceUserPage = ({
         });
         setOrgLogoURL(returnedHost.org_logo_url);
         setGlobalConfig(returnedHost.global_config);
-        if (returnedHost?.host.refetch_requested) {
+        if (isRefetching(returnedHost.host)) {
           // If the API reports that a Fleet refetch request is pending, we want to check back for fresh
           // host details. Here we set a one second timeout and poll the API again using
           // fullyReloadHost. We will repeat this process with each onSuccess cycle for a total of

server/fleet/hosts.go

@@ -296,7 +296,7 @@ type Host struct {
 	// add a "reason" field with well-known labels so we know what condition(s)
 	// are expected to clear the timestamp. For now there's a single use-case
 	// so we don't need this.
-	RefetchCriticalQueriesUntil *time.Time `json:"-" db:"refetch_critical_queries_until" csv:"-"`
+	RefetchCriticalQueriesUntil *time.Time `json:"refetch_critical_queries_until" db:"refetch_critical_queries_until" csv:"-"`
 }
 
 type MDMHostData struct {