Merge pull request 'feat(ui): services in sidebar and sidebar pane' (#5072) from ui/list-services-sidebar into main
Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5072
This commit is contained in:
hsjobeki
@@ -5,7 +5,7 @@ import Icon from "../Icon/Icon";
|
||||
import { Typography } from "@/src/components/Typography/Typography";
|
||||
import { For, Show } from "solid-js";
|
||||
import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
|
||||
import { buildMachinePath, useClanURI } from "@/src/hooks/clan";
|
||||
import { buildMachinePath, buildServicePath } from "@/src/hooks/clan";
|
||||
import { useMachineStateQuery } from "@/src/hooks/queries";
|
||||
import { SidebarProps } from "./Sidebar";
|
||||
import { Button } from "../Button/Button";
|
||||
@@ -33,19 +33,19 @@ const MachineRoute = (props: MachineProps) => {
|
||||
size="xs"
|
||||
weight="bold"
|
||||
color="primary"
|
||||
inverted={true}
|
||||
inverted
|
||||
>
|
||||
{props.name}
|
||||
</Typography>
|
||||
<MachineStatus status={status()} />
|
||||
</div>
|
||||
<div class="flex w-full flex-row items-center gap-1">
|
||||
<Icon icon="Flash" size="0.75rem" inverted={true} color="tertiary" />
|
||||
<Icon icon="Flash" size="0.75rem" inverted color="tertiary" />
|
||||
<Typography
|
||||
hierarchy="label"
|
||||
family="mono"
|
||||
size="s"
|
||||
inverted={true}
|
||||
inverted
|
||||
color="primary"
|
||||
>
|
||||
{props.serviceCount}
|
||||
@@ -56,18 +56,13 @@ const MachineRoute = (props: MachineProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const SidebarBody = (props: SidebarProps) => {
|
||||
const clanURI = useClanURI();
|
||||
|
||||
const Machines = () => {
|
||||
const ctx = useClanContext();
|
||||
if (!ctx) {
|
||||
throw new Error("ClanContext not found");
|
||||
}
|
||||
|
||||
const sectionLabels = (props.staticSections || []).map(
|
||||
(section) => section.title,
|
||||
);
|
||||
|
||||
// controls which sections are open by default
|
||||
// we want them all to be open by default
|
||||
const defaultAccordionValues = ["your-machines", ...sectionLabels];
|
||||
const clanURI = ctx.clanURI;
|
||||
|
||||
const machines = () => {
|
||||
if (!ctx.machinesQuery.isSuccess) {
|
||||
@@ -78,6 +73,141 @@ export const SidebarBody = (props: SidebarProps) => {
|
||||
return Object.keys(result).length > 0 ? result : undefined;
|
||||
};
|
||||
|
||||
return (
|
||||
<Accordion.Item class="item" value="machines">
|
||||
<Accordion.Header class="header">
|
||||
<Accordion.Trigger class="trigger">
|
||||
<Typography
|
||||
class="section-title"
|
||||
hierarchy="label"
|
||||
family="mono"
|
||||
size="xs"
|
||||
inverted
|
||||
color="tertiary"
|
||||
>
|
||||
Your Machines
|
||||
</Typography>
|
||||
<Icon icon="CaretDown" color="tertiary" inverted size="0.75rem" />
|
||||
</Accordion.Trigger>
|
||||
</Accordion.Header>
|
||||
<Accordion.Content class="content">
|
||||
<Show
|
||||
when={machines()}
|
||||
fallback={
|
||||
<div class="flex w-full flex-col items-center justify-center gap-2.5">
|
||||
<Typography hierarchy="body" size="s" weight="medium" inverted>
|
||||
No machines yet
|
||||
</Typography>
|
||||
<Button
|
||||
hierarchy="primary"
|
||||
size="s"
|
||||
startIcon="Machine"
|
||||
onClick={() => ctx.setShowAddMachine(true)}
|
||||
>
|
||||
Add machine
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<nav>
|
||||
<For each={Object.entries(machines()!)}>
|
||||
{([id, machine]) => (
|
||||
<MachineRoute
|
||||
clanURI={clanURI}
|
||||
machineID={id}
|
||||
name={machine.data.name || id}
|
||||
serviceCount={machine?.instance_refs?.length ?? 0}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
</Show>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export const ServiceRoute = (props: {
|
||||
clanURI: string;
|
||||
machineName?: string;
|
||||
label: string;
|
||||
id: string;
|
||||
module: { input?: string | null | undefined; name: string };
|
||||
}) => (
|
||||
<A href={buildServicePath(props)} replace={true}>
|
||||
<div class="flex w-full flex-col gap-2">
|
||||
<Typography
|
||||
hierarchy="label"
|
||||
size="s"
|
||||
weight="bold"
|
||||
color="primary"
|
||||
inverted
|
||||
>
|
||||
{props.label}
|
||||
</Typography>
|
||||
</div>
|
||||
</A>
|
||||
);
|
||||
|
||||
const Services = () => {
|
||||
const ctx = useClanContext();
|
||||
if (!ctx) {
|
||||
throw new Error("ClanContext not found");
|
||||
}
|
||||
|
||||
const serviceInstances = () => {
|
||||
if (!ctx.serviceInstancesQuery.isSuccess) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return Object.entries(ctx.serviceInstancesQuery.data).map(
|
||||
([id, instance]) => {
|
||||
const moduleName = instance.module.name;
|
||||
|
||||
const label = moduleName == id ? moduleName : `${moduleName} (${id})`;
|
||||
|
||||
return { id, label, module: instance.module };
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Accordion.Item class="item" value="services">
|
||||
<Accordion.Header class="header">
|
||||
<Accordion.Trigger class="trigger">
|
||||
<Typography
|
||||
class="section-title"
|
||||
hierarchy="label"
|
||||
family="mono"
|
||||
size="xs"
|
||||
inverted
|
||||
color="tertiary"
|
||||
>
|
||||
Services
|
||||
</Typography>
|
||||
<Icon icon="CaretDown" color="tertiary" inverted size="0.75rem" />
|
||||
</Accordion.Trigger>
|
||||
</Accordion.Header>
|
||||
<Accordion.Content class="content">
|
||||
<nav>
|
||||
<For each={serviceInstances()}>
|
||||
{(instance) => <ServiceRoute clanURI={ctx.clanURI} {...instance} />}
|
||||
</For>
|
||||
</nav>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export const SidebarBody = (props: SidebarProps) => {
|
||||
const sectionLabels = (props.staticSections || []).map(
|
||||
(section) => section.title,
|
||||
);
|
||||
|
||||
// controls which sections are open by default
|
||||
// we want them all to be open by default
|
||||
const defaultAccordionValues = ["machines", "services", ...sectionLabels];
|
||||
|
||||
return (
|
||||
<div class="sidebar-body">
|
||||
<Accordion
|
||||
@@ -85,66 +215,8 @@ export const SidebarBody = (props: SidebarProps) => {
|
||||
multiple
|
||||
defaultValue={defaultAccordionValues}
|
||||
>
|
||||
<Accordion.Item class="item" value="your-machines">
|
||||
<Accordion.Header class="header">
|
||||
<Accordion.Trigger class="trigger">
|
||||
<Typography
|
||||
class="section-title"
|
||||
hierarchy="label"
|
||||
family="mono"
|
||||
size="xs"
|
||||
inverted={true}
|
||||
color="tertiary"
|
||||
>
|
||||
Your Machines
|
||||
</Typography>
|
||||
<Icon
|
||||
icon="CaretDown"
|
||||
color="tertiary"
|
||||
inverted={true}
|
||||
size="0.75rem"
|
||||
/>
|
||||
</Accordion.Trigger>
|
||||
</Accordion.Header>
|
||||
<Accordion.Content class="content">
|
||||
<Show
|
||||
when={machines()}
|
||||
fallback={
|
||||
<div class="flex w-full flex-col items-center justify-center gap-2.5">
|
||||
<Typography
|
||||
hierarchy="body"
|
||||
size="s"
|
||||
weight="medium"
|
||||
inverted
|
||||
>
|
||||
No machines yet
|
||||
</Typography>
|
||||
<Button
|
||||
hierarchy="primary"
|
||||
size="s"
|
||||
startIcon="Machine"
|
||||
onClick={() => ctx.setShowAddMachine(true)}
|
||||
>
|
||||
Add machine
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<nav>
|
||||
<For each={Object.entries(machines()!)}>
|
||||
{([id, machine]) => (
|
||||
<MachineRoute
|
||||
clanURI={clanURI}
|
||||
machineID={id}
|
||||
name={machine.data.name || id}
|
||||
serviceCount={0}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
</Show>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Machines />
|
||||
<Services />
|
||||
|
||||
<For each={props.staticSections}>
|
||||
{(section) => (
|
||||
@@ -156,7 +228,7 @@ export const SidebarBody = (props: SidebarProps) => {
|
||||
hierarchy="label"
|
||||
family="mono"
|
||||
size="xs"
|
||||
inverted={true}
|
||||
inverted
|
||||
color="tertiary"
|
||||
>
|
||||
{section.title}
|
||||
@@ -164,7 +236,7 @@ export const SidebarBody = (props: SidebarProps) => {
|
||||
<Icon
|
||||
icon="CaretDown"
|
||||
color="tertiary"
|
||||
inverted={true}
|
||||
inverted
|
||||
size="0.75rem"
|
||||
/>
|
||||
</Accordion.Trigger>
|
||||
@@ -179,7 +251,7 @@ export const SidebarBody = (props: SidebarProps) => {
|
||||
size="xs"
|
||||
weight="bold"
|
||||
color="primary"
|
||||
inverted={true}
|
||||
inverted
|
||||
>
|
||||
{link.label}
|
||||
</Typography>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { callApi } from "@/src/hooks/api";
|
||||
import { addClanURI, setActiveClanURI } from "@/src/stores/clan";
|
||||
import { Params, Navigator, useParams } from "@solidjs/router";
|
||||
import { Params, Navigator, useParams, useSearchParams } from "@solidjs/router";
|
||||
|
||||
export const encodeBase64 = (value: string) => window.btoa(value);
|
||||
export const decodeBase64 = (value: string) => window.atob(value);
|
||||
@@ -30,6 +30,47 @@ export const buildClanPath = (clanURI: string) => {
|
||||
export const buildMachinePath = (clanURI: string, name: string) =>
|
||||
buildClanPath(clanURI) + "/machines/" + name;
|
||||
|
||||
export const buildServicePath = (props: {
|
||||
clanURI: string;
|
||||
id: string;
|
||||
module: {
|
||||
name: string;
|
||||
input?: string | null | undefined;
|
||||
};
|
||||
}) => {
|
||||
const { clanURI, id, module } = props;
|
||||
|
||||
const moduleName = encodeBase64(module.name);
|
||||
const idEncoded = encodeBase64(id);
|
||||
|
||||
const result =
|
||||
buildClanPath(clanURI) +
|
||||
`/services/${moduleName}/${idEncoded}` +
|
||||
(module.input ? `?input=${module.input}` : "");
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
export const useServiceParams = () => {
|
||||
const params = useParams<{
|
||||
name?: string;
|
||||
id?: string;
|
||||
}>();
|
||||
|
||||
const [search] = useSearchParams<{ input?: string }>();
|
||||
|
||||
if (!params.name || !params.id) {
|
||||
console.error("Service params not found", params, window.location.pathname);
|
||||
throw new Error("Service params not found");
|
||||
}
|
||||
|
||||
return {
|
||||
name: decodeBase64(params.name),
|
||||
id: decodeBase64(params.id),
|
||||
input: search.input,
|
||||
};
|
||||
};
|
||||
|
||||
export const navigateToClan = (navigate: Navigator, clanURI: string) => {
|
||||
const path = buildClanPath(clanURI);
|
||||
console.log("Navigating to clan", clanURI, path);
|
||||
@@ -64,7 +105,21 @@ export const machineNameParam = (params: Params) => {
|
||||
return params.machineName;
|
||||
};
|
||||
|
||||
export const inputParam = (params: Params) => params.input;
|
||||
export const nameParam = (params: Params) => params.name;
|
||||
export const idParam = (params: Params) => params.id;
|
||||
|
||||
export const useMachineName = (): string => machineNameParam(useParams());
|
||||
export const useInputParam = (): string => inputParam(useParams());
|
||||
export const useNameParam = (): string => nameParam(useParams());
|
||||
|
||||
export const maybeUseIdParam = (): string | null => {
|
||||
const params = useParams();
|
||||
if (params.id === undefined) {
|
||||
return null;
|
||||
}
|
||||
return idParam(params);
|
||||
};
|
||||
|
||||
export const maybeUseMachineName = (): string | null => {
|
||||
const params = useParams();
|
||||
|
||||
@@ -25,6 +25,9 @@ export type MachineStatus = MachineState["status"];
|
||||
export type ListMachines = SuccessData<"list_machines">;
|
||||
export type MachineDetails = SuccessData<"get_machine_details">;
|
||||
|
||||
export type ListServiceModules = SuccessData<"list_service_modules">;
|
||||
export type ListServiceInstances = SuccessData<"list_service_instances">;
|
||||
|
||||
export interface MachineDetail {
|
||||
tags: Tags;
|
||||
machine: Machine;
|
||||
@@ -47,7 +50,7 @@ export const useMachinesQuery = (clanURI: string) => {
|
||||
const client = useApiClient();
|
||||
|
||||
return useQuery<ListMachines>(() => ({
|
||||
queryKey: ["clans", encodeBase64(clanURI), "machines"],
|
||||
queryKey: [...clanKey(clanURI), "machines"],
|
||||
queryFn: async () => {
|
||||
const api = client.fetch("list_machines", {
|
||||
flake: {
|
||||
@@ -64,10 +67,16 @@ export const useMachinesQuery = (clanURI: string) => {
|
||||
}));
|
||||
};
|
||||
|
||||
export const machineKey = (clanUri: string, machineName: string) => [
|
||||
...clanKey(clanUri),
|
||||
"machine",
|
||||
encodeBase64(machineName),
|
||||
];
|
||||
|
||||
export const useMachineQuery = (clanURI: string, machineName: string) => {
|
||||
const client = useApiClient();
|
||||
return useQuery<MachineDetail>(() => ({
|
||||
queryKey: ["clans", encodeBase64(clanURI), "machine", machineName],
|
||||
queryKey: [machineKey(clanURI, machineName)],
|
||||
queryFn: async () => {
|
||||
const [tagsCall, machineCall, schemaCall] = [
|
||||
client.fetch("list_tags", {
|
||||
@@ -122,7 +131,7 @@ export type TagsQuery = ReturnType<typeof useTags>;
|
||||
export const useTags = (clanURI: string) => {
|
||||
const client = useApiClient();
|
||||
return useQuery(() => ({
|
||||
queryKey: ["clans", encodeBase64(clanURI), "tags"],
|
||||
queryKey: [...clanKey(clanURI), "tags"],
|
||||
queryFn: async () => {
|
||||
const apiCall = client.fetch("list_tags", {
|
||||
flake: {
|
||||
@@ -142,8 +151,9 @@ export const useTags = (clanURI: string) => {
|
||||
export const useMachineStateQuery = (clanURI: string, machineName: string) => {
|
||||
const client = useApiClient();
|
||||
return useQuery<MachineState>(() => ({
|
||||
queryKey: ["clans", encodeBase64(clanURI), "machine", machineName, "state"],
|
||||
queryKey: [...machineKey(clanURI, machineName), "state"],
|
||||
staleTime: 60_000, // 1 minute stale time
|
||||
enabled: false,
|
||||
queryFn: async () => {
|
||||
const apiCall = client.fetch("get_machine_state", {
|
||||
machine: {
|
||||
@@ -166,13 +176,61 @@ export const useMachineStateQuery = (clanURI: string, machineName: string) => {
|
||||
}));
|
||||
};
|
||||
|
||||
export const useServiceModulesQuery = (clanURI: string) => {
|
||||
const client = useApiClient();
|
||||
|
||||
return useQuery<ListServiceModules>(() => ({
|
||||
queryKey: [...clanKey(clanURI), "service_modules"],
|
||||
queryFn: async () => {
|
||||
const call = client.fetch("list_service_modules", {
|
||||
flake: {
|
||||
identifier: clanURI,
|
||||
},
|
||||
});
|
||||
|
||||
const result = await call.result;
|
||||
if (result.status === "error") {
|
||||
throw new Error(
|
||||
"Error fetching service modules: " + result.errors[0].message,
|
||||
);
|
||||
}
|
||||
|
||||
return result.data;
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
export const useServiceInstancesQuery = (clanURI: string) => {
|
||||
const client = useApiClient();
|
||||
|
||||
return useQuery<ListServiceInstances>(() => ({
|
||||
queryKey: [...clanKey(clanURI), "service_instances"],
|
||||
queryFn: async () => {
|
||||
const call = client.fetch("list_service_instances", {
|
||||
flake: {
|
||||
identifier: clanURI,
|
||||
},
|
||||
});
|
||||
|
||||
const result = await call.result;
|
||||
if (result.status === "error") {
|
||||
throw new Error(
|
||||
"Error fetching service instances: " + result.errors[0].message,
|
||||
);
|
||||
}
|
||||
|
||||
return result.data;
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
export const useMachineDetailsQuery = (
|
||||
clanURI: string,
|
||||
machineName: string,
|
||||
) => {
|
||||
const client = useApiClient();
|
||||
return useQuery<MachineDetails>(() => ({
|
||||
queryKey: ["clans", encodeBase64(clanURI), "machine_detail", machineName],
|
||||
queryKey: [machineKey(clanURI, machineName), "details"],
|
||||
queryFn: async () => {
|
||||
const call = client.fetch("get_machine_details", {
|
||||
machine: {
|
||||
@@ -202,7 +260,7 @@ export const ClanDetailsPersister = experimental_createQueryPersister({
|
||||
export const useClanDetailsQuery = (clanURI: string) => {
|
||||
const client = useApiClient();
|
||||
return useQuery<ClanDetails>(() => ({
|
||||
queryKey: ["clans", encodeBase64(clanURI), "details"],
|
||||
queryKey: [...clanKey(clanURI), "details"],
|
||||
persister: ClanDetailsPersister.persisterFn,
|
||||
queryFn: async () => {
|
||||
const args = {
|
||||
@@ -253,7 +311,8 @@ export const useClanListQuery = (
|
||||
|
||||
return useQueries(() => ({
|
||||
queries: clanURIs.map((clanURI) => {
|
||||
const queryKey = ["clans", encodeBase64(clanURI), "details"];
|
||||
// @BMG: Is duplicating query key intentional?
|
||||
const queryKey = [...clanKey(clanURI), "details"];
|
||||
|
||||
return {
|
||||
// eslint-disable-next-line @tanstack/query/exhaustive-deps
|
||||
@@ -322,7 +381,7 @@ export type MachineFlashOptionsQuery = UseQueryResult<MachineFlashOptions>;
|
||||
export const useMachineFlashOptions = (): MachineFlashOptionsQuery => {
|
||||
const client = useApiClient();
|
||||
return useQuery<MachineFlashOptions>(() => ({
|
||||
queryKey: ["clans", "machine_flash_options"],
|
||||
queryKey: ["flash_options"],
|
||||
queryFn: async () => {
|
||||
const call = client.fetch("get_machine_flash_options", {});
|
||||
const result = await call.result;
|
||||
@@ -486,7 +545,7 @@ export type ServiceModules = SuccessData<"list_service_modules">;
|
||||
export const useServiceModules = (clanUri: string) => {
|
||||
const client = useApiClient();
|
||||
return useQuery(() => ({
|
||||
queryKey: ["clans", encodeBase64(clanUri), "service_modules"],
|
||||
queryKey: [...clanKey(clanUri), "service_modules"],
|
||||
queryFn: async () => {
|
||||
const call = client.fetch("list_service_modules", {
|
||||
flake: {
|
||||
@@ -506,12 +565,14 @@ export const useServiceModules = (clanUri: string) => {
|
||||
}));
|
||||
};
|
||||
|
||||
export const clanKey = (clanUri: string) => ["clans", encodeBase64(clanUri)];
|
||||
|
||||
export type ServiceInstancesQuery = ReturnType<typeof useServiceInstances>;
|
||||
export type ServiceInstances = SuccessData<"list_service_instances">;
|
||||
export const useServiceInstances = (clanUri: string) => {
|
||||
const client = useApiClient();
|
||||
return useQuery(() => ({
|
||||
queryKey: ["clans", encodeBase64(clanUri), "service_instances"],
|
||||
queryKey: [...clanKey(clanUri), "service_instances"],
|
||||
queryFn: async () => {
|
||||
const call = client.fetch("list_service_instances", {
|
||||
flake: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { RouteSectionProps, useNavigate } from "@solidjs/router";
|
||||
import { RouteSectionProps, useLocation, useNavigate } from "@solidjs/router";
|
||||
import {
|
||||
Component,
|
||||
createContext,
|
||||
@@ -17,13 +17,15 @@ import {
|
||||
useClanURI,
|
||||
useMachineName,
|
||||
} from "@/src/hooks/clan";
|
||||
import { CubeScene, setWorldMode, worldMode } from "@/src/scene/cubes";
|
||||
import { CubeScene } from "@/src/scene/cubes";
|
||||
import {
|
||||
ClanDetails,
|
||||
ListServiceInstances,
|
||||
MachinesQueryResult,
|
||||
useClanDetailsQuery,
|
||||
useClanListQuery,
|
||||
useMachinesQuery,
|
||||
useServiceInstancesQuery,
|
||||
} from "@/src/hooks/queries";
|
||||
import { clanURIs, setStore, store } from "@/src/stores/clan";
|
||||
import { produce } from "solid-js/store";
|
||||
@@ -33,37 +35,27 @@ import styles from "./Clan.module.css";
|
||||
import { Sidebar } from "@/src/components/Sidebar/Sidebar";
|
||||
import { UseQueryResult } from "@tanstack/solid-query";
|
||||
import { ListClansModal } from "@/src/modals/ListClansModal/ListClansModal";
|
||||
import {
|
||||
ServiceWorkflow,
|
||||
SubmitServiceHandler,
|
||||
} from "@/src/workflows/Service/Service";
|
||||
import { useApiClient } from "@/src/hooks/ApiClient";
|
||||
import toast from "solid-toast";
|
||||
|
||||
import { AddMachine } from "@/src/workflows/AddMachine/AddMachine";
|
||||
import { SelectService } from "@/src/workflows/Service/SelectServiceFlyout";
|
||||
|
||||
interface ClanContextProps {
|
||||
clanURI: string;
|
||||
machinesQuery: MachinesQueryResult;
|
||||
activeClanQuery: UseQueryResult<ClanDetails>;
|
||||
otherClanQueries: UseQueryResult<ClanDetails>[];
|
||||
allClansQueries: UseQueryResult<ClanDetails>[];
|
||||
|
||||
isLoading(): boolean;
|
||||
isError(): boolean;
|
||||
|
||||
showAddMachine(): boolean;
|
||||
setShowAddMachine(value: boolean): void;
|
||||
}
|
||||
export type WorldMode = "default" | "select" | "service" | "create" | "move";
|
||||
|
||||
function createClanContext(
|
||||
clanURI: string,
|
||||
machinesQuery: MachinesQueryResult,
|
||||
activeClanQuery: UseQueryResult<ClanDetails>,
|
||||
otherClanQueries: UseQueryResult<ClanDetails>[],
|
||||
serviceInstancesQuery: UseQueryResult<ListServiceInstances>,
|
||||
) {
|
||||
const [worldMode, setWorldMode] = createSignal<WorldMode>("select");
|
||||
const [showAddMachine, setShowAddMachine] = createSignal(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const allClansQueries = [activeClanQuery, ...otherClanQueries];
|
||||
const allQueries = [machinesQuery, ...allClansQueries];
|
||||
const allQueries = [machinesQuery, ...allClansQueries, serviceInstancesQuery];
|
||||
|
||||
return {
|
||||
clanURI,
|
||||
@@ -71,14 +63,23 @@ function createClanContext(
|
||||
activeClanQuery,
|
||||
otherClanQueries,
|
||||
allClansQueries,
|
||||
serviceInstancesQuery,
|
||||
isLoading: () => allQueries.some((q) => q.isLoading),
|
||||
isError: () => activeClanQuery.isError,
|
||||
showAddMachine,
|
||||
setShowAddMachine,
|
||||
navigateToRoot: () => {
|
||||
if (location.pathname === buildClanPath(clanURI)) return;
|
||||
navigate(buildClanPath(clanURI), { replace: true });
|
||||
},
|
||||
setWorldMode,
|
||||
worldMode,
|
||||
};
|
||||
}
|
||||
|
||||
const ClanContext = createContext<ClanContextProps>();
|
||||
const ClanContext = createContext<
|
||||
ReturnType<typeof createClanContext> | undefined
|
||||
>();
|
||||
|
||||
export const useClanContext = () => {
|
||||
const ctx = useContext(ClanContext);
|
||||
@@ -104,12 +105,14 @@ export const Clan: Component<RouteSectionProps> = (props) => {
|
||||
);
|
||||
|
||||
const machinesQuery = useMachinesQuery(clanURI);
|
||||
const serviceInstancesQuery = useServiceInstancesQuery(clanURI);
|
||||
|
||||
const ctx = createClanContext(
|
||||
clanURI,
|
||||
machinesQuery,
|
||||
activeClanQuery,
|
||||
otherClanQueries,
|
||||
serviceInstancesQuery,
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -192,33 +195,7 @@ const ClanSceneController = (props: RouteSectionProps) => {
|
||||
}),
|
||||
);
|
||||
|
||||
const client = useApiClient();
|
||||
const handleSubmitService: SubmitServiceHandler = async (
|
||||
instance,
|
||||
action,
|
||||
) => {
|
||||
console.log(action, "Instance", instance);
|
||||
|
||||
if (action !== "create") {
|
||||
toast.error("Only creating new services is supported");
|
||||
return;
|
||||
}
|
||||
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") {
|
||||
toast.error("Error creating service instance");
|
||||
console.error("Error creating service instance", result.errors);
|
||||
}
|
||||
toast.success("Created");
|
||||
setWorldMode("select");
|
||||
};
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -254,14 +231,19 @@ const ClanSceneController = (props: RouteSectionProps) => {
|
||||
isLoading={ctx.isLoading()}
|
||||
cubesQuery={ctx.machinesQuery}
|
||||
toolbarPopup={
|
||||
<Show when={worldMode() === "service"}>
|
||||
<ServiceWorkflow
|
||||
handleSubmit={handleSubmitService}
|
||||
onClose={() => {
|
||||
setWorldMode("select");
|
||||
currentPromise()?.resolve({ id: "0" });
|
||||
}}
|
||||
/>
|
||||
<Show when={ctx.worldMode() === "service"}>
|
||||
<Show
|
||||
when={location.pathname.includes("/services/")}
|
||||
fallback={
|
||||
<SelectService
|
||||
onClose={() => {
|
||||
ctx.setWorldMode("select");
|
||||
}}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{props.children}
|
||||
</Show>
|
||||
</Show>
|
||||
}
|
||||
onCreate={onCreate}
|
||||
|
||||
@@ -10,6 +10,7 @@ import { SidebarMachineStatus } from "@/src/components/Sidebar/SidebarMachineSta
|
||||
import { SidebarSectionInstall } from "@/src/components/Sidebar/SidebarSectionInstall";
|
||||
|
||||
import styles from "./Machine.module.css";
|
||||
import { SectionServices } from "@/src/routes/Machine/SectionServices";
|
||||
|
||||
export const Machine = (props: RouteSectionProps) => {
|
||||
const navigate = useNavigate();
|
||||
@@ -62,6 +63,7 @@ export const Machine = (props: RouteSectionProps) => {
|
||||
/>
|
||||
<SectionGeneral {...sectionProps} />
|
||||
<SectionTags {...sectionProps} />
|
||||
<SectionServices />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
.sectionServices {
|
||||
@apply overflow-hidden flex flex-col;
|
||||
@apply bg-inv-4 rounded-md;
|
||||
|
||||
nav * {
|
||||
@apply outline-none;
|
||||
}
|
||||
|
||||
nav > a {
|
||||
@apply block w-full px-2 py-1.5 min-h-7 my-2 rounded-md;
|
||||
|
||||
&:first-child {
|
||||
@apply mt-0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
theme(colors.secondary.900),
|
||||
60%,
|
||||
theme(colors.secondary.600) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply bg-inv-acc-2;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply bg-inv-acc-3;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@apply bg-inv-acc-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
56
pkgs/clan-app/ui/src/routes/Machine/SectionServices.tsx
Normal file
56
pkgs/clan-app/ui/src/routes/Machine/SectionServices.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { SidebarSection } from "@/src/components/Sidebar/SidebarSection";
|
||||
import { useClanContext } from "@/src/routes/Clan/Clan";
|
||||
import { For, Show } from "solid-js";
|
||||
import { useMachineName } from "@/src/hooks/clan";
|
||||
import { ServiceRoute } from "@/src/components/Sidebar/SidebarBody";
|
||||
import styles from "./SectionServices.module.css";
|
||||
|
||||
export const SectionServices = () => {
|
||||
const ctx = useClanContext();
|
||||
|
||||
const services = () => {
|
||||
if (!(ctx.machinesQuery.isSuccess && ctx.serviceInstancesQuery.isSuccess)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const machineName = useMachineName();
|
||||
if (!ctx.machinesQuery.data[machineName]) {
|
||||
return [];
|
||||
}
|
||||
|
||||
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`);
|
||||
}
|
||||
|
||||
return {
|
||||
id,
|
||||
module,
|
||||
label: module.name == id ? module.name : `${module.name} (${id})`,
|
||||
};
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Show when={ctx.serviceInstancesQuery.isSuccess}>
|
||||
<SidebarSection title="Services">
|
||||
<div class={styles.sectionServices}>
|
||||
<nav>
|
||||
<For each={services()}>
|
||||
{(instance) => (
|
||||
<ServiceRoute
|
||||
clanURI={ctx.clanURI}
|
||||
machineName={useMachineName()}
|
||||
{...instance}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
</div>
|
||||
</SidebarSection>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
59
pkgs/clan-app/ui/src/routes/Service/Service.tsx
Normal file
59
pkgs/clan-app/ui/src/routes/Service/Service.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { RouteSectionProps, useNavigate } from "@solidjs/router";
|
||||
import { useClanContext } from "@/src/routes/Clan/Clan";
|
||||
import { ServiceWorkflow } from "@/src/workflows/Service/Service";
|
||||
import { SubmitServiceHandler } from "@/src/workflows/Service/models";
|
||||
import { buildClanPath } from "@/src/hooks/clan";
|
||||
import { useApiClient } from "@/src/hooks/ApiClient";
|
||||
import { useQueryClient } from "@tanstack/solid-query";
|
||||
import { clanKey } from "@/src/hooks/queries";
|
||||
import { onMount } from "solid-js";
|
||||
|
||||
export const Service = (props: RouteSectionProps) => {
|
||||
const ctx = useClanContext();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const client = useApiClient();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
onMount(() => {
|
||||
ctx.setWorldMode("service");
|
||||
});
|
||||
|
||||
const handleSubmit: SubmitServiceHandler = async (instance, action) => {
|
||||
console.log("Service submitted", instance, action);
|
||||
|
||||
if (action !== "create") {
|
||||
console.warn("Updating service instances is not supported yet");
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: clanKey(ctx.clanURI),
|
||||
});
|
||||
|
||||
ctx.setWorldMode("select");
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
console.log("Service closed, navigating back");
|
||||
navigate(buildClanPath(ctx.clanURI), { replace: true });
|
||||
ctx.setWorldMode("select");
|
||||
};
|
||||
|
||||
return <ServiceWorkflow handleSubmit={handleSubmit} onClose={handleClose} />;
|
||||
};
|
||||
@@ -2,6 +2,7 @@ import type { RouteDefinition } from "@solidjs/router/dist/types";
|
||||
import { Onboarding } from "@/src/routes/Onboarding/Onboarding";
|
||||
import { Clan } from "@/src/routes/Clan/Clan";
|
||||
import { Machine } from "@/src/routes/Machine/Machine";
|
||||
import { Service } from "@/src/routes/Service/Service";
|
||||
|
||||
export const Routes: RouteDefinition[] = [
|
||||
{
|
||||
@@ -30,6 +31,15 @@ export const Routes: RouteDefinition[] = [
|
||||
{
|
||||
path: "/machines/:machineName",
|
||||
component: Machine,
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/services/:name/:id",
|
||||
component: Service,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -31,6 +31,7 @@ import {
|
||||
setHighlightGroups,
|
||||
} from "./highlightStore";
|
||||
import { createMachineMesh } from "./MachineRepr";
|
||||
import { useClanContext } from "@/src/routes/Clan/Clan";
|
||||
|
||||
function intersectMachines(
|
||||
event: MouseEvent,
|
||||
@@ -94,12 +95,6 @@ export function useMachineClick() {
|
||||
return lastClickedMachine;
|
||||
}
|
||||
|
||||
/*Gloabl signal*/
|
||||
const [worldMode, setWorldMode] = createSignal<
|
||||
"default" | "select" | "service" | "create" | "move"
|
||||
>("select");
|
||||
export { worldMode, setWorldMode };
|
||||
|
||||
export function CubeScene(props: {
|
||||
cubesQuery: MachinesQueryResult;
|
||||
onCreate: () => Promise<{ id: string }>;
|
||||
@@ -111,6 +106,8 @@ export function CubeScene(props: {
|
||||
clanURI: string;
|
||||
toolbarPopup?: JSX.Element;
|
||||
}) {
|
||||
const ctx = useClanContext();
|
||||
|
||||
let container: HTMLDivElement;
|
||||
let scene: THREE.Scene;
|
||||
let camera: THREE.OrthographicCamera;
|
||||
@@ -440,7 +437,7 @@ export function CubeScene(props: {
|
||||
updateCameraInfo();
|
||||
|
||||
createEffect(
|
||||
on(worldMode, (mode) => {
|
||||
on(ctx.worldMode, (mode) => {
|
||||
if (mode === "create") {
|
||||
actionBase!.visible = true;
|
||||
} else {
|
||||
@@ -466,7 +463,7 @@ export function CubeScene(props: {
|
||||
// - Select/deselects a cube in mode
|
||||
// - Creates a new cube in "create" mode
|
||||
const onClick = (event: MouseEvent) => {
|
||||
if (worldMode() === "create") {
|
||||
if (ctx.worldMode() === "create") {
|
||||
props
|
||||
.onCreate()
|
||||
.then(({ id }) => {
|
||||
@@ -484,16 +481,16 @@ export function CubeScene(props: {
|
||||
.finally(() => {
|
||||
if (actionBase) actionBase.visible = false;
|
||||
|
||||
setWorldMode("select");
|
||||
ctx.setWorldMode("select");
|
||||
});
|
||||
}
|
||||
if (worldMode() === "move") {
|
||||
if (ctx.worldMode() === "move") {
|
||||
const currId = menuIntersection().at(0);
|
||||
const pos = cursorPosition();
|
||||
if (!currId || !pos) return;
|
||||
|
||||
props.setMachinePos(currId, pos);
|
||||
setWorldMode("select");
|
||||
ctx.setWorldMode("select");
|
||||
clearHighlight("move");
|
||||
}
|
||||
|
||||
@@ -513,13 +510,14 @@ export function CubeScene(props: {
|
||||
|
||||
if (!id) return;
|
||||
|
||||
if (worldMode() === "select") props.onSelect(new Set<string>([id]));
|
||||
if (ctx.worldMode() === "select") props.onSelect(new Set<string>([id]));
|
||||
|
||||
console.log("Clicked on machine", id);
|
||||
emitMachineClick(id); // notify subscribers
|
||||
} else {
|
||||
emitMachineClick(null);
|
||||
|
||||
if (worldMode() === "select") props.onSelect(new Set<string>());
|
||||
if (ctx.worldMode() === "select") props.onSelect(new Set<string>());
|
||||
}
|
||||
};
|
||||
|
||||
@@ -561,7 +559,7 @@ export function CubeScene(props: {
|
||||
if (e.button === 0) {
|
||||
// Left button
|
||||
|
||||
if (worldMode() === "select" && machines.length) {
|
||||
if (ctx.worldMode() === "select" && machines.length) {
|
||||
// Disable controls to avoid conflict
|
||||
controls.enabled = false;
|
||||
|
||||
@@ -571,7 +569,7 @@ export function CubeScene(props: {
|
||||
// Set machine as flying
|
||||
setHighlightGroups({ move: new Set(machines) });
|
||||
|
||||
setWorldMode("move");
|
||||
ctx.setWorldMode("move");
|
||||
renderLoop.requestRender();
|
||||
}, 500);
|
||||
setCancelMove(cancelMove);
|
||||
@@ -597,14 +595,14 @@ export function CubeScene(props: {
|
||||
// Always re-enable controls
|
||||
controls.enabled = true;
|
||||
|
||||
if (worldMode() === "move") {
|
||||
if (ctx.worldMode() === "move") {
|
||||
// Set machine as not flying
|
||||
props.setMachinePos(
|
||||
highlightGroups["move"].values().next().value!,
|
||||
cursorPosition() || null,
|
||||
);
|
||||
clearHighlight("move");
|
||||
setWorldMode("select");
|
||||
ctx.setWorldMode("select");
|
||||
renderLoop.requestRender();
|
||||
}
|
||||
}
|
||||
@@ -691,13 +689,14 @@ export function CubeScene(props: {
|
||||
|
||||
const onAddClick = (event: MouseEvent) => {
|
||||
setPositionMode("grid");
|
||||
setWorldMode("create");
|
||||
ctx.setWorldMode("create");
|
||||
renderLoop.requestRender();
|
||||
};
|
||||
const onMouseMove = (event: MouseEvent) => {
|
||||
if (!(worldMode() === "create" || worldMode() === "move")) return;
|
||||
if (!(ctx.worldMode() === "create" || ctx.worldMode() === "move")) return;
|
||||
|
||||
const actionRepr = worldMode() === "create" ? actionBase : actionMachine;
|
||||
const actionRepr =
|
||||
ctx.worldMode() === "create" ? actionBase : actionMachine;
|
||||
if (!actionRepr) return;
|
||||
|
||||
actionRepr.visible = true;
|
||||
@@ -732,7 +731,7 @@ export function CubeScene(props: {
|
||||
}
|
||||
};
|
||||
const handleMenuSelect = (mode: "move") => {
|
||||
setWorldMode(mode);
|
||||
ctx.setWorldMode(mode);
|
||||
setHighlightGroups({ move: new Set(menuIntersection()) });
|
||||
|
||||
// Find the position of the first selected machine
|
||||
@@ -752,7 +751,7 @@ export function CubeScene(props: {
|
||||
};
|
||||
|
||||
createEffect(
|
||||
on(worldMode, (mode) => {
|
||||
on(ctx.worldMode, (mode) => {
|
||||
console.log("World mode changed to", mode);
|
||||
}),
|
||||
);
|
||||
@@ -775,10 +774,10 @@ export function CubeScene(props: {
|
||||
<div
|
||||
class={cx(
|
||||
"cubes-scene-container",
|
||||
worldMode() === "default" && "cursor-no-drop",
|
||||
worldMode() === "select" && "cursor-pointer",
|
||||
worldMode() === "service" && "cursor-pointer",
|
||||
worldMode() === "create" && "cursor-cell",
|
||||
ctx.worldMode() === "default" && "cursor-no-drop",
|
||||
ctx.worldMode() === "select" && "cursor-pointer",
|
||||
ctx.worldMode() === "service" && "cursor-pointer",
|
||||
ctx.worldMode() === "create" && "cursor-cell",
|
||||
isDragging() && "!cursor-grabbing",
|
||||
)}
|
||||
ref={(el) => (container = el)}
|
||||
@@ -792,24 +791,25 @@ export function CubeScene(props: {
|
||||
description="Select machine"
|
||||
name="Select"
|
||||
icon="Cursor"
|
||||
onClick={() => setWorldMode("select")}
|
||||
selected={worldMode() === "select"}
|
||||
onClick={() => ctx.setWorldMode("select")}
|
||||
selected={ctx.worldMode() === "select"}
|
||||
/>
|
||||
<ToolbarButton
|
||||
description="Create new machine"
|
||||
name="new-machine"
|
||||
icon="NewMachine"
|
||||
onClick={onAddClick}
|
||||
selected={worldMode() === "create"}
|
||||
selected={ctx.worldMode() === "create"}
|
||||
/>
|
||||
<Divider orientation="vertical" />
|
||||
<ToolbarButton
|
||||
description="Add new Service"
|
||||
name="modules"
|
||||
icon="Services"
|
||||
selected={worldMode() === "service"}
|
||||
selected={ctx.worldMode() === "service"}
|
||||
onClick={() => {
|
||||
setWorldMode("service");
|
||||
ctx.navigateToRoot();
|
||||
ctx.setWorldMode("service");
|
||||
}}
|
||||
/>
|
||||
<ToolbarButton
|
||||
|
||||
120
pkgs/clan-app/ui/src/workflows/Service/SelectServiceFlyout.tsx
Normal file
120
pkgs/clan-app/ui/src/workflows/Service/SelectServiceFlyout.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import { Search } from "@/src/components/Search/Search";
|
||||
import { Typography } from "@/src/components/Typography/Typography";
|
||||
import { buildServicePath, useClanURI } from "@/src/hooks/clan";
|
||||
import { useServiceInstances, useServiceModules } from "@/src/hooks/queries";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { createEffect, createSignal, Show } from "solid-js";
|
||||
import { Module } from "./models";
|
||||
import Icon from "@/src/components/Icon/Icon";
|
||||
import { Combobox } from "@kobalte/core/combobox";
|
||||
import { useClickOutside } from "@/src/hooks/useClickOutside";
|
||||
|
||||
interface FlyoutProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
export const SelectService = (props: FlyoutProps) => {
|
||||
const clanURI = useClanURI();
|
||||
|
||||
const serviceModulesQuery = useServiceModules(clanURI);
|
||||
const serviceInstancesQuery = useServiceInstances(clanURI);
|
||||
|
||||
const [moduleOptions, setModuleOptions] = createSignal<Module[]>([]);
|
||||
|
||||
createEffect(() => {
|
||||
if (serviceModulesQuery.data && serviceInstancesQuery.data) {
|
||||
setModuleOptions(
|
||||
serviceModulesQuery.data.modules.map((currService) => ({
|
||||
value: `${currService.usage_ref.name}:${currService.usage_ref.input}`,
|
||||
label: currService.usage_ref.name,
|
||||
raw: currService,
|
||||
})),
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const handleChange = (module: Module | null) => {
|
||||
if (!module) return;
|
||||
|
||||
const serviceURL = buildServicePath({
|
||||
clanURI,
|
||||
id: module.raw.instance_refs[0] || module.raw.usage_ref.name,
|
||||
module: {
|
||||
name: module.raw.usage_ref.name,
|
||||
input: module.raw.usage_ref.input,
|
||||
},
|
||||
});
|
||||
navigate(serviceURL);
|
||||
};
|
||||
const navigate = useNavigate();
|
||||
|
||||
let ref: HTMLDivElement;
|
||||
|
||||
useClickOutside(
|
||||
() => ref,
|
||||
() => {
|
||||
props.onClose();
|
||||
},
|
||||
);
|
||||
return (
|
||||
<div
|
||||
ref={(e) => (ref = e)}
|
||||
class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2"
|
||||
>
|
||||
<div class="w-[30rem]">
|
||||
<Search<Module>
|
||||
loading={
|
||||
serviceModulesQuery.isLoading || serviceInstancesQuery.isLoading
|
||||
}
|
||||
height="13rem"
|
||||
onChange={handleChange}
|
||||
options={moduleOptions()}
|
||||
renderItem={(item, opts) => {
|
||||
return (
|
||||
<div class="flex items-center justify-between gap-2 overflow-hidden rounded-md px-2 py-1 pr-4">
|
||||
<div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-white">
|
||||
<Icon icon="Code" />
|
||||
</div>
|
||||
<div class="flex w-full flex-col">
|
||||
<Combobox.ItemLabel class="flex gap-1.5">
|
||||
<Show when={item.raw.instance_refs.length > 0}>
|
||||
<div class="flex items-center rounded bg-[#76FFA4] px-1 py-0.5">
|
||||
<Typography hierarchy="label" weight="bold" size="xxs">
|
||||
Added
|
||||
</Typography>
|
||||
</div>
|
||||
</Show>
|
||||
<Typography
|
||||
hierarchy="body"
|
||||
size="s"
|
||||
weight="medium"
|
||||
inverted
|
||||
>
|
||||
{item.label}
|
||||
</Typography>
|
||||
</Combobox.ItemLabel>
|
||||
<Typography
|
||||
hierarchy="body"
|
||||
size="xxs"
|
||||
weight="normal"
|
||||
color="quaternary"
|
||||
inverted
|
||||
class="flex justify-between"
|
||||
>
|
||||
<span class="inline-block max-w-80 truncate align-middle">
|
||||
{item.raw.info.manifest.description}
|
||||
</span>
|
||||
<span class="inline-block max-w-32 truncate align-middle">
|
||||
<Show when={!item.raw.native} fallback="by clan-core">
|
||||
by {item.raw.usage_ref.input}
|
||||
</Show>
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -160,6 +160,9 @@ export const SelectRoleMembers: Story = {
|
||||
handleSubmit={(instance) => {
|
||||
console.log("Submitted instance:", instance);
|
||||
}}
|
||||
onClose={() => {
|
||||
console.log("Closed");
|
||||
}}
|
||||
initialStep="select:members"
|
||||
initialStore={{
|
||||
currentRole: "peer",
|
||||
|
||||
@@ -4,10 +4,9 @@ import {
|
||||
StepperProvider,
|
||||
useStepper,
|
||||
} from "@/src/hooks/stepper";
|
||||
import { useClanURI } from "@/src/hooks/clan";
|
||||
import { useClanURI, useServiceParams } from "@/src/hooks/clan";
|
||||
import {
|
||||
MachinesQuery,
|
||||
ServiceModules,
|
||||
TagsQuery,
|
||||
useMachinesQuery,
|
||||
useServiceInstances,
|
||||
@@ -18,18 +17,15 @@ import {
|
||||
createEffect,
|
||||
createMemo,
|
||||
createSignal,
|
||||
For,
|
||||
JSX,
|
||||
Show,
|
||||
on,
|
||||
onMount,
|
||||
For,
|
||||
} from "solid-js";
|
||||
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 { TagSelect } from "@/src/components/Search/TagSelect";
|
||||
import { Tag } from "@/src/components/Tag/Tag";
|
||||
|
||||
import { createForm, FieldValues } from "@modular-forms/solid";
|
||||
import styles from "./Service.module.css";
|
||||
import { TextInput } from "@/src/components/Form/TextInput";
|
||||
@@ -40,152 +36,16 @@ import { SearchMultiple } from "@/src/components/Search/MultipleSearch";
|
||||
import { useMachineClick } from "@/src/scene/cubes";
|
||||
import {
|
||||
clearAllHighlights,
|
||||
highlightGroups,
|
||||
setHighlightGroups,
|
||||
} from "@/src/scene/highlightStore";
|
||||
import { useClickOutside } from "@/src/hooks/useClickOutside";
|
||||
|
||||
type ModuleItem = ServiceModules["modules"][number];
|
||||
|
||||
interface Module {
|
||||
value: string;
|
||||
label: string;
|
||||
raw: ModuleItem;
|
||||
}
|
||||
|
||||
const SelectService = () => {
|
||||
const clanURI = useClanURI();
|
||||
const stepper = useStepper<ServiceSteps>();
|
||||
|
||||
const serviceModulesQuery = useServiceModules(clanURI);
|
||||
const serviceInstancesQuery = useServiceInstances(clanURI);
|
||||
const machinesQuery = useMachinesQuery(clanURI);
|
||||
|
||||
const [moduleOptions, setModuleOptions] = createSignal<Module[]>([]);
|
||||
createEffect(() => {
|
||||
if (serviceModulesQuery.data && serviceInstancesQuery.data) {
|
||||
setModuleOptions(
|
||||
serviceModulesQuery.data.modules.map((currService) => ({
|
||||
value: `${currService.usage_ref.name}:${currService.usage_ref.input}`,
|
||||
label: currService.usage_ref.name,
|
||||
raw: currService,
|
||||
})),
|
||||
);
|
||||
}
|
||||
});
|
||||
const [store, set] = getStepStore<ServiceStoreType>(stepper);
|
||||
|
||||
return (
|
||||
<Search<Module>
|
||||
loading={serviceModulesQuery.isLoading}
|
||||
height="13rem"
|
||||
onChange={(module) => {
|
||||
if (!module) return;
|
||||
|
||||
set("module", {
|
||||
name: module.raw.usage_ref.name,
|
||||
input: module.raw.usage_ref.input,
|
||||
raw: module.raw,
|
||||
});
|
||||
// TODO: Ideally we need to ask
|
||||
// - create new
|
||||
// - update existing (and select which one)
|
||||
|
||||
// For now:
|
||||
// Create a new instance, if there are no instances yet
|
||||
// Update the first instance, if there is one
|
||||
if (module.raw.instance_refs.length === 0) {
|
||||
set("action", "create");
|
||||
} else {
|
||||
if (!serviceInstancesQuery.data) return;
|
||||
if (!machinesQuery.data) return;
|
||||
set("action", "update");
|
||||
|
||||
const instanceName = module.raw.instance_refs[0];
|
||||
const instance = serviceInstancesQuery.data[instanceName];
|
||||
console.log("Editing existing instance", module);
|
||||
|
||||
for (const role of Object.keys(instance.roles || {})) {
|
||||
const tags = Object.keys(instance.roles?.[role].tags || {});
|
||||
const machines = Object.keys(instance.roles?.[role].machines || {});
|
||||
|
||||
const machineTags = machines.map((m) => ({
|
||||
value: "m_" + m,
|
||||
label: m,
|
||||
type: "machine" as const,
|
||||
}));
|
||||
const tagsTags = tags.map((t) => {
|
||||
return {
|
||||
value: "t_" + t,
|
||||
label: t,
|
||||
type: "tag" as const,
|
||||
members: Object.entries(machinesQuery.data || {})
|
||||
.filter(([_, m]) => m.data.tags?.includes(t))
|
||||
.map(([k]) => k),
|
||||
};
|
||||
});
|
||||
console.log("Members for role", role, [
|
||||
...machineTags,
|
||||
...tagsTags,
|
||||
]);
|
||||
if (!store.roles) {
|
||||
set("roles", {});
|
||||
}
|
||||
const roleMembers = [...machineTags, ...tagsTags].sort((a, b) =>
|
||||
a.label.localeCompare(b.label),
|
||||
);
|
||||
set("roles", role, roleMembers);
|
||||
console.log("set", store.roles);
|
||||
}
|
||||
// Initialize the roles with the existing members
|
||||
}
|
||||
|
||||
stepper.next();
|
||||
}}
|
||||
options={moduleOptions()}
|
||||
renderItem={(item, opts) => {
|
||||
return (
|
||||
<div class="flex items-center justify-between gap-2 overflow-hidden rounded-md px-2 py-1 pr-4">
|
||||
<div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-white">
|
||||
<Icon icon="Code" />
|
||||
</div>
|
||||
<div class="flex w-full flex-col">
|
||||
<Combobox.ItemLabel class="flex gap-1.5">
|
||||
<Show when={item.raw.instance_refs.length > 0}>
|
||||
<div class="flex items-center rounded bg-[#76FFA4] px-1 py-0.5">
|
||||
<Typography hierarchy="label" weight="bold" size="xxs">
|
||||
Added
|
||||
</Typography>
|
||||
</div>
|
||||
</Show>
|
||||
<Typography hierarchy="body" size="s" weight="medium" inverted>
|
||||
{item.label}
|
||||
</Typography>
|
||||
</Combobox.ItemLabel>
|
||||
<Typography
|
||||
hierarchy="body"
|
||||
size="xxs"
|
||||
weight="normal"
|
||||
color="quaternary"
|
||||
inverted
|
||||
class="flex justify-between"
|
||||
>
|
||||
<span class="inline-block max-w-80 truncate align-middle">
|
||||
{item.raw.info.manifest.description}
|
||||
</span>
|
||||
<span class="inline-block max-w-32 truncate align-middle">
|
||||
<Show when={!item.raw.native} fallback="by clan-core">
|
||||
by {item.raw.usage_ref.input}
|
||||
</Show>
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
import {
|
||||
getRoleMembers,
|
||||
RoleType,
|
||||
ServiceStoreType,
|
||||
SubmitServiceHandler,
|
||||
} from "./models";
|
||||
import { TagSelect } from "@/src/components/Search/TagSelect";
|
||||
import { Tag } from "@/src/components/Tag/Tag";
|
||||
|
||||
const useOptions = (tagsQuery: TagsQuery, machinesQuery: MachinesQuery) =>
|
||||
createMemo<TagType[]>(() => {
|
||||
@@ -215,22 +75,78 @@ const useOptions = (tagsQuery: TagsQuery, machinesQuery: MachinesQuery) =>
|
||||
);
|
||||
});
|
||||
|
||||
const sanitizeModuleInput = (
|
||||
input: string | undefined,
|
||||
core_input_name: string,
|
||||
) => {
|
||||
if (!input) return null;
|
||||
|
||||
if (input === core_input_name) return null;
|
||||
|
||||
return input;
|
||||
};
|
||||
|
||||
interface RolesForm extends FieldValues {
|
||||
roles: Record<string, string[]>;
|
||||
instanceName: string;
|
||||
}
|
||||
const ConfigureService = () => {
|
||||
const stepper = useStepper<ServiceSteps>();
|
||||
const clanURI = useClanURI();
|
||||
const machinesQuery = useMachinesQuery(clanURI);
|
||||
const serviceModulesQuery = useServiceModules(clanURI);
|
||||
const serviceInstancesQuery = useServiceInstances(clanURI);
|
||||
const routerProps = useServiceParams();
|
||||
|
||||
const [store, set] = getStepStore<ServiceStoreType>(stepper);
|
||||
|
||||
const [formStore, { Form, Field }] = createForm<RolesForm>({
|
||||
initialValues: {
|
||||
// Default to the module name, until we support multiple instances
|
||||
instanceName: store.module.name,
|
||||
instanceName: routerProps.id,
|
||||
},
|
||||
});
|
||||
|
||||
const machinesQuery = useMachinesQuery(useClanURI());
|
||||
const selectedModule = createMemo(() => {
|
||||
if (!serviceModulesQuery.data) return undefined;
|
||||
return serviceModulesQuery.data.modules.find(
|
||||
(m) =>
|
||||
m.usage_ref.name === routerProps.name &&
|
||||
// left side is string | null
|
||||
// right side is string | undefined
|
||||
m.usage_ref.input ===
|
||||
sanitizeModuleInput(
|
||||
routerProps.input,
|
||||
serviceModulesQuery.data.core_input_name,
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
createEffect(
|
||||
on(
|
||||
() => [serviceInstancesQuery.data, machinesQuery.data] as const,
|
||||
([instances, machines]) => {
|
||||
// Wait for all queries to be ready
|
||||
if (!instances || !machines) return;
|
||||
|
||||
const instance = instances[routerProps.id || routerProps.name];
|
||||
|
||||
set("roles", {});
|
||||
if (!instance) {
|
||||
set("action", "create");
|
||||
return;
|
||||
}
|
||||
|
||||
for (const role of Object.keys(instance.roles || {})) {
|
||||
// Get Role members
|
||||
const roleMembers = getRoleMembers(instance, machines, role);
|
||||
set("roles", role, roleMembers);
|
||||
}
|
||||
set("action", "update");
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
const tagsQuery = useTags(useClanURI());
|
||||
|
||||
const options = useOptions(tagsQuery, machinesQuery);
|
||||
@@ -249,13 +165,15 @@ const ConfigureService = () => {
|
||||
},
|
||||
]),
|
||||
);
|
||||
|
||||
store.handleSubmit(
|
||||
{
|
||||
name: values.instanceName,
|
||||
module: {
|
||||
name: store.module.name,
|
||||
input: store.module.input,
|
||||
name: routerProps.name,
|
||||
input: sanitizeModuleInput(
|
||||
routerProps.input,
|
||||
serviceModulesQuery.data?.core_input_name || "clan-core",
|
||||
),
|
||||
},
|
||||
roles,
|
||||
},
|
||||
@@ -271,7 +189,7 @@ const ConfigureService = () => {
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<Typography hierarchy="body" size="s" weight="medium" inverted>
|
||||
{store.module.name}
|
||||
{routerProps.name}
|
||||
</Typography>
|
||||
<Field name="instanceName">
|
||||
{(field, input) => (
|
||||
@@ -294,54 +212,71 @@ const ConfigureService = () => {
|
||||
ghost
|
||||
size="s"
|
||||
class="ml-auto"
|
||||
onClick={store.close}
|
||||
onClick={() => store.close()}
|
||||
/>
|
||||
</div>
|
||||
<div class={styles.content}>
|
||||
<For each={Object.keys(store.module.raw?.info.roles || {})}>
|
||||
{(role) => {
|
||||
const values = store.roles?.[role] || [];
|
||||
return (
|
||||
<TagSelect<TagType>
|
||||
label={role}
|
||||
renderItem={(item: TagType) => (
|
||||
<Tag
|
||||
inverted
|
||||
icon={(tag) => (
|
||||
<Icon
|
||||
icon={item.type === "machine" ? "Machine" : "Tag"}
|
||||
size="0.5rem"
|
||||
inverted={tag.inverted}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Tag>
|
||||
)}
|
||||
values={values}
|
||||
options={options()}
|
||||
onClick={() => {
|
||||
set("currentRole", role);
|
||||
stepper.next();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
<Show
|
||||
when={serviceModulesQuery.data && store.roles}
|
||||
fallback={<div>Loading...</div>}
|
||||
>
|
||||
<For each={Object.keys(selectedModule()?.info.roles || {})}>
|
||||
{(role) => {
|
||||
const values = store.roles?.[role] || [];
|
||||
return (
|
||||
<TagSelect<TagType>
|
||||
label={role}
|
||||
renderItem={(item: TagType) => (
|
||||
<Tag
|
||||
inverted
|
||||
icon={(tag) => (
|
||||
<Icon
|
||||
icon={item.type === "machine" ? "Machine" : "Tag"}
|
||||
size="0.5rem"
|
||||
inverted={tag.inverted}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Tag>
|
||||
)}
|
||||
values={values}
|
||||
options={options()}
|
||||
onClick={() => {
|
||||
set("currentRole", role);
|
||||
stepper.next();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</Show>
|
||||
</div>
|
||||
<div class={cx(styles.footer, styles.backgroundAlt)}>
|
||||
<BackButton ghost hierarchy="primary" class="mr-auto" />
|
||||
|
||||
<Button hierarchy="secondary" type="submit">
|
||||
<Show when={store.action === "create"}>Add Service</Show>
|
||||
<Show when={store.action === "update"}>Save Changes</Show>
|
||||
<Button
|
||||
hierarchy="secondary"
|
||||
type="submit"
|
||||
loading={!serviceInstancesQuery.data}
|
||||
>
|
||||
<Show when={serviceInstancesQuery.data}>
|
||||
{(d) => (
|
||||
<>
|
||||
<Show
|
||||
when={Object.keys(d()).includes(routerProps.id)}
|
||||
fallback={"Add Service"}
|
||||
>
|
||||
Save Changes
|
||||
</Show>
|
||||
</>
|
||||
)}
|
||||
</Show>
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
type TagType =
|
||||
export type TagType =
|
||||
| {
|
||||
value: string;
|
||||
label: string;
|
||||
@@ -362,31 +297,36 @@ const ConfigureRole = () => {
|
||||
store.roles?.[store.currentRole || ""] || [],
|
||||
);
|
||||
|
||||
const clanUri = useClanURI();
|
||||
const machinesQuery = useMachinesQuery(clanUri);
|
||||
|
||||
const lastClickedMachine = useMachineClick();
|
||||
|
||||
createEffect(() => {
|
||||
console.log("Current role", store.currentRole, members());
|
||||
clearAllHighlights();
|
||||
setHighlightGroups({
|
||||
[store.currentRole as string]: new Set(
|
||||
members().flatMap((m) => {
|
||||
if (m.type === "machine") return m.label;
|
||||
createEffect(
|
||||
on(members, (m) => {
|
||||
clearAllHighlights();
|
||||
setHighlightGroups({
|
||||
[store.currentRole as string]: new Set(
|
||||
m.flatMap((m) => {
|
||||
if (m.type === "machine") return m.label;
|
||||
|
||||
return m.members;
|
||||
}),
|
||||
),
|
||||
});
|
||||
return m.members;
|
||||
}),
|
||||
),
|
||||
});
|
||||
}),
|
||||
);
|
||||
|
||||
console.log("now", highlightGroups);
|
||||
onMount(() => {
|
||||
setHighlightGroups(() => ({}));
|
||||
});
|
||||
onMount(() => setHighlightGroups(() => ({})));
|
||||
|
||||
createEffect(
|
||||
on(lastClickedMachine, (machine) => {
|
||||
// const machine = lastClickedMachine();
|
||||
const currentMembers = members();
|
||||
console.log("Clicked machine", machine, currentMembers);
|
||||
if (!machine) return;
|
||||
|
||||
const machineTagName = "m_" + machine;
|
||||
|
||||
const existing = currentMembers.find((m) => m.value === machineTagName);
|
||||
@@ -403,7 +343,6 @@ const ConfigureRole = () => {
|
||||
}),
|
||||
);
|
||||
|
||||
const machinesQuery = useMachinesQuery(useClanURI());
|
||||
const tagsQuery = useTags(useClanURI());
|
||||
|
||||
const options = useOptions(tagsQuery, machinesQuery);
|
||||
@@ -428,12 +367,7 @@ const ConfigureRole = () => {
|
||||
headerClass={cx(styles.backgroundAlt, "flex flex-col gap-2.5")}
|
||||
headerChildren={
|
||||
<div class="flex w-full gap-2.5">
|
||||
<BackButton
|
||||
ghost
|
||||
size="xs"
|
||||
hierarchy="primary"
|
||||
// onClick={() => clearAllHighlights()}
|
||||
/>
|
||||
<BackButton ghost size="xs" hierarchy="primary" />
|
||||
<Typography
|
||||
hierarchy="body"
|
||||
size="s"
|
||||
@@ -505,10 +439,6 @@ const ConfigureRole = () => {
|
||||
};
|
||||
|
||||
const steps = [
|
||||
{
|
||||
id: "select:service",
|
||||
content: SelectService,
|
||||
},
|
||||
{
|
||||
id: "view:members",
|
||||
content: ConfigureService,
|
||||
@@ -522,79 +452,34 @@ 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 | null;
|
||||
};
|
||||
roles: Record<string, RoleType>;
|
||||
}
|
||||
|
||||
interface RoleType {
|
||||
machines: Record<string, { settings?: unknown }>;
|
||||
tags: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface ServiceStoreType {
|
||||
module: {
|
||||
name: string;
|
||||
input?: string | null;
|
||||
raw?: ModuleItem;
|
||||
};
|
||||
roles: Record<string, TagType[]>;
|
||||
currentRole?: string;
|
||||
close: () => void;
|
||||
handleSubmit: SubmitServiceHandler;
|
||||
action: "create" | "update";
|
||||
}
|
||||
|
||||
export type SubmitServiceHandler = (
|
||||
values: InventoryInstance,
|
||||
action: "create" | "update",
|
||||
) => void | Promise<void>;
|
||||
|
||||
interface ServiceWorkflowProps {
|
||||
initialStep?: ServiceSteps[number]["id"];
|
||||
initialStore?: Partial<ServiceStoreType>;
|
||||
onClose?: () => void;
|
||||
onClose: () => void;
|
||||
handleSubmit: SubmitServiceHandler;
|
||||
rootProps?: JSX.HTMLAttributes<HTMLDivElement>;
|
||||
}
|
||||
|
||||
export const ServiceWorkflow = (props: ServiceWorkflowProps) => {
|
||||
const stepper = createStepper(
|
||||
{ steps },
|
||||
{
|
||||
initialStep: props.initialStep || "select:service",
|
||||
initialStep: props.initialStep || "view:members",
|
||||
initialStoreData: {
|
||||
...props.initialStore,
|
||||
close: () => props.onClose?.(),
|
||||
close: props.onClose,
|
||||
handleSubmit: props.handleSubmit,
|
||||
} satisfies Partial<ServiceStoreType>,
|
||||
},
|
||||
);
|
||||
|
||||
createEffect(() => {
|
||||
if (stepper.currentStep().id !== "select:members") {
|
||||
clearAllHighlights();
|
||||
}
|
||||
});
|
||||
|
||||
let ref: HTMLDivElement;
|
||||
useClickOutside(
|
||||
() => ref,
|
||||
() => {
|
||||
if (stepper.currentStep().id === "select:service") props.onClose?.();
|
||||
},
|
||||
);
|
||||
return (
|
||||
<div
|
||||
ref={(e) => (ref = e)}
|
||||
id="add-service"
|
||||
class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2"
|
||||
{...props.rootProps}
|
||||
>
|
||||
<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>
|
||||
|
||||
81
pkgs/clan-app/ui/src/workflows/Service/models.ts
Normal file
81
pkgs/clan-app/ui/src/workflows/Service/models.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
import {
|
||||
MachinesQuery,
|
||||
ServiceInstancesQuery,
|
||||
ServiceModules,
|
||||
} from "@/src/hooks/queries";
|
||||
import { TagType } from "./Service";
|
||||
|
||||
export interface ServiceStoreType {
|
||||
roles: Record<string, TagType[]>;
|
||||
currentRole?: string;
|
||||
close: () => void;
|
||||
handleSubmit: SubmitServiceHandler;
|
||||
action: "create" | "update";
|
||||
}
|
||||
|
||||
// TODO: Ideally we would impot this from a backend model package
|
||||
export interface InventoryInstance {
|
||||
name: string;
|
||||
module: {
|
||||
name: string;
|
||||
input?: string | null;
|
||||
};
|
||||
roles: Record<string, RoleType>;
|
||||
}
|
||||
|
||||
export interface RoleType {
|
||||
machines: Record<string, { settings?: unknown }>;
|
||||
tags: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export type SubmitServiceHandler = (
|
||||
values: InventoryInstance,
|
||||
action: "create" | "update",
|
||||
) => void | Promise<void>;
|
||||
|
||||
export type ModuleItem = ServiceModules["modules"][number];
|
||||
|
||||
export interface Module {
|
||||
value: string;
|
||||
label: string;
|
||||
raw: ModuleItem;
|
||||
}
|
||||
|
||||
type ValueOf<T> = T[keyof T];
|
||||
|
||||
/**
|
||||
* Collect all members (machines and tags) for a given role in a service instance
|
||||
*
|
||||
* TODO: Make this native feature of the API
|
||||
*
|
||||
*/
|
||||
export function getRoleMembers(
|
||||
instance: ValueOf<NonNullable<ServiceInstancesQuery["data"]>>,
|
||||
all_machines: NonNullable<MachinesQuery["data"]>,
|
||||
role: string,
|
||||
) {
|
||||
const tags = Object.keys(instance.roles?.[role].tags || {});
|
||||
const machines = Object.keys(instance.roles?.[role].machines || {});
|
||||
|
||||
const machineTags = machines.map((m) => ({
|
||||
value: "m_" + m,
|
||||
label: m,
|
||||
type: "machine" as const,
|
||||
}));
|
||||
const tagsTags = tags.map((t) => {
|
||||
return {
|
||||
value: "t_" + t,
|
||||
label: t,
|
||||
type: "tag" as const,
|
||||
members: Object.entries(all_machines)
|
||||
.filter(([_, m]) => m.data.tags?.includes(t))
|
||||
.map(([k]) => k),
|
||||
};
|
||||
});
|
||||
console.log("Members for role", role, [...machineTags, ...tagsTags]);
|
||||
|
||||
const roleMembers = [...machineTags, ...tagsTags].sort((a, b) =>
|
||||
a.label.localeCompare(b.label),
|
||||
);
|
||||
return roleMembers;
|
||||
}
|
||||
Reference in New Issue
Block a user