diff --git a/pkgs/webview-ui/app/gtk.webview.js b/pkgs/webview-ui/app/gtk.webview.js index a768e1b5e..e75eecc12 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"; 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 ( ); }; 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} + + )} + +
    +
    +
    +
    + }> + +
    -
    • + ); }; 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; 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} ); }; 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}
    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) => } - - - -
    +
    + ); }; 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) => } - - - } - /> - - )} - -
    -
    - -
    -
    - -
    - -
    + +
    + ); }; 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) => ( + <> + + + )} + +
    + ); }; 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]) => ( { /> )} -
    +
    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]) => ( + + )} + +
    +     +     + ); };