ico/pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: SSE just refreshes sparkline/chart from server, no DOM stat patching

Browse Source
This commit is contained in:
M1
2026-03-17 07:03:10 +04:00
parent 749c6f391e
commit 55f9f6d8ed
2 changed files with 10 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/detail.ejs
+3 -62
View File
@@ -265,68 +265,9 @@
}
});
// Track running stats for SSE incremental updates
let _totalPings = <%= pings.length %>, _upPings = <%= upPings.length %>;
let _latencySum = <%= latencies.reduce((a, b) => a + b, 0) %>, _latencyCount = <%= latencies.length %>;
// SSE: live ping updates (minimal DOM patches only — no chart re-render)
watchMonitor(monitorId, (ping) => {
// Stats
_totalPings++;
if (ping.up) _upPings++;
if (ping.latency_ms != null) {
_latencySum += ping.latency_ms;
_latencyCount++;
const avg = Math.round(_latencySum / _latencyCount);
document.getElementById('stat-latency').textContent = avg + 'ms';
}
document.getElementById('stat-last').innerHTML = timeAgo(ping.checked_at);
document.getElementById('stat-status').innerHTML = ping.up
? '<span class="text-green-400">Up</span>'
: '<span class="text-red-400">Down</span>';
document.getElementById('status-dot').innerHTML = ping.up
? '<span class="inline-block w-2.5 h-2.5 rounded-full bg-green-400 mr-2" title="Up"></span>'
: '<span class="inline-block w-2.5 h-2.5 rounded-full bg-red-400 mr-2" title="Down"></span>';
if (_totalPings > 0) {
const pct = Math.round((_upPings / _totalPings) * 100);
document.getElementById('stat-uptime').textContent = pct + '%';
}
// Status history bar — append new segment
const bar = document.getElementById('status-bar');
if (bar) {
const seg = document.createElement('div');
seg.className = `flex-1 ${ping.up ? 'bg-green-500/70' : 'bg-red-500/70'}`;
seg.title = `${new Date(ping.checked_at).toLocaleString()} — ${ping.up ? 'Up' : 'Down'}${ping.latency_ms ? ' ' + ping.latency_ms + 'ms' : ''}`;
bar.prepend(seg);
while (bar.children.length > 60) bar.removeChild(bar.lastChild);
}
// Refresh latency chart (debounced)
scheduleChartRefresh();
// Ping table — prepend plain HTML row
const tbody = document.getElementById('pings-table');
if (tbody) {
const tr = document.createElement('tr');
tr.className = 'hover:bg-gray-800/50';
tr.innerHTML = `
<td class="px-4 py-2">${ping.up ? '<span class="text-green-400">Up</span>' : '<span class="text-red-400">Down</span>'}</td>
<td class="px-4 py-2 text-gray-300">${ping.status_code ?? '—'}</td>
<td class="px-4 py-2 text-gray-300">${ping.latency_ms ? ping.latency_ms + 'ms' : '—'}</td>
<td class="px-4 py-2 text-gray-500">${timeAgo(ping.checked_at)}</td>
<td class="px-4 py-2 text-red-400/70 text-xs truncate max-w-[200px]">${ping.error ? escapeHtml(ping.error) : ''}</td>
`;
tbody.prepend(tr);
while (tbody.children.length > 100) tbody.removeChild(tbody.lastChild);
}
});
// Refresh latency chart from server (debounced — at most once per 5s)
// SSE: on each ping, refresh the chart (debounced — at most once per 5s)
let _chartRefreshTimer = null;
function scheduleChartRefresh() {
watchMonitor(monitorId, () => {
if (_chartRefreshTimer) return;
_chartRefreshTimer = setTimeout(async () => {
_chartRefreshTimer = null;
@@ -335,7 +276,7 @@
if (res.ok) document.getElementById('latency-chart').innerHTML = await res.text();
} catch {}
}, 5000);
}
});
</script>
<%~ include('./partials/foot') %>