Add aggregate statistics

svelte/src/admin_panel/HostMetrics.svelte

@@ -3,6 +3,7 @@ import { onMount } from "svelte";
 import HostMetricsGraph from "./HostMetricsGraph.svelte";
 import { load_host_names } from "./HostMetricsLib";
 import Expandable from "util/Expandable.svelte";
+import ToggleButton from "layout/ToggleButton.svelte";
 
 const groups: {
 	title: string,
@@ -71,6 +72,7 @@ const groups: {
 
 let dataWindow: number = $state(60)
 let dataInterval: number = $state(1)
+let showAggregate: boolean = $state(false)
 
 const setWindow = (window: number, interval: number) => {
 	dataWindow = window
@@ -96,6 +98,8 @@ onMount(async () => {
 		<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>
+		<br/>
+		<ToggleButton bind:on={showAggregate}>Aggregate</ToggleButton>
 	</div>
 
 	{#each groups as group (group.title)}
@@ -111,6 +115,7 @@ onMount(async () => {
 						interval={dataInterval}
 						metric={graph.metric}
 						data_type={graph.data_type}
+						aggregate={showAggregate}
 					/>
 				{/each}
 			</div>

svelte/src/admin_panel/HostMetricsGraph.svelte

@@ -1,85 +1,114 @@
 <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";
+import { host_colour, host_label } from "./HostMetricsLib";
+import { get_host_metrics, type HostMetrics } from "lib/AdminAPI";
+import { formatDate } from "util/Formatting";
 
 let {
 	metric = "",
 	window = 0, // Size of the data window in minutes
 	interval = 0, // Interval of the datapoints in minutes
-	data_type = "number"
+	data_type = "number",
+	aggregate = false,
 }: {
 	metric: string;
 	window: number;
 	interval: number;
 	data_type?: string;
+	aggregate?: boolean;
 } = $props();
 
+// Make load_graph reactive
+$effect(() => {load_graph(metric, window, interval, aggregate)})
+
 let chart: Chart = $state()
 let chartTimeout: NodeJS.Timeout = null
 
-const loadGraph = () => {
+const load_graph = async (_metric: string, _window: number, _interval: number, _aggregate: boolean) => {
 	if (chartTimeout !== null) { clearTimeout(chartTimeout) }
-	chartTimeout = setTimeout(() => { loadGraph() }, 10000)
+	chartTimeout = setTimeout(() => { load_graph(metric, window, interval, aggregate) }, 10000)
 
 	let today = new Date()
 	let start = new Date()
-	start.setMinutes(start.getMinutes() - window)
+	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 => {
+	try {
+		const metrics = await get_host_metrics(start, today, _metric, _interval)
 
-		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
+		// Format the dates
+		metrics.timestamps.forEach((val: string, idx: number) => {
+			metrics.timestamps[idx] = formatDate(val, true, true, true)
 		});
-		chart.data().labels = resp.timestamps;
+		chart.data().labels = metrics.timestamps;
+
+		// If the dataset uses the duration type, we need to convert the values
+		// to milliseconds
+		if (data_type === "duration") {
+			for (const host of Object.keys(metrics.host_amounts)) {
+				for (let i = 0; i < metrics.host_amounts[host].length; i++) {
+					// Go durations are expressed on nanoseconds, divide by 1
+					// million to convert to milliseconds
+					metrics.host_amounts[host][i] /= 1000000
+				}
+			}
+		}
+
+		// Truncate the datasets array in case we have more datasets cached than
+		// there are in the response
+		chart.data().datasets.length = Object.keys(metrics.host_amounts).length
 
 		let i = 0
-		for (const host of Object.keys(resp.host_amounts).sort()) {
+		if (_aggregate) {
+			i = 1
+			chart.data().datasets[0] = {
+				label: "aggregate",
+				data: create_aggregate_dataset(metrics),
+				borderWidth: 1,
+				pointRadius: 0,
+				borderColor: "#ffffff",
+				backgroundColor: "#ffffff",
+			}
+		}
+
+		for (const host of Object.keys(metrics.host_amounts).sort()) {
 			if (chart.data().datasets[i] === undefined) {
 				chart.data().datasets[i] = {
-					label: await host_label(host),
+					label: "",
 					data: [],
 					borderWidth: 1,
 					pointRadius: 0,
 				}
 			}
+			chart.data().datasets[i].label = await host_label(host)
 			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]
+			chart.data().datasets[i].data = metrics.host_amounts[host]
 			i++
 		}
 
 		chart.update()
-	})
+	} catch (error) {
+		alert(error)
+	}
+}
+
+const create_aggregate_dataset = (metrics: HostMetrics): number[] => {
+	let data: number[] = []
+
+	for (const host of Object.keys(metrics.host_amounts)) {
+		for (let idx = 0; idx < metrics.host_amounts[host].length; idx++) {
+			if (data[idx]===undefined) {
+				data[idx] = 0
+			}
+			data[idx] += metrics.host_amounts[host][idx]
+		}
+	}
+	return data
 }
 
 onMount(() => {
-	loadGraph();
+	load_graph(metric, window, interval, aggregate);
 
 	return () => {
 		if (chartTimeout !== null) {

svelte/src/lib/AdminAPI.ts

@@ -27,3 +27,20 @@ export const get_admin_invoices = async (year: number, month: number) => {
 		)
 	) as Invoice[]
 };
+
+export type HostMetrics = {
+	timestamps: string[]
+	host_amounts: { [key: string]: number[] }
+}
+
+export const get_host_metrics = async (start: Date, end: Date, metric: string, interval: number): Promise<HostMetrics> => {
+	return await check_response(
+		await fetch(
+			get_endpoint() + "/admin/host_metrics" +
+			"?start=" + start.toISOString() +
+			"&end=" + end.toISOString() +
+			"&metric=" + metric +
+			"&interval=" + interval
+		)
+	) as HostMetrics
+};