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

feat: live-updating timestamps via data-ts attribute

This commit is contained in:
M1 2026-03-16 16:10:04 +04:00
parent 2bfe3a0272
commit 1e95149456
2 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/src/dashboard/app.js
View File

@ -44,14 +44,28 @@ async function api(path, opts = {}) {
} }
// Format relative time // Format relative time
function timeAgo(date) { function formatAgo(ms) {
const s = Math.floor((Date.now() - new Date(date).getTime()) / 1000); const s = Math.floor(ms / 1000);
if (s < 60) return `${s}s ago`; if (s < 60) return `${s}s ago`;
if (s < 3600) return `${Math.floor(s / 60)}m ago`; if (s < 3600) return `${Math.floor(s / 60)}m ago`;
if (s < 86400)return `${Math.floor(s / 3600)}h ago`; if (s < 86400)return `${Math.floor(s / 3600)}h ago`;
return `${Math.floor(s / 86400)}d ago`; return `${Math.floor(s / 86400)}d ago`;
} }
function timeAgo(date) {
const ts = new Date(date).getTime();
const elapsed = Date.now() - ts;
return `<span class="timestamp" data-ts="${ts}">${formatAgo(elapsed)}</span>`;
}
// Tick all live timestamps every second
setInterval(() => {
document.querySelectorAll('.timestamp[data-ts]').forEach(el => {
const elapsed = Date.now() - Number(el.dataset.ts);
el.textContent = formatAgo(elapsed);
});
}, 1000);
// Render a tiny sparkline SVG from latency values // Render a tiny sparkline SVG from latency values
function sparkline(values, width = 120, height = 32) { function sparkline(values, width = 120, height = 32) {
if (!values.length) return ''; if (!values.length) return '';

2
apps/web/src/views/detail.ejs
View File

@ -164,7 +164,7 @@
: '<span class="text-gray-500">—</span>'; : '<span class="text-gray-500">—</span>';
document.getElementById('stat-latency').textContent = avgLatency != null ? `${avgLatency}ms` : '—'; document.getElementById('stat-latency').textContent = avgLatency != null ? `${avgLatency}ms` : '—';
document.getElementById('stat-uptime').textContent = uptime != null ? `${uptime}%` : '—'; document.getElementById('stat-uptime').textContent = uptime != null ? `${uptime}%` : '—';
document.getElementById('stat-last').textContent = lastPing ? timeAgo(lastPing.checked_at) : '—'; document.getElementById('stat-last').innerHTML = lastPing ? timeAgo(lastPing.checked_at) : '—';
// Latency chart // Latency chart
renderLatencyChart(results.slice().reverse()); renderLatencyChart(results.slice().reverse());