Request host metrics all at once

svelte/src/admin_panel/HostMetricsGraph.svelte

@@ -1,121 +1,77 @@
 <script lang="ts">
-import { onMount } from "svelte";
 import Chart from "util/Chart.svelte";
 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 = "",
+	timestamps = [],
+	metrics = {},
 	aggregate = false,
 }: {
 	metric: string;
-	window: number;
-	interval: number;
-	data_type?: string;
-	aggregate?: boolean;
+	data_type: string;
+	timestamps: string[];
+	metrics: {[key: string]: number[]};
+	aggregate: boolean;
 } = $props();
 
-// Make load_graph reactive
-$effect(() => {load_graph(metric, window, interval, aggregate)})
-
 let chart: Chart = $state()
-let chartTimeout: NodeJS.Timeout = null
 
-const load_graph = async (_metric: string, _window: number, _interval: number, _aggregate: boolean) => {
-	if (chartTimeout !== null) { clearTimeout(chartTimeout) }
-	chartTimeout = setTimeout(() => { load_graph(metric, window, interval, aggregate) }, 10000)
+// Make load_graph reactive
+$effect(() => {update_chart(timestamps, metrics, aggregate)})
 
-	let today = new Date()
-	let start = new Date()
-	start.setMinutes(start.getMinutes() - _window)
+const update_chart = async (timestamps: string[], metrics: {[key: string]: number[]}, aggregate: boolean) => {
+	chart.data().labels = [...timestamps];
 
-	try {
-		const metrics = await get_host_metrics(start, today, _metric, _interval)
+	// Truncate the datasets array in case we have more datasets cached than
+	// there are in the response
+	chart.data().datasets.length = Object.keys(metrics).length
 
-		// Format the dates
-		metrics.timestamps.forEach((val: string, idx: number) => {
-			metrics.timestamps[idx] = formatDate(val, true, true, true)
-		});
-		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
-				}
-			}
+	let i = 0
+	if (aggregate === true) {
+		i = 1
+		chart.data().datasets[0] = {
+			label: "aggregate",
+			data: create_aggregate_dataset(metrics),
+			borderWidth: 1,
+			pointRadius: 0,
+			borderColor: "#ffffff",
+			backgroundColor: "#ffffff",
 		}
+	}
 
-		// 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
-		if (_aggregate) {
-			i = 1
-			chart.data().datasets[0] = {
-				label: "aggregate",
-				data: create_aggregate_dataset(metrics),
+	for (const host of Object.keys(metrics).sort()) {
+		if (chart.data().datasets[i] === undefined) {
+			chart.data().datasets[i] = {
+				label: "",
+				data: [],
 				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: "",
-					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)
-			chart.data().datasets[i].data = metrics.host_amounts[host]
-			i++
-		}
-
-		chart.update()
-	} catch (error) {
-		alert(error)
+		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)
+		chart.data().datasets[i].data = [...metrics[host]]
+		i++
 	}
+
+	chart.update()
 }
 
-const create_aggregate_dataset = (metrics: HostMetrics): number[] => {
+const create_aggregate_dataset = (hosts: {[key:string]: number[]}): number[] => {
 	let data: number[] = []
-
-	for (const host of Object.keys(metrics.host_amounts)) {
-		for (let idx = 0; idx < metrics.host_amounts[host].length; idx++) {
+	for (const host of Object.keys(hosts)) {
+		for (let idx = 0; idx < hosts[host].length; idx++) {
 			if (data[idx]===undefined) {
 				data[idx] = 0
 			}
-			data[idx] += metrics.host_amounts[host][idx]
+			data[idx] += hosts[host][idx]
 		}
 	}
 	return data
 }
-
-onMount(() => {
-	load_graph(metric, window, interval, aggregate);
-
-	return () => {
-		if (chartTimeout !== null) {
-			clearTimeout(chartTimeout)
-		}
-	}
-})
 </script>
 
 <div>