diff --git a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css index 1bd45f388..8699db74f 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css +++ b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css @@ -1,3 +1,3 @@ .sidebar { - @apply w-60 border-none z-10 h-full flex flex-col; + @apply w-60 border-none z-10 h-full flex flex-col rounded-b-md overflow-hidden; } diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.css index 3a16731f9..1335223c2 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.css +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.css @@ -1,14 +1,15 @@ div.sidebar-body { - @apply py-4 px-2 h-full; + @apply py-4 px-2; + /* full - (y padding) */ + height: calc(100% - 2rem); + @apply border border-inv-3 rounded-bl-md rounded-br-md; + /* TODO: This is weird, we shouldn't disable native browser features, a11y impacts incomming */ &::-webkit-scrollbar { display: none; } - overflow-y: auto; - scrollbar-width: none; - background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%), linear-gradient( @@ -20,13 +21,14 @@ div.sidebar-body { @apply backdrop-blur-sm; .accordion { - @apply w-full mb-4; + @apply w-full mb-4 h-full flex flex-col justify-start gap-4; &:last-child { @apply mb-0; } & > .item { + max-height: 50%; &:last-child { @apply mb-0; } @@ -58,9 +60,13 @@ div.sidebar-body { } & > .content { - @apply overflow-hidden flex flex-col; + @apply flex flex-col; @apply py-3 px-1.5 bg-inv-4 rounded-md mb-4; + max-height: calc(100% - 24px); + overflow-y: auto; + scrollbar-width: none; + animation: slideAccordionUp 300ms cubic-bezier(0.87, 0, 0.13, 1); &[data-expanded] { diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx index 7665ca482..11c52a6ca 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx +++ b/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,22 +130,42 @@ const Machines = () => { export const ServiceRoute = (props: { clanURI: string; - machineName?: string; label: string; id: string; - module: { input?: string | null | undefined; name: string }; + instance: Instance; }) => ( - +
- - {props.label} - +
+ + {props.id} + +
+
+ + + {props.instance.resolved.usage_ref.name} + +
); @@ -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 = () => { diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionInstall.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionInstall.tsx index 52640f8ab..756839e78 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionInstall.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionInstall.tsx @@ -5,6 +5,7 @@ import { useMachineName } from "@/src/hooks/clan"; import { useMachineStateQuery } from "@/src/hooks/queries"; import styles from "./SidebarSectionInstall.module.css"; import { Alert } from "../Alert/Alert"; +import { useClanContext } from "@/src/routes/Clan/Clan"; export interface SidebarSectionInstallProps { clanURI: string; @@ -12,8 +13,8 @@ export interface SidebarSectionInstallProps { } export const SidebarSectionInstall = (props: SidebarSectionInstallProps) => { + const ctx = useClanContext(); const query = useMachineStateQuery(props.clanURI, props.machineName); - const [showInstall, setShowModal] = createSignal(false); return ( @@ -32,7 +33,12 @@ export const SidebarSectionInstall = (props: SidebarSectionInstallProps) => { setShowModal(false)} + onClose={async () => { + // refresh some queries + ctx.machinesQuery.refetch(); + ctx.serviceInstancesQuery.refetch(); + setShowModal(false); + }} /> diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionUpdate.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionUpdate.tsx index cc4fe12c2..122883404 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionUpdate.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionUpdate.tsx @@ -4,6 +4,7 @@ import { useMachineName } from "@/src/hooks/clan"; import { useMachineStateQuery } from "@/src/hooks/queries"; import styles from "./SidebarSectionInstall.module.css"; import { UpdateModal } from "@/src/workflows/InstallMachine/UpdateMachine"; +import { useClanContext } from "@/src/routes/Clan/Clan"; export interface SidebarSectionUpdateProps { clanURI: string; @@ -11,6 +12,7 @@ export interface SidebarSectionUpdateProps { } export const SidebarSectionUpdate = (props: SidebarSectionUpdateProps) => { + const ctx = useClanContext(); const query = useMachineStateQuery(props.clanURI, props.machineName); const [showUpdate, setShowUpdate] = createSignal(false); @@ -29,7 +31,13 @@ export const SidebarSectionUpdate = (props: SidebarSectionUpdateProps) => { setShowUpdate(false)} + onClose={async () => { + // refresh some queries + ctx.machinesQuery.refetch(); + ctx.serviceInstancesQuery.refetch(); + + setShowUpdate(false); + }} /> diff --git a/pkgs/clan-app/ui/src/routes/Machine/SectionServices.tsx b/pkgs/clan-app/ui/src/routes/Machine/SectionServices.tsx index 64d82f146..a7f689fdd 100644 --- a/pkgs/clan-app/ui/src/routes/Machine/SectionServices.tsx +++ b/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 = () => { diff --git a/pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.tsx b/pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.tsx index adf6e8043..43d3f34d0 100644 --- a/pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.tsx +++ b/pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.tsx @@ -13,7 +13,6 @@ import { installSteps } from "./steps/installSteps"; import { ApiCall } from "@/src/hooks/api"; import cx from "classnames"; -import { useClanContext } from "@/src/routes/Clan/Clan"; interface InstallStepperProps { onDone: () => void; @@ -67,8 +66,6 @@ export interface InstallStoreType { export type PromptValues = Record>; export const InstallModal = (props: InstallModalProps) => { - const ctx = useClanContext(); - const stepper = createStepper( { steps, @@ -111,10 +108,6 @@ export const InstallModal = (props: InstallModalProps) => { }; const onClose = async () => { - // refresh some queries - await ctx.machinesQuery.refetch(); - await ctx.serviceInstancesQuery.refetch(); - props.onClose?.(); }; diff --git a/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.tsx b/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.tsx index 47ee84f33..b2b26258e 100644 --- a/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.tsx +++ b/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.tsx @@ -19,7 +19,6 @@ import { LoadingBar } from "@/src/components/LoadingBar/LoadingBar"; import { useApiClient } from "@/src/hooks/ApiClient"; import { useClanURI } from "@/src/hooks/clan"; import { AlertProps } from "@/src/components/Alert/Alert"; -import { useClanContext } from "@/src/routes/Clan/Clan"; // TODO: Deduplicate interface UpdateStepperProps { @@ -238,8 +237,6 @@ export type UpdateSteps = typeof steps; export type PromptValues = Record>; export const UpdateModal = (props: UpdateModalProps) => { - const ctx = useClanContext(); - const stepper = createStepper( { steps, @@ -285,10 +282,6 @@ export const UpdateModal = (props: UpdateModalProps) => { }; const onClose = async () => { - // refresh some queries - await ctx.machinesQuery.refetch(); - await ctx.serviceInstancesQuery.refetch(); - props.onClose?.(); }; diff --git a/pkgs/clan-app/ui/src/workflows/Service/models.ts b/pkgs/clan-app/ui/src/workflows/Service/models.ts index 4a399f826..1d9d6825c 100644 --- a/pkgs/clan-app/ui/src/workflows/Service/models.ts +++ b/pkgs/clan-app/ui/src/workflows/Service/models.ts @@ -43,6 +43,8 @@ export interface Module { type ValueOf = T[keyof T]; +export type Instance = ValueOf>; + /** * Collect all members (machines and tags) for a given role in a service instance * @@ -50,7 +52,7 @@ type ValueOf = T[keyof T]; * */ export function getRoleMembers( - instance: ValueOf>, + instance: Instance, all_machines: NonNullable, role: string, ) {