Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin/system): clear the "no samples" overlay once live data arrives

Browse Source 
The metric detail page showed the empty overlay ("No samples in this
range yet — check back in a minute") whenever the initial history fetch
returned zero points, but nothing ever hid it again. Live ticks then
pushed samples in, drew the chart and filled the now/peak/avg/min stats
— while the overlay stayed up, contradicting the visible data.

Make _renderChart the single authority for the overlay: hidden whenever
there are points, shown only when there are none. Live data clears it as
soon as the first sample lands; switching to a genuinely empty range
brings it back.

Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 16:46:23 +01:00
parent 284356228b
commit b7679bb384
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
containers/libreportal/frontend/js/components/admin/system-metric-page.js
View File

@ -203,7 +203,6 @@ class SystemMetricPage {
this.points = [];
}
if (loading) loading.hidden = true;
if (this.points.length === 0 && empty) empty.hidden = false;
this._renderChart();
this._renderStats();
this._renderFootMeta();
@ -307,7 +306,17 @@ class SystemMetricPage {
svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
svg.setAttribute('width', W);
svg.setAttribute('height', H);
if (!this.points.length) { svg.innerHTML = ''; return; }
// Single source of truth for the empty overlay: it tracks whether we
// actually have points. Without this the "no samples" message, shown
// by _loadRange when history came back empty, never cleared once live
// ticks started filling the chart + stats — a confusing contradiction.
const empty = root.querySelector('.sys-detail-empty');
if (!this.points.length) {
svg.innerHTML = '';
if (empty) empty.hidden = false;
return;
}
if (empty) empty.hidden = true;
const padL = 64, padR = 24, padT = 18, padB = 36;
const innerW = Math.max(1, W - padL - padR);
const innerH = Math.max(1, H - padT - padB);