From 21581bd9e53c8b554c9ac5e3a53ff4212f343057 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Thu, 14 Aug 2025 09:49:49 +0200
Subject: [PATCH] server summary

---
 src/lib/components/ServerSummary.svelte | 52 +++++++++++++++++++++++++
 src/routes/servers/+page.svelte         |  3 ++
 2 files changed, 55 insertions(+)
 create mode 100644 src/lib/components/ServerSummary.svelte

diff --git a/src/lib/components/ServerSummary.svelte b/src/lib/components/ServerSummary.svelte
new file mode 100644
index 0000000..b437397
--- /dev/null
+++ b/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>
diff --git a/src/routes/servers/+page.svelte b/src/routes/servers/+page.svelte
index 5736377..22bda55 100644
--- a/src/routes/servers/+page.svelte
+++ b/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>