ui/services: pass instance to ServiceRoute

pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx

@@ -10,6 +10,7 @@ import { useMachineStateQuery } from "@/src/hooks/queries";
 import { SidebarProps } from "./Sidebar";
 import { Button } from "../Button/Button";
 import { useClanContext } from "@/src/routes/Clan/Clan";
+import { Instance } from "@/src/workflows/Service/models";
 
 interface MachineProps {
   clanURI: string;
@@ -129,23 +130,43 @@ const Machines = () => {
 
 export const ServiceRoute = (props: {
   clanURI: string;
-  machineName?: string;
   label: string;
   id: string;
-  module: { input?: string | null | undefined; name: string };
+  instance: Instance;
 }) => (
-  <A href={buildServicePath(props)} replace={true}>
+  <A
+    href={buildServicePath({
+      clanURI: props.clanURI,
+      id: props.id,
+      module: props.instance.module,
+    })}
+    replace={true}
+  >
     <div class="flex w-full flex-col gap-2">
+      <div class="flex flex-row items-center justify-between">
         <Typography
           hierarchy="label"
-        size="s"
+          size="xs"
           weight="bold"
           color="primary"
           inverted
         >
-        {props.label}
+          {props.id}
         </Typography>
       </div>
+      <div class="flex w-full flex-row items-center gap-1">
+        <Icon icon="Code" size="0.75rem" inverted color="tertiary" />
+        <Typography
+          hierarchy="label"
+          family="mono"
+          size="s"
+          inverted
+          color="primary"
+        >
+          {props.instance.resolved.usage_ref.name}
+        </Typography>
+      </div>
+    </div>
   </A>
 );
 
@@ -165,8 +186,12 @@ const Services = () => {
         const moduleName = instance.module.name;
 
         const label = moduleName == id ? moduleName : `${moduleName} (${id})`;
-
-        return { id, label, module: instance.module };
+        console.log("Service instance", id, instance, label);
+        return {
+          id,
+          label,
+          instance: instance,
+        };
       },
     );
   };
@@ -191,7 +216,14 @@ const Services = () => {
       <Accordion.Content class="content">
         <nav>
           <For each={serviceInstances()}>
-            {(instance) => <ServiceRoute clanURI={ctx.clanURI} {...instance} />}
+            {(mapped) => (
+              <ServiceRoute
+                clanURI={ctx.clanURI}
+                id={mapped.id}
+                label={mapped.label}
+                instance={mapped.instance}
+              />
+            )}
           </For>
         </nav>
       </Accordion.Content>

pkgs/clan-app/ui/src/routes/Machine/SectionServices.tsx

@@ -20,14 +20,15 @@ export const SectionServices = () => {
 
     return (ctx.machinesQuery.data[machineName].instance_refs ?? []).map(
       (id) => {
-        const module = ctx.serviceInstancesQuery.data?.[id].module;
-        if (!module) {
-          throw new Error(`Service instance ${id} has no module`);
+        const instance = ctx.serviceInstancesQuery.data?.[id];
+        if (!instance) {
+          throw new Error(`Service instance ${id} not found`);
         }
+        const module = instance.module;
 
         return {
           id,
-          module,
+          instance,
           label: module.name == id ? module.name : `${module.name} (${id})`,
         };
       },
@@ -41,11 +42,7 @@ export const SectionServices = () => {
           <nav>
             <For each={services()}>
               {(instance) => (
-                <ServiceRoute
-                  clanURI={ctx.clanURI}
-                  machineName={useMachineName()}
-                  {...instance}
-                />
+                <ServiceRoute clanURI={ctx.clanURI} {...instance} />
               )}
             </For>
           </nav>

pkgs/clan-app/ui/src/workflows/Service/models.ts

@@ -43,6 +43,8 @@ export interface Module {
 
 type ValueOf<T> = T[keyof T];
 
+export type Instance = ValueOf<NonNullable<ServiceInstancesQuery["data"]>>;
+
 /**
  * Collect all members (machines and tags) for a given role in a service instance
  *
@@ -50,7 +52,7 @@ type ValueOf<T> = T[keyof T];
  *
  */
 export function getRoleMembers(
-  instance: ValueOf<NonNullable<ServiceInstancesQuery["data"]>>,
+  instance: Instance,
   all_machines: NonNullable<MachinesQuery["data"]>,
   role: string,
 ) {