diff --git a/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx index 9b666d96d8..d5d58d707a 100644 --- a/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx +++ b/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx @@ -151,7 +151,8 @@ export const getStatusMessage = ({ const baseClass = "vpp-install-details-modal"; export type IVppInstallDetails = { - fleetInstallStatus: SoftwareInstallStatus; + /** Status: null when a host manually installed not using Fleet */ + fleetInstallStatus: SoftwareInstallStatus | null; hostDisplayName: string; appName: string; commandUuid?: string; @@ -233,11 +234,17 @@ export const VppInstallDetailsModal = ({ } ); - // Fallback to "installed" if no status is provided as Installed - const displayStatus = - (fleetInstallStatus as SoftwareInstallStatus) || "installed"; + // Fallback to "installed" if no status is provided + const displayStatus = fleetInstallStatus ?? "installed"; const iconName = INSTALL_DETAILS_STATUS_ICONS[displayStatus]; + // Handles "pending" value prior to 4.57 AND never shows error state on pending_install + // as some cases have command results not available for pending_installs + // which we don't want to show a UI error state for + const isPendingInstall = ["pending_install", "pending"].includes( + displayStatus + ); + // Note: We need to reconcile status values from two different sources. From props, we // get the status of the Fleet install operation (which can be "failed", "pending", or // "installed"). From the command results API response, we also receive the raw status @@ -248,7 +255,7 @@ export const VppInstallDetailsModal = ({ const excludeVersions = !deviceAuthToken && - ["pending_install", "failed_install"].includes(fleetInstallStatus); + ["pending_install", "failed_install", "pending"].includes(displayStatus); const isInstalledByFleet = hostSoftware ? !!hostSoftware.app_store_app?.last_install @@ -304,7 +311,7 @@ export const VppInstallDetailsModal = ({ return ; } - if (isErrorVPPCommandResult) { + if (isErrorVPPCommandResult && !isPendingInstall) { if (errorVPPCommandResult?.status === 404) { return deviceAuthToken ? ( @@ -335,7 +342,7 @@ export const VppInstallDetailsModal = ({ {statusMessage} {hostSoftware && !excludeVersions && renderInventoryVersionsSection()} - {fleetInstallStatus !== "pending_install" && + {!isPendingInstall && isInstalledByFleet && renderInstallDetailsSection()} @@ -343,7 +350,7 @@ export const VppInstallDetailsModal = ({ }; const renderCta = () => { - if (deviceAuthToken && fleetInstallStatus === "failed_install") { + if (deviceAuthToken && displayStatus === "failed_install") { return (