feat(updates): add one-click upgrade experience

Author: mcharles-square

client/src/protoFleet/components/AppLayout/AppLayout.tsx

@@ -108,6 +108,13 @@ const AppLayoutContent = ({ children, hideShellHeader = false }: Props) => {
         open={updateNotification.modalOpen}
         release={updateNotification.release}
         installCommand={updateNotification.installCommand}
+        oneClickAvailable={updateNotification.oneClickAvailable}
+        operation={updateNotification.operation}
+        connectionLost={updateNotification.connectionLost}
+        triggering={updateNotification.triggering}
+        triggerError={updateNotification.triggerError}
+        onUpgrade={updateNotification.triggerUpgrade}
+        onReload={updateNotification.reloadFleet}
         onDismiss={updateNotification.closeModal}
       />
 

client/src/protoFleet/features/updates/api/useUpdateStatus.ts

@@ -19,6 +19,7 @@ const statusUnchanged = (prev: GetUpdateStatusResponse, next: GetUpdateStatusRes
   prev.updateAvailable === next.updateAvailable &&
   prev.channel === next.channel &&
   prev.installCommand === next.installCommand &&
+  prev.oneClickAvailable === next.oneClickAvailable &&
   prev.latestEligible?.version === next.latestEligible?.version;
 
 // Polls GetUpdateStatus for permission holders only: the RPC is gated by

client/src/protoFleet/features/updates/api/useUpgradeOperation.test.tsx

@@ -0,0 +1,103 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { create } from "@bufbuild/protobuf";
+
+import { instanceUpdateClient } from "@/protoFleet/api/clients";
+import {
+  GetUpgradeStatusResponseSchema,
+  TriggerUpgradeResponseSchema,
+  UpgradeOperationSchema,
+  UpgradePhase,
+} from "@/protoFleet/api/generated/instance/v1/updates_pb";
+import { useUpgradeOperation } from "@/protoFleet/features/updates/api/useUpgradeOperation";
+
+vi.mock("@/protoFleet/api/clients", () => ({
+  instanceUpdateClient: {
+    getUpgradeStatus: vi.fn(),
+    triggerUpgrade: vi.fn(),
+  },
+}));
+
+const mockGetUpgradeStatus = vi.mocked(instanceUpdateClient.getUpgradeStatus);
+const mockTriggerUpgrade = vi.mocked(instanceUpdateClient.triggerUpgrade);
+
+const activeOperation = create(UpgradeOperationSchema, {
+  id: "operation-1",
+  targetVersion: "v1.3.0",
+  phase: UpgradePhase.PREFLIGHT,
+  message: "Validating release",
+});
+
+describe("useUpgradeOperation", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("recovers a durable in-progress operation when the page loads", async () => {
+    mockGetUpgradeStatus.mockResolvedValue(
+      create(GetUpgradeStatusResponseSchema, {
+        executorAvailable: true,
+        operation: activeOperation,
+      }),
+    );
+
+    const { result } = renderHook(() => useUpgradeOperation(true, true));
+
+    await waitFor(() => expect(result.current.operation?.id).toBe("operation-1"));
+    expect(result.current.connectionLost).toBe(false);
+  });
+
+  it("does not replay an already completed success on every fresh page load", async () => {
+    mockGetUpgradeStatus.mockResolvedValue(
+      create(GetUpgradeStatusResponseSchema, {
+        executorAvailable: true,
+        operation: create(UpgradeOperationSchema, {
+          id: "completed-operation",
+          targetVersion: "v1.3.0",
+          phase: UpgradePhase.SUCCEEDED,
+        }),
+      }),
+    );
+
+    const { result } = renderHook(() => useUpgradeOperation(true, true));
+
+    await waitFor(() => expect(mockGetUpgradeStatus).toHaveBeenCalled());
+    expect(result.current.operation).toBeUndefined();
+  });
+
+  it("starts the exact offered target and retains the returned operation", async () => {
+    mockGetUpgradeStatus.mockResolvedValue(create(GetUpgradeStatusResponseSchema, { executorAvailable: true }));
+    mockTriggerUpgrade.mockResolvedValue(
+      create(TriggerUpgradeResponseSchema, {
+        operation: activeOperation,
+      }),
+    );
+    const { result } = renderHook(() => useUpgradeOperation(true, true));
+
+    await act(async () => {
+      await result.current.triggerUpgrade("v1.3.0");
+    });
+
+    expect(mockTriggerUpgrade).toHaveBeenCalledWith({ targetVersion: "v1.3.0" });
+    expect(result.current.operation?.phase).toBe(UpgradePhase.PREFLIGHT);
+    expect(result.current.triggerError).toBeNull();
+  });
+
+  it("surfaces a trigger failure while leaving the manual fallback usable", async () => {
+    mockGetUpgradeStatus.mockResolvedValue(create(GetUpgradeStatusResponseSchema, { executorAvailable: true }));
+    mockTriggerUpgrade.mockRejectedValue(new Error("host updater unavailable"));
+    const { result } = renderHook(() => useUpgradeOperation(true, true));
+
+    let caught: unknown;
+    await act(async () => {
+      try {
+        await result.current.triggerUpgrade("v1.3.0");
+      } catch (error) {
+        caught = error;
+      }
+    });
+    expect(caught).toEqual(expect.objectContaining({ message: "host updater unavailable" }));
+    expect(result.current.operation).toBeUndefined();
+    expect(result.current.triggerError).toContain("host updater unavailable");
+  });
+});

client/src/protoFleet/features/updates/api/useUpgradeOperation.ts

@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { instanceUpdateClient } from "@/protoFleet/api/clients";
+import { type UpgradeOperation, UpgradePhase } from "@/protoFleet/api/generated/instance/v1/updates_pb";
+import { getErrorMessage } from "@/protoFleet/api/getErrorMessage";
+
+const ACTIVE_POLL_INTERVAL_MS = 2_000;
+const IDLE_POLL_INTERVAL_MS = 60_000;
+
+export const isUpgradeTerminal = (phase: UpgradePhase) =>
+  phase === UpgradePhase.SUCCEEDED || phase === UpgradePhase.FAILED;
+
+export const isUpgradeActive = (operation?: UpgradeOperation) =>
+  Boolean(operation && operation.phase !== UpgradePhase.UNSPECIFIED && !isUpgradeTerminal(operation.phase));
+
+interface UseUpgradeOperationResult {
+  connectionLost: boolean;
+  operation: UpgradeOperation | undefined;
+  reloadFleet: () => void;
+  triggerError: string | null;
+  triggering: boolean;
+  triggerUpgrade: (targetVersion: string) => Promise<void>;
+}
+
+export function useUpgradeOperation(hasPermission: boolean, executorAdvertised: boolean): UseUpgradeOperationResult {
+  const [operation, setOperation] = useState<UpgradeOperation>();
+  const [triggering, setTriggering] = useState(false);
+  const [connectionLost, setConnectionLost] = useState(false);
+  const [triggerError, setTriggerError] = useState<string | null>(null);
+  const observedActiveOperation = useRef(false);
+  const active = isUpgradeActive(operation);
+  const enabled = hasPermission && (executorAdvertised || operation !== undefined);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    let cancelled = false;
+    const poll = async () => {
+      try {
+        const response = await instanceUpdateClient.getUpgradeStatus({});
+        if (cancelled) return;
+        if (!response.executorAvailable) {
+          if (active) setConnectionLost(true);
+          return;
+        }
+        setConnectionLost(false);
+        if (response.operation) {
+          if (isUpgradeActive(response.operation)) {
+            observedActiveOperation.current = true;
+          }
+          // A completed success is useful to the tab that watched or
+          // initiated it, but replaying the daemon's last success on every
+          // fresh page load would reopen the modal forever.
+          if (response.operation.phase === UpgradePhase.SUCCEEDED && !observedActiveOperation.current) {
+            return;
+          }
+          setOperation(response.operation);
+        }
+      } catch {
+        if (!cancelled && active) {
+          // fleetd is intentionally offline during activation. Keep the last
+          // durable phase visible and continue polling until the new stack is
+          // reachable.
+          setConnectionLost(true);
+        }
+      }
+    };
+
+    void poll();
+    const interval = window.setInterval(poll, active ? ACTIVE_POLL_INTERVAL_MS : IDLE_POLL_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [active, enabled]);
+
+  const triggerUpgrade = useCallback(async (targetVersion: string) => {
+    setTriggering(true);
+    setTriggerError(null);
+    try {
+      const response = await instanceUpdateClient.triggerUpgrade({ targetVersion });
+      if (!response.operation) {
+        throw new Error("Host updater did not return an operation");
+      }
+      observedActiveOperation.current = true;
+      setOperation(response.operation);
+      setConnectionLost(false);
+    } catch (error) {
+      const message = getErrorMessage(error, "Failed to start upgrade");
+      setTriggerError(message);
+      throw error;
+    } finally {
+      setTriggering(false);
+    }
+  }, []);
+
+  const reloadFleet = useCallback(() => {
+    window.location.reload();
+  }, []);
+
+  return {
+    connectionLost,
+    operation,
+    reloadFleet,
+    triggerError,
+    triggering,
+    triggerUpgrade,
+  };
+}

client/src/protoFleet/features/updates/components/UpdateNotificationModal.test.tsx

@@ -0,0 +1,110 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { create } from "@bufbuild/protobuf";
+
+import {
+  ReleaseInfoSchema,
+  type UpgradeOperation,
+  UpgradeOperationSchema,
+  UpgradePhase,
+} from "@/protoFleet/api/generated/instance/v1/updates_pb";
+import UpdateNotificationModal from "@/protoFleet/features/updates/components/UpdateNotificationModal";
+
+const release = (version = "v1.3.0", prerelease = false) =>
+  create(ReleaseInfoSchema, {
+    version,
+    prerelease,
+    releaseNotesUrl: `https://github.com/block/proto-fleet/releases/tag/${version}`,
+  });
+
+type OperationOverrides = Partial<Pick<UpgradeOperation, "error" | "hostLogPath" | "message" | "recoveryCommand">>;
+
+const operation = (phase: UpgradePhase, overrides?: OperationOverrides) =>
+  create(UpgradeOperationSchema, {
+    id: "operation-1",
+    targetVersion: "v1.3.0",
+    phase,
+    message: "Preparing upgrade",
+    ...overrides,
+  });
+
+describe("UpdateNotificationModal one-click upgrade", () => {
+  it("requires explicit confirmation before triggering a stable upgrade", async () => {
+    const onUpgrade = vi.fn().mockResolvedValue(undefined);
+    render(
+      <UpdateNotificationModal
+        open
+        release={release()}
+        installCommand="manual command"
+        oneClickAvailable
+        onUpgrade={onUpgrade}
+        onDismiss={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Upgrade to v1.3.0" }));
+    expect(screen.getByText("Confirm instance upgrade")).toBeInTheDocument();
+    expect(onUpgrade).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole("button", { name: "Confirm upgrade" }));
+    await waitFor(() => expect(onUpgrade).toHaveBeenCalledWith("v1.3.0"));
+  });
+
+  it("warns that a release candidate cannot be downgraded", () => {
+    render(
+      <UpdateNotificationModal
+        open
+        release={release("v1.3.0-rc.2", true)}
+        installCommand="manual command"
+        oneClickAvailable
+        onUpgrade={vi.fn()}
+        onDismiss={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Upgrade to v1.3.0-rc.2" }));
+    expect(screen.getByText(/This is a release candidate/)).toBeInTheDocument();
+    expect(screen.getByText(/cannot downgrade/)).toBeInTheDocument();
+  });
+
+  it("keeps progress visible through the expected server disconnect", () => {
+    render(
+      <UpdateNotificationModal
+        open
+        release={release()}
+        installCommand="manual command"
+        operation={operation(UpgradePhase.ACTIVATING)}
+        connectionLost
+        oneClickAvailable
+        onDismiss={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText(/disconnect is expected during restart/)).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Close dialog" })).not.toBeInTheDocument();
+    expect(screen.queryByText("manual command")).not.toBeInTheDocument();
+  });
+
+  it("shows the durable host log and recovery command after a failure", () => {
+    render(
+      <UpdateNotificationModal
+        open
+        release={release()}
+        installCommand="manual command"
+        operation={operation(UpgradePhase.FAILED, {
+          message: "Upgrade failed",
+          error: "new stack failed to start",
+          hostLogPath: "/var/lib/proto-fleet-updater/logs/operation-1.log",
+          recoveryCommand: "cd /opt/proto-fleet/deployment && ./run-fleet.sh --non-interactive --skip-build",
+        })}
+        oneClickAvailable
+        onDismiss={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("new stack failed to start")).toBeInTheDocument();
+    expect(screen.getByText(/operation-1\.log/)).toBeInTheDocument();
+    expect(screen.getByText(/--skip-build/)).toBeInTheDocument();
+    expect(screen.getByText("manual command")).toBeInTheDocument();
+  });
+});