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

attempt fix: cont

This commit is contained in:
nate 2026-03-28 16:17:15 +04:00
parent 8791cdc509
commit 3dc0757b4a
3 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/routes/dashboard.ts
View File

@ -3,7 +3,7 @@ import { Eta } from "eta";
import { resolve } from "path";
import { resolveKey } from "./auth";
import sql from "../db";
import { sparkline, sparklineFromPings } from "../utils/sparkline";
import { sparkline, sparklineFromPings, pickBestRegion } from "../utils/sparkline";
import { createHash } from "crypto";
// Generate a cache-buster hash from the CSS file content at startup
@ -138,7 +138,7 @@ function escapeHtmlSSR(str: string): string {
}
export function html(template: string, data: Record<string, unknown> = {}) {
return new Response(eta.render(template, { ...data, timeAgoSSR, sparklineSSR, latencyChartSSR, escapeHtmlSSR, cssHash, jsHash }), {
return new Response(eta.render(template, { ...data, timeAgoSSR, sparklineSSR, pickBestRegion, latencyChartSSR, escapeHtmlSSR, cssHash, jsHash }), {
headers: { "content-type": "text/html; charset=utf-8" },
});
}

43
apps/web/src/utils/sparkline.ts
View File

@ -12,33 +12,48 @@ export function sparkline(values: number[], width = 120, height = 32, color = '#
return `<svg width="${width}" height="${height}" class="inline-block" data-vals="${values.join(',')}" data-region="${region}"><polyline points="${points}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
}
// Given pings with region+latency, pick the region with the lowest avg latency
// and return its sparkline in that region's color.
export function sparklineFromPings(pings: Array<{latency_ms?: number|null, region?: string|null}>, width = 120, height = 32): string {
const COLORS: Record<string, string> = {
const REGION_COLORS: Record<string, string> = {
'eu-central': '#3b82f6',
'us-west': '#f59e0b',
};
};
// Group by region
// Pick the best region: the one with the lowest avg latency across its last 3 pings.
// Only considers regions that have at least one ping in the most recent 3 pings overall,
// so stale regions that haven't reported recently are excluded.
export function pickBestRegion(pings: Array<{latency_ms?: number|null, region?: string|null}>): { region: string, values: number[], latest: number | null } {
const withLatency = pings.filter(p => p.latency_ms != null);
if (!withLatency.length) return { region: '__none__', values: [], latest: null };
// Group all pings by region
const byRegion: Record<string, number[]> = {};
for (const p of pings) {
if (p.latency_ms == null) continue;
for (const p of withLatency) {
const key = p.region || '__none__';
if (!byRegion[key]) byRegion[key] = [];
byRegion[key].push(p.latency_ms);
byRegion[key].push(p.latency_ms!);
}
if (!Object.keys(byRegion).length) return '';
// Only consider regions that appear in the 3 most recent pings
const recentRegions = new Set(
withLatency.slice(-3).map(p => p.region || '__none__')
);
// Pick region with lowest average latency
let bestRegion = '__none__';
let bestAvg = Infinity;
for (const [region, vals] of Object.entries(byRegion)) {
const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
if (!recentRegions.has(region)) continue;
const recent = vals.slice(-3);
const avg = recent.reduce((a, b) => a + b, 0) / recent.length;
if (avg < bestAvg) { bestAvg = avg; bestRegion = region; }
}
const color = COLORS[bestRegion] || '#60a5fa';
return sparkline(byRegion[bestRegion], width, height, color, bestRegion);
const values = byRegion[bestRegion] || [];
return { region: bestRegion, values, latest: values.length ? values[values.length - 1] : null };
}
// Given pings with region+latency, pick the best region and render its sparkline.
export function sparklineFromPings(pings: Array<{latency_ms?: number|null, region?: string|null}>, width = 120, height = 32): string {
const { region, values } = pickBestRegion(pings);
if (!values.length) return '';
const color = REGION_COLORS[region] || '#60a5fa';
return sparkline(values, width, height, color, region);
}

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

@ -28,22 +28,9 @@
</div>
<% } else { %>
<% it.monitors.forEach(function(m) {
const latencies = (m.pings || []).filter(p => p.latency_ms != null);
// Pick the region with the lowest avg latency (same logic as sparklineFromPings)
// Pick best region from the 3 most recent pings overall (not per region)
const recentPings = latencies.slice(-3);
const recentRegions = {};
for (const p of recentPings) {
const key = p.region || '__none__';
if (!recentRegions[key]) recentRegions[key] = [];
recentRegions[key].push(p.latency_ms);
}
let bestRegion = '__none__', bestAvg = Infinity;
for (const [region, vals] of Object.entries(recentRegions)) {
const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
if (avg < bestAvg) { bestAvg = avg; bestRegion = region; }
}
const avgLatency = latencies.length ? latencies[latencies.length - 1].latency_ms : null;
const pingsForSparkline = (m.pings || []).filter(p => p.latency_ms != null);
const best = it.pickBestRegion(pingsForSparkline);
const avgLatency = best.latest;
%>
<a href="/dashboard/monitors/<%= m.id %>" data-monitor-id="<%= m.id %>" class="block monitor-card rounded-xl p-4 group">
<div class="flex items-center justify-between">
@ -55,7 +42,7 @@
</div>
</div>
<div class="flex items-center gap-6 shrink-0 ml-4">
<div class="hidden sm:block stat-sparkline" style="width:120px;height:32px"><%~ it.sparklineSSR(latencies) %></div>
<div class="hidden sm:block stat-sparkline" style="width:120px;height:32px"><%~ it.sparklineSSR(pingsForSparkline) %></div>
<div class="text-right" style="width:72px">
<div class="text-sm text-gray-300 stat-latency"><%= avgLatency != null ? avgLatency + 'ms' : '—' %></div>
<div class="text-xs text-gray-500 stat-last"><%~ m.last_ping ? it.timeAgoSSR(m.last_ping.checked_at) : 'no pings' %></div>
@ -113,24 +100,26 @@
function getBestRegion(monitorId) {
const regions = sparkData[monitorId] || {};
// Collect all pings with timestamps to find the 3 most recent overall
const all = [];
// Only consider regions that appear in the 3 most recent pings overall
// sparkData stores vals per region in chronological order; build a merged timeline
const timeline = [];
for (const [region, vals] of Object.entries(regions)) {
for (let i = 0; i < vals.length; i++) all.push({ region, val: vals[i], idx: i });
for (const val of vals) timeline.push({ region, val });
}
// Use the last 3 entries (vals are appended in order)
const recent = all.slice(-3);
if (!timeline.length) return { region: '__none__', latest: null };
const recentRegions = new Set(timeline.slice(-3).map(p => p.region));
let bestRegion = '__none__', bestAvg = Infinity;
const byRegion = {};
for (const p of recent) {
if (!byRegion[p.region]) byRegion[p.region] = [];
byRegion[p.region].push(p.val);
}
for (const [region, vals] of Object.entries(byRegion)) {
const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
for (const [region, vals] of Object.entries(regions)) {
if (!recentRegions.has(region) || !vals.length) continue;
const recent = vals.slice(-3);
const avg = recent.reduce((a, b) => a + b, 0) / recent.length;
if (avg < bestAvg) { bestAvg = avg; bestRegion = region; }
}
const latest = all.length ? all[all.length - 1].val : null;
const vals = regions[bestRegion] || [];
const latest = vals.length ? vals[vals.length - 1] : null;
return { region: bestRegion, latest };
}