API: init methods: hw_generate, dns discovery

pkgs/webview-ui/app/src/App.tsx

@@ -8,7 +8,7 @@ import { Toaster } from "solid-toast";
 const [route, setRoute] = createSignal<Route>("machines");
 
 const [currClanURI, setCurrClanURI] = createSignal<string>(
-  "/home/johannes/1_clans/myclan"
+  "/home/johannes/git/testing/xd"
 );
 
 export { currClanURI, setCurrClanURI };

pkgs/webview-ui/app/src/api.ts

@@ -100,6 +100,7 @@ const deserialize =
     try {
       fn(JSON.parse(str) as T);
     } catch (e) {
+      console.error(str);
       alert(`Error parsing JSON: ${e}`);
     }
   };

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>

pkgs/webview-ui/app/src/routes/machines/view.tsx

@@ -1,6 +1,7 @@
 import {
   For,
   Match,
+  Show,
   Switch,
   createEffect,
   createSignal,
@@ -17,6 +18,11 @@ type FilesModel = Extract<
   { status: "success" }
 >["data"]["files"];
 
+type ServiceModel = Extract<
+  OperationResponse<"show_mdns">,
+  { status: "success" }
+>["data"]["services"];
+
 export const MachineListView: Component = () => {
   const [{ machines, loading }, { getMachines }] = useMachineContext();
 
@@ -27,6 +33,13 @@ export const MachineListView: Component = () => {
     setFiles(r.data.files);
   });
 
+  const [services, setServices] = createSignal<ServiceModel>();
+  pyApi.show_mdns.receive((r) => {
+    const { status } = r;
+    if (status === "error") return console.error(r.errors);
+    setServices(r.data.services);
+  });
+
   createEffect(() => {
     console.log(files());
   });
@@ -72,11 +85,66 @@ export const MachineListView: Component = () => {
           <span class="material-icons ">folder_open</span>
         </button>
       </div>
+      <div class="tooltip" data-tip="Search install targets">
+        <button
+          class="btn btn-ghost"
+          onClick={() => pyApi.show_mdns.dispatch({})}
+        >
+          <span class="material-icons ">search</span>
+        </button>
+      </div>
       <div class="tooltip" data-tip="Refresh">
         <button class="btn btn-ghost" onClick={() => getMachines()}>
           <span class="material-icons ">refresh</span>
         </button>
       </div>
+      <Show when={services()}>
+        {(services) => (
+          <For each={Object.values(services())}>
+            {(service) => (
+              <div class="rounded-lg bg-white p-5 shadow-lg">
+                <h2 class="mb-2 text-xl font-semibold">{service.name}</h2>
+                <p>
+                  <span class="font-bold">Interface:</span>
+                  {service.interface}
+                </p>
+                <p>
+                  <span class="font-bold">Protocol:</span>
+                  {service.protocol}
+                </p>
+                <p>
+                  <span class="font-bold">Name</span>
+                  {service.name}
+                </p>
+                <p>
+                  <span class="font-bold">Type:</span>
+                  {service.type_}
+                </p>
+                <p>
+                  <span class="font-bold">Domain:</span>
+                  {service.domain}
+                </p>
+                <p>
+                  <span class="font-bold">Host:</span>
+                  {service.host}
+                </p>
+                <p>
+                  <span class="font-bold">IP:</span>
+                  {service.ip}
+                </p>
+                <p>
+                  <span class="font-bold">Port:</span>
+                  {service.port}
+                </p>
+                <p>
+                  <span class="font-bold">TXT:</span>
+                  {service.txt}
+                </p>
+              </div>
+            )}
+          </For>
+        )}
+      </Show>
       <Switch>
         <Match when={loading()}>
           {/* Loading skeleton */}