From d8a12a41c886be4cb18a5f7ac874a247820e8929 Mon Sep 17 00:00:00 2001 From: Philipp Date: Fri, 12 Jun 2026 15:11:55 +0200 Subject: [PATCH] feat: refine cloud console UI --- frontend/src/components/VMCreate.tsx | 21 +- frontend/src/components/VMList.tsx | 115 +++--- frontend/src/main.tsx | 59 ++- frontend/src/styles.css | 564 +++++++++++++++++++-------- 4 files changed, 515 insertions(+), 244 deletions(-) diff --git a/frontend/src/components/VMCreate.tsx b/frontend/src/components/VMCreate.tsx index 33c69cc..7f16d59 100644 --- a/frontend/src/components/VMCreate.tsx +++ b/frontend/src/components/VMCreate.tsx @@ -18,9 +18,9 @@ export function VMCreate({ token, projectID, tenantID, onCreated }: Props) { const [name, setName] = useState(""); const [templateID, setTemplateID] = useState(""); const [node, setNode] = useState(""); - const [vcpu, setVCPU] = useState(2); - const [ramMB, setRAMMB] = useState(2048); - const [diskGB, setDiskGB] = useState(10); + const [vcpu, setVCPU] = useState(4); + const [ramMB, setRAMMB] = useState(6144); + const [diskGB, setDiskGB] = useState(30); const [sshKeyID, setSSHKeyID] = useState(""); const [error, setError] = useState(""); const [busy, setBusy] = useState(false); @@ -92,14 +92,17 @@ export function VMCreate({ token, projectID, tenantID, onCreated }: Props) { if (!open) { return ( - +
+ Server aus einem Template bereitstellen + +
); } return ( -
+

Provisioning

@@ -110,7 +113,7 @@ export function VMCreate({ token, projectID, tenantID, onCreated }: Props) {
{error ?

{error}

: null} -
+
); -} \ No newline at end of file +} diff --git a/frontend/src/components/VMList.tsx b/frontend/src/components/VMList.tsx index c5b7cdf..81bee06 100644 --- a/frontend/src/components/VMList.tsx +++ b/frontend/src/components/VMList.tsx @@ -48,59 +48,66 @@ export function VMList({ token, projectID }: Props) { return

Keine VMs in diesem Projekt.

; return ( -
- {vms.map((vm) => ( -
-
- {vm.name} - - {vm.status} - -
-
-
- Node - {vm.node} -
-
- vCPU / RAM / Disk - - {vm.vcpu} / {vm.ram_mb} MB / {vm.disk_gb} GB - -
-
- Proxmox VMID - {vm.proxmox_vmid} -
-
-
- - - - -
-
- ))} +
+ + + + + + + + + + + + + {vms.map((vm) => ( + + + + + + + + + ))} + +
StatusNameNodeRessourcenVMIDAktionen
+ + {vm.status} + + + {vm.name} + {vm.node} + {vm.vcpu} vCPU · {vm.ram_mb} MB · {vm.disk_gb} GB + {vm.proxmox_vmid} +
+ + + + +
+
); -} \ No newline at end of file +} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index bbaec34..a0e400c 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -27,10 +27,10 @@ const supabase = : undefined; const navItems: Array<{ key: ViewKey; label: string }> = [ - { key: "overview", label: "Uebersicht" }, - { key: "vms", label: "VMs" }, + { key: "overview", label: "Projekt" }, + { key: "vms", label: "Server" }, { key: "ssh", label: "SSH-Keys" }, - { key: "audit", label: "Audit" }, + { key: "audit", label: "Audit Logs" }, { key: "console", label: "Konsole" }, ]; @@ -121,6 +121,7 @@ function App() { } const connected = Boolean(session && backendPrincipal); + const activeTitle = pageTitle(activeView); if (loadingSession) { return ( @@ -152,8 +153,19 @@ function App() { return (