Add host metrics dashboard

2026-01-20 01:02:17 +01:00
parent e54dc2dbd7
commit 00d317d645
7 changed files with 298 additions and 19 deletions
--- a/svelte/src/admin_panel/HostMetrics.svelte
+++ b/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>