From 9fabab50dc7f19608ab9bf22f5395484b12666ea Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 09:53:34 +0100 Subject: [PATCH 01/11] Doc: ui/build explain custom build script --- pkgs/webview-ui/app/gtk.webview.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/pkgs/webview-ui/app/gtk.webview.js b/pkgs/webview-ui/app/gtk.webview.js index a768e1b5e..aa99534ef 100644 --- a/pkgs/webview-ui/app/gtk.webview.js +++ b/pkgs/webview-ui/app/gtk.webview.js @@ -1,3 +1,12 @@ +/** + * This script generates a custom index.html file for the webview UI. + * It reads the manifest.json file generated by Vite and uses it to generate the HTML file. + * It also processes the CSS files to rewrite the URLs in the CSS files to match the new location of the assets. + * The script is run after the Vite build is complete. + * + * This is necessary because the webview UI is loaded from the local file system and the URLs in the CSS files need to be rewritten to match the new location of the assets. + * The generated index.html file is then used as the entry point for the webview UI. + */ import fs from "node:fs"; import postcss from "postcss"; import path from "node:path"; @@ -43,7 +52,7 @@ fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => { console.log(`Rewriting CSS url(): ${asset.url} to ${res}`); return res; }, - }), + }) ) .process(css, { from: `dist/${cssEntry}`, From dd723440862641f5c094caad1c29db275767e1b7 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 11:31:28 +0100 Subject: [PATCH 02/11] UI: fix responsive sidebar --- pkgs/webview-ui/app/gtk.webview.js | 2 +- .../src/components/Sidebar/SidebarHeader.tsx | 44 ++++++++++--------- .../components/Sidebar/SidebarListItem.tsx | 2 +- .../app/src/components/Sidebar/index.tsx | 4 +- 4 files changed, 27 insertions(+), 25 deletions(-) diff --git a/pkgs/webview-ui/app/gtk.webview.js b/pkgs/webview-ui/app/gtk.webview.js index aa99534ef..e75eecc12 100644 --- a/pkgs/webview-ui/app/gtk.webview.js +++ b/pkgs/webview-ui/app/gtk.webview.js @@ -52,7 +52,7 @@ fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => { console.log(`Rewriting CSS url(): ${asset.url} to ${res}`); return res; }, - }) + }), ) .process(css, { from: `dist/${cssEntry}`, diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx index ecac8e546..0c4d5457b 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx +++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx @@ -1,27 +1,20 @@ -import { createSignal, Show } from "solid-js"; - +import { createSignal } from "solid-js"; import { Typography } from "@/src/components/Typography"; import { SidebarFlyout } from "./SidebarFlyout"; +import "./css/sidebar.css"; -interface SidebarHeader { +interface SidebarProps { clanName: string; + showFlyout?: () => boolean; } -export const SidebarHeader = (props: SidebarHeader) => { - const { clanName } = props; - - const [showFlyout, toggleFlyout] = createSignal(false); - - function handleClick() { - toggleFlyout(!showFlyout()); - } - - const renderClanProfile = () => ( +const ClanProfile = (props: SidebarProps) => { + return (
{ color="primary" inverted={true} > - {clanName.slice(0, 1).toUpperCase()} + {props.clanName.slice(0, 1).toUpperCase()}
); +}; - const renderClanTitle = () => ( +const ClanTitle = (props: SidebarProps) => { + return ( { color="primary" inverted={true} > - {clanName} + {props.clanName} ); +}; + +export const SidebarHeader = (props: SidebarProps) => { + const [showFlyout, toggleFlyout] = createSignal(false); + + function handleClick() { + toggleFlyout(!showFlyout()); + } return (
- {renderClanProfile()} - {renderClanTitle()} + +
{showFlyout() && }
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx index 189b5cffe..eb0b848b6 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx +++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx @@ -14,7 +14,7 @@ export const SidebarListItem = (props: SidebarListItem) => {
  • { const curr = activeURI(); if (curr) { const result = await callApi("show_clan_meta", { uri: curr }); - + console.log("refetched meta for ", curr); if (result.status === "error") throw new Error("Failed to fetch data"); return result.data; From 868dcb6d37a12949df7d4999012ec51b38fe0c3a Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 11:31:45 +0100 Subject: [PATCH 03/11] UI: backButton fixes --- pkgs/webview-ui/app/src/components/BackButton.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/pkgs/webview-ui/app/src/components/BackButton.tsx b/pkgs/webview-ui/app/src/components/BackButton.tsx index 5db02fb5f..a0072c0a2 100644 --- a/pkgs/webview-ui/app/src/components/BackButton.tsx +++ b/pkgs/webview-ui/app/src/components/BackButton.tsx @@ -6,10 +6,11 @@ export const BackButton = () => { const navigate = useNavigate(); return ( ); }; From 7cfecd7f722c128c9b21cbeec87f80194d7a5e54 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 11:32:10 +0100 Subject: [PATCH 04/11] UI: machine listitem pepare for grid view --- .../app/src/components/MachineListItem.tsx | 195 +++++++++--------- 1 file changed, 95 insertions(+), 100 deletions(-) diff --git a/pkgs/webview-ui/app/src/components/MachineListItem.tsx b/pkgs/webview-ui/app/src/components/MachineListItem.tsx index 832a30edf..00871060d 100644 --- a/pkgs/webview-ui/app/src/components/MachineListItem.tsx +++ b/pkgs/webview-ui/app/src/components/MachineListItem.tsx @@ -106,109 +106,104 @@ export const MachineListItem = (props: MachineListItemProps) => { setUpdating(false); }; return ( -
  • -
    -
    - -
    -
    -
    - -

    - {name} -

    -     -
    - {(d) => d()?.description} -
    -
    - - {(d) => ( - <> - - {(tags) => ( - - - {(tag) => ( - - )} - - - )} - - {d()?.deploy?.targetHost} - - )} - -
    -
    -
    -
    - } +
    +
    + +
    +
    +
    + +

    - -

    + {name} + + +
    + {(d) => d()?.description}
    +
    + + {(d) => ( + <> + + {(tags) => ( + + + {(tag) => ( + + )} + + + )} + + {d()?.deploy?.targetHost} + + )} + +
    +
    +
    +
    -
    • + ); }; From 11b43006876811951434eac8107ee7d1b23d3372 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 11:32:34 +0100 Subject: [PATCH 05/11] UI: machine list toggle {list,grid} view --- .../app/src/routes/machines/list.tsx | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/pkgs/webview-ui/app/src/routes/machines/list.tsx b/pkgs/webview-ui/app/src/routes/machines/list.tsx index 0d475e5f5..ae126a924 100644 --- a/pkgs/webview-ui/app/src/routes/machines/list.tsx +++ b/pkgs/webview-ui/app/src/routes/machines/list.tsx @@ -15,6 +15,7 @@ import { useNavigate } from "@solidjs/router"; import { Button } from "@/src/components/button"; import Icon from "@/src/components/icon"; import { Header } from "@/src/layout/header"; +import { makePersisted } from "@solid-primitives/storage"; type MachinesModel = Extract< OperationResponse<"list_inventory_machines">, @@ -31,7 +32,7 @@ export const MachineListView: Component = () => { const [filter, setFilter] = createSignal({ tags: [] }); const inventoryQuery = createQuery(() => ({ - queryKey: [activeURI(), "list_machines", "inventory"], + queryKey: [activeURI(), "list_inventory_machines"], placeholderData: {}, enabled: !!activeURI(), queryFn: async () => { @@ -65,6 +66,10 @@ export const MachineListView: Component = () => { }); const navigate = useNavigate(); + const [view, setView] = makePersisted(createSignal<"list" | "grid">("list"), { + name: "machines_view", + storage: localStorage, + }); return ( <>
    { variant="light" size="s" onClick={() => refresh()} - startIcon={} + startIcon={} >
    @@ -110,7 +117,6 @@ export const MachineListView: Component = () => { } />
    - {/* */}
    @@ -170,7 +176,13 @@ export const MachineListView: Component = () => {
    -
      +
      {([name, info]) => ( { /> )} -
    +
    From 2e80b76e9fa720fdbb9ccc52ffba0d154fbdca39 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 11:32:51 +0100 Subject: [PATCH 06/11] UI: module list toggle {list,grid} view --- .../app/src/routes/modules/list.tsx | 173 +++++++++++++++--- 1 file changed, 152 insertions(+), 21 deletions(-) diff --git a/pkgs/webview-ui/app/src/routes/modules/list.tsx b/pkgs/webview-ui/app/src/routes/modules/list.tsx index 5bf699cdb..994333a01 100644 --- a/pkgs/webview-ui/app/src/routes/modules/list.tsx +++ b/pkgs/webview-ui/app/src/routes/modules/list.tsx @@ -1,48 +1,179 @@ -import { callApi, SuccessData } from "@/src/api"; +import { SuccessData } from "@/src/api"; import { activeURI } from "@/src/App"; +import { Button } from "@/src/components/button"; +import { Header } from "@/src/layout/header"; import { createModulesQuery } from "@/src/queries"; import { A, useNavigate } from "@solidjs/router"; -import { createQuery, useQueryClient } from "@tanstack/solid-query"; -import { createEffect, For, Match, Switch } from "solid-js"; -import { SolidMarkdown } from "solid-markdown"; +import { createSignal, For, Match, Switch } from "solid-js"; +import { Typography } from "@/src/components/Typography"; +import { Menu } from "@/src/components/Menu"; +import { makePersisted } from "@solid-primitives/storage"; +import { useQueryClient } from "@tanstack/solid-query"; +import cx from "classnames"; +import Icon from "@/src/components/icon"; export type ModuleInfo = SuccessData<"list_modules">[string]; -const ModuleListItem = (props: { name: string; info: ModuleInfo }) => { +interface CategoryProps { + categories: string[]; +} +const Categories = (props: CategoryProps) => { + return ( + + {props.categories.map((category) => ( + {category} + ))} + + ); +}; + +interface RolesProps { + roles: string[]; +} +const Roles = (props: RolesProps) => { + return ( +
    + + + Service Typography{" "} + + + {props.roles.map((role) => ( + {role} + ))} +
    + ); +}; + +const ModuleItem = (props: { + name: string; + info: ModuleInfo; + class?: string; +}) => { const { name, info } = props; const navigate = useNavigate(); return ( -
    +
    -
    more
    +
    + }> + + +
    -
    {name}
    +
    + {name} + +
    -
    {info.description}
    -
    {JSON.stringify(info.constraints)}
    +
    + + {info.description} + +
    +
    ); }; export const ModuleList = () => { + const queryClient = useQueryClient(); const modulesQuery = createModulesQuery(activeURI(), { features: ["inventory"], }); + + const [view, setView] = makePersisted(createSignal<"list" | "grid">("list"), { + name: "modules_view", + storage: localStorage, + }); + + const refresh = async () => { + queryClient.invalidateQueries({ + // Invalidates the cache for of all types of machine list at once + queryKey: [activeURI(), "list_modules"], + }); + }; return ( - - Loading.... - -
    - Show Modules - - {([k, v]) => } - -
    -     -     + <> +
    + + + + +
    + + + + + + +
    + + + + + } + /> + + Loading.... + +
    + + {([k, v]) => ( + + )} + +
    +     +     + ); }; From 91d713e5ee7f28b4a5bcbe85bdf6574dee809cf8 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 11:33:04 +0100 Subject: [PATCH 07/11] UI: fix typography not beeing reponsive --- .../app/src/components/Typography/index.tsx | 31 ++++++------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/pkgs/webview-ui/app/src/components/Typography/index.tsx b/pkgs/webview-ui/app/src/components/Typography/index.tsx index 57127f957..5b14bb50c 100644 --- a/pkgs/webview-ui/app/src/components/Typography/index.tsx +++ b/pkgs/webview-ui/app/src/components/Typography/index.tsx @@ -67,38 +67,27 @@ const weightMap: Record = { interface TypographyProps { hierarchy: H; + size: AllowedSizes; + children: JSX.Element; weight?: Weight; color?: Color; inverted?: boolean; - size: AllowedSizes; tag?: Tag; - children: JSX.Element; - classes?: string; + class?: string; } export const Typography = (props: TypographyProps) => { - const { - size, - color = "primary", - inverted, - hierarchy, - weight = "normal", - tag = "span", - children, - classes, - } = props; - return ( - {children} + {props.children} ); }; From 7bb8c10943ad0c6bd54cfda67229a0e1a094a1ae Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 11:33:15 +0100 Subject: [PATCH 08/11] UI: add back button to header --- pkgs/webview-ui/app/src/layout/header.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/pkgs/webview-ui/app/src/layout/header.tsx b/pkgs/webview-ui/app/src/layout/header.tsx index 45859f909..b6d69746a 100644 --- a/pkgs/webview-ui/app/src/layout/header.tsx +++ b/pkgs/webview-ui/app/src/layout/header.tsx @@ -1,14 +1,17 @@ import { JSX } from "solid-js"; import { Typography } from "../components/Typography"; +import { BackButton } from "../components/BackButton"; interface HeaderProps { title: string; toolbar?: JSX.Element; + showBack?: boolean; } export const Header = (props: HeaderProps) => { return (
    + {props.showBack && }
    - + {props.title}
    From 2088f92e6d67e62561c9adc58cf4a523c814937b Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 11:33:28 +0100 Subject: [PATCH 09/11] UI: switch some icons --- .../app/src/routes/blockdevices/view.tsx | 2 +- .../app/src/routes/clans/details.tsx | 82 ++++--------------- 2 files changed, 19 insertions(+), 65 deletions(-) diff --git a/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx b/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx index 0d318534f..f7d7c7b3f 100644 --- a/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx +++ b/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx @@ -26,7 +26,7 @@ export const BlockDevicesView: Component = () => {
    diff --git a/pkgs/webview-ui/app/src/routes/clans/details.tsx b/pkgs/webview-ui/app/src/routes/clans/details.tsx index 9e34001df..a86a6432f 100644 --- a/pkgs/webview-ui/app/src/routes/clans/details.tsx +++ b/pkgs/webview-ui/app/src/routes/clans/details.tsx @@ -1,9 +1,7 @@ import { callApi, ClanServiceInstance, SuccessQuery } from "@/src/api"; -import { BackButton } from "@/src/components/BackButton"; import { useParams } from "@solidjs/router"; import { createQuery, useQueryClient } from "@tanstack/solid-query"; import { createSignal, For, Match, Switch } from "solid-js"; -import { Show } from "solid-js"; import { createForm, FieldValues, @@ -15,9 +13,10 @@ import { } from "@modular-forms/solid"; import { TextInput } from "@/src/components/TextInput"; import toast from "solid-toast"; -import { get_single_service, set_single_service } from "@/src/api/inventory"; +import { set_single_service } from "@/src/api/inventory"; import { Button } from "@/src/components/button"; import Icon from "@/src/components/icon"; +import { Header } from "@/src/layout/header"; interface AdminModuleFormProps { admin: AdminData; @@ -65,30 +64,17 @@ const EditClanForm = (props: EditClanFormProps) => { {(field) => ( <> -
    -
    -
    {curr_name()}
    -
    Wide settings
    -
    -
    -
    - - group - - } - > - {(icon) => ( - Clan Logo - )} - -
    +
    +
    {curr_name()}
    +
    Wide settings
    + +
    )}     @@ -344,7 +330,6 @@ type AdminData = ClanServiceInstance<"admin">; export const ClanDetails = () => { const params = useParams(); - const queryClient = useQueryClient(); const clan_dir = window.atob(params.id); // Fetch general meta data const clanQuery = createQuery(() => ({ @@ -355,48 +340,17 @@ export const ClanDetails = () => { return result.data; }, })); - // Fetch admin settings - const adminQuery = createQuery(() => ({ - queryKey: [clan_dir, "inventory", "services", "admin"], - queryFn: async () => { - const result = await get_single_service(queryClient, clan_dir, "admin"); - if (!result) throw new Error("Failed to fetch data"); - return result; - }, - })); return ( -
    - - - -
    - } - > + <> +
    +
    General data not available}> {(d) => } - -
    - - -
    - } - > - Admin data not available}> - - {(d) => } - - - -
    +
    + ); }; From cad9d717e5e79df8f5f67febc9882bde9779cc56 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 11:33:37 +0100 Subject: [PATCH 10/11] UI: flash installer layout consistent --- pkgs/webview-ui/app/src/routes/flash/view.tsx | 558 +++++++++--------- 1 file changed, 288 insertions(+), 270 deletions(-) diff --git a/pkgs/webview-ui/app/src/routes/flash/view.tsx b/pkgs/webview-ui/app/src/routes/flash/view.tsx index 608fbc7a6..bbfab0650 100644 --- a/pkgs/webview-ui/app/src/routes/flash/view.tsx +++ b/pkgs/webview-ui/app/src/routes/flash/view.tsx @@ -4,6 +4,8 @@ import { FileInput } from "@/src/components/FileInput"; import Icon from "@/src/components/icon"; import { SelectInput } from "@/src/components/SelectInput"; import { TextInput } from "@/src/components/TextInput"; +import { Typography } from "@/src/components/Typography"; +import { Header } from "@/src/layout/header"; import { createForm, required, @@ -169,292 +171,308 @@ export const Flash = () => { }; return ( -
    -
    -
    - - {(field, props) => ( - <> - { - event.preventDefault(); // Prevent the native file dialog from opening - const input = event.target; - const files = await selectSshKeys(); + <> +
    +
    + + USB Utility image. + + + This will make bootstrapping a new machine easier by providing secure + remote connection to any machine when plugged in. + + +
    + + {(field, props) => ( + <> + { + event.preventDefault(); // Prevent the native file dialog from opening + const input = event.target; + const files = await selectSshKeys(); - // Set the files - Object.defineProperty(input, "files", { - value: files, - writable: true, - }); - // Define the files property on the input element - const changeEvent = new Event("input", { - bubbles: true, - cancelable: true, - }); - input.dispatchEvent(changeEvent); - }} - value={field.value} - error={field.error} - helperText="Provide your SSH public key. For secure and passwordless SSH connections." - label="Authorized SSH Keys" - multiple - required - /> - + // Set the files + Object.defineProperty(input, "files", { + value: files, + writable: true, + }); + // Define the files property on the input element + const changeEvent = new Event("input", { + bubbles: true, + cancelable: true, + }); + input.dispatchEvent(changeEvent); + }} + value={field.value} + error={field.error} + helperText="Provide your SSH public key. For secure and passwordless SSH connections." + label="Authorized SSH Keys" + multiple + required + /> + + )} + +
    + + + {(field, props) => ( + { + e.preventDefault(); + deviceQuery.refetch(); + }} + startIcon={} + > + } + formStore={formStore} + selectProps={props} + label="Flash Disk" + value={String(field.value)} + error={field.error} + required + options={ + <> + + + + {(device) => ( + + )} + + + } + /> )} -
    - - {(field, props) => ( - { - e.preventDefault(); - deviceQuery.refetch(); - }} - startIcon={} - > - } - formStore={formStore} - selectProps={props} - label="Flash Disk" - value={String(field.value)} - error={field.error} - required - options={ - <> - - - - {(device) => ( - - )} - - - } - /> - )} - - - {/* WiFi Networks */} -
    -

    WiFi Networks

    - Add preconfigured networks - - {(network, index) => ( -
    - - {(field, props) => ( - - )} - - - {(field, props) => ( -
    + {/* WiFi Networks */} +
    +

    WiFi Networks

    + Add preconfigured networks + + {(network, index) => ( +
    + + {(field, props) => ( togglePasswordVisibility(index())} - startIcon={ - passwordVisibility()[index()] ? ( - - ) : ( - - ) - } - > - ), - }} + class="col-span-3" required /> -
    - )} - -
    - + )} + + + {(field, props) => ( +
    + + togglePasswordVisibility(index()) + } + startIcon={ + passwordVisibility()[index()] ? ( + + ) : ( + + ) + } + > + ), + }} + required + /> +
    + )} +     +
    + +
    + )} +     +
    + +
    +
    + +
    + +
    + Advanced Settings +
    +
    + + {(field, props) => ( + <> + file_download + } + error={field.error} + required + /> + + )} + + + {(field, props) => ( + <> + devices} + error={field.error} + required + /> + + )} + +
    + Source URL: + + {getValue(formStore, "machine.flake") + + "#" + + getValue(formStore, "machine.devicePath")} +
    - )} - -
    + + {(field, props) => ( + <> + + + + {(language) => ( + + )} + + + } + /> + + )} + + + + {(field, props) => ( + <> + + + + {(keymap) => ( + + )} + + + } + /> + + )} + +
    +
    + +
    +
    -
    - -
    - -
    Advanced Settings
    -
    - - {(field, props) => ( - <> - file_download - } - error={field.error} - required - /> - - )} - - - {(field, props) => ( - <> - devices} - error={field.error} - required - /> - - )} - -
    - Source URL: - - {getValue(formStore, "machine.flake") + - "#" + - getValue(formStore, "machine.devicePath")} - -
    - - {(field, props) => ( - <> - - - - {(language) => ( - - )} - - - } - /> - - )} - - - - {(field, props) => ( - <> - - - - {(keymap) => } - - - } - /> - - )} - -
    -
    - -
    -
    - -
    - -
    + +
    + ); }; From 03364c61e37f009fe3c590bae7eedb89db24b7e7 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 11 Dec 2024 11:34:02 +0100 Subject: [PATCH 11/11] UI: machine details layout consistent --- .../app/src/routes/machines/details.tsx | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/pkgs/webview-ui/app/src/routes/machines/details.tsx b/pkgs/webview-ui/app/src/routes/machines/details.tsx index b8bda0488..f1e94bfe0 100644 --- a/pkgs/webview-ui/app/src/routes/machines/details.tsx +++ b/pkgs/webview-ui/app/src/routes/machines/details.tsx @@ -1,6 +1,5 @@ import { callApi, SuccessData, SuccessQuery } from "@/src/api"; import { activeURI } from "@/src/App"; -import { BackButton } from "@/src/components/BackButton"; import { Button } from "@/src/components/button"; import { FileInput } from "@/src/components/FileInput"; import Icon from "@/src/components/icon"; @@ -17,6 +16,7 @@ import { createQuery } from "@tanstack/solid-query"; import { createSignal, For, Show } from "solid-js"; import toast from "solid-toast"; import { MachineAvatar } from "./avatar"; +import { Header } from "@/src/layout/header"; type MachineFormInterface = MachineData & { sshKey?: File; @@ -502,19 +502,21 @@ export const MachineDetails = () => { })); return ( -
    - - } - > - {(data) => ( - <> - - - )} - -
    + <> +
    +
    + } + > + {(data) => ( + <> + + + )} + +
    + ); };