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

attempt fix: cont 2

This commit is contained in:
nate 2026-03-28 16:21:11 +04:00
parent 3dc0757b4a
commit 8831c9c7b4
1 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
apps/web/src/views/home.ejs
View File

@ -85,8 +85,8 @@
'us-west': '#f59e0b', 'us-west': '#f59e0b',
}; };
// Per-monitor, per-region latency tracking for sparkline (mirrors SSR sparklineFromPings) // Per-monitor tracking: regions = {region: [vals]}, timeline = [{region, val}] in arrival order
const sparkData = {}; const sparkData = {}; // mid → { regions: {region: [vals]}, timeline: [{region}] }
// Seed from SSR data-vals and data-region // Seed from SSR data-vals and data-region
document.querySelectorAll('[data-monitor-id]').forEach(card => { document.querySelectorAll('[data-monitor-id]').forEach(card => {
const mid = card.dataset.monitorId; const mid = card.dataset.monitorId;
@ -94,38 +94,35 @@
if (!svg) return; if (!svg) return;
const region = svg.dataset.region || '__none__'; const region = svg.dataset.region || '__none__';
const vals = svg.dataset.vals ? svg.dataset.vals.split(',').map(Number) : []; const vals = svg.dataset.vals ? svg.dataset.vals.split(',').map(Number) : [];
sparkData[mid] = {}; sparkData[mid] = {
sparkData[mid][region] = vals; regions: { [region]: vals },
timeline: vals.map(() => region),
};
}); });
function getBestRegion(monitorId) { function getBestRegion(monitorId) {
const regions = sparkData[monitorId] || {}; const data = sparkData[monitorId];
// Only consider regions that appear in the 3 most recent pings overall if (!data || !data.timeline.length) return { region: '__none__', latest: null };
// sparkData stores vals per region in chronological order; build a merged timeline
const timeline = [];
for (const [region, vals] of Object.entries(regions)) {
for (const val of vals) timeline.push({ region, val });
}
if (!timeline.length) return { region: '__none__', latest: null };
const recentRegions = new Set(timeline.slice(-3).map(p => p.region)); // Only consider regions present in the 3 most recent pings
const recentRegions = new Set(data.timeline.slice(-3));
let bestRegion = '__none__', bestAvg = Infinity; let bestRegion = '__none__', bestAvg = Infinity;
for (const [region, vals] of Object.entries(regions)) { for (const [region, vals] of Object.entries(data.regions)) {
if (!recentRegions.has(region) || !vals.length) continue; if (!recentRegions.has(region) || !vals.length) continue;
const recent = vals.slice(-3); const recent = vals.slice(-3);
const avg = recent.reduce((a, b) => a + b, 0) / recent.length; const avg = recent.reduce((a, b) => a + b, 0) / recent.length;
if (avg < bestAvg) { bestAvg = avg; bestRegion = region; } if (avg < bestAvg) { bestAvg = avg; bestRegion = region; }
} }
const vals = regions[bestRegion] || []; const vals = data.regions[bestRegion] || [];
const latest = vals.length ? vals[vals.length - 1] : null; const latest = vals.length ? vals[vals.length - 1] : null;
return { region: bestRegion, latest }; return { region: bestRegion, latest };
} }
function redrawSparkline(card, monitorId) { function redrawSparkline(card, monitorId) {
const { region: bestRegion } = getBestRegion(monitorId); const { region: bestRegion } = getBestRegion(monitorId);
const vals = (sparkData[monitorId] || {})[bestRegion]; const vals = (sparkData[monitorId]?.regions || {})[bestRegion];
if (!vals || !vals.length) return; if (!vals || !vals.length) return;
const color = REGION_COLORS[bestRegion] || '#60a5fa'; const color = REGION_COLORS[bestRegion] || '#60a5fa';
const W = 120, H = 32; const W = 120, H = 32;
@ -156,12 +153,13 @@
if (ping.latency_ms != null) { if (ping.latency_ms != null) {
const mid = ping.monitor_id; const mid = ping.monitor_id;
const region = ping.region || '__none__'; const region = ping.region || '__none__';
if (!sparkData[mid]) sparkData[mid] = {}; if (!sparkData[mid]) sparkData[mid] = { regions: {}, timeline: [] };
if (!sparkData[mid][region]) sparkData[mid][region] = []; if (!sparkData[mid].regions[region]) sparkData[mid].regions[region] = [];
sparkData[mid][region].push(ping.latency_ms); sparkData[mid].regions[region].push(ping.latency_ms);
if (sparkData[mid][region].length > 20) sparkData[mid][region].shift(); sparkData[mid].timeline.push(region);
if (sparkData[mid].regions[region].length > 20) sparkData[mid].regions[region].shift();
if (sparkData[mid].timeline.length > 40) sparkData[mid].timeline.shift();
redrawSparkline(card, mid); redrawSparkline(card, mid);
// Show best region's latest latency
const { latest } = getBestRegion(mid); const { latest } = getBestRegion(mid);
if (latest != null) card.querySelector('.stat-latency').textContent = latest + 'ms'; if (latest != null) card.querySelector('.stat-latency').textContent = latest + 'ms';
} }