Add sum and average to host metrics

svelte/src/admin_panel/HostMetrics.svelte

@@ -158,13 +158,9 @@ const load_metrics = async (window: number, interval: number) => {
 				for (const host of Object.keys(metrics.metrics[graph.agg_base])) {
 					metrics.metrics[graph.metric][host] = []
 					for (let i = 0; i < metrics.metrics[graph.agg_base][host].length; i++) {
-						if (metrics.metrics[graph.agg_divisor][host][i] > 0) {
+						metrics.metrics[graph.metric][host].push(
-							metrics.metrics[graph.metric][host].push(
+							metrics.metrics[graph.agg_base][host][i] / Math.max(metrics.metrics[graph.agg_divisor][host][i], 1)
-								metrics.metrics[graph.agg_base][host][i] / metrics.metrics[graph.agg_divisor][host][i]
+						)
-							)
-						} else {
-							metrics.metrics[graph.metric][host].push(0)
-						}
 					}
 				}
 			}
@@ -204,7 +200,7 @@ onDestroy(() => {
 		<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>
+		<ToggleButton bind:on={showAggregate}>Sum and Average</ToggleButton>
 	</div>
 
 	{#each groups as group (group.title)}
@@ -236,6 +232,6 @@ onDestroy(() => {
 }
 .grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
 }
 </style>

svelte/src/admin_panel/HostMetricsGraph.svelte

@@ -28,39 +28,49 @@ const update_chart = async (timestamps: string[], metrics: {[key: string]: numbe
 	// there are in the response
 	chart.data().datasets.length = Object.keys(metrics).length
 
-	let i = 0
 	if (aggregate === true) {
-		i = 1
+		chart.data().datasets.length = 2
 		chart.data().datasets[0] = {
-			label: "aggregate",
+			label: "sum",
-			data: create_aggregate_dataset(metrics),
+			data: create_sum_dataset(metrics),
-			borderWidth: 1,
+			borderWidth: 1.5,
 			pointRadius: 0,
-			borderColor: "#ffffff",
+			borderColor: "#ff0000",
-			backgroundColor: "#ffffff",
+			backgroundColor: "#ff0000",
 		}
-	}
+		chart.data().datasets[1] = {
-
+			label: "average",
-	for (const host of Object.keys(metrics).sort()) {
+			data: create_avg_dataset(metrics),
-		if (chart.data().datasets[i] === undefined) {
+			borderWidth: 1.5,
-			chart.data().datasets[i] = {
+			pointRadius: 0,
-				label: "",
+			borderColor: "#00ff00",
-				data: [],
+			backgroundColor: "#00ff00",
-				borderWidth: 1,
+		}
-				pointRadius: 0,
+	} else {
+		chart.data().datasets.length = Object.keys(metrics).length
+		let i = 0
+		for (const host of Object.keys(metrics).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].borderWidth = 1
+			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.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 = (hosts: {[key:string]: number[]}): number[] => {
+const create_sum_dataset = (hosts: {[key:string]: number[]}): number[] => {
 	let data: number[] = []
 	for (const host of Object.keys(hosts)) {
 		for (let idx = 0; idx < hosts[host].length; idx++) {
@@ -72,6 +82,16 @@ const create_aggregate_dataset = (hosts: {[key:string]: number[]}): number[] =>
 	}
 	return data
 }
+const create_avg_dataset = (hosts: {[key:string]: number[]}): number[] => {
+	// The calculate the average, we take the sum and divide it by the number of
+	// hosts
+	let data: number[] = create_sum_dataset(hosts)
+	const num_hosts = Object.keys(hosts).length
+	for (let idx=0; idx < data.length; idx++) {
+		data[idx] /= num_hosts
+	}
+	return data
+}
 </script>
 
 <div>