From 1897cd0b1b1cffd88bc274a5be4b5d78b2bf6f17 Mon Sep 17 00:00:00 2001
From: Harald Eilertsen <haraldei@anduin.net>
Date: Sun, 1 Mar 2026 11:47:39 +0100
Subject: [PATCH] Make system status widget a bit more snappy

Fetch the initial data when the widget loads, and then update every five
sec after that. Also better indication of uninitialized values.

Project......: Performance Profiling
Sponsored-by.: NLnet NGI0 Commons Fund
---
 view/tpl/system_status_widget.tpl | 73 +++++++++++++++++--------------
 1 file changed, 41 insertions(+), 32 deletions(-)

diff --git a/view/tpl/system_status_widget.tpl b/view/tpl/system_status_widget.tpl
index 4381b9f08..c618e56ac 100644
--- a/view/tpl/system_status_widget.tpl
+++ b/view/tpl/system_status_widget.tpl
@@ -8,7 +8,7 @@
 			{{if $id != 'ts'}}
 			<tr>
 				<td id="perfstat-{{$id}}-label" class="perfstat-label">{{$labels.$id|escape}}:</td>
-				<td id="perfstat-{{$id}}-value" class="perfstat-value">{{$item|escape}}</td>
+				<td id="perfstat-{{$id}}-value" class="perfstat-value">…</td>
 			</tr>
 			{{/if}}
 		{{/foreach}}
@@ -16,40 +16,49 @@
 	</div>
 </div>
 <script>
-	status_update_ts = 0;
-	status_update_last_q = 0;
+	status_update_monitor = {
+		last_ts: 0,
+		last_q: 0,
 
-	setInterval(() => {
-		fetch('/perfstats', {
-			headers: {
-				"Accept": "application/json",
-			},
-			credentials: "include",
-		})
-		.then((response) => response.json())
-		.then((json) => {
-			for (const item in json) {
-				element = document.getElementById(`perfstat-${item}-value`);
-				if (element) {
-					if (item === "loadavg") {
-						element.innerText = json['loadavg']
-							.map((v) => v.toPrecision(3))
-							.join(" / ");
-					} else if (item === "dbqueries") {
-						if (status_update_ts !== 0) {
-							let dt = json['ts'] - status_update_ts;
-							let dq = json['dbqueries'] - status_update_last_q;
+		updateStatus: function () {
+			fetch('/perfstats', {
+				headers: {
+					"Accept": "application/json",
+				},
+				credentials: "include",
+			})
+			.then((response) => response.json())
+			.then((json) => {
+				for (const item in json) {
+					element = document.getElementById(`perfstat-${item}-value`);
+					if (element) {
+						if (item === "loadavg") {
+							element.innerText = json['loadavg']
+								.map((v) => v.toPrecision(3))
+								.join(" / ");
+						} else if (item === "dbqueries") {
+							if (this.last_ts !== 0) {
+								let dt = json['ts'] - this.last_ts;
+								let dq = json['dbqueries'] - this.last_q;
 
-							element.innerText = dq / dt;
+								element.innerText = dq / dt;
+							}
+
+							this.last_ts = json['ts'];
+							this.last_q = json['dbqueries'];
+						} else if (item !== 'ts') {
+							element.innerText = json[item];
 						}
-
-						status_update_ts = json['ts'];
-						status_update_last_q = json['dbqueries'];
-					} else if (item !== 'ts') {
-						element.innerText = json[item];
 					}
 				}
-			}
-		});
-	}, 5000);
+			});
+		},
+
+		start: function() {
+			this.updateStatus();
+			setInterval(() => this.updateStatus(), 5000);
+		}
+	}
+
+	status_update_monitor.start();
 </script>