Only request visible metrics

svelte/src/admin_panel/HostMetrics.svelte

@@ -9,15 +9,16 @@ import { loading_finish, loading_start } from "lib/Loading";
 
 const groups: {
 	title: string,
+	expanded: boolean
 	graphs: {
 		metric: string,
 		agg_base?: string,
 		agg_divisor?: string,
 		data_type: string,
 	}[],
-}[] = [
+}[] = $state([
 	{
-		title: "API",
+		title: "API", expanded: false,
 		graphs: [
 			{metric: "api_request", data_type: "number"},
 			{metric: "api_request_duration", data_type: "duration"},
@@ -27,13 +28,13 @@ const groups: {
 			{metric: "api_panic", data_type: "number"},
 		],
 	}, {
-		title: "Task scheduler",
+		title: "Task scheduler", expanded: false,
 		graphs: [
 			{metric: "scheduler_filesystem_remove_orphan", data_type: "number"},
 			{metric: "scheduler_timeseries_delete", data_type: "number"},
 		],
 	}, {
-		title: "Database",
+		title: "Database", expanded: false,
 		graphs: [
 			{metric: "database_query", data_type: "number"},
 			{metric: "database_query_duration", data_type: "duration"},
@@ -44,7 +45,7 @@ const groups: {
 			{metric: "database_query_error", data_type: "number"},
 		],
 	}, {
-		title: "Pixelstore",
+		title: "Pixelstore", expanded: false,
 		graphs: [
 			{metric: "pixelstore_write", data_type: "number"},
 			{metric: "pixelstore_write_size", data_type: "bytes"},
@@ -56,7 +57,7 @@ const groups: {
 			{metric: "pixelstore_peer_up", data_type: "number"},
 		],
 	}, {
-		title: "Pixelstore reads",
+		title: "Pixelstore reads", expanded: false,
 		graphs: [
 			{metric: "pixelstore_cache_read", data_type: "number"},
 			{metric: "pixelstore_cache_read_size", data_type: "bytes"},
@@ -68,7 +69,7 @@ const groups: {
 			{metric: "pixelstore_read_retry_error", data_type: "number"},
 		],
 	}, {
-		title: "Pixelstore shards",
+		title: "Pixelstore shards", expanded: false,
 		graphs: [
 			{metric: "pixelstore_shard_delete", data_type: "number"},
 			{metric: "pixelstore_shard_delete_size", data_type: "bytes"},
@@ -78,7 +79,7 @@ const groups: {
 			{metric: "pixelstore_shard_move_size", data_type: "bytes"},
 		],
 	}, {
-		title: "Pixelstore API",
+		title: "Pixelstore API", expanded: false,
 		graphs: [
 			{metric: "pixelstore_api_error_400", data_type: "number"},
 			{metric: "pixelstore_api_error_500", data_type: "number"},
@@ -89,7 +90,7 @@ const groups: {
 			{metric: "pixelstore_api_status", data_type: "number"},
 		],
 	},
-]
+])
 
 let dataWindow: number = $state(60)
 let dataInterval: number = $state(1)
@@ -107,12 +108,17 @@ const load_metrics = async (window: number, interval: number) => {
 
 	let metrics_list: string[] = []
 	for (const group of groups) {
-		for (const graph of group.graphs) {
-			if (graph.metric !== undefined) {
-				metrics_list.push(graph.metric)
+		if (group.expanded === true) {
+			for (const graph of group.graphs) {
+				if (graph.metric !== undefined) {
+					metrics_list.push(graph.metric)
+				}
 			}
 		}
 	}
+	if (metrics_list.length === 0) {
+		return
+	}
 
 	loading_start()
 	try {
@@ -131,6 +137,9 @@ const load_metrics = async (window: number, interval: number) => {
 	// If the dataset uses the duration type, we need to convert the values
 	// to milliseconds
 	for (const group of groups) {
+		if (group.expanded === false) {
+			continue
+		}
 		for (const graph of group.graphs) {
 			if (graph.data_type === "duration" && metrics.metrics[graph.metric] !== undefined) {
 				for (const host of Object.keys(metrics.metrics[graph.metric])) {
@@ -199,7 +208,7 @@ onDestroy(() => {
 	</div>
 
 	{#each groups as group (group.title)}
-		<Expandable click_expand expanded>
+		<Expandable click_expand bind:expanded={group.expanded} on_expand={(expanded) => load_metrics(dataWindow, dataInterval)}>
 			{#snippet header()}
 				<div class="title">{group.title}</div>
 			{/snippet}

svelte/src/util/Expandable.svelte

@@ -8,6 +8,9 @@ export const toggle = () => {
 const header_click = () => {
 	if (click_expand) {
 		toggle()
+		if (on_expand !== null) {
+			on_expand(expanded)
+		}
 	}
 }
 
@@ -22,6 +25,7 @@ const keypress = e => {
 let {
 	expanded = $bindable(false),
 	click_expand = false,
+	on_expand = null,
 	highlight = false,
 	header,
 	children
@@ -33,6 +37,10 @@ let {
 	// stopPropagation if you want to use other interactive elements in the
 	// title bar
 	click_expand?: boolean;
+
+	// Callback for when the user expands the view
+	on_expand?: (expanded: boolean) => void;
+
 	// Highlight the title bar if the user moves their mouse over it
 	highlight?: boolean;
 	header?: import('svelte').Snippet;