Merge pull request 'ui/clan: wire up service create' (#5016) from search into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5016
2025-08-28 12:17:03 +00:00
parent 765eb142a5 a92a1a7dd1
commit 2ed3608e34
6 changed files with 136 additions and 43 deletions
--- a/pkgs/clan-app/ui/src/components/Search/TagSelect.tsx
+++ b/pkgs/clan-app/ui/src/components/Search/TagSelect.tsx
@@ -55,7 +55,6 @@ export function TagSelect<T extends { value: unknown }>(
      >
        <Combobox.Control<T> aria-label="Fruits">
          {(state) => {
-            console.log("combobox state selected", state.selectedOptions());
            return (
              <Combobox.Trigger
                tabIndex={1}
--- a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx
+++ b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx
@@ -36,6 +36,11 @@ import { createForm, FieldValues, reset } from "@modular-forms/solid";
 import { Sidebar } from "@/src/components/Sidebar/Sidebar";
 import { UseQueryResult } from "@tanstack/solid-query";
 import { ListClansModal } from "@/src/modals/ListClansModal/ListClansModal";
+import {
+  InventoryInstance,
+  ServiceWorkflow,
+} from "@/src/workflows/Service/Service";
+import { useApiClient } from "@/src/hooks/ApiClient";

 interface ClanContextProps {
  clanURI: string;
@@ -179,7 +184,10 @@ const ClanSceneController = (props: RouteSectionProps) => {

  const navigate = useNavigate();

-  const [dialogHandlers, setDialogHandlers] = createSignal<{
+  const [showService, setShowService] = createSignal(false);
+
+  const [showModal, setShowModal] = createSignal(false);
+  const [currentPromise, setCurrentPromise] = createSignal<{
    resolve: ({ id }: { id: string }) => void;
    reject: (err: unknown) => void;
  } | null>(null);
@@ -187,7 +195,15 @@ const ClanSceneController = (props: RouteSectionProps) => {
  const onCreate = async (): Promise<{ id: string }> => {
    return new Promise((resolve, reject) => {
      setShowModal(true);
-      setDialogHandlers({ resolve, reject });
+      setCurrentPromise({ resolve, reject });
+    });
+  };
+
+  const onAddService = async (): Promise<{ id: string }> => {
+    return new Promise((resolve, reject) => {
+      setShowService(true);
+      console.log("setting current promise");
+      setCurrentPromise({ resolve, reject });
    });
  };

@@ -217,8 +233,6 @@ const ClanSceneController = (props: RouteSectionProps) => {
    return { id: values.name };
  };

-  const [showModal, setShowModal] = createSignal(false);
-
  const [loadingError, setLoadingError] = createSignal<
    { title: string; description: string } | undefined
  >();
@@ -265,6 +279,26 @@ const ClanSceneController = (props: RouteSectionProps) => {
    }),
  );

+  const client = useApiClient();
+  const handleSubmitService = async (instance: InventoryInstance) => {
+    console.log("Create Instance", instance);
+    const call = client.fetch("create_service_instance", {
+      flake: {
+        identifier: ctx.clanURI,
+      },
+      module_ref: instance.module,
+      roles: instance.roles,
+    });
+    const result = await call.result;
+
+    if (result.status === "error") {
+      console.error("Error creating service instance", result.errors);
+    }
+    //
+    currentPromise()?.resolve({ id: "0" });
+    setShowService(false);
+  };
+
  return (
    <>
      <Show when={loadingError()}>
@@ -274,15 +308,15 @@ const ClanSceneController = (props: RouteSectionProps) => {
        <MockCreateMachine
          onClose={() => {
            setShowModal(false);
-            dialogHandlers()?.reject(new Error("User cancelled"));
+            currentPromise()?.reject(new Error("User cancelled"));
          }}
          onSubmit={async (values) => {
            try {
              const result = await sendCreate(values);
-              dialogHandlers()?.resolve(result);
+              currentPromise()?.resolve(result);
              setShowModal(false);
            } catch (err) {
-              dialogHandlers()?.reject(err);
+              currentPromise()?.reject(err);
              setShowModal(false);
            }
          }}
@@ -297,10 +331,22 @@ const ClanSceneController = (props: RouteSectionProps) => {
      </div>

      <CubeScene
+        onAddService={onAddService}
        selectedIds={selectedIds}
        onSelect={onMachineSelect}
        isLoading={ctx.isLoading()}
        cubesQuery={ctx.machinesQuery}
+        toolbarPopup={
+          <Show when={showService()}>
+            <ServiceWorkflow
+              handleSubmit={handleSubmitService}
+              onClose={() => {
+                setShowService(false);
+                currentPromise()?.resolve({ id: "0" });
+              }}
+            />
+          </Show>
+        }
        onCreate={onCreate}
        clanURI={ctx.clanURI}
        sceneStore={() => store.sceneData?.[ctx.clanURI]}
--- a/pkgs/clan-app/ui/src/scene/cubes.css
+++ b/pkgs/clan-app/ui/src/scene/cubes.css
@@ -4,6 +4,8 @@
  cursor: pointer;
 }

+/* <div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col items-center">
+        <Show when={show()}> */
 .toolbar-container {
  @apply absolute bottom-10 z-10 w-full;
  @apply flex justify-center items-center;
--- a/pkgs/clan-app/ui/src/scene/cubes.tsx
+++ b/pkgs/clan-app/ui/src/scene/cubes.tsx
@@ -1,4 +1,11 @@
-import { createSignal, createEffect, onCleanup, onMount, on } from "solid-js";
+import {
+  createSignal,
+  createEffect,
+  onCleanup,
+  onMount,
+  on,
+  JSX,
+} from "solid-js";
 import "./cubes.css";

 import * as THREE from "three";
@@ -34,12 +41,14 @@ function garbageCollectGroup(group: THREE.Group) {
 export function CubeScene(props: {
  cubesQuery: MachinesQueryResult;
  onCreate: () => Promise<{ id: string }>;
+  onAddService: () => Promise<{ id: string }>;
  selectedIds: Accessor<Set<string>>;
  onSelect: (v: Set<string>) => void;
  sceneStore: Accessor<SceneData>;
  setMachinePos: (machineId: string, pos: [number, number] | null) => void;
  isLoading: boolean;
  clanURI: string;
+  toolbarPopup?: JSX.Element;
 }) {
  let container: HTMLDivElement;
  let scene: THREE.Scene;
@@ -213,7 +222,7 @@ export function CubeScene(props: {
    controls = new MapControls(camera, renderer.domElement);
    controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
    controls.mouseButtons.RIGHT = null;
-    controls.enableRotate = false;
+    // controls.enableRotate = false;
    controls.minZoom = 1.2;
    controls.maxZoom = 3.5;
    controls.addEventListener("change", () => {
@@ -543,6 +552,9 @@ export function CubeScene(props: {
    <>
      <div class="cubes-scene-container" ref={(el) => (container = el)} />
      <div class="toolbar-container">
+        <div class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2">
+          {props.toolbarPopup}
+        </div>
        <Toolbar>
          <ToolbarButton
            description="Select machine"
@@ -563,7 +575,8 @@ export function CubeScene(props: {
          <ToolbarButton
            description="Add new Service"
            name="modules"
-            icon="Modules"
+            icon="Services"
+            onClick={props.onAddService}
          />
          <ToolbarButton
            icon="Reload"
--- a/pkgs/clan-app/ui/src/workflows/Service/Service.stories.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Service/Service.stories.tsx
@@ -166,6 +166,9 @@ export const Default: Story = {
 export const SelectRoleMembers: Story = {
  render: () => (
    <ServiceWorkflow
+      handleSubmit={(instance) => {
+        console.log("Submitted instance:", instance);
+      }}
      initialStep="select:members"
      initialStore={{
        currentRole: "peer",
--- a/pkgs/clan-app/ui/src/workflows/Service/Service.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Service/Service.tsx
@@ -18,8 +18,6 @@ import { Search } from "@/src/components/Search/Search";
 import Icon from "@/src/components/Icon/Icon";
 import { Combobox } from "@kobalte/core/combobox";
 import { Typography } from "@/src/components/Typography/Typography";
-import { Toolbar } from "@/src/components/Toolbar/Toolbar";
-import { ToolbarButton } from "@/src/components/Toolbar/ToolbarButton";
 import { TagSelect } from "@/src/components/Search/TagSelect";
 import { Tag } from "@/src/components/Tag/Tag";
 import { createForm, FieldValues, setValue } from "@modular-forms/solid";
@@ -145,7 +143,6 @@ const ConfigureService = () => {
  const [store, set] = getStepStore<ServiceStoreType>(stepper);

  const [formStore, { Form, Field }] = createForm<RolesForm>({
-    // initialValues: props.initialValues,
    initialValues: {
      instanceName: "backup-instance-1",
    },
@@ -157,7 +154,28 @@ const ConfigureService = () => {
  const options = useOptions(tagsQuery, machinesQuery);

  const handleSubmit = (values: RolesForm) => {
-    console.log("Create service submitted with values:", values);
+    const roles: Record<string, RoleType> = Object.fromEntries(
+      Object.entries(store.roles).map(([key, value]) => [
+        key,
+        {
+          machines: Object.fromEntries(
+            value.filter((v) => v.type === "machine").map((v) => [v.label, {}]),
+          ),
+          tags: Object.fromEntries(
+            value.filter((v) => v.type === "tag").map((v) => [v.label, {}]),
+          ),
+        },
+      ]),
+    );
+
+    store.handleSubmit({
+      name: values.instanceName,
+      module: {
+        name: store.module.name,
+        input: store.module.input,
+      },
+      roles,
+    });
  };

  return (
@@ -185,13 +203,19 @@ const ConfigureService = () => {
            )}
          </Field>
        </div>
-        <Button icon="Close" color="primary" ghost size="s" class="ml-auto" />
+        <Button
+          icon="Close"
+          color="primary"
+          ghost
+          size="s"
+          class="ml-auto"
+          onClick={store.close}
+        />
      </div>
      <div class={styles.content}>
        <For each={Object.keys(store.module.raw?.info.roles || {})}>
          {(role) => {
            const values = store.roles?.[role] || [];
-            console.log("Role members:", role, values, "from", options());
            return (
              <TagSelect<TagType>
                label={role}
@@ -221,7 +245,9 @@ const ConfigureService = () => {
        </For>
      </div>
      <div class={cx(styles.footer, styles.backgroundAlt)}>
-        <Button hierarchy="secondary">Add Service</Button>
+        <Button hierarchy="secondary" type="submit">
+          Add Service
+        </Button>
      </div>
    </Form>
  );
@@ -269,8 +295,6 @@ const ConfigureRole = () => {
      set("roles", {});
    }
    set("roles", (r) => ({ ...r, [store.currentRole as string]: members }));
-    console.log("Roles form submitted ", members);
-
    stepper.setActiveStep("view:members");
  };

@@ -381,6 +405,21 @@ const steps = [

 export type ServiceSteps = typeof steps;

+// TODO: Ideally we would impot this from a backend model package
+export interface InventoryInstance {
+  name: string;
+  module: {
+    name: string;
+    input: string;
+  };
+  roles: Record<string, RoleType>;
+}
+
+interface RoleType {
+  machines: Record<string, { settings?: unknown }>;
+  tags: Record<string, unknown>;
+}
+
 export interface ServiceStoreType {
  module: {
    name: string;
@@ -390,45 +429,36 @@ export interface ServiceStoreType {
  roles: Record<string, TagType[]>;
  currentRole?: string;
  close: () => void;
+  handleSubmit: (values: InventoryInstance) => void;
 }

 interface ServiceWorkflowProps {
  initialStep?: ServiceSteps[number]["id"];
  initialStore?: Partial<ServiceStoreType>;
+  onClose?: () => void;
+  handleSubmit: (values: InventoryInstance) => void;
 }
+
 export const ServiceWorkflow = (props: ServiceWorkflowProps) => {
-  const [show, setShow] = createSignal(false);
  const stepper = createStepper(
    { steps },
    {
      initialStep: props.initialStep || "select:service",
      initialStoreData: {
        ...props.initialStore,
-        close: () => setShow(false),
+        close: () => props.onClose?.(),
+        handleSubmit: props.handleSubmit,
      } satisfies Partial<ServiceStoreType>,
    },
  );
  return (
-    <>
-      <div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col items-center">
-        <Show when={show()}>
-          <div class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2">
-            <StepperProvider stepper={stepper}>
-              <div class="w-[30rem]">{stepper.currentStep().content()}</div>
-            </StepperProvider>
-          </div>
-        </Show>
-        <div class="flex justify-center space-x-4">
-          <Toolbar>
-            <ToolbarButton
-              onClick={() => setShow(!show())}
-              description="Add new Service"
-              name="modules"
-              icon="Modules"
-            />
-          </Toolbar>
-        </div>
-      </div>
-    </>
+    <div
+      id="add-service"
+      class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2"
+    >
+      <StepperProvider stepper={stepper}>
+        <div class="w-[30rem]">{stepper.currentStep().content()}</div>
+      </StepperProvider>
+    </div>
  );
 };