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
This commit is contained in:
Harald Eilertsen
2026-03-01 11:47:39 +01:00
parent ba24958b37
commit 1897cd0b1b

View File

@@ -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>