Add host metrics dashboard

svelte/package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
         "behave-js": "^1.5.0",
-        "chart.js": "^4.4.6",
+        "chart.js": "^4.5.1",
         "country-data-list": "^1.4.0",
         "pure-color": "^1.3.0",
         "rollup-plugin-includepaths": "^0.2.4",
@@ -65,7 +65,6 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -2507,7 +2506,6 @@
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-6.2.1.tgz",
       "integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
         "debug": "^4.4.1",
@@ -2559,7 +2557,6 @@
       "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -2576,7 +2573,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2776,7 +2772,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -2820,9 +2815,9 @@
       "license": "CC-BY-4.0"
     },
     "node_modules/chart.js": {
-      "version": "4.5.0",
+      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
-      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
@@ -3535,7 +3530,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3562,7 +3556,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -3708,7 +3701,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz",
       "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -4045,7 +4037,6 @@
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.39.11.tgz",
       "integrity": "sha512-8MxWVm2+3YwrFbPaxOlT1bbMi6OTenrAgks6soZfiaS8Fptk4EVyRIFhJc3RpO264EeSNwgjWAdki0ufg4zkGw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -4136,7 +4127,6 @@
       "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
       "devOptional": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.15.0",
@@ -4183,8 +4173,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
+      "license": "0BSD"
-      "peer": true
     },
     "node_modules/typescript": {
       "version": "5.9.3",
@@ -4288,7 +4277,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
       "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",

svelte/package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "behave-js": "^1.5.0",
-    "chart.js": "^4.4.6",
+    "chart.js": "^4.5.1",
     "country-data-list": "^1.4.0",
     "pure-color": "^1.3.0",
     "rollup-plugin-includepaths": "^0.2.4",

svelte/src/admin_panel/HostMetrics.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import HostMetricsGraph from "./HostMetricsGraph.svelte";
+import { load_host_names } from "./HostMetricsLib";
+import Expandable from "util/Expandable.svelte";
+
+const groups: {
+	title: string,
+	graphs: {
+		metric: string,
+		data_type: string,
+	}[],
+}[] = [
+	{
+		title: "API",
+		graphs: [
+			{metric: "api_request", data_type: "number"},
+			{metric: "api_request_duration", data_type: "duration"},
+			{metric: "api_error", data_type: "number"},
+			{metric: "api_panic", data_type: "number"},
+		],
+	}, {
+		title: "Task scheduler",
+		graphs: [
+			{metric: "scheduler_filesystem_remove_orphan", data_type: "number"},
+			{metric: "scheduler_timeseries_delete", data_type: "number"},
+		],
+	}, {
+		title: "Database",
+		graphs: [
+			{metric: "database_query", data_type: "number"},
+			{metric: "database_query_duration", data_type: "duration"},
+			{metric: "database_query_rows", data_type: "number"},
+			{metric: "database_query_retries", data_type: "number"},
+			{metric: "database_query_error", data_type: "number"},
+		],
+	}, {
+		title: "Pixelstore",
+		graphs: [
+			{metric: "pixelstore_write", data_type: "number"},
+			{metric: "pixelstore_write_size", data_type: "bytes"},
+			{metric: "pixelstore_cache_fetch", data_type: "number"},
+			{metric: "pixelstore_cache_fetch_size", data_type: "bytes"},
+			{metric: "pixelstore_cache_delete", data_type: "number"},
+			{metric: "pixelstore_connection_error", data_type: "number"},
+			{metric: "pixelstore_peer_down", data_type: "number"},
+			{metric: "pixelstore_peer_up", data_type: "number"},
+		],
+	}, {
+		title: "Pixelstore reads",
+		graphs: [
+			{metric: "pixelstore_cache_read", data_type: "number"},
+			{metric: "pixelstore_cache_read_size", data_type: "bytes"},
+			{metric: "pixelstore_neighbour_read", data_type: "number"},
+			{metric: "pixelstore_neighbour_read_size", data_type: "bytes"},
+			{metric: "pixelstore_reed_solomon_read", data_type: "number"},
+			{metric: "pixelstore_reed_solomon_read_size", data_type: "bytes"},
+		],
+	}, {
+		title: "Pixelstore shards",
+		graphs: [
+			{metric: "pixelstore_shard_delete", data_type: "number"},
+			{metric: "pixelstore_shard_delete_size", data_type: "bytes"},
+			{metric: "pixelstore_shard_repair", data_type: "number"},
+			{metric: "pixelstore_shard_repair_size", data_type: "bytes"},
+			{metric: "pixelstore_shard_move", data_type: "number"},
+			{metric: "pixelstore_shard_move_size", data_type: "bytes"},
+		],
+	},
+]
+
+let dataWindow: number = $state(60)
+let dataInterval: number = $state(1)
+
+const setWindow = (window: number, interval: number) => {
+	dataWindow = window
+	dataInterval = interval
+}
+
+let loaded = $state(false)
+onMount(async () => {
+	await load_host_names()
+	loaded = true
+})
+</script>
+
+{#if loaded}
+	<div class="highlight_border" style="margin-bottom: 6px;">
+		<button onclick={() => setWindow(60, 1)}>Hour 1m</button>
+		<button onclick={() => setWindow(720, 1)}>Half Day 1m</button>
+		<button onclick={() => setWindow(1440, 60)}>Day 1h</button>
+		<button onclick={() => setWindow(10080, 60)}>Week 1h</button>
+		<button onclick={() => setWindow(43200, 60)}>Month 1h</button>
+		<button onclick={() => setWindow(131400, 1440)}>Quarter 1d</button>
+		<button onclick={() => setWindow(262800, 1440)}>Half-year 1d</button>
+		<button onclick={() => setWindow(525600, 1440)}>Year 1d</button>
+		<button onclick={() => setWindow(1051200, 1440)}>Two Years 1d</button>
+		<button onclick={() => setWindow(2628000, 1440)}>Five Years 1d</button>
+	</div>
+
+	{#each groups as group (group.title)}
+		<Expandable click_expand expanded>
+			{#snippet header()}
+				<div class="title">{group.title}</div>
+			{/snippet}
+
+			<div class="grid">
+				{#each group.graphs as graph (graph.metric)}
+					<HostMetricsGraph
+						window={dataWindow}
+						interval={dataInterval}
+						metric={graph.metric}
+						data_type={graph.data_type}
+					/>
+				{/each}
+			</div>
+		</Expandable>
+	{/each}
+{/if}
+
+<style>
+.title {
+	font-size: 1.6em;
+	padding: 4px;
+	text-align: center;
+}
+.grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+}
+</style>

svelte/src/admin_panel/HostMetricsGraph.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import Chart from "util/Chart.svelte";
+import { get_endpoint } from "lib/PixeldrainAPI";
+    import { host_colour, host_label } from "./HostMetricsLib";
+
+let {
+	metric = "",
+	window = 0, // Size of the data window in minutes
+	interval = 0, // Interval of the datapoints in minutes
+	data_type = "number"
+}: {
+	metric: string;
+	window: number;
+	interval: number;
+	data_type?: string;
+} = $props();
+
+let chart: Chart = $state()
+let chartTimeout: NodeJS.Timeout = null
+
+const loadGraph = () => {
+	if (chartTimeout !== null) { clearTimeout(chartTimeout) }
+	chartTimeout = setTimeout(() => { loadGraph() }, 10000)
+
+	let today = new Date()
+	let start = new Date()
+	start.setMinutes(start.getMinutes() - window)
+
+	fetch(
+		get_endpoint() + "/admin/host_metrics" +
+		"?start=" + start.toISOString() +
+		"&end=" + today.toISOString() +
+		"&metric="+ metric +
+		"&interval=" + interval
+	).then(resp => {
+		if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
+		return resp.json();
+	}).then(async resp => {
+
+		resp.timestamps.forEach((val: string, idx: number) => {
+			let date = new Date(val);
+			let dateStr: string = date.getFullYear().toString();
+			dateStr += "-" + ("00" + (date.getMonth() + 1)).slice(-2);
+			dateStr += "-" + ("00" + date.getDate()).slice(-2);
+			dateStr += " " + ("00" + date.getHours()).slice(-2);
+			dateStr += ":" + ("00" + date.getMinutes()).slice(-2);
+			resp.timestamps[idx] = " " + dateStr + " "; // Poor man's padding
+		});
+		chart.data().labels = resp.timestamps;
+
+		let i = 0
+		for (const host of Object.keys(resp.host_amounts).sort()) {
+			if (chart.data().datasets[i] === undefined) {
+				chart.data().datasets[i] = {
+					label: await host_label(host),
+					data: [],
+					borderWidth: 1,
+					pointRadius: 0,
+				}
+			}
+			chart.data().datasets[i].borderColor = host_colour(host)
+			chart.data().datasets[i].backgroundColor = host_colour(host)
+
+			if (data_type === "duration") {
+				for (let i = 0; i < resp.host_amounts[host].length; i++) {
+					// Go durations are expressed on nanoseconds, divide by 1
+					// million to convert to milliseconds
+					resp.host_amounts[host][i] /= 1000000
+				}
+			}
+
+			chart.data().datasets[i].data = resp.host_amounts[host]
+			i++
+		}
+
+		chart.update()
+	})
+}
+
+onMount(() => {
+	loadGraph();
+
+	return () => {
+		if (chartTimeout !== null) {
+			clearTimeout(chartTimeout)
+		}
+	}
+})
+</script>
+
+<div>
+	<div class="title">{metric}</div>
+	<Chart bind:this={chart} data_type={data_type} legend={false} ticks={false} animations={false} />
+</div>
+
+<style>
+.title {
+	font-size: 1.2em;
+}
+</style>

svelte/src/admin_panel/HostMetricsLib.ts

@@ -0,0 +1,50 @@
+import { loading_finish, loading_start } from "lib/Loading";
+import { get_endpoint } from "lib/PixeldrainAPI";
+import hsl2rgb from "pure-color/convert/hsl2rgb";
+import rgb2hex from "pure-color/convert/rgb2hex";
+
+let host_colours: { [key: string]: string } = {}
+export const host_colour = (id: string): string => {
+	let host_count: number = Object.keys(host_colours).length
+	if (host_colours[id] === undefined) {
+		host_colours[id] = ""
+	} else {
+		return host_colours[id]
+	}
+
+	const colour_interval = 360 / (host_count + 1)
+
+	var i = 0
+	for (const host of Object.keys(host_colours).sort()) {
+		host_colours[host] = rgb2hex(hsl2rgb([i * colour_interval, 100, 70]))
+		i++
+	}
+
+	return host_colours[id]
+}
+
+let host_names: { [key: string]: string } = {}
+export const host_label = async (id: string): Promise<string> => {
+	if (id === "00000000-0000-0000-0000-000000000000") {
+		return "task scheduler"
+	}
+	if (host_names[id] === undefined) {
+		return id
+	}
+
+	return host_names[id]
+}
+
+export const load_host_names = async () => {
+	loading_start()
+	try {
+		const req = await fetch(get_endpoint() + "/status")
+		const j = await req.json()
+
+		for (const peer of j.peers) {
+			host_names[peer.id] = peer.hostname
+		}
+	} finally {
+		loading_finish()
+	}
+}

svelte/src/admin_panel/Router.svelte

@@ -10,6 +10,7 @@ import MollieSettlements from "./MollieSettlements.svelte";
 import PayPalTaxes from "./PayPalTaxes.svelte";
 import UserBans from "./user_bans/UserBans.svelte";
 import InvoiceVat from "./InvoiceVAT.svelte";
+import HostMetrics from "./HostMetrics.svelte";
 
 let pages = [
 	{
@@ -47,6 +48,11 @@ let pages = [
 		title: "User Management",
 		icon: "person",
 		component: UserManagement,
+	}, {
+		path: "/admin/host_metrics",
+		title: "Host Metrics",
+		icon: "area_chart",
+		component: HostMetrics,
 	}, {
 		path: "/admin/mollie_settlements",
 		title: "Prepaid accounting",

svelte/tsconfig.json

@@ -10,5 +10,8 @@
 		"noUnusedLocals": true,
 		"module": "preserve",
 		"moduleResolution": "bundler"
-	}
+	},
+	"include": [
+		"src/"
+	]
 }