diff --git a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx index 19706c2a26..3ea5a54676 100644 --- a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx +++ b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx @@ -102,9 +102,20 @@ const DeviceUserPage = ({ onSuccess: (returnedHost: IHostResponse) => { setShowRefetchSpinner(returnedHost.host.refetch_requested); setIsPremiumTier(returnedHost.license.tier === "premium"); - if (returnedHost.host.refetch_requested) { + setHostSoftware(returnedHost.host.software); + setHost(returnedHost.host); + setOrgLogoURL(returnedHost.org_logo_url); + if (returnedHost?.host.refetch_requested) { + // 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 + // 60 seconds or until the API reports that the Fleet refetch request has been resolved + // or that the host has gone offline. if (!refetchStartTime) { - if (returnedHost.host.status === "online") { + // If our 60 second timer wasn't already started (e.g., if a refetch was pending when + // the first page loads), we start it now if the host is online. If the host is offline, + // we skip the refetch on page load. + if (returnedHost?.host.status === "online") { setRefetchStartTime(Date.now()); setTimeout(() => { refetchHostDetails(); @@ -116,7 +127,7 @@ const DeviceUserPage = ({ } else { const totalElapsedTime = Date.now() - refetchStartTime; if (totalElapsedTime < 60000) { - if (returnedHost.host.status === "online") { + if (returnedHost?.host.status === "online") { setTimeout(() => { refetchHostDetails(); refetchExtensions(); @@ -136,11 +147,8 @@ const DeviceUserPage = ({ setShowRefetchSpinner(false); } } - return; + // exit early because refectch is pending so we can avoid unecessary steps below } - setHostSoftware(returnedHost.host.software); - setHost(returnedHost.host); - setOrgLogoURL(returnedHost.org_logo_url); }, onError: (error) => handlePageError(error), } @@ -193,13 +201,12 @@ const DeviceUserPage = ({ if (host) { setShowRefetchSpinner(true); try { - await deviceUserAPI.refetch(deviceAuthToken).then(() => { - setRefetchStartTime(Date.now()); - setTimeout(() => { - refetchHostDetails(); - refetchExtensions(); - }, 1000); - }); + await deviceUserAPI.refetch(deviceAuthToken); + setRefetchStartTime(Date.now()); + setTimeout(() => { + refetchHostDetails(); + refetchExtensions(); + }, 1000); } catch (error) { console.log(error); renderFlash("error", `Host "${host.hostname}" refetch error`); diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx index f0fd621a44..fd7b73268e 100644 --- a/frontend/pages/hosts/details/cards/About/About.tsx +++ b/frontend/pages/hosts/details/cards/About/About.tsx @@ -5,8 +5,6 @@ import ReactTooltip from "react-tooltip"; import { IMDMData, IMunkiData, IDeviceUser } from "interfaces/host"; import { humanHostUptime, humanHostEnrolled } from "utilities/helpers"; -const baseClass = "host-summary"; - interface IAboutProps { aboutData: { [key: string]: any }; deviceMapping?: IDeviceUser[];