API: init methods: hw_generate, dns discovery

pkgs/webview-ui/app/src/components/MachineListItem.tsx

@@ -1,4 +1,4 @@
-import { For, Show, createSignal } from "solid-js";
+import { For, Match, Show, Switch, createSignal } from "solid-js";
 import { ErrorData, SuccessData, pyApi } from "../api";
 import { currClanURI } from "../App";
 
@@ -7,10 +7,19 @@ interface MachineListItemProps {
 }
 
 type MachineDetails = Record<string, SuccessData<"show_machine">["data"]>;
+type HWInfo = Record<string, SuccessData<"show_machine_hardware_info">["data"]>;
+type DeploymentInfo = Record<
+  string,
+  SuccessData<"show_machine_deployment_target">["data"]
+>;
 
 type MachineErrors = Record<string, ErrorData<"show_machine">["errors"]>;
 
 const [details, setDetails] = createSignal<MachineDetails>({});
+const [hwInfo, setHwInfo] = createSignal<HWInfo>({});
+
+const [deploymentInfo, setDeploymentInfo] = createSignal<DeploymentInfo>({});
+
 const [errors, setErrors] = createSignal<MachineErrors>({});
 
 pyApi.show_machine.receive((r) => {
@@ -26,6 +35,34 @@ pyApi.show_machine.receive((r) => {
   }
 });
 
+pyApi.show_machine_hardware_info.receive((r) => {
+  const { op_key } = r;
+  if (r.status === "error") {
+    console.error(r.errors);
+    if (op_key) {
+      setHwInfo((d) => ({ ...d, [op_key]: { system: null } }));
+    }
+    return;
+  }
+  if (op_key) {
+    setHwInfo((d) => ({ ...d, [op_key]: r.data }));
+  }
+});
+
+pyApi.show_machine_deployment_target.receive((r) => {
+  const { op_key } = r;
+  if (r.status === "error") {
+    console.error(r.errors);
+    if (op_key) {
+      setDeploymentInfo((d) => ({ ...d, [op_key]: null }));
+    }
+    return;
+  }
+  if (op_key) {
+    setDeploymentInfo((d) => ({ ...d, [op_key]: r.data }));
+  }
+});
+
 export const MachineListItem = (props: MachineListItemProps) => {
   const { name } = props;
 
@@ -35,6 +72,18 @@ export const MachineListItem = (props: MachineListItemProps) => {
     flake_url: currClanURI(),
   });
 
+  pyApi.show_machine_hardware_info.dispatch({
+    op_key: name,
+    clan_dir: currClanURI(),
+    machine_name: name,
+  });
+
+  pyApi.show_machine_deployment_target.dispatch({
+    op_key: name,
+    clan_dir: currClanURI(),
+    machine_name: name,
+  });
+
   return (
     <li>
       <div class="card card-side m-2 bg-base-100 shadow-lg">
@@ -46,27 +95,60 @@ export const MachineListItem = (props: MachineListItemProps) => {
         <div class="card-body flex-row justify-between">
           <div class="flex flex-col">
             <h2 class="card-title">{name}</h2>
-            <Show when={errors()[name]}>
-              {(errors) => (
-                <For each={errors()}>
-                  {(error) => (
-                    <p class="text-red-500">
-                      {error.message}: {error.description}
-                    </p>
-                  )}
-                </For>
-              )}
-            </Show>
-            <Show when={details()[name]}>
-              {(details) => (
-                <p
-                  classList={{
-                    "text-gray-400": !details().machine_description,
-                    "text-gray-600": !!details().machine_description,
-                  }}
+            <div class="text-slate-600">
+              <Show
+                when={details()[name]}
+                fallback={
+                  <Switch fallback={<div class="skeleton h-8 w-full"></div>}>
+                    <Match when={!details()[name]?.machine_description}>
+                      No description
+                    </Match>
+                  </Switch>
+                }
+              >
+                {(d) => d()?.machine_description}
+              </Show>
+            </div>
+            <div class="flex flex-row flex-wrap gap-4 py-2">
+              <div class="badge badge-primary flex flex-row gap-1 py-4 align-middle">
+                <span class="material-icons">
+                  {hwInfo()[name]?.system ? "check" : "pending"}
+                </span>
+
+                <Switch fallback={<div class="skeleton h-8 w-full"></div>}>
+                  <Match when={hwInfo()[name]?.system}>
+                    {(system) => "System: " + system()}
+                  </Match>
+                  <Match when={hwInfo()[name]?.system === null}>
+                    {"No hardware info"}
+                  </Match>
+                </Switch>
+              </div>
+
+              <div class="badge badge-primary flex flex-row gap-1 py-4 align-middle">
+                <span class="material-icons">
+                  {deploymentInfo()[name] ? "check" : "pending"}
+                </span>
+                <Show
+                  when={deploymentInfo()[name]}
+                  fallback={
+                    <Switch fallback={<div class="skeleton h-8 w-full"></div>}>
+                      <Match when={deploymentInfo()[name] !== undefined}>
+                        No deployment target detected
+                      </Match>
+                    </Switch>
+                  }
                 >
-                  {details().machine_description || "No description"}
-                </p>
+                  {(i) => "Deploys to: " + i()}
+                </Show>
+              </div>
+            </div>
+            {/* Show only the first error at the bottom */}
+            <Show when={errors()[name]?.[0]}>
+              {(error) => (
+                <div class="badge badge-error py-4">
+                  Error: {error().message}: {error().description}
+                </div>
               )}
             </Show>
           </div>