finish Host software > status cell updates

fleetdm · Sep 5, 2024 · 2a50d7a · 2a50d7a
1 parent 2bc9b34
commit 2a50d7a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 93 deletions.
diff --git a/frontend/interfaces/software.ts b/frontend/interfaces/software.ts
@@ -66,7 +66,7 @@ export interface ISoftwarePackage {
   icon_url: string | null;
   status: {
     installed: number;
-    pending: number;
+    pending: number; // includes total of hosts pending_install and pending_uninstall
     failed: number;
   };
 }
@@ -284,14 +284,16 @@ export interface IHostSoftware {
 
 export type IDeviceSoftware = IHostSoftware;
 
-const INSTALL_STATUS_PREDICATES: Record<SoftwareInstallStatus, string> = {
-  failed: "failed to install",
-  failed_install: "failed to install",
+const INSTALL_STATUS_PREDICATES: Record<
+  SoftwareInstallStatus | "pending",
+  string
+> = {
+  pending: "pending", // TODO - confirm this, current is to allow successful build while WIP
   installed: "installed",
-  pending: "told Fleet to install",
-  pending_install: "told Fleet to install",
-  pending_uninstall: "told Fleet to uninstall",
-  failed_uninstall: "failed to uninstall",
+  pending_install: "told Fleet to install", // TODO - confirm
+  failed_install: "failed to install", // TODO - confirm
+  pending_uninstall: "told Fleet to uninstall", // TODO - confirm
+  failed_uninstall: "failed to uninstall", // TODO - confirm
 } as const;
 
 export const getInstallStatusPredicate = (status: string | undefined) => {
@@ -304,7 +306,10 @@ export const getInstallStatusPredicate = (status: string | undefined) => {
   );
 };
 
-export const INSTALL_STATUS_ICONS: Record<SoftwareInstallStatus, IconNames> = {
+export const INSTALL_STATUS_ICONS: Record<
+  SoftwareInstallStatus | "pending" | "failed", // TODO - confirm this, current is to allow successful build while WIP
+  IconNames
+> = {
   pending: "pending-outline",
   pending_install: "pending-outline",
   installed: "success-outline",

diff --git a/...d/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/SoftwarePackageCard.tsx b/...d/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/SoftwarePackageCard.tsx
@@ -86,10 +86,8 @@ interface IStatusDisplayOption {
   tooltip: React.ReactNode;
 }
 
-// "pending" encompasses both "pending_install" and "pending_uninstall" for the sake of this UI
-type SoftwareInstallDisplayStatus =
-  | Exclude<SoftwareInstallStatus, "pending_install" | "pending_uninstall">
-  | "pending";
+// "pending" and "failed" each encompass both "_install" and "_uninstall" sub-statuses
+type SoftwareInstallDisplayStatus = "installed" | "pending" | "failed";
 
 const STATUS_DISPLAY_OPTIONS: Record<
   SoftwareInstallDisplayStatus,
@@ -119,16 +117,6 @@ const STATUS_DISPLAY_OPTIONS: Record<
       </>
     ),
   },
-  pending_install: {
-    displayName: "Pending",
-    iconName: "pending-outline",
-    tooltip: "Fleet will install software when these hosts come online.",
-  },
-  pending_uninstall: {
-    displayName: "Pending",
-    iconName: "pending-outline",
-    tooltip: "Fleet will uninstall software when these hosts come online.",
-  },
   failed: {
     displayName: "Failed",
     iconName: "error",
@@ -140,16 +128,6 @@ const STATUS_DISPLAY_OPTIONS: Record<
       </>
     ),
   },
-  failed_install: {
-    displayName: "Failed",
-    iconName: "error",
-    tooltip: "Fleet failed to install software on these hosts.",
-  },
-  failed_uninstall: {
-    displayName: "Failed",
-    iconName: "error",
-    tooltip: "Fleet failed to uninstall software on these hosts.",
-  },
 };
 
 interface IPackageStatusCountProps {

diff --git a/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx b/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx
@@ -48,37 +48,33 @@ export const INSTALL_STATUS_DISPLAY_OPTIONS: Record<
   pending_uninstall: {
     iconName: "pending-outline",
     displayText: "Uninstalling (pending)",
-    tooltip: () =>
-      "Fleet is uninstalling or will install when the host comes online.",
-  },
-  failed: {
-    iconName: "error",
-    displayText: "Failed",
     tooltip: () => (
       <>
-        The host failed to install software. To view errors, select
+        Fleet is uninstalling or will uninstall
         <br />
-        <b>Actions &gt; Show details</b>.
+        software when the host comes online.
       </>
     ),
   },
   failed_install: {
     iconName: "error",
-    displayText: "Failed",
-    tooltip: ({ lastInstalledAt: lastInstall }) => (
+    displayText: "Install (failed)",
+    tooltip: () => (
       <>
-        Fleet failed to install software ({dateAgo(lastInstall as string)} ago).
-        Select <b>Actions &gt; Software details</b> to see more.
+        The host failed to install software.
+        <br />
+        Select <b>Actions &gt; Show details</b> view errors.
       </>
     ),
   },
   failed_uninstall: {
     iconName: "error",
-    displayText: "Failed",
-    tooltip: ({ lastInstalledAt: lastInstall }) => (
+    displayText: "Uninstall (failed)",
+    tooltip: () => (
       <>
-        Fleet failed to install software ({dateAgo(lastInstall as string)} ago).
-        Select <b>Actions &gt; Software details</b> to see more.
+        The host failed to uninstall software.
+        <br />
+        Select <b>Details &gt; Activity</b> to view errors.
       </>
     ),
   },

diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tests.tsx b/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tests.tsx
@@ -112,13 +112,13 @@ describe("SelfService", () => {
     ).toHaveTextContent("Reinstall");
   });
 
-  it("renders 'Retry' action button with 'Failed' status", async () => {
+  it("renders 'Retry' action button with 'failed_install' status", async () => {
     mockServer.use(
       customDeviceSoftwareHandler({
         software: [
           createMockDeviceSoftware({
             name: "test-software",
-            status: "failed",
+            status: "failed_install",
           }),
         ],
       })
@@ -166,13 +166,13 @@ describe("SelfService", () => {
     ).toHaveTextContent("Install");
   });
 
-  it("renders no action button with 'Pending' status", async () => {
+  it("renders no action button with 'pending_install' status", async () => {
     mockServer.use(
       customDeviceSoftwareHandler({
         software: [
           createMockDeviceSoftware({
             name: "test-software",
-            status: "pending",
+            status: "pending_install",
           }),
         ],
       })

diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/SelfServiceItem/SelfServiceItem.tsx b/frontend/pages/hosts/details/cards/Software/SelfService/SelfServiceItem/SelfServiceItem.tsx
@@ -21,56 +21,27 @@ import { IStatusDisplayConfig } from "../../InstallStatusCell/InstallStatusCell"
 
 const baseClass = "self-service-item";
 
-const STATUS_CONFIG: Record<SoftwareInstallStatus, IStatusDisplayConfig> = {
+const STATUS_CONFIG: Record<
+  Exclude<SoftwareInstallStatus, "pending_uninstall" | "failed_uninstall">,
+  IStatusDisplayConfig
+> = {
   installed: {
     iconName: "success",
     displayText: "Installed",
     tooltip: ({ lastInstalledAt }) =>
       `Software is installed (${dateAgo(lastInstalledAt as string)}).`,
   },
-  pending: {
+  pending_install: {
     iconName: "pending-outline",
     displayText: "Pending",
     tooltip: () => "Fleet is installing software.",
   },
-  pending_install: {
-    iconName: "pending-outline",
-    displayText: "Install in progress...",
-    tooltip: () => "Software installation in progress...",
-  },
-  pending_uninstall: {
-    iconName: "pending-outline",
-    displayText: "Uninstall in progress...",
-    tooltip: () => "Software uninstallation in progress...",
-  },
-  failed: {
-    iconName: "error",
-    displayText: "Failed",
-    tooltip: ({ lastInstalledAt = "" }) => (
-      <>
-        Software failed to install{" "}
-        {lastInstalledAt ? ` (${dateAgo(lastInstalledAt)})` : ""}. Select{" "}
-        <b>Retry</b> to install again, or contact your IT department.
-      </>
-    ),
-  },
   failed_install: {
     iconName: "error",
     displayText: "Failed",
     tooltip: ({ lastInstalledAt = "" }) => (
       <>
-        Software failed to install
-        {lastInstalledAt ? ` (${dateAgo(lastInstalledAt)})` : ""}. Select{" "}
-        <b>Retry</b> to install again, or contact your IT department.
-      </>
-    ),
-  },
-  failed_uninstall: {
-    iconName: "error",
-    displayText: "Failed",
-    tooltip: ({ lastInstalledAt = "" }) => (
-      <>
-        Software failed to install
+        Software failed to install{" "}
         {lastInstalledAt ? ` (${dateAgo(lastInstalledAt)})` : ""}. Select{" "}
         <b>Retry</b> to install again, or contact your IT department.
       </>
@@ -166,7 +137,7 @@ const getInstallButtonText = (status: SoftwareInstallStatus | null) => {
   switch (status) {
     case null:
       return "Install";
-    case "failed":
+    case "failed_install":
       return "Retry";
     case "installed":
       return "Reinstall";
@@ -195,7 +166,7 @@ const InstallerStatusAction = ({
 
   // if the localStatus is "failed", we don't want our tooltip to include the old installed_at date so we
   // set this to null, which tells the tooltip to omit the parenthetical date
-  const lastInstall = localStatus === "failed" ? null : last_install;
+  const lastInstall = localStatus === "failed_install" ? null : last_install;
 
   const isMountedRef = useRef(false);
   useEffect(() => {
@@ -206,7 +177,7 @@ const InstallerStatusAction = ({
   }, []);
 
   const onClick = useCallback(async () => {
-    setLocalStatus("pending");
+    setLocalStatus("pending_install");
     try {
       await deviceApi.installSelfServiceSoftware(deviceToken, id);
       if (isMountedRef.current) {
@@ -215,7 +186,7 @@ const InstallerStatusAction = ({
     } catch (error) {
       renderFlash("error", "Couldn't install. Please try again.");
       if (isMountedRef.current) {
-        setLocalStatus("failed");
+        setLocalStatus("failed_install");
       }
     }
   }, [deviceToken, id, onInstall, renderFlash]);
@@ -232,7 +203,7 @@ const InstallerStatusAction = ({
             type="button"
             className={`${baseClass}__item-action-button`}
             onClick={onClick}
-            disabled={localStatus === "pending"}
+            disabled={localStatus === "pending_install"}
           >
             <span data-testid={`${baseClass}__item-action-button--test`}>
               {installButtonText}