From dfd464dbb28e5a39593d4b74469b2d8ea2fac8c4 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Tue, 10 Dec 2024 15:10:37 +0100 Subject: [PATCH 01/11] UI: redirect to /machines on initial page --- pkgs/webview-ui/app/src/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/pkgs/webview-ui/app/src/index.tsx b/pkgs/webview-ui/app/src/index.tsx index acfa08f10..212665f86 100644 --- a/pkgs/webview-ui/app/src/index.tsx +++ b/pkgs/webview-ui/app/src/index.tsx @@ -1,6 +1,6 @@ /* @refresh reload */ import { Portal, render } from "solid-js/web"; -import { RouteDefinition, Router } from "@solidjs/router"; +import { Navigate, RouteDefinition, Router } from "@solidjs/router"; import "./index.css"; import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"; @@ -46,6 +46,12 @@ export type AppRoute = Omit & { }; export const routes: AppRoute[] = [ + { + path: "/", + label: "", + hidden: true, + component: () => , + }, { path: "/machines", label: "Machines", @@ -139,7 +145,6 @@ export const routes: AppRoute[] = [ hidden: false, component: () => , }, - { path: "/api_testing", label: "api_testing", From 004feeedf6b3e42765ada866ffe45a8ef6a27d6c Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Tue, 10 Dec 2024 15:10:57 +0100 Subject: [PATCH 02/11] UI: machine list item change icon --- pkgs/webview-ui/app/src/components/MachineListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkgs/webview-ui/app/src/components/MachineListItem.tsx b/pkgs/webview-ui/app/src/components/MachineListItem.tsx index 3d00ea0e2..832a30edf 100644 --- a/pkgs/webview-ui/app/src/components/MachineListItem.tsx +++ b/pkgs/webview-ui/app/src/components/MachineListItem.tsx @@ -168,7 +168,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
} + label={} >
  • From 5f79f92dc5f8445aee3cbf35ed9140b5ec96fcf3 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Tue, 10 Dec 2024 15:11:24 +0100 Subject: [PATCH 03/11] UI/button: init ghost variant --- .../app/src/components/button/index.tsx | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/pkgs/webview-ui/app/src/components/button/index.tsx b/pkgs/webview-ui/app/src/components/button/index.tsx index 1571d2227..a49755833 100644 --- a/pkgs/webview-ui/app/src/components/button/index.tsx +++ b/pkgs/webview-ui/app/src/components/button/index.tsx @@ -1,11 +1,13 @@ import { splitProps, type JSX } from "solid-js"; import cx from "classnames"; +import { Typography } from "../Typography"; -type Variants = "dark" | "light"; +type Variants = "dark" | "light" | "ghost"; type Size = "default" | "s"; const variantColors: Record = { dark: cx( + "border border-solid", "border-secondary-950 bg-primary-900 text-white", "shadow-inner-primary", // Hover state @@ -18,6 +20,7 @@ const variantColors: Record = { "disabled:bg-secondary-200 disabled:text-secondary-700 disabled:border-secondary-300", ), light: cx( + "border border-solid", "border-secondary-800 bg-secondary-100 text-secondary-800", "shadow-inner-secondary", // Hover state @@ -29,6 +32,17 @@ const variantColors: Record = { // Disabled "disabled:bg-secondary-50 disabled:text-secondary-200 disabled:border-secondary-700", ), + ghost: cx( + // "shadow-inner-secondary", + // Hover state + // Focus state + // Active state + "hover:bg-secondary-200 hover:text-secondary-900", + "focus:bg-secondary-200 focus:text-secondary-900", + "active:bg-secondary-200 active:text-secondary-950 active:shadow-inner-secondary-active", + // Disabled + "disabled:bg-secondary-50 disabled:text-secondary-200 disabled:border-secondary-700", + ), }; const sizePaddings: Record = { @@ -36,6 +50,11 @@ const sizePaddings: Record = { s: cx("rounded-sm py-[0.375rem] px-3"), }; +const sizeFont: Record = { + default: cx("text-[0.8125rem]"), + s: cx("text-[0.75rem]"), +}; + interface ButtonProps extends JSX.ButtonHTMLAttributes { variant?: Variants; size?: Size; @@ -60,11 +79,13 @@ export const Button = (props: ButtonProps) => { // Layout "inline-flex items-center flex-shrink gap-2 justify-center", // Styles - "border border-solid", "p-4", sizePaddings[local.size || "default"], // Colors variantColors[local.variant || "dark"], + //Font + "leading-none font-semibold", + sizeFont[local.size || "default"], )} {...other} > From 669452be31fde108ebd64b5d66f63381acf64771 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Tue, 10 Dec 2024 15:11:37 +0100 Subject: [PATCH 04/11] UI: menu use ghost button --- pkgs/webview-ui/app/src/components/Menu.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/pkgs/webview-ui/app/src/components/Menu.tsx b/pkgs/webview-ui/app/src/components/Menu.tsx index e1932a994..a979ba402 100644 --- a/pkgs/webview-ui/app/src/components/Menu.tsx +++ b/pkgs/webview-ui/app/src/components/Menu.tsx @@ -55,14 +55,12 @@ export const Menu = (props: MenuProps) => { return (
    ), }} @@ -847,7 +846,7 @@ export function ObjectFields( {key} - - )} - +
    + + {props.title} + +
    +
    + {props.toolbar}
    ); diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx index 55cde957e..0aef50176 100644 --- a/pkgs/webview-ui/app/src/layout/layout.tsx +++ b/pkgs/webview-ui/app/src/layout/layout.tsx @@ -1,16 +1,14 @@ -import { Component, createEffect, Show } from "solid-js"; -import { Header } from "./header"; +import { Component, createEffect } from "solid-js"; import { Sidebar } from "@/src/components/Sidebar"; -import { activeURI, clanList } from "../App"; +import { clanList } from "../App"; import { RouteSectionProps, useNavigate } from "@solidjs/router"; export const Layout: Component = (props) => { const navigate = useNavigate(); createEffect(() => { - console.log("Layout props", props.location); console.log( "empty ClanList, redirect to welcome page", - clanList().length === 0, + clanList().length === 0 ); if (clanList().length === 0) { navigate("/welcome"); @@ -25,10 +23,7 @@ export const Layout: Component = (props) => { type="checkbox" class="drawer-toggle hidden" /> -
    - -
    - +
    {props.children}
    , @@ -65,96 +66,124 @@ export const MachineListView: Component = () => { const navigate = useNavigate(); return ( -
    -
    -
    - -
    + <> +
    + + + -
    - -
    - {/* */} -
    -
    - -
    - - {(tag) => ( - - - )} - -
    - {/*     */} - - - {/* Loading skeleton */} -
    -
    -
    -
    -
    -
    -

    -
    -

    -
    + + + +
    + + + + + } + /> +
    + {/* */} +
    +
    + +
    + + {(tag) => ( + + )} + +
    + {/*     */} + + + {/* Loading skeleton */} +
    +
    +
    +
    +
    +
    +

    +
    +

    +
    +
    -
    - - -
    - - No machines defined yet. Click below to define one. - - -
    -     - -
      - - {([name, info]) => ( - - )} - -
    -     - -
    + + +
    + + No machines defined yet. Click below to define one. + + +
    +     + +
      + + {([name, info]) => ( + + )} + +
    +     + +
    + ); }; From 89f8a2275d79816a599cb443533677426d746a00 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Tue, 10 Dec 2024 15:15:44 +0100 Subject: [PATCH 09/11] UI: init machine avatar component --- .../app/src/routes/machines/avatar.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 pkgs/webview-ui/app/src/routes/machines/avatar.tsx diff --git a/pkgs/webview-ui/app/src/routes/machines/avatar.tsx b/pkgs/webview-ui/app/src/routes/machines/avatar.tsx new file mode 100644 index 000000000..9aa243d30 --- /dev/null +++ b/pkgs/webview-ui/app/src/routes/machines/avatar.tsx @@ -0,0 +1,22 @@ +import { RndThumbnail } from "@/src/components/noiseThumbnail"; +import cx from "classnames"; +interface AvatarProps { + name?: string; + class?: string; +} +export const MachineAvatar = (props: AvatarProps) => { + return ( +
    +
    +
    + +
    +
    +
    + ); +}; From 29d30490225ef0908d05827ec5b4df7e0e28f1c9 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Tue, 10 Dec 2024 15:16:38 +0100 Subject: [PATCH 10/11] UI: fixup machine details --- .../app/src/routes/machines/details.tsx | 39 ++++++------------- 1 file changed, 11 insertions(+), 28 deletions(-) diff --git a/pkgs/webview-ui/app/src/routes/machines/details.tsx b/pkgs/webview-ui/app/src/routes/machines/details.tsx index edfa3d7c6..ffaf67dfa 100644 --- a/pkgs/webview-ui/app/src/routes/machines/details.tsx +++ b/pkgs/webview-ui/app/src/routes/machines/details.tsx @@ -1,12 +1,9 @@ -import { callApi, ClanService, SuccessData, SuccessQuery } from "@/src/api"; -import { get_iwd_service } from "@/src/api/wifi"; +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"; -import { RndThumbnail } from "@/src/components/noiseThumbnail"; -import { SelectInput } from "@/src/components/SelectInput"; import { TextInput } from "@/src/components/TextInput"; import { selectSshKeys } from "@/src/hooks"; import { @@ -16,9 +13,10 @@ import { setValue, } from "@modular-forms/solid"; import { useParams } from "@solidjs/router"; -import { createQuery, useQueryClient } from "@tanstack/solid-query"; -import { createSignal, For, Show, Switch, Match, JSXElement } from "solid-js"; +import { createQuery } from "@tanstack/solid-query"; +import { createSignal, For, Show } from "solid-js"; import toast from "solid-toast"; +import { MachineAvatar } from "./avatar"; type MachineFormInterface = MachineData & { sshKey?: File; @@ -65,7 +63,7 @@ const InstallMachine = (props: InstallMachineProps) => { } const loading_toast = toast.loading( - "Installing machine. Grab coffee (15min)...", + "Installing machine. Grab coffee (15min)..." ); const r = await callApi("install_machine", { opts: { @@ -248,13 +246,13 @@ const MachineForm = (props: MachineDetailsProps) => { ...values.machine, // TODO: Remove this workaround tags: Array.from( - values.machine.tags || props.initialData.machine.tags || [], + values.machine.tags || props.initialData.machine.tags || [] ), }, }); if (machine_response.status === "error") { toast.error( - `Failed to set machine: ${machine_response.errors[0].message}`, + `Failed to set machine: ${machine_response.errors[0].message}` ); } if (machine_response.status === "success") { @@ -305,24 +303,9 @@ const MachineForm = (props: MachineDetailsProps) => { return ( <>
    -
    -
    -
    - -
    -
    -
    General - + {(field, props) => ( { // disabled={!online()} onClick={() => { const modal = document.getElementById( - "install_modal", + "install_modal" ) as HTMLDialogElement | null; modal?.showModal(); }} @@ -561,7 +544,7 @@ function WifiModule(props: MachineWifiProps) { }); const [nets, setNets] = createSignal<1[]>( - new Array(props.initialData.length || 1).fill(1), + new Array(props.initialData.length || 1).fill(1) ); const handleSubmit = async (values: WifiForm) => { @@ -572,7 +555,7 @@ function WifiModule(props: MachineWifiProps) { ...acc, [curr.ssid || ""]: { ssid: curr.ssid, password: curr.password }, }), - {}, + {} ); console.log("submitting", values, networks); From b40a4da301875b218aea6345d288cabcb06da5a7 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Tue, 10 Dec 2024 15:17:19 +0100 Subject: [PATCH 11/11] UI: improve create machine form --- pkgs/webview-ui/app/src/layout/layout.tsx | 2 +- .../app/src/routes/machines/avatar.tsx | 2 +- .../app/src/routes/machines/create.tsx | 160 +++++++++++------- .../app/src/routes/machines/details.tsx | 12 +- 4 files changed, 111 insertions(+), 65 deletions(-) diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx index 0aef50176..033035bb2 100644 --- a/pkgs/webview-ui/app/src/layout/layout.tsx +++ b/pkgs/webview-ui/app/src/layout/layout.tsx @@ -8,7 +8,7 @@ export const Layout: Component = (props) => { createEffect(() => { console.log( "empty ClanList, redirect to welcome page", - clanList().length === 0 + clanList().length === 0, ); if (clanList().length === 0) { navigate("/welcome"); diff --git a/pkgs/webview-ui/app/src/routes/machines/avatar.tsx b/pkgs/webview-ui/app/src/routes/machines/avatar.tsx index 9aa243d30..227312867 100644 --- a/pkgs/webview-ui/app/src/routes/machines/avatar.tsx +++ b/pkgs/webview-ui/app/src/routes/machines/avatar.tsx @@ -11,7 +11,7 @@ export const MachineAvatar = (props: AvatarProps) => {
    diff --git a/pkgs/webview-ui/app/src/routes/machines/create.tsx b/pkgs/webview-ui/app/src/routes/machines/create.tsx index 1c87c569b..7580555e2 100644 --- a/pkgs/webview-ui/app/src/routes/machines/create.tsx +++ b/pkgs/webview-ui/app/src/routes/machines/create.tsx @@ -3,11 +3,14 @@ import { activeURI } from "@/src/App"; import { Button } from "@/src/components/button"; import Icon from "@/src/components/icon"; import { TextInput } from "@/src/components/TextInput"; +import { Header } from "@/src/layout/header"; import { createForm, required, reset } from "@modular-forms/solid"; import { useNavigate } from "@solidjs/router"; -import { createQuery, useQueryClient } from "@tanstack/solid-query"; +import { useQueryClient } from "@tanstack/solid-query"; import { Match, Switch } from "solid-js"; import toast from "solid-toast"; +import { MachineAvatar } from "./avatar"; +import { DynForm } from "@/src/Form/form"; type CreateMachineForm = OperationArgs<"create_machine">; @@ -66,68 +69,111 @@ export function CreateMachine() { } }; return ( -
    -
    - Create new Machine - - - {(field, props) => ( - - )} - - - {(field, props) => ( - - )} - - - {(field, props) => ( - <> + <> +
    +
    +
    + + + {(field, props) => ( + <> +
    + +
    + + + )} +     + + {(field, props) => ( - - )} - -
    - -
    - + )} + + + {(field, props) => ( +
    + Tags
    , + }} + schema={{ + type: "object", + properties: { + tags: { + type: "array", + items: { + title: "Tag", + type: "string", + }, + uniqueItems: true, + }, + }, + }} + /> +
    + )} + +
    + +
    + Deployment Settings +
    +
    + + {(field, props) => ( + <> + + + )} + +
    +
    +
    + +
    + +
    -
    + ); } diff --git a/pkgs/webview-ui/app/src/routes/machines/details.tsx b/pkgs/webview-ui/app/src/routes/machines/details.tsx index ffaf67dfa..b8bda0488 100644 --- a/pkgs/webview-ui/app/src/routes/machines/details.tsx +++ b/pkgs/webview-ui/app/src/routes/machines/details.tsx @@ -63,7 +63,7 @@ const InstallMachine = (props: InstallMachineProps) => { } const loading_toast = toast.loading( - "Installing machine. Grab coffee (15min)..." + "Installing machine. Grab coffee (15min)...", ); const r = await callApi("install_machine", { opts: { @@ -246,13 +246,13 @@ const MachineForm = (props: MachineDetailsProps) => { ...values.machine, // TODO: Remove this workaround tags: Array.from( - values.machine.tags || props.initialData.machine.tags || [] + values.machine.tags || props.initialData.machine.tags || [], ), }, }); if (machine_response.status === "error") { toast.error( - `Failed to set machine: ${machine_response.errors[0].message}` + `Failed to set machine: ${machine_response.errors[0].message}`, ); } if (machine_response.status === "success") { @@ -438,7 +438,7 @@ const MachineForm = (props: MachineDetailsProps) => { // disabled={!online()} onClick={() => { const modal = document.getElementById( - "install_modal" + "install_modal", ) as HTMLDialogElement | null; modal?.showModal(); }} @@ -544,7 +544,7 @@ function WifiModule(props: MachineWifiProps) { }); const [nets, setNets] = createSignal<1[]>( - new Array(props.initialData.length || 1).fill(1) + new Array(props.initialData.length || 1).fill(1), ); const handleSubmit = async (values: WifiForm) => { @@ -555,7 +555,7 @@ function WifiModule(props: MachineWifiProps) { ...acc, [curr.ssid || ""]: { ssid: curr.ssid, password: curr.password }, }), - {} + {}, ); console.log("submitting", values, networks);