bvandeusenandClaude Opus 5.5
b8f73270e7
The dashboard's host widgets took 18-60 s. Every "latest reading" query (hosts overview, host-agent fleet, host page, vitals, SNMP, MCP get_host) searched plugin_metrics for the newest row per metric. Postgres has no skip scan, so each one read every raw sample in the 7-day window. - plugin_metric_latest: one row per (source, resource, metric). record_metrics upserts it in the same transaction, moving forward only and in sorted key order. Migration 0030 seeds it by stepping the existing index. - Retention drops a latest row once its sample leaves the raw window, so a resource that stopped reporting disappears when its history does, as before. Renames carry it along. - A quiet host keeps its last values, marked stale. A time-bounded query would have shown it as missing. - Vitals sparklines span the 6 h they claim, averaged in SQL to ~120 points, instead of fetching 6 h raw and drawing the last 120 samples. - Dashboard and share-view cells: "Loading…" until the first answer; a 20 s deadline per fetch; "Couldn't load (why)" with Retry now and an automatic retry for cells that don't poll; "as of HH:MM" in the header, and "couldn't refresh · as of" when a refresh fails over shown data. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
91 lines
3.2 KiB
JavaScript
91 lines
3.2 KiB
JavaScript
/* Dashboard widget cells: say when a cell is loading, when it could not load,
|
|
and how fresh what it shows is (#5208).
|
|
|
|
Each .dash-cell-body is an htmx target with a request deadline
|
|
(hx-request timeout), so every fetch ends in a swap or one of the error
|
|
events below. A cell that polls keeps polling through htmx's own `every`
|
|
trigger; a cell that loads once is retried here, re-armed from the failure
|
|
handler of each attempt, so a failed retry arms the next one. */
|
|
(function () {
|
|
var RETRY_SECONDS = 30;
|
|
|
|
function hhmm(d) {
|
|
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
function asofOf(cell) {
|
|
var box = cell.closest('.grid-stack-item-content, .dash-cell');
|
|
return box ? box.querySelector('.widget-asof') : null;
|
|
}
|
|
|
|
function isCell(el) {
|
|
return el && el.classList && el.classList.contains('dash-cell-body');
|
|
}
|
|
|
|
function scheduleRetry(cell) {
|
|
clearTimeout(cell._retry);
|
|
if (cell.dataset.poll === '1') return; // its own poll is the retry
|
|
cell._retry = setTimeout(function () {
|
|
htmx.trigger(cell, 'retry');
|
|
}, RETRY_SECONDS * 1000);
|
|
}
|
|
|
|
function failed(cell, why) {
|
|
var asof = asofOf(cell);
|
|
var when = cell.dataset.loadedAt ? new Date(+cell.dataset.loadedAt) : null;
|
|
if (when) {
|
|
// Keep what it showed; say it is no longer current.
|
|
if (asof) {
|
|
asof.textContent = "couldn't refresh · as of " + hhmm(when);
|
|
asof.classList.add('widget-asof-failed');
|
|
asof.title = why;
|
|
}
|
|
} else {
|
|
var retryLine = cell.dataset.poll === '1'
|
|
? 'Trying again with the next refresh.'
|
|
: 'Trying again in ' + RETRY_SECONDS + 's.';
|
|
cell.innerHTML = '';
|
|
var box = document.createElement('div');
|
|
box.className = 'cell-state cell-state-failed';
|
|
var line = document.createElement('div');
|
|
line.textContent = "Couldn't load this widget (" + why + '). ' + retryLine;
|
|
var btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.className = 'btn btn-sm';
|
|
btn.textContent = 'Retry now';
|
|
btn.addEventListener('click', function () {
|
|
clearTimeout(cell._retry);
|
|
htmx.trigger(cell, 'retry');
|
|
});
|
|
box.appendChild(line);
|
|
box.appendChild(btn);
|
|
cell.appendChild(box);
|
|
}
|
|
scheduleRetry(cell);
|
|
}
|
|
|
|
document.body.addEventListener('htmx:afterSwap', function (e) {
|
|
var cell = e.detail.target;
|
|
if (!isCell(cell)) return;
|
|
clearTimeout(cell._retry);
|
|
var now = new Date();
|
|
cell.dataset.loadedAt = String(now.getTime());
|
|
var asof = asofOf(cell);
|
|
if (asof) {
|
|
asof.textContent = 'as of ' + hhmm(now);
|
|
asof.classList.remove('widget-asof-failed');
|
|
asof.title = 'Loaded ' + now.toLocaleString();
|
|
}
|
|
});
|
|
|
|
document.body.addEventListener('htmx:responseError', function (e) {
|
|
if (isCell(e.detail.target)) failed(e.detail.target, 'HTTP ' + e.detail.xhr.status);
|
|
});
|
|
document.body.addEventListener('htmx:sendError', function (e) {
|
|
if (isCell(e.detail.target)) failed(e.detail.target, 'no connection');
|
|
});
|
|
document.body.addEventListener('htmx:timeout', function (e) {
|
|
if (isCell(e.detail.target)) failed(e.detail.target, 'timed out');
|
|
});
|
|
})();
|