From d26aa8c9cb3b4068d148883a56be52b83af5f1a3 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Mon, 13 Oct 2025 20:19:13 +0200 Subject: [PATCH] server node, vm & lxc details pages at unique routes --- src/lib/components/LXC.svelte | 96 ++++++ src/lib/components/Server.svelte | 4 +- src/lib/components/VM.svelte | 95 ++++++ src/lib/components/prox-describe/VM.svelte | 282 ++++++++++++++++++ src/lib/icons/cpu.svelte | 4 +- src/lib/icons/cube-side.svelte | 6 +- src/lib/icons/desktop.svelte | 4 + src/lib/icons/extract-up.svelte | 5 + src/lib/icons/floppy-disk.svelte | 6 +- src/lib/icons/hard-disk.svelte | 6 +- src/lib/icons/insert-down.svelte | 5 + src/lib/icons/insert-up.svelte | 5 + src/lib/icons/power.svelte | 4 +- .../{tuning-fork.svg => tuning-fork.svelte} | 1 - src/lib/icons/widescreen.svelte | 4 + src/lib/interfaces/proxmox.ts | 39 +++ src/lib/server/proxmox.ts | 57 +++- src/routes/servers/+page.svelte | 69 ++++- .../servers/[kind]/[id]/+page.server.ts | 82 +++++ src/routes/servers/[kind]/[id]/+page.svelte | 53 ++++ 20 files changed, 793 insertions(+), 34 deletions(-) create mode 100644 src/lib/components/LXC.svelte create mode 100644 src/lib/components/VM.svelte create mode 100644 src/lib/components/prox-describe/VM.svelte create mode 100644 src/lib/icons/desktop.svelte create mode 100644 src/lib/icons/extract-up.svelte create mode 100644 src/lib/icons/insert-down.svelte create mode 100644 src/lib/icons/insert-up.svelte rename src/lib/icons/{tuning-fork.svg => tuning-fork.svelte} (99%) create mode 100644 src/lib/icons/widescreen.svelte create mode 100644 src/routes/servers/[kind]/[id]/+page.server.ts create mode 100644 src/routes/servers/[kind]/[id]/+page.svelte diff --git a/src/lib/components/LXC.svelte b/src/lib/components/LXC.svelte new file mode 100644 index 0000000..8eb6067 --- /dev/null +++ b/src/lib/components/LXC.svelte @@ -0,0 +1,96 @@ + + +
+
+
+ {lxc.name} {lxc.vmid} + + +
+ +
+
+ + Status +
+ {lxc.status} + +
+ + CPUs +
+ {lxc.cpus} + +
+ + CPU +
+ {Math.floor(lxc.cpu * 100) / 100} + +
+ + Max Disk +
+ {formatBytes(lxc.maxdisk)} + +
+ + Memory +
+ {formatBytes(lxc.mem)} + +
+ + Net In +
+ {formatBytes(lxc.netin)} + +
+ + Net Out +
+ {formatBytes(lxc.netout / 8)} + +
+ + Uptime +
+ {formatDuration(lxc.uptime)} + +
+ + lxc ID +
+ {lxc.vmid} +
+ +
+ +
+
+ + diff --git a/src/lib/components/Server.svelte b/src/lib/components/Server.svelte index f0bc702..a5d3ee8 100644 --- a/src/lib/components/Server.svelte +++ b/src/lib/components/Server.svelte @@ -24,7 +24,7 @@ link: `https://${node.ip}:8006/#v1:0:=node%2F${node.name}:4:=jsconsole::::::` }, { name: 'Graphs', link: `https://${node.ip}:8006/#v1:0:=node%2F${node.name}:4:5::::::` }, - { name: 'Web', link: `https://${node.ip}:8006/` } + { name: 'Details', link: `/servers/node/${node.name}` } ]; let { cpuinfo, memory, uptime, loadavg } = node.info; @@ -116,7 +116,7 @@
{#each buttons as btn (btn)} - + diff --git a/src/lib/components/VM.svelte b/src/lib/components/VM.svelte new file mode 100644 index 0000000..1f835e9 --- /dev/null +++ b/src/lib/components/VM.svelte @@ -0,0 +1,95 @@ + + +
+
+
+ {vm.name} {vm.vmid} + + +
+ +
+
+ + Status +
+ {vm.status} + +
+ + CPUs +
+ {vm.cpus} + +
+ + CPU +
+ {Math.floor(vm.cpu * 100) / 100} + +
+ + Max Disk +
+ {formatBytes(vm.maxdisk)} + +
+ + Memory +
+ {formatBytes(vm.mem)} + +
+ + Net In +
+ {formatBytes(vm.netin)} + +
+ + Net Out +
+ {formatBytes(vm.netout / 8)} + +
+ + Uptime +
+ {formatDuration(vm.uptime)} + +
+ + VM ID +
+ {vm.vmid} +
+ +
+ +
+
+ + diff --git a/src/lib/components/prox-describe/VM.svelte b/src/lib/components/prox-describe/VM.svelte new file mode 100644 index 0000000..58c9c4e --- /dev/null +++ b/src/lib/components/prox-describe/VM.svelte @@ -0,0 +1,282 @@ + + +
+
+
+
+ + {vm.vmid} +
+ +
+ + {formatBytes(vm.mem).match(/\d+(\.\d+)?/)?.[0]} / + {formatBytes(vm.maxmem)} +
+ +
+ + + + {vm.cpus} cores ({vm.config.sockets}) + +
+ +
+ + + + {formatBytes(vm.maxdisk)} + +
+ +
+ + + + {formatDuration(vm.uptime)} + +
+
+
+ +
+
+
+ + + + {vm.status} + +
+ +
+ + {Math.floor(vm.cpu * 10000) / 100} % +
+ +
+ + {Math.floor((vm.mem / vm.maxmem) * 1000) / 10} % +
+
+ + + + {formatBytes(vm.netout)} + +
+ +
+ + + + {formatBytes(vm.netin)} + +
+ +
+ + + + {vm.diskread} + +
+ +
+ + + + {vm.diskwrite} + +
+
+
+ +
+
+
+ + {vm.os?.name} +
+ +
+ + {vm.os?.['pretty-name']} +
+ +
+ + {vm.os?.version} +
+ +
+ + {vm.os?.['kernel-release']} +
+
+
+ +
+ {#if drives?.length > 0} + + + {#each vm.fs as device (device)} + + + + + + + + + {/each} + +
{device.name} + {#each device['disk'] as device (device)} + {device?.['bus-type']}{device?.target} + {/each} + {device.mountpoint}{device.type}{Math.floor((device['used-bytes'] / device['total-bytes']) * 10000) / 100} %{formatBytes(device['total-bytes'])}
+ {/if} +
+ +
+ {#if vm.network?.length > 0} + + + {#each vm.network.sort((a,b) => a < b ? 1 : -1) as net_interface (net_interface.name)} + + + + + + {/each} + +
{net_interface.name}{net_interface['hardware-address']} + {#each net_interface['ip-addresses'] as ip (ip['ip-address'])} + {ip['ip-address']}/{ip.prefix} + {/each} +
+ {/if} + + {#if drives?.length > 0} + +
+

Total drives: {drives.length}

+

Total capacity: {formatBytes(drives.reduce((acc, obj) => acc + obj.size, 0))}

+
+ + + {#each drives as drive (drive)} + + + + + + + {/each} + +
{drive.device}{drive.mount}{drive.backup}{formatBytes(drive.size)}
+ {/if} + + {#if pcieDevices?.length > 0} + + + {#each pcieDevices as pcie (pcie)} + + + + + {/each} + +
{pcie.device}{pcie.name}
+ {/if} +
+
+ + diff --git a/src/lib/icons/cpu.svelte b/src/lib/icons/cpu.svelte index 6da1701..6cffa59 100644 --- a/src/lib/icons/cpu.svelte +++ b/src/lib/icons/cpu.svelte @@ -2,8 +2,8 @@ diff --git a/src/lib/icons/cube-side.svelte b/src/lib/icons/cube-side.svelte index 804c573..388a6d3 100644 --- a/src/lib/icons/cube-side.svelte +++ b/src/lib/icons/cube-side.svelte @@ -1,12 +1,10 @@ - - diff --git a/src/lib/icons/desktop.svelte b/src/lib/icons/desktop.svelte new file mode 100644 index 0000000..787afb6 --- /dev/null +++ b/src/lib/icons/desktop.svelte @@ -0,0 +1,4 @@ + + + + diff --git a/src/lib/icons/extract-up.svelte b/src/lib/icons/extract-up.svelte new file mode 100644 index 0000000..2753e71 --- /dev/null +++ b/src/lib/icons/extract-up.svelte @@ -0,0 +1,5 @@ + + + + + diff --git a/src/lib/icons/floppy-disk.svelte b/src/lib/icons/floppy-disk.svelte index 1740a54..d368012 100644 --- a/src/lib/icons/floppy-disk.svelte +++ b/src/lib/icons/floppy-disk.svelte @@ -1,12 +1,10 @@ - - diff --git a/src/lib/icons/hard-disk.svelte b/src/lib/icons/hard-disk.svelte index f898485..1dab213 100644 --- a/src/lib/icons/hard-disk.svelte +++ b/src/lib/icons/hard-disk.svelte @@ -1,12 +1,10 @@ - - diff --git a/src/lib/icons/insert-down.svelte b/src/lib/icons/insert-down.svelte new file mode 100644 index 0000000..3a1c0fe --- /dev/null +++ b/src/lib/icons/insert-down.svelte @@ -0,0 +1,5 @@ + + + + + diff --git a/src/lib/icons/insert-up.svelte b/src/lib/icons/insert-up.svelte new file mode 100644 index 0000000..76cec16 --- /dev/null +++ b/src/lib/icons/insert-up.svelte @@ -0,0 +1,5 @@ + + + + + diff --git a/src/lib/icons/power.svelte b/src/lib/icons/power.svelte index e86f5fe..d2edef7 100644 --- a/src/lib/icons/power.svelte +++ b/src/lib/icons/power.svelte @@ -2,8 +2,8 @@ diff --git a/src/lib/icons/tuning-fork.svg b/src/lib/icons/tuning-fork.svelte similarity index 99% rename from src/lib/icons/tuning-fork.svg rename to src/lib/icons/tuning-fork.svelte index 00331ad..8218045 100644 --- a/src/lib/icons/tuning-fork.svg +++ b/src/lib/icons/tuning-fork.svelte @@ -1,5 +1,4 @@ - diff --git a/src/lib/icons/widescreen.svelte b/src/lib/icons/widescreen.svelte new file mode 100644 index 0000000..787afb6 --- /dev/null +++ b/src/lib/icons/widescreen.svelte @@ -0,0 +1,4 @@ + + + + diff --git a/src/lib/interfaces/proxmox.ts b/src/lib/interfaces/proxmox.ts index c32746a..4d626a1 100644 --- a/src/lib/interfaces/proxmox.ts +++ b/src/lib/interfaces/proxmox.ts @@ -66,6 +66,45 @@ interface NodeStatus { bootInfo: BootInfo; } +export interface VM { + cpu: number; + cpus: number; + disk: number; + diskread: number; + diskwrite: number; + maxdisk: number; + maxmem: number; + mem: number; + name: string; + netin: number; + netout: number; + pid: number; + status: string; + uptime: number; + vmid: number; +} + +export interface LXC { + cpu: number; + cpus: number; + disk: number; + diskread: number; + diskwrite: number; + maxdisk: number; + maxmem: number; + maxswap: number; + mem: number; + name: string; + netin: number; + netout: number; + pid: number; + status: string; + swap: number; + type: string; + uptime: number; + vmid: number; +} + export interface Node { info: NodeStatus; online: number; diff --git a/src/lib/server/proxmox.ts b/src/lib/server/proxmox.ts index c47a4c3..4218291 100644 --- a/src/lib/server/proxmox.ts +++ b/src/lib/server/proxmox.ts @@ -57,15 +57,64 @@ async function getClusterInfo() { }); } +export async function vmInfo(nodeName: string, vmId: string) { + const r = buildProxmoxRequest(); + r.url += `nodes/${nodeName}/qemu/${vmId}/config`; + + return fetch(r.url, r?.options) + .then(resp => resp.json()) + .then((response) => response.data) +} + +export async function vmCloudInit(nodeName: string, vmId: string) { + const r = buildProxmoxRequest(); + vmId = 121 + r.url += `nodes/${nodeName}/qemu/${vmId}/cloudinit`; + + return fetch(r.url, r?.options) + .then(resp => resp.json()) + .then((response) => response.data) +} + +export async function vmAgentOS(nodeName: string, vmId: string) { + const r = buildProxmoxRequest(); + vmId = 121 + r.url += `nodes/${nodeName}/qemu/${vmId}/agent/get-osinfo`; + + return fetch(r.url, r?.options) + .then(resp => resp.json()) + .then((response) => response.data?.result) +} + +export async function vmAgentFS(nodeName: string, vmId: string) { + const r = buildProxmoxRequest(); + vmId = 121 + r.url += `nodes/${nodeName}/qemu/${vmId}/agent/get-fsinfo`; + + return fetch(r.url, r?.options) + .then(resp => resp.json()) + .then((response) => response.data?.result) +} + +export async function vmAgentNetwork(nodeName: string, vmId: string) { + const r = buildProxmoxRequest(); + vmId = 121 + r.url += `nodes/${nodeName}/qemu/${vmId}/agent/network-get-interfaces`; + + return fetch(r.url, r?.options) + .then(resp => resp.json()) + .then((response) => response.data?.result) +} + export async function fetchNodes(): Promise<{ nodes: Node[]; cluster: Cluster | null }> { try { const { nodes, cluster } = await getClusterInfo(); - const infoP = Promise.all(nodes.map((node: Node) => fetchNodeInfo(node))); - const vmsP = Promise.all(nodes.map((node: Node) => fetchNodeVMs(node))); - const lxcsP = Promise.all(nodes.map((node: Node) => fetchNodeLXCs(node))); + const infoBulk = Promise.all(nodes.map((node: Node) => fetchNodeInfo(node))); + const vmsBulk = Promise.all(nodes.map((node: Node) => fetchNodeVMs(node))); + const lxcsBulk = Promise.all(nodes.map((node: Node) => fetchNodeLXCs(node))); - const [info, vms, lxcs] = await Promise.all([infoP, vmsP, lxcsP]); + const [info, vms, lxcs] = await Promise.all([infoBulk, vmsBulk, lxcsBulk]); return { cluster, diff --git a/src/routes/servers/+page.svelte b/src/routes/servers/+page.svelte index 9fd98e7..8228099 100644 --- a/src/routes/servers/+page.svelte +++ b/src/routes/servers/+page.svelte @@ -3,6 +3,9 @@ import PageHeader from '$lib/components/PageHeader.svelte'; import ServerComp from '$lib/components/Server.svelte'; import ServerSummary from '$lib/components/ServerSummary.svelte'; + import VMComp from '$lib/components/VM.svelte'; + import LXCComp from '$lib/components/LXC.svelte'; + import type { VM, LXC } from '$lib/components/VM.svelte'; import type { PageData } from './$types'; let { data }: { data: PageData } = $props(); @@ -16,26 +19,25 @@ ...allVms .map((vm) => { return { - link: `/servers/vm/${vm.name}`, + link: `/servers/vm/${vm.vmid}`, ...vm }; }) .filter((d) => d.name), - ...nodes.map(node => { + ...nodes.map((node) => { return { link: `/servers/node/${node.name}`, ...node - } + }; }), - ...allLxcs.map(lxc => { + ...allLxcs.map((lxc) => { return { - link: `/servers/lxc/${lxc.name}`, + link: `/servers/lxc/${lxc.vmid}`, ...lxc - } + }; }) ]; }); -console.log(allLxcs) Servers @@ -44,18 +46,63 @@ console.log(allLxcs)
{#each nodes as node (node.name)} -
- -
+ {/each}
+
+ +

VMs

+ + +
+ {#each allVms as vm (vm.vmid)} + + {/each} +
+
+ +
+ +

LXCs

+ + +
+ {#each allLxcs as lxc (lxc)} + + {/each} +
+
+ diff --git a/src/routes/servers/[kind]/[id]/+page.server.ts b/src/routes/servers/[kind]/[id]/+page.server.ts new file mode 100644 index 0000000..66f691d --- /dev/null +++ b/src/routes/servers/[kind]/[id]/+page.server.ts @@ -0,0 +1,82 @@ +import { + fetchNodes, + vmInfo, + vmCloudInit, + vmAgentOS, + vmAgentFS, + vmAgentNetwork +} from '$lib/server/proxmox'; +import type { Node, VM } from '$lib/interfaces/proxmox'; +import type { PageServerLoad } from './$types'; + +const AVAILABLE_RESOURCES = ['node', 'vm', 'lxc']; + +const filterResources = (resource: Node | VM, id) => { + if (resource?.name && resource.name === id) { + return resource; + } + + return null; +}; + +export const load: PageServerLoad = async ({ params }) => { + const { kind, id } = params; + console.log('KIND', kind); + + if (!AVAILABLE_RESOURCES.includes(kind)) { + return { + error: 'No resource ' + kind, + resource: null + }; + } + console.log(params.id); + + const cluster = await fetchNodes(); + let vm = []; + let nodeId; + const resources: Array = []; + + switch (kind) { + case 'node': + vm = cluster?.nodes.find((n) => n.name === id) || resources; + break; + case 'vm': + nodeId = cluster.nodes.find( + (n) => n.vms.filter((vm) => String(vm.vmid) === id)?.length > 0 + )?.name; + const clusterVM = cluster.nodes.flatMap((n) => n.vms)?.find((vm) => String(vm.vmid) === id); + + if (!nodeId || !clusterVM.vmid) return; + const [cloudInit, os, fs, network] = await Promise.all([ + vmCloudInit(nodeId, clusterVM.vmid), + vmAgentOS(nodeId, clusterVM.vmid), + vmAgentFS(nodeId, clusterVM.vmid), + vmAgentNetwork(nodeId, clusterVM.vmid) + ]); + vm = { + config: await vmInfo(nodeId, clusterVM.vmid), + cloudInit, + os, + fs, + network, + ...clusterVM + }; + // resources = [vm] + break; + case 'lxc': + vm = cluster.nodes.flatMap((n) => n.lxcs)?.find((lxc) => String(lxc.vmid) === id); + + break; + default: + console.log('no resources found'); + } + + // console.log('returning', vm); + + return { + resource: vm, + kind: params.kind, + id: params.id, + error: null + }; +}; diff --git a/src/routes/servers/[kind]/[id]/+page.svelte b/src/routes/servers/[kind]/[id]/+page.svelte new file mode 100644 index 0000000..b994e71 --- /dev/null +++ b/src/routes/servers/[kind]/[id]/+page.svelte @@ -0,0 +1,53 @@ + + +{kind || 'Resource'}: {resource?.name || 'not found'} + +{#if error} +

{error}

+{/if} + +{#if resource} +
+ View in proxmox + +
+ + {#if kind == 'vm'} + + {:else} +

{kind} stuffs

+ + {/if} +{:else} +

404. '{kind}' resource not found!

+{/if} + +