ui/install: hook up notification bus

pkgs/clan-app/ui/src/workflows/Install/install.tsx

@@ -20,11 +20,12 @@ const InstallStepper = (props: InstallStepperProps) => {
   const stepSignal = useStepper<InstallSteps>();
   const [store, set] = getStepStore<InstallStoreType>(stepSignal);
 
-  onMount(() => {
-    set("done", props.onDone);
-  });
-
-  return <Dynamic component={stepSignal.currentStep().content} />;
+  return (
+    <Dynamic
+      component={stepSignal.currentStep().content}
+      onDone={props.onDone}
+    />
+  );
 };
 
 export interface InstallModalProps {
@@ -53,8 +54,8 @@ export interface InstallStoreType {
     mainDisk: string;
     // ...TODO Vars
     progress: ApiCall<"run_machine_install">;
-
     promptValues: PromptValues;
+    prepareStep: "disk" | "generators" | "install";
   };
   done: () => void;
 }

pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx

@@ -13,7 +13,7 @@ import { getStepStore, useStepper } from "@/src/hooks/stepper";
 import { InstallSteps, InstallStoreType, PromptValues } from "../install";
 import { TextInput } from "@/src/components/Form/TextInput";
 import { Alert } from "@/src/components/Alert/Alert";
-import { For, Show } from "solid-js";
+import { For, Match, Show, Switch } from "solid-js";
 import { Divider } from "@/src/components/Divider/Divider";
 import { Orienter } from "@/src/components/Form/Orienter";
 import { Button } from "@/src/components/Button/Button";
@@ -28,6 +28,7 @@ import {
 } from "@/src/hooks/queries";
 import { useClanURI } from "@/src/hooks/clan";
 import { useApiClient } from "@/src/hooks/ApiClient";
+import { ProcessMessage, useNotifyOrigin } from "@/src/hooks/notify";
 
 export const InstallHeader = (props: { machineName: string }) => {
   return (
@@ -450,6 +451,8 @@ const InstallSummary = () => {
     // Here you would typically trigger the installation process
     console.log("Installation started");
 
+    stepSignal.setActiveStep("install:progress");
+
     const setDisk = client.fetch("set_machine_disk_schema", {
       machine: {
         flake: {
@@ -464,6 +467,10 @@ const InstallSummary = () => {
       force: true,
     });
 
+    set("install", (s) => ({
+      ...s,
+      prepareStep: "disk",
+    }));
     const diskResult = await setDisk.result; // Wait for the disk schema to be set
     if (diskResult.status === "error") {
       console.error("Error setting disk schema:", diskResult.errors);
@@ -475,8 +482,11 @@ const InstallSummary = () => {
       base_dir: clanUri,
       machine_name: store.install.machineName,
     });
-    stepSignal.setActiveStep("install:progress");
 
+    set("install", (s) => ({
+      ...s,
+      prepareStep: "generators",
+    }));
     await runGenerators.result; // Wait for the generators to run
 
     const runInstall = client.fetch("run_machine_install", {
@@ -494,6 +504,7 @@ const InstallSummary = () => {
     });
     set("install", (s) => ({
       ...s,
+      prepareStep: "install",
       progress: runInstall,
     }));
 
@@ -534,6 +545,8 @@ const InstallSummary = () => {
   );
 };
 
+type InstallTopic = "generators" | "upload-secrets" | "nixos-anywhere";
+
 const InstallProgress = () => {
   const stepSignal = useStepper<InstallSteps>();
   const [store, get] = getStepStore<InstallStoreType>(stepSignal);
@@ -543,8 +556,12 @@ const InstallProgress = () => {
     if (progress) {
       await progress.cancel();
     }
-    store.done();
+    stepSignal.previous();
   };
+  const installState = useNotifyOrigin<ProcessMessage<unknown, InstallTopic>>(
+    "run_machine_install",
+  );
+
   return (
     <div class="flex h-60 w-full flex-col items-center justify-end bg-inv-4">
       <div class="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1">
@@ -556,6 +573,36 @@ const InstallProgress = () => {
         >
           Machine is beeing installed
         </Typography>
+        <Typography
+          hierarchy="label"
+          size="default"
+          class="py-2"
+          color="secondary"
+          inverted
+        >
+          <Switch fallback={"Waiting for preparation to start..."}>
+            <Match when={store.install.prepareStep === "disk"}>
+              Configuring disk schema ...
+            </Match>
+            <Match when={store.install.prepareStep === "generators"}>
+              Provisioning services ...
+            </Match>
+            <Match when={store.install.prepareStep === "install"}>
+              {/* Progress after the run_machine_install api call */}
+              <Switch fallback={"Waiting for installation to start..."}>
+                <Match when={installState()?.topic === "generators"}>
+                  Checking services ...
+                </Match>
+                <Match when={installState()?.topic === "upload-secrets"}>
+                  Uploading Credentials ...
+                </Match>
+                <Match when={installState()?.topic === "nixos-anywhere"}>
+                  Running nixos-anywhere ...
+                </Match>
+              </Switch>
+            </Match>
+          </Switch>
+        </Typography>
         <LoadingBar />
         <Button
           hierarchy="primary"
@@ -593,7 +640,7 @@ const FlashDone = () => {
             hierarchy="primary"
             endIcon="Close"
             size="s"
-            onClick={() => store.done()}
+            onClick={() => props.onDone()}
           >
             Close
           </Button>