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

fix: make status toolbar update in real time

This commit is contained in:
nate 2026-03-19 15:32:50 +04:00
parent 4cec734d63
commit 2462f1e8ee
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -472,10 +472,11 @@
// ── Status bar hover tooltip ────────────────────────────────────── // ── Status bar hover tooltip ──────────────────────────────────────
const statusBar = document.getElementById('status-bar'); const statusBar = document.getElementById('status-bar');
const statusTooltip = document.getElementById('status-tooltip'); const statusTooltip = document.getElementById('status-tooltip');
let _hoveredSeg = null;
statusBar.addEventListener('mousemove', (e) => { function updateStatusTooltip() {
const seg = e.target.closest('[data-run]'); const seg = _hoveredSeg;
if (!seg) { statusTooltip.classList.add('hidden'); return; } if (!seg || !seg.parentElement) { statusTooltip.classList.add('hidden'); _hoveredSeg = null; return; }
const up = parseInt(seg.dataset.up || '0'); const up = parseInt(seg.dataset.up || '0');
const down = parseInt(seg.dataset.down || '0'); const down = parseInt(seg.dataset.down || '0');
@ -493,7 +494,6 @@
html += `<div class="flex items-center justify-between gap-4 mb-1"><span>Status</span>${statusLabel}</div>`; html += `<div class="flex items-center justify-between gap-4 mb-1"><span>Status</span>${statusLabel}</div>`;
html += `<div class="flex items-center justify-between gap-4"><span class="text-gray-500">Uptime</span><span class="text-gray-200 font-mono">${uptimePct}%</span></div>`; html += `<div class="flex items-center justify-between gap-4"><span class="text-gray-500">Uptime</span><span class="text-gray-200 font-mono">${uptimePct}%</span></div>`;
// Region breakdown
let regions = []; let regions = [];
try { regions = JSON.parse(seg.dataset.regions || '[]'); } catch {} try { regions = JSON.parse(seg.dataset.regions || '[]'); } catch {}
if (regions.length > 0) { if (regions.length > 0) {
@ -514,7 +514,6 @@
statusTooltip.innerHTML = html; statusTooltip.innerHTML = html;
statusTooltip.classList.remove('hidden'); statusTooltip.classList.remove('hidden');
// Position horizontally centered on the segment
const barRect = statusBar.getBoundingClientRect(); const barRect = statusBar.getBoundingClientRect();
const segRect = seg.getBoundingClientRect(); const segRect = seg.getBoundingClientRect();
const segCenter = segRect.left + segRect.width / 2 - barRect.left; const segCenter = segRect.left + segRect.width / 2 - barRect.left;
@ -523,9 +522,17 @@
if (left < 0) left = 0; if (left < 0) left = 0;
if (left + tw > barRect.width) left = barRect.width - tw; if (left + tw > barRect.width) left = barRect.width - tw;
statusTooltip.style.left = left + 'px'; statusTooltip.style.left = left + 'px';
}
statusBar.addEventListener('mousemove', (e) => {
const seg = e.target.closest('[data-run]');
if (!seg) { statusTooltip.classList.add('hidden'); _hoveredSeg = null; return; }
_hoveredSeg = seg;
updateStatusTooltip();
}); });
statusBar.addEventListener('mouseleave', () => { statusBar.addEventListener('mouseleave', () => {
_hoveredSeg = null;
statusTooltip.classList.add('hidden'); statusTooltip.classList.add('hidden');
}); });
@ -591,6 +598,7 @@
bar.appendChild(seg); bar.appendChild(seg);
while (bar.children.length > 60) bar.removeChild(bar.firstChild); while (bar.children.length > 60) bar.removeChild(bar.firstChild);
} }
updateStatusTooltip();
} }
// Pings table — prepend row, cap at 100 // Pings table — prepend row, cap at 100