Webview: flash view

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

@@ -7,6 +7,7 @@ import { BlockDevicesView } from "./routes/blockdevices/view";
 import { Flash } from "./routes/flash/view";
 import { Settings } from "./routes/settings";
 import { Welcome } from "./routes/welcome";
+import { Deploy } from "./routes/deploy";
 
 export type Route = keyof typeof routes;
 
@@ -51,6 +52,11 @@ export const routes = {
     label: "welcome",
     icon: "settings",
   },
+  deploy: {
+    child: Deploy,
+    label: "deploy",
+    icon: "content_copy",
+  },
 };
 
 interface RouterProps {

pkgs/webview-ui/app/src/layout/header.tsx

@@ -1,6 +1,21 @@
+import { createQuery } from "@tanstack/solid-query";
 import { activeURI, setRoute } from "../App";
+import { callApi } from "../api";
+import { Show } from "solid-js";
 
 export const Header = () => {
+  const { isLoading, data } = createQuery(() => ({
+    queryKey: [`${activeURI()}:meta`],
+    queryFn: async () => {
+      const currUri = activeURI();
+      if (currUri) {
+        const result = await callApi("show_clan_meta", { uri: currUri });
+        if (result.status === "error") throw new Error("Failed to fetch data");
+        return result.data;
+      }
+    },
+  }));
+
   return (
     <div class="navbar bg-base-100">
       <div class="flex-none">
@@ -14,7 +29,16 @@ export const Header = () => {
         </span>
       </div>
       <div class="flex-1">
-        <a class="text-xl">{activeURI()}</a>
+        <div class="tooltip tooltip-right" data-tip={data?.name || activeURI()}>
+          <div class="avatar placeholder online mx-4">
+            <div class="w-10 rounded-full bg-slate-700 text-neutral-content">
+              <span class="text-xl">C</span>
+              <Show when={data?.name}>
+                {(name) => <span class="text-xl">{name()}</span>}
+              </Show>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="flex-none">
         <span class="tooltip tooltip-bottom" data-tip="Settings">

pkgs/webview-ui/app/src/routes/deploy/index.tsx

@@ -0,0 +1,6 @@
+import { callApi } from "@/src/api";
+import { createQuery } from "@tanstack/solid-query";
+
+export const Deploy = () => {
+  return <div>Deloy view</div>;
+};

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

@@ -1,6 +1,7 @@
 import { route } from "@/src/App";
-import { OperationArgs, OperationResponse, pyApi } from "@/src/api";
+import { OperationArgs, OperationResponse, callApi, pyApi } from "@/src/api";
 import { SubmitHandler, createForm, required } from "@modular-forms/solid";
+import { createQuery } from "@tanstack/solid-query";
 import { For, createSignal } from "solid-js";
 import { effect } from "solid-js/web";
 
@@ -28,36 +29,35 @@ type BlockDevices = Extract<
 export const Flash = () => {
   const [formStore, { Form, Field }] = createForm<FlashFormValues>({});
 
-  const [devices, setDevices] = createSignal<BlockDevices>([]);
-  // pyApi.show_block_devices.receive((r) => {
-  //   console.log("block devices", r);
-  //   if (r.status === "success") {
-  //     setDevices(r.data.blockdevices);
-  //   }
-  // });
+  const {
+    data: devices,
+    refetch: loadDevices,
+    isFetching,
+  } = createQuery(() => ({
+    queryKey: ["TanStack Query"],
+    queryFn: async () => {
+      const result = await callApi("show_block_devices", {});
+      if (result.status === "error") throw new Error("Failed to fetch data");
+      return result.data;
+    },
+    staleTime: 1000 * 60 * 1, // 1 minutes
+  }));
 
-  const handleSubmit: SubmitHandler<FlashFormValues> = (values, event) => {
-    // pyApi.open_file.dispatch({ file_request: { mode: "save" } });
-    // pyApi.open_file.receive((r) => {
-    //   if (r.status === "success") {
-    //     if (r.data) {
-    //       pyApi.create_clan.dispatch({
-    //         options: { directory: r.data, meta: values },
-    //       });
-    //     }
-    //     return;
-    //   }
+  const handleSubmit = async (values: FlashFormValues) => {
+    // TODO: Rework Flash machine API
+    // Its unusable in its current state
+    // await callApi("flash_machine", {
+    //   machine: {
+    //     name: "",
+    //   },
+    //   disks:  {values.disk },
+    //   dry_run: true,
     // });
     console.log("submit", values);
   };
 
-  // effect(() => {
-  //   if (route() === "flash") {
-  //     pyApi.show_block_devices.dispatch({});
-  //   }
-  // });
   return (
-    <div class="">
+    <div class="px-2">
       <Form onSubmit={handleSubmit}>
         <Field
           name="machine.flake"
@@ -70,7 +70,7 @@ export const Flash = () => {
                 <input
                   type="text"
                   class="grow"
-                  placeholder="Clan URI"
+                  placeholder="machine.flake"
                   required
                   {...props}
                 />
@@ -96,7 +96,7 @@ export const Flash = () => {
                 <input
                   type="text"
                   class="grow"
-                  placeholder="Machine Name"
+                  placeholder="machine.name"
                   required
                   {...props}
                 />
@@ -115,9 +115,15 @@ export const Flash = () => {
           {(field, props) => (
             <>
               <label class="form-control input-bordered flex w-full items-center gap-2">
-                <select required class="select w-full" {...props}>
+                <select
+                  required
+                  class="select select-bordered w-full"
+                  {...props}
+                >
                   {/* <span class="material-icons">devices</span> */}
-                  <For each={devices()}>
+                  <option disabled>Select a disk</option>
+
+                  <For each={devices?.blockdevices}>
                     {(device) => (
                       <option value={device.name}>
                         {device.name} / {device.size} bytes
@@ -126,6 +132,11 @@ export const Flash = () => {
                   </For>
                 </select>
                 <div class="label">
+                  {isFetching && (
+                    <span class="label-text-alt">
+                      <span class="loading loading-bars"></span>
+                    </span>
+                  )}
                   {field.error && (
                     <span class="label-text-alt font-bold text-error">
                       {field.error}