server summary

src/lib/components/ServerSummary.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { formatBytes } from "$lib/utils/conversion";
+	import type { Node } from "$lib/interfaces/proxmox";
+
+	export let nodes: Node[];
+
+	const totalCpu = nodes.map((n) => n.info.cpuinfo.cpus).reduce((a, b) => a + b, 0);
+	const totalMem = nodes.map((n) => n.info.memory.total).reduce((a, b) => a + b, 0);
+	const vmState = {
+		total: nodes.map((n) => n.vms.filter((v) => v?.template !== 1)).flat(2).length,
+		running: nodes
+			.map((n) => n.vms.filter((v) => v?.template !== 1 && v.status === 'running'))
+			.flat(2).length
+	};
+
+	const lxcState = {
+		total: nodes.map((n) => n.lxcs.filter((l) => l?.template !== 1)).flat(2).length,
+		running: nodes
+			.map((n) => n.lxcs.filter((l) => l?.template !== 1 && l.status === 'running'))
+			.flat(2).length
+	};
+
+
+</script>
+
+<div class="main-container">
+	<span>CPUs: <b>{totalCpu}</b></span>
+	<span>Memory: <b>{formatBytes(totalMem)}</b></span>
+	<span>VMs: <b>{vmState.running}/{vmState.total}</b></span>
+	<span>LXCs: <b>{lxcState.running}/{lxcState.total}</b></span>
+	<span>Nodes: <b>{nodes.length}</b></span>
+</div>
+
+<style lang="scss">
+	.main-container {
+		margin-bottom: 2rem;
+
+		span {
+			display: inline-block;
+
+			&:not(:last-of-type) {
+				margin-right: 0.75rem;
+			}
+		}
+
+		b {
+			font-family: 'Reckless Neue';
+			font-size: 1.3rem;
+			color: var(--theme);
+		}
+	}
+</style>

src/routes/servers/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import ServerComp from '$lib/components/Server.svelte';
+	import ServerSummary from '$lib/components/ServerSummary.svelte';
 	import type { PageData } from './$types';
 
 	let { data }: { data: PageData } = $props();
@@ -10,6 +11,8 @@
 
 <PageHeader>Servers</PageHeader>
 
+<ServerSummary {nodes} />
+
 <div class="server-list">
 	{#each nodes as node (node.name)}
 		<div>