1263 lines
48 KiB
JavaScript
1263 lines
48 KiB
JavaScript
import "./styles.css";
|
|
|
|
// --- Configuration -----------------------------------------------------------
|
|
|
|
// Timing, axis labels, and display constants. Latency above maxLatency is
|
|
// clamped to "unreachable". The sparkline Y-axis is capped at
|
|
// graphMaxLatency — values above it pin to the top of the chart but still
|
|
// display their real value in the latency figure. The history buffer holds
|
|
// maxHistoryPoints samples (historyDuration / updateInterval).
|
|
const CONFIG = {
|
|
updateInterval: 3000,
|
|
maxHistoryPoints: 100,
|
|
get historyDuration() {
|
|
return (this.maxHistoryPoints * this.updateInterval) / 1000;
|
|
},
|
|
get requestTimeout() {
|
|
return Math.min(this.updateInterval - 100, 3000);
|
|
},
|
|
get maxLatency() {
|
|
return this.requestTimeout;
|
|
},
|
|
graphMaxLatency: 1000,
|
|
yAxisTicks: [0, 250, 500, 750, 1000],
|
|
get xAxisTicks() {
|
|
const d = this.historyDuration;
|
|
return [0, 1, 2, 3, 4, 5].map((i) => Math.round((d * i) / 5));
|
|
},
|
|
canvasHeight: 96,
|
|
};
|
|
|
|
// WAN endpoints to monitor. These are used for the aggregate health/stats
|
|
// display (min/max/avg). Ordered: personal, LLM APIs, big-3 cloud, then
|
|
// CDN/hosting/other.
|
|
const WAN_HOSTS = [
|
|
{ name: "datavi.be", url: "https://datavi.be" },
|
|
{ name: "Anthropic API", url: "https://api.anthropic.com" },
|
|
{ name: "OpenAI API", url: "https://api.openai.com" },
|
|
{ name: "AWS Console", url: "https://console.aws.amazon.com" },
|
|
{ name: "Google Cloud Console", url: "https://console.cloud.google.com" },
|
|
{ name: "Microsoft Azure", url: "https://portal.azure.com" },
|
|
{ name: "Cloudflare", url: "https://www.cloudflare.com" },
|
|
{ name: "Fastly CDN", url: "https://www.fastly.com" },
|
|
{ name: "Akamai", url: "https://www.akamai.com" },
|
|
{ name: "Google", url: "https://www.google.com" },
|
|
{ name: "GitHub", url: "https://github.com" },
|
|
{ name: "B2", url: "https://api.backblazeb2.com" },
|
|
{
|
|
name: "S3 af-south-1 (Cape Town)",
|
|
url: "https://s3.af-south-1.amazonaws.com",
|
|
},
|
|
{
|
|
name: "S3 eu-west-2 (London)",
|
|
url: "https://s3.eu-west-2.amazonaws.com",
|
|
},
|
|
{
|
|
name: "S3 me-south-1 (Bahrain)",
|
|
url: "https://s3.me-south-1.amazonaws.com",
|
|
},
|
|
{
|
|
name: "S3 ap-northeast-1 (Tokyo)",
|
|
url: "https://s3.ap-northeast-1.amazonaws.com",
|
|
},
|
|
{
|
|
name: "S3 ap-southeast-1 (Singapore)",
|
|
url: "https://s3.ap-southeast-1.amazonaws.com",
|
|
},
|
|
{
|
|
name: "S3 ap-southeast-2 (Sydney)",
|
|
url: "https://s3.ap-southeast-2.amazonaws.com",
|
|
},
|
|
{
|
|
name: "S3 us-west-2 (Oregon)",
|
|
url: "https://s3.us-west-2.amazonaws.com",
|
|
},
|
|
{
|
|
name: "S3 sa-east-1 (São Paulo)",
|
|
url: "https://s3.sa-east-1.amazonaws.com",
|
|
},
|
|
// Hetzner regional speed test servers — genuine per-DC endpoints
|
|
{
|
|
name: "Hetzner nbg1 (Nuremberg DE)",
|
|
url: "https://nbg1-speed.hetzner.com",
|
|
},
|
|
{
|
|
name: "Hetzner fsn1 (Falkenstein DE)",
|
|
url: "https://fsn1-speed.hetzner.com",
|
|
},
|
|
{
|
|
name: "Hetzner hel1 (Helsinki FI)",
|
|
url: "https://hel1-speed.hetzner.com",
|
|
},
|
|
{
|
|
name: "Hetzner ash (Ashburn VA-US)",
|
|
url: "https://ash-speed.hetzner.com",
|
|
},
|
|
{
|
|
name: "Hetzner hil (Hillsboro OR-US)",
|
|
url: "https://hil-speed.hetzner.com",
|
|
},
|
|
{
|
|
name: "Hetzner sin (Singapore SG)",
|
|
url: "https://sin-speed.hetzner.com",
|
|
},
|
|
];
|
|
|
|
// --- Debug Log ---------------------------------------------------------------
|
|
|
|
const debugLog = [];
|
|
|
|
const log = (() => {
|
|
function append(level, message) {
|
|
debugLog.push({ timestamp: new Date(), level, message });
|
|
if (debugLog.length > 1000) debugLog.splice(0, debugLog.length - 1000);
|
|
const panel = document.getElementById("debug-panel");
|
|
if (panel && !panel.classList.contains("hidden")) renderDebugLog();
|
|
}
|
|
return {
|
|
error: (msg) => append("error", msg),
|
|
warning: (msg) => append("warning", msg),
|
|
notice: (msg) => append("notice", msg),
|
|
info: (msg) => append("info", msg),
|
|
debug: (msg) => append("debug", msg),
|
|
};
|
|
})();
|
|
|
|
// The cable modem / CPE upstream of the local gateway — always monitored.
|
|
const LOCAL_CPE = { name: "Local CPE", url: "http://192.168.100.1" };
|
|
|
|
// Common default gateway addresses. On startup we probe each one and use
|
|
// whichever responds first as the "Local Gateway" monitor target.
|
|
//
|
|
// NOTE: Modern browsers enforce Private Network Access (PNA) restrictions
|
|
// that block pages served from public origins from making requests to
|
|
// RFC1918 addresses. These local targets will likely only work when
|
|
// NetWatch is served from localhost or another private address.
|
|
const GATEWAY_CANDIDATES = [
|
|
"http://192.168.1.1",
|
|
"http://192.168.0.1",
|
|
"http://192.168.8.1",
|
|
"http://10.0.0.1",
|
|
];
|
|
|
|
// --- Formatting Helpers ------------------------------------------------------
|
|
|
|
function formatUTCTimestamp(date) {
|
|
const p = (n) => String(n).padStart(2, "0");
|
|
return `[${date.getUTCFullYear()}-${p(date.getUTCMonth() + 1)}-${p(date.getUTCDate())} ${p(date.getUTCHours())}:${p(date.getUTCMinutes())}:${p(date.getUTCSeconds())}]`;
|
|
}
|
|
|
|
// --- Duration Formatting -----------------------------------------------------
|
|
|
|
function humanDuration(seconds) {
|
|
const h = Math.floor(seconds / 3600);
|
|
const m = Math.floor((seconds % 3600) / 60);
|
|
const s = seconds % 60;
|
|
let result = "";
|
|
if (h) result += `${h}h`;
|
|
if (m) result += `${m}m`;
|
|
if (s || !result) result += `${s}s`;
|
|
return result;
|
|
}
|
|
|
|
// --- Gateway Detection -------------------------------------------------------
|
|
|
|
// Probe each gateway candidate with a short timeout. Returns the first one
|
|
// that responds, or null if none do. We race them all in parallel and take
|
|
// whichever wins.
|
|
async function detectGateway() {
|
|
try {
|
|
const result = await Promise.any(
|
|
GATEWAY_CANDIDATES.map(async (url) => {
|
|
const controller = new AbortController();
|
|
const timeoutId = setTimeout(() => controller.abort(), 1500);
|
|
try {
|
|
await fetch(url, {
|
|
method: "GET",
|
|
mode: "no-cors",
|
|
cache: "no-store",
|
|
signal: controller.signal,
|
|
});
|
|
clearTimeout(timeoutId);
|
|
return { name: "Local Gateway", url };
|
|
} catch {
|
|
clearTimeout(timeoutId);
|
|
throw new Error("no response");
|
|
}
|
|
}),
|
|
);
|
|
return result;
|
|
} catch {
|
|
log.error("All gateway candidates failed");
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// --- App State ---------------------------------------------------------------
|
|
|
|
class HostState {
|
|
constructor(host, pinned = false) {
|
|
this.name = host.name;
|
|
this.url = host.url;
|
|
this.history = []; // { timestamp, latency, paused }
|
|
this.lastLatency = null;
|
|
this.status = "pending"; // 'online' | 'offline' | 'error' | 'pending'
|
|
this.pinned = pinned;
|
|
}
|
|
|
|
pushSample(timestamp, result) {
|
|
this.history.push({
|
|
timestamp,
|
|
latency: result.latency,
|
|
error: result.error,
|
|
});
|
|
this._trim();
|
|
this.lastLatency = result.latency;
|
|
if (result.error === "timeout") this.status = "error";
|
|
else if (result.error) this.status = "offline";
|
|
else this.status = "online";
|
|
}
|
|
|
|
pushPaused(timestamp) {
|
|
this.history.push({ timestamp, latency: null, paused: true });
|
|
this._trim();
|
|
}
|
|
|
|
averageLatency() {
|
|
const valid = this.history.filter((p) => p.latency !== null);
|
|
if (valid.length === 0) return null;
|
|
return Math.round(
|
|
valid.reduce((s, p) => s + p.latency, 0) / valid.length,
|
|
);
|
|
}
|
|
|
|
minLatency() {
|
|
const valid = this.history.filter((p) => p.latency !== null);
|
|
if (valid.length === 0) return null;
|
|
return Math.min(...valid.map((p) => p.latency));
|
|
}
|
|
|
|
maxLatency() {
|
|
const valid = this.history.filter((p) => p.latency !== null);
|
|
if (valid.length === 0) return null;
|
|
return Math.max(...valid.map((p) => p.latency));
|
|
}
|
|
|
|
medianLatency() {
|
|
const sorted = this.history
|
|
.filter((p) => p.latency !== null)
|
|
.map((p) => p.latency)
|
|
.sort((a, b) => a - b);
|
|
if (sorted.length === 0) return null;
|
|
const mid = Math.floor(sorted.length / 2);
|
|
return sorted.length % 2
|
|
? sorted[mid]
|
|
: Math.round((sorted[mid - 1] + sorted[mid]) / 2);
|
|
}
|
|
|
|
_trim() {
|
|
while (this.history.length > CONFIG.maxHistoryPoints)
|
|
this.history.shift();
|
|
}
|
|
}
|
|
|
|
class AppState {
|
|
constructor(localHosts) {
|
|
this.wan = WAN_HOSTS.map(
|
|
(h) => new HostState(h, h.name === "datavi.be"),
|
|
);
|
|
this.local = localHosts.map((h) => new HostState(h));
|
|
this.paused = false;
|
|
this.tickCount = 0;
|
|
}
|
|
|
|
get allHosts() {
|
|
return [...this.wan, ...this.local];
|
|
}
|
|
|
|
/** WAN-only stats from latest sample (excludes local) */
|
|
wanStats() {
|
|
const reachable = this.wan.filter((h) => h.lastLatency !== null);
|
|
const latencies = reachable.map((h) => h.lastLatency);
|
|
const total = this.wan.length;
|
|
if (latencies.length === 0)
|
|
return {
|
|
reachable: 0,
|
|
total,
|
|
min: null,
|
|
max: null,
|
|
med: null,
|
|
avg: null,
|
|
};
|
|
const sorted = [...latencies].sort((a, b) => a - b);
|
|
const mid = Math.floor(sorted.length / 2);
|
|
const med =
|
|
sorted.length % 2
|
|
? sorted[mid]
|
|
: Math.round((sorted[mid - 1] + sorted[mid]) / 2);
|
|
return {
|
|
reachable: latencies.length,
|
|
total,
|
|
min: Math.min(...latencies),
|
|
max: Math.max(...latencies),
|
|
med,
|
|
avg: Math.round(
|
|
latencies.reduce((a, b) => a + b, 0) / latencies.length,
|
|
),
|
|
};
|
|
}
|
|
|
|
/** Min/max across all WAN host history (the full history window) */
|
|
wanHistoryStats() {
|
|
let min = Infinity;
|
|
let max = -Infinity;
|
|
for (const host of this.wan) {
|
|
for (const p of host.history) {
|
|
if (p.latency !== null) {
|
|
if (p.latency < min) min = p.latency;
|
|
if (p.latency > max) max = p.latency;
|
|
}
|
|
}
|
|
}
|
|
if (min === Infinity) return { min: null, max: null };
|
|
return { min, max };
|
|
}
|
|
|
|
/** Overall health: "healthy" | "slow" | "degraded" | "offline" */
|
|
healthStatus() {
|
|
const reachable = this.wan.filter((h) => h.status === "online").length;
|
|
const timeouts = this.wan.filter(
|
|
(h) => h.status === "error" || h.status === "offline",
|
|
).length;
|
|
if (timeouts > 10 && reachable <= 4) return "offline";
|
|
if (timeouts > 4) return "degraded";
|
|
const slow = this.wan.filter(
|
|
(h) => h.lastLatency !== null && h.lastLatency > 1000,
|
|
).length;
|
|
if (slow > 3) return "slow";
|
|
return "healthy";
|
|
}
|
|
|
|
/** True when every WAN host is timing out — total connectivity loss */
|
|
isHardOffline() {
|
|
return this.wan.every(
|
|
(h) => h.status === "error" || h.status === "offline",
|
|
);
|
|
}
|
|
}
|
|
|
|
// --- Latency Measurement -----------------------------------------------------
|
|
|
|
async function measureLatency(url) {
|
|
const controller = new AbortController();
|
|
const timeoutId = setTimeout(
|
|
() => controller.abort(),
|
|
CONFIG.requestTimeout,
|
|
);
|
|
|
|
const targetUrl = new URL(url);
|
|
targetUrl.searchParams.set("_cb", Date.now().toString());
|
|
|
|
const start = performance.now();
|
|
|
|
try {
|
|
await fetch(targetUrl.toString(), {
|
|
method: "GET",
|
|
mode: "no-cors",
|
|
cache: "no-store",
|
|
signal: controller.signal,
|
|
});
|
|
const latency = Math.round(performance.now() - start);
|
|
clearTimeout(timeoutId);
|
|
if (latency > CONFIG.maxLatency) {
|
|
log.error(`${url} timeout (${latency}ms > ${CONFIG.maxLatency}ms)`);
|
|
return { latency: null, error: "timeout" };
|
|
}
|
|
return { latency, error: null };
|
|
} catch (err) {
|
|
clearTimeout(timeoutId);
|
|
if (err.name === "AbortError") {
|
|
log.error(`${url} timeout (aborted)`);
|
|
return { latency: null, error: "timeout" };
|
|
}
|
|
log.error(`${url} unreachable`);
|
|
return { latency: null, error: "unreachable" };
|
|
}
|
|
}
|
|
|
|
// --- Color Helpers -----------------------------------------------------------
|
|
|
|
function latencyHex(latency) {
|
|
if (latency === null) return "#6b7280";
|
|
if (latency < 50) return "#22c55e";
|
|
if (latency < 100) return "#84cc16";
|
|
if (latency < 200) return "#eab308";
|
|
if (latency < 500) return "#f97316";
|
|
return "#ef4444";
|
|
}
|
|
|
|
function latencyClass(latency, status) {
|
|
if (status === "offline" || status === "error" || latency === null)
|
|
return "text-gray-500";
|
|
if (latency < 50) return "text-green-500";
|
|
if (latency < 100) return "text-lime-500";
|
|
if (latency < 200) return "text-yellow-500";
|
|
if (latency < 500) return "text-orange-500";
|
|
return "text-red-500";
|
|
}
|
|
|
|
// --- Sparkline Renderer ------------------------------------------------------
|
|
|
|
class SparklineRenderer {
|
|
static MARGIN = { left: 42, right: 10, top: 5, bottom: 22 };
|
|
|
|
static draw(canvas, history) {
|
|
const ctx = canvas.getContext("2d");
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const w = canvas.width / dpr;
|
|
const h = canvas.height / dpr;
|
|
const m = SparklineRenderer.MARGIN;
|
|
const cw = w - m.left - m.right;
|
|
const ch = h - m.top - m.bottom;
|
|
|
|
ctx.clearRect(0, 0, w, h);
|
|
SparklineRenderer._drawYAxis(ctx, w, h, m, ch);
|
|
SparklineRenderer._drawXAxis(ctx, w, h, m, cw);
|
|
|
|
const len = history.length;
|
|
const pw = cw / (CONFIG.maxHistoryPoints - 1);
|
|
const getX = (i) => m.left + cw - (len - 1 - i) * pw;
|
|
const getY = (lat) =>
|
|
m.top +
|
|
ch -
|
|
(Math.min(lat, CONFIG.graphMaxLatency) / CONFIG.graphMaxLatency) *
|
|
ch;
|
|
|
|
SparklineRenderer._drawErrors(ctx, history, getX, m.top, ch);
|
|
SparklineRenderer._drawLine(ctx, history, getX, getY);
|
|
SparklineRenderer._drawTip(ctx, history, getX, getY);
|
|
}
|
|
|
|
static _drawYAxis(ctx, w, h, m, ch) {
|
|
ctx.font = "300 12px monospace";
|
|
ctx.textAlign = "right";
|
|
ctx.textBaseline = "middle";
|
|
for (const tick of CONFIG.yAxisTicks) {
|
|
const y = m.top + ch - (tick / CONFIG.graphMaxLatency) * ch;
|
|
ctx.strokeStyle = "rgba(255,255,255,0.1)";
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(m.left, y);
|
|
ctx.lineTo(w - m.right, y);
|
|
ctx.stroke();
|
|
ctx.fillStyle = "rgba(255,255,255,0.5)";
|
|
ctx.fillText(`${tick}`, m.left - 4, y);
|
|
}
|
|
}
|
|
|
|
static _drawXAxis(ctx, w, h, m, cw) {
|
|
ctx.textAlign = "center";
|
|
ctx.textBaseline = "top";
|
|
for (const tick of CONFIG.xAxisTicks) {
|
|
const x = m.left + cw - (tick / CONFIG.historyDuration) * cw;
|
|
ctx.fillStyle = "rgba(255,255,255,0.5)";
|
|
ctx.fillText(`-${humanDuration(tick)}`, x, h - m.bottom + 4);
|
|
}
|
|
}
|
|
|
|
static _drawErrors(ctx, history, getX, top, ch) {
|
|
ctx.fillStyle = "rgba(239, 68, 68, 0.2)";
|
|
let inErr = false,
|
|
start = 0;
|
|
for (let i = 0; i < history.length; i++) {
|
|
const p = history[i];
|
|
const x = getX(i);
|
|
// Only real errors, not paused gaps
|
|
const isError = p.latency === null && !p.paused;
|
|
if (isError && !inErr) {
|
|
inErr = true;
|
|
start = x;
|
|
} else if (!isError && inErr) {
|
|
inErr = false;
|
|
ctx.fillRect(start, top, x - start, ch);
|
|
}
|
|
}
|
|
if (inErr)
|
|
ctx.fillRect(start, top, getX(history.length - 1) - start + 5, ch);
|
|
}
|
|
|
|
static _drawLine(ctx, history, getX, getY) {
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = "round";
|
|
ctx.lineJoin = "round";
|
|
let prev = null;
|
|
for (let i = 0; i < history.length; i++) {
|
|
const p = history[i];
|
|
if (p.latency === null) {
|
|
prev = null;
|
|
continue;
|
|
}
|
|
const x = getX(i),
|
|
y = getY(p.latency);
|
|
if (prev) {
|
|
ctx.strokeStyle = latencyHex(p.latency);
|
|
ctx.beginPath();
|
|
ctx.moveTo(prev.x, prev.y);
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
}
|
|
prev = { x, y };
|
|
}
|
|
}
|
|
|
|
static _drawTip(ctx, history, getX, getY) {
|
|
for (let i = history.length - 1; i >= 0; i--) {
|
|
if (history[i].latency !== null) {
|
|
const x = getX(i),
|
|
y = getY(history[i].latency);
|
|
ctx.fillStyle = latencyHex(history[i].latency);
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 3, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
static sizeCanvas(canvas) {
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const rect = canvas.getBoundingClientRect();
|
|
canvas.width = rect.width * dpr;
|
|
canvas.height = CONFIG.canvasHeight * dpr;
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
ctx.scale(dpr, dpr);
|
|
}
|
|
}
|
|
|
|
// --- UI Renderer -------------------------------------------------------------
|
|
|
|
function hostRowHTML(host, index, showPin = true) {
|
|
const pinColor = host.pinned
|
|
? "text-blue-500"
|
|
: "text-gray-600 hover:text-gray-400";
|
|
const pinRotate = host.pinned ? "" : "rotate-45";
|
|
const pinBtn = showPin
|
|
? `<button class="pin-btn flex-shrink-0 ${pinColor} transition-colors" data-pin="${index}" title="Pin to top">
|
|
<svg class="w-4 h-4 ${pinRotate}" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5a.5.5 0 0 1-1 0V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 0 1 5 6.708V2.277a3 3 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354"/>
|
|
</svg>
|
|
</button>`
|
|
: `<div class="flex-shrink-0 w-4 h-4"></div>`;
|
|
return `
|
|
<div class="host-row bg-gray-800/50 rounded-lg p-2 border border-gray-700/50" data-index="${index}">
|
|
<div class="flex items-center gap-4 min-w-0">
|
|
${pinBtn}
|
|
<div class="w-[420px] flex-shrink-0 grid grid-cols-[minmax(0,1fr)_auto] items-center">
|
|
<div class="flex items-center gap-2 min-w-[200px]">
|
|
<div class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: ${latencyHex(null)}"></div>
|
|
<span class="font-medium text-white truncate">${host.name}</span>
|
|
</div>
|
|
<div class="latency-value text-4xl font-bold tabular-nums text-right mt-3" data-host="${index}">
|
|
<span class="text-gray-500">---</span>
|
|
</div>
|
|
<a href="${host.url}" target="_blank" rel="noopener" class="text-xs text-gray-500 truncate block col-span-2 -mt-2">${host.url}</a>
|
|
<div class="status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5" data-host="${index}">waiting...</div>
|
|
</div>
|
|
<div class="flex-grow sparkline-container rounded overflow-hidden border border-gray-700/30">
|
|
<canvas class="sparkline-canvas w-full" data-host="${index}" height="${CONFIG.canvasHeight}"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function wanRowsHTML(wanHosts) {
|
|
const pinnedCount = wanHosts.filter((h) => h.pinned).length;
|
|
const rows = wanHosts.map((h, i) => hostRowHTML(h, i));
|
|
if (pinnedCount > 0 && pinnedCount < wanHosts.length) {
|
|
rows.splice(
|
|
pinnedCount,
|
|
0,
|
|
`<div class="my-9 flex justify-center"><hr class="w-1/2 border-t border-gray-600"></div>`,
|
|
);
|
|
}
|
|
return rows.join("");
|
|
}
|
|
|
|
function buildUI(state) {
|
|
const app = document.getElementById("app");
|
|
app.innerHTML = `
|
|
<div class="mx-auto px-[5%] py-8">
|
|
<header class="mb-8">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h1 class="text-3xl font-bold text-white"><a href="https://git.eeqj.de/sneak/netwatch" target="_blank" rel="noopener" class="underline decoration-dashed decoration-gray-500 underline-offset-4">NetWatch</a> by <a href="https://sneak.berlin" target="_blank" rel="noopener" class="text-blue-400 underline hover:text-blue-300">@sneak</a></h1>
|
|
<div class="flex flex-col items-end gap-2">
|
|
<button id="pause-btn"
|
|
class="flex items-center gap-3 px-6 py-3 bg-gray-800 hover:bg-gray-700 border border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<svg id="pause-icon" class="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
|
|
<rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/>
|
|
</svg>
|
|
<svg id="play-icon" class="w-8 h-8 text-green-400 hidden" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z"/>
|
|
</svg>
|
|
<span id="pause-text" class="text-lg font-semibold text-white">Pause</span>
|
|
</button>
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-gray-400 text-sm">Interval:</label>
|
|
<select id="interval-select" class="bg-gray-800 border border-gray-600 text-white text-sm rounded-lg px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer">
|
|
<option value="1000">1s</option>
|
|
<option value="2000">2s</option>
|
|
<option value="3000" selected>3s</option>
|
|
<option value="5000">5s</option>
|
|
<option value="10000">10s</option>
|
|
<option value="15000">15s</option>
|
|
<option value="30000">30s</option>
|
|
<option value="60000">60s</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-400 text-sm">
|
|
Real-time network latency monitor |
|
|
<span id="update-interval-text" class="text-gray-500">Updates every ${humanDuration(CONFIG.updateInterval / 1000)}</span> |
|
|
<span id="history-duration-text" class="text-gray-500">History: ${humanDuration(CONFIG.historyDuration)}</span> |
|
|
<span id="status-indicator" class="text-green-400">Running</span>
|
|
</p>
|
|
<p class="text-gray-500 text-xs font-mono mt-1">
|
|
<span id="clock-local"></span> | <span id="clock-utc"></span>
|
|
</p>
|
|
<div id="health-box" class="mt-4 p-3 bg-gray-800/70 rounded-lg border border-gray-700/50 font-mono text-sm text-center">
|
|
<span id="health-text" class="text-gray-400">Waiting for data...</span>
|
|
</div>
|
|
<div id="summary" class="mt-2 p-3 bg-gray-800/70 rounded-lg border border-gray-700/50 font-mono text-sm">
|
|
<span class="text-gray-400">Reachable:</span> <span id="summary-reachable" class="text-white">--/--</span>
|
|
<span class="text-gray-600 mx-3">|</span>
|
|
<span class="text-gray-400">Now:</span>
|
|
<span class="text-gray-400"> min </span><span id="summary-min" class="text-green-400">--</span><span id="summary-min-unit" class="text-green-400">ms</span>
|
|
<span class="text-gray-400"> / med </span><span id="summary-med" class="text-blue-400">--</span><span id="summary-med-unit" class="text-blue-400">ms</span>
|
|
<span class="text-gray-400"> / avg </span><span id="summary-avg" class="text-yellow-400">--</span><span id="summary-avg-unit" class="text-yellow-400">ms</span>
|
|
<span class="text-gray-400"> / max </span><span id="summary-max" class="text-red-400">--</span><span id="summary-max-unit" class="text-red-400">ms</span>
|
|
<span class="text-gray-600 mx-3">|</span>
|
|
<span id="summary-duration-label" class="text-gray-400">${humanDuration(CONFIG.historyDuration)}:</span>
|
|
<span class="text-gray-400"> min </span><span id="summary-hmin" class="text-green-400">--</span><span id="summary-hmin-unit" class="text-green-400">ms</span>
|
|
<span class="text-gray-400"> / max </span><span id="summary-hmax" class="text-red-400">--</span><span id="summary-hmax-unit" class="text-red-400">ms</span>
|
|
<span class="text-gray-600 mx-3">|</span>
|
|
<span class="text-gray-400">Checks:</span> <span id="summary-checks" class="text-gray-300">0</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="wan-hosts" class="space-y-4">
|
|
${wanRowsHTML(state.wan)}
|
|
</div>
|
|
|
|
<h2 class="text-gray-500 text-xs uppercase tracking-wide mt-6 mb-3">Local Network</h2>
|
|
<div id="local-hosts" class="space-y-4">
|
|
${state.local.map((h, i) => hostRowHTML(h, state.wan.length + i, false)).join("")}
|
|
</div>
|
|
|
|
<div id="debug-panel" class="hidden mt-6 mb-2">
|
|
<div class="bg-gray-900 border border-gray-700 rounded-lg p-3 font-mono text-xs text-gray-400 h-[1280px] overflow-y-auto" id="debug-log"></div>
|
|
</div>
|
|
|
|
<footer class="mt-8 text-center text-gray-600 text-xs">
|
|
<p>Latency measured via GET requests | IPv4 only | CORS restrictions may affect some measurements</p>
|
|
<p class="mt-2">
|
|
<span class="inline-block w-3 h-3 rounded-full bg-green-500 mr-1 align-middle"></span><50ms
|
|
<span class="inline-block w-3 h-3 rounded-full bg-lime-500 mr-1 ml-3 align-middle"></span><100ms
|
|
<span class="inline-block w-3 h-3 rounded-full bg-yellow-500 mr-1 ml-3 align-middle"></span><200ms
|
|
<span class="inline-block w-3 h-3 rounded-full bg-orange-500 mr-1 ml-3 align-middle"></span><500ms
|
|
<span class="inline-block w-3 h-3 rounded-full bg-red-500 mr-1 ml-3 align-middle"></span>>500ms
|
|
<span class="inline-block w-3 h-3 rounded-full bg-gray-500 mr-1 ml-3 align-middle"></span>offline
|
|
</p>
|
|
<p class="mt-2"><a href="https://git.eeqj.de/sneak/netwatch/commit/${__COMMIT_FULL__}" target="_blank" rel="noopener" class="text-gray-600 hover:text-gray-400">${__COMMIT_HASH__}</a></p>
|
|
<p class="mt-2">
|
|
<label class="cursor-pointer">
|
|
<input type="checkbox" id="debug-toggle" class="mr-1">
|
|
<span>Debug log</span>
|
|
</label>
|
|
</p>
|
|
</footer>
|
|
</div>`;
|
|
|
|
requestAnimationFrame(() => {
|
|
document
|
|
.querySelectorAll(".sparkline-canvas")
|
|
.forEach((c) => SparklineRenderer.sizeCanvas(c));
|
|
});
|
|
}
|
|
|
|
// --- UI Updaters -------------------------------------------------------------
|
|
|
|
function updateHostRow(host, index) {
|
|
const latencyEl = document.querySelector(
|
|
`.latency-value[data-host="${index}"]`,
|
|
);
|
|
const statusEl = document.querySelector(
|
|
`.status-text[data-host="${index}"]`,
|
|
);
|
|
const canvas = document.querySelector(
|
|
`.sparkline-canvas[data-host="${index}"]`,
|
|
);
|
|
if (!latencyEl || !statusEl || !canvas) return;
|
|
|
|
if (host.lastLatency !== null) {
|
|
const cls = latencyClass(host.lastLatency, host.status);
|
|
latencyEl.innerHTML = `<span class="${cls}">${host.lastLatency}<span class="text-lg">ms</span></span>`;
|
|
} else if (host.status === "offline" || host.status === "error") {
|
|
latencyEl.innerHTML = `<span class="text-gray-500">---</span>`;
|
|
}
|
|
|
|
const avg = host.averageLatency();
|
|
const med = host.medianLatency();
|
|
const min = host.minLatency();
|
|
const max = host.maxLatency();
|
|
if (host.status === "online" && avg !== null) {
|
|
statusEl.innerHTML =
|
|
`<span class="text-gray-400">min </span><span class="${latencyClass(min, "online")}">${min}ms</span>` +
|
|
` <span class="text-gray-500">/</span> ` +
|
|
`<span class="text-gray-400">med </span><span class="${latencyClass(med, "online")}">${med}ms</span>` +
|
|
` <span class="text-gray-500">/</span> ` +
|
|
`<span class="text-gray-400">avg </span><span class="${latencyClass(avg, "online")}">${avg}ms</span>` +
|
|
` <span class="text-gray-500">/</span> ` +
|
|
`<span class="text-gray-400">max </span><span class="${latencyClass(max, "online")}">${max}ms</span>`;
|
|
statusEl.className =
|
|
"status-text text-xs whitespace-nowrap text-right col-span-2 mt-5";
|
|
} else if (host.status === "offline") {
|
|
statusEl.textContent = "unreachable";
|
|
statusEl.className =
|
|
"status-text text-xs text-red-400 whitespace-nowrap text-right col-span-2 mt-5";
|
|
} else if (host.status === "error") {
|
|
statusEl.textContent = "timeout";
|
|
statusEl.className =
|
|
"status-text text-xs text-orange-400 whitespace-nowrap text-right col-span-2 mt-5";
|
|
} else {
|
|
statusEl.textContent = "connecting...";
|
|
statusEl.className =
|
|
"status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5";
|
|
}
|
|
|
|
SparklineRenderer.draw(canvas, host.history);
|
|
}
|
|
|
|
function updateSummary(state) {
|
|
const stats = state.wanStats();
|
|
const hstats = state.wanHistoryStats();
|
|
|
|
const reachableEl = document.getElementById("summary-reachable");
|
|
const minEl = document.getElementById("summary-min");
|
|
const minUnitEl = document.getElementById("summary-min-unit");
|
|
const medEl = document.getElementById("summary-med");
|
|
const medUnitEl = document.getElementById("summary-med-unit");
|
|
const avgEl = document.getElementById("summary-avg");
|
|
const avgUnitEl = document.getElementById("summary-avg-unit");
|
|
const maxEl = document.getElementById("summary-max");
|
|
const maxUnitEl = document.getElementById("summary-max-unit");
|
|
const hminEl = document.getElementById("summary-hmin");
|
|
const hminUnitEl = document.getElementById("summary-hmin-unit");
|
|
const hmaxEl = document.getElementById("summary-hmax");
|
|
const hmaxUnitEl = document.getElementById("summary-hmax-unit");
|
|
if (!reachableEl) return;
|
|
|
|
reachableEl.textContent = `${stats.reachable}/${stats.total}`;
|
|
reachableEl.className =
|
|
stats.reachable === stats.total
|
|
? "text-green-400"
|
|
: stats.reachable === 0
|
|
? "text-red-400"
|
|
: "text-yellow-400";
|
|
|
|
if (stats.min !== null) {
|
|
minEl.textContent = `${stats.min}`;
|
|
minEl.className = latencyClass(stats.min, "online");
|
|
minUnitEl.className = latencyClass(stats.min, "online");
|
|
medEl.textContent = `${stats.med}`;
|
|
medEl.className = latencyClass(stats.med, "online");
|
|
medUnitEl.className = latencyClass(stats.med, "online");
|
|
avgEl.textContent = `${stats.avg}`;
|
|
avgEl.className = latencyClass(stats.avg, "online");
|
|
avgUnitEl.className = latencyClass(stats.avg, "online");
|
|
maxEl.textContent = `${stats.max}`;
|
|
maxEl.className = latencyClass(stats.max, "online");
|
|
maxUnitEl.className = latencyClass(stats.max, "online");
|
|
} else {
|
|
minEl.textContent = "--";
|
|
minEl.className = "text-gray-500";
|
|
minUnitEl.className = "text-gray-500";
|
|
medEl.textContent = "--";
|
|
medEl.className = "text-gray-500";
|
|
medUnitEl.className = "text-gray-500";
|
|
avgEl.textContent = "--";
|
|
avgEl.className = "text-gray-500";
|
|
avgUnitEl.className = "text-gray-500";
|
|
maxEl.textContent = "--";
|
|
maxEl.className = "text-gray-500";
|
|
maxUnitEl.className = "text-gray-500";
|
|
}
|
|
|
|
if (hstats.min !== null) {
|
|
hminEl.textContent = `${hstats.min}`;
|
|
hminEl.className = latencyClass(hstats.min, "online");
|
|
hminUnitEl.className = latencyClass(hstats.min, "online");
|
|
hmaxEl.textContent = `${hstats.max}`;
|
|
hmaxEl.className = latencyClass(hstats.max, "online");
|
|
hmaxUnitEl.className = latencyClass(hstats.max, "online");
|
|
} else {
|
|
hminEl.textContent = "--";
|
|
hminEl.className = "text-gray-500";
|
|
hminUnitEl.className = "text-gray-500";
|
|
hmaxEl.textContent = "--";
|
|
hmaxEl.className = "text-gray-500";
|
|
hmaxUnitEl.className = "text-gray-500";
|
|
}
|
|
|
|
const checksEl = document.getElementById("summary-checks");
|
|
if (checksEl) checksEl.textContent = state.tickCount;
|
|
}
|
|
|
|
function updateHealthBox(state) {
|
|
const el = document.getElementById("health-text");
|
|
const box = document.getElementById("health-box");
|
|
if (!el || !box) return;
|
|
|
|
const anyData = state.wan.some((h) => h.status !== "pending");
|
|
if (!anyData) return;
|
|
|
|
const health = state.healthStatus();
|
|
const labels = {
|
|
healthy: "HEALTHY",
|
|
slow: "SLOW",
|
|
degraded: "DEGRADED",
|
|
offline: "OFFLINE",
|
|
};
|
|
const textColors = {
|
|
healthy: "text-green-400 font-bold",
|
|
slow: "text-yellow-400 font-bold",
|
|
degraded: "text-orange-400 font-bold",
|
|
offline: "text-red-400 font-bold",
|
|
};
|
|
const boxColors = {
|
|
healthy: "bg-green-900/20 border-green-700/50",
|
|
slow: "bg-yellow-900/20 border-yellow-700/50",
|
|
degraded: "bg-orange-900/20 border-orange-700/50",
|
|
offline: "bg-red-900/20 border-red-700/50",
|
|
};
|
|
el.textContent = labels[health];
|
|
el.className = textColors[health];
|
|
box.className = `mt-4 p-3 rounded-lg border font-mono text-sm text-center ${boxColors[health]}`;
|
|
|
|
if (health === "offline" || health === "degraded")
|
|
log.warning(`Health: ${labels[health]}`);
|
|
else if (health === "slow") log.warning(`Health: ${labels[health]}`);
|
|
else if (health === "healthy") log.notice(`Health: ${labels[health]}`);
|
|
}
|
|
|
|
// --- Debug Log Renderer ------------------------------------------------------
|
|
|
|
function renderDebugLog() {
|
|
const el = document.getElementById("debug-log");
|
|
if (!el) return;
|
|
const levelColors = {
|
|
error: "text-red-400",
|
|
warning: "text-orange-400",
|
|
notice: "text-yellow-400",
|
|
info: "text-gray-300",
|
|
debug: "text-gray-500",
|
|
};
|
|
el.innerHTML = debugLog
|
|
.map((entry) => {
|
|
const ts = formatUTCTimestamp(entry.timestamp);
|
|
const cls = levelColors[entry.level] || "text-gray-400";
|
|
const lvl = entry.level.toUpperCase().padEnd(7);
|
|
return `<div class="${cls}">${ts} ${lvl} ${entry.message}</div>`;
|
|
})
|
|
.join("");
|
|
el.scrollTop = el.scrollHeight;
|
|
}
|
|
|
|
// --- Sorting -----------------------------------------------------------------
|
|
|
|
// Sort WAN hosts: pinned hosts first (alphabetically), then unpinned hosts
|
|
// by last latency ascending, with unreachable hosts at the bottom.
|
|
function sortAndRebuildWAN(state) {
|
|
log.debug("WAN hosts re-sorted");
|
|
const pinned = state.wan
|
|
.filter((h) => h.pinned)
|
|
.sort((a, b) => a.name.localeCompare(b.name));
|
|
const rest = state.wan.filter((h) => !h.pinned);
|
|
rest.sort((a, b) => {
|
|
if (a.lastLatency === null && b.lastLatency === null) return 0;
|
|
if (a.lastLatency === null) return 1;
|
|
if (b.lastLatency === null) return -1;
|
|
return a.lastLatency - b.lastLatency;
|
|
});
|
|
state.wan = [...pinned, ...rest];
|
|
|
|
const container = document.getElementById("wan-hosts");
|
|
container.innerHTML = wanRowsHTML(state.wan);
|
|
|
|
// Re-index local hosts after WAN
|
|
const localContainer = document.getElementById("local-hosts");
|
|
localContainer.innerHTML = state.local
|
|
.map((h, i) => hostRowHTML(h, state.wan.length + i, false))
|
|
.join("");
|
|
|
|
// Resize canvases and redraw
|
|
requestAnimationFrame(() => {
|
|
document.querySelectorAll(".sparkline-canvas").forEach((canvas) => {
|
|
SparklineRenderer.sizeCanvas(canvas);
|
|
});
|
|
if (state.paused) {
|
|
state.allHosts.forEach((host, i) => {
|
|
SparklineRenderer.draw(
|
|
document.querySelector(
|
|
`.sparkline-canvas[data-host="${i}"]`,
|
|
),
|
|
host.history,
|
|
);
|
|
});
|
|
greyOutUI(state);
|
|
} else {
|
|
state.allHosts.forEach((host, i) => {
|
|
updateHostRow(host, i);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- Main Loop ---------------------------------------------------------------
|
|
|
|
async function tick(state, onOffline) {
|
|
const ts = Date.now();
|
|
|
|
if (state.paused) {
|
|
log.debug("Tick skipped (paused)");
|
|
// No probes — just push a paused marker so the chart keeps scrolling
|
|
for (const host of state.allHosts) {
|
|
host.pushPaused(ts);
|
|
}
|
|
// Redraw sparklines only
|
|
state.allHosts.forEach((host, i) => {
|
|
const canvas = document.querySelector(
|
|
`.sparkline-canvas[data-host="${i}"]`,
|
|
);
|
|
if (canvas) SparklineRenderer.draw(canvas, host.history);
|
|
});
|
|
return;
|
|
}
|
|
|
|
log.debug(`Tick #${state.tickCount + 1} started`);
|
|
|
|
const results = await Promise.all(
|
|
state.allHosts.map((h) => measureLatency(h.url)),
|
|
);
|
|
|
|
// User may have paused while awaiting results — discard them
|
|
if (state.paused) return;
|
|
|
|
state.tickCount++;
|
|
|
|
// Discard the first tick — DNS and TLS setup inflates latencies
|
|
if (state.tickCount === 1) {
|
|
log.debug("Tick #1 discarded (cold start)");
|
|
return;
|
|
}
|
|
|
|
state.allHosts.forEach((host, i) => {
|
|
const r = results[i];
|
|
host.pushSample(ts, r);
|
|
updateHostRow(host, i);
|
|
log.debug(`${host.name}: ${r.error ? r.error : r.latency + "ms"}`);
|
|
});
|
|
|
|
// Sort after the first real check, then every 10 ticks thereafter
|
|
if (state.tickCount === 2 || state.tickCount % 10 === 1) {
|
|
sortAndRebuildWAN(state);
|
|
}
|
|
|
|
updateSummary(state);
|
|
updateHealthBox(state);
|
|
|
|
const reachable = state.allHosts.filter(
|
|
(h) => h.status === "online",
|
|
).length;
|
|
log.info(
|
|
`Tick #${state.tickCount} complete: ${reachable}/${state.allHosts.length} reachable`,
|
|
);
|
|
|
|
if (state.isHardOffline() && onOffline) {
|
|
onOffline();
|
|
} else {
|
|
stopRecoveryProbe(state);
|
|
}
|
|
}
|
|
|
|
// --- Recovery Probe ----------------------------------------------------------
|
|
|
|
// When offline, rapidly poll 4 random WAN hosts every 500ms. As soon as any
|
|
// responds, stop probing and fire a normal tick to refresh all hosts.
|
|
function startRecoveryProbe(state, triggerTick) {
|
|
if (state._recoveryProbeId) return; // already running
|
|
const candidates = [...state.wan];
|
|
for (let i = candidates.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[candidates[i], candidates[j]] = [candidates[j], candidates[i]];
|
|
}
|
|
const canaries = candidates.slice(0, 4);
|
|
log.notice(
|
|
`Recovery probe started (${canaries.map((h) => h.name).join(", ")})`,
|
|
);
|
|
state._recoveryProbeId = setInterval(async () => {
|
|
if (state.paused) return;
|
|
const results = await Promise.all(
|
|
canaries.map((h) => measureLatency(h.url)),
|
|
);
|
|
if (results.some((r) => r.error === null)) {
|
|
log.notice("Recovery probe: connectivity detected");
|
|
stopRecoveryProbe(state);
|
|
triggerTick();
|
|
}
|
|
}, 500);
|
|
}
|
|
|
|
function stopRecoveryProbe(state) {
|
|
if (state._recoveryProbeId) {
|
|
clearInterval(state._recoveryProbeId);
|
|
state._recoveryProbeId = null;
|
|
}
|
|
}
|
|
|
|
// --- Pause / Resume ----------------------------------------------------------
|
|
|
|
function greyOutUI(state) {
|
|
// Grey out all host rows
|
|
state.allHosts.forEach((host, i) => {
|
|
const latencyEl = document.querySelector(
|
|
`.latency-value[data-host="${i}"]`,
|
|
);
|
|
const statusEl = document.querySelector(
|
|
`.status-text[data-host="${i}"]`,
|
|
);
|
|
if (latencyEl) {
|
|
const val =
|
|
host.lastLatency !== null ? `${host.lastLatency}ms` : "---";
|
|
latencyEl.innerHTML = `<span class="text-gray-500">${val}</span>`;
|
|
}
|
|
if (statusEl) {
|
|
statusEl.textContent = "paused";
|
|
statusEl.className =
|
|
"status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5";
|
|
}
|
|
// Grey out the status dot
|
|
const row = document.querySelector(`.host-row[data-index="${i}"]`);
|
|
if (row) {
|
|
const dot = row.querySelector(".rounded-full");
|
|
if (dot) dot.style.backgroundColor = "#6b7280";
|
|
}
|
|
});
|
|
|
|
// Grey out summary current stats
|
|
const reachableEl = document.getElementById("summary-reachable");
|
|
if (reachableEl) {
|
|
reachableEl.textContent = "--/--";
|
|
reachableEl.className = "text-gray-500";
|
|
}
|
|
for (const id of [
|
|
"summary-min",
|
|
"summary-med",
|
|
"summary-avg",
|
|
"summary-max",
|
|
]) {
|
|
const el = document.getElementById(id);
|
|
if (el) {
|
|
el.textContent = "-";
|
|
el.className = "text-gray-500";
|
|
}
|
|
const unitEl = document.getElementById(id + "-unit");
|
|
if (unitEl) {
|
|
unitEl.className = "text-gray-500";
|
|
}
|
|
}
|
|
|
|
// Grey out health box
|
|
const healthText = document.getElementById("health-text");
|
|
const healthBox = document.getElementById("health-box");
|
|
if (healthText) {
|
|
healthText.textContent = "---";
|
|
healthText.className = "text-gray-500 font-bold";
|
|
}
|
|
if (healthBox) {
|
|
healthBox.className =
|
|
"mt-4 p-3 rounded-lg border font-mono text-sm text-center bg-gray-800/70 border-gray-700/50";
|
|
}
|
|
}
|
|
|
|
function togglePause(state) {
|
|
state.paused = !state.paused;
|
|
const pauseIcon = document.getElementById("pause-icon");
|
|
const playIcon = document.getElementById("play-icon");
|
|
const pauseText = document.getElementById("pause-text");
|
|
const indicator = document.getElementById("status-indicator");
|
|
|
|
if (state.paused) {
|
|
pauseIcon.classList.add("hidden");
|
|
playIcon.classList.remove("hidden");
|
|
pauseText.textContent = "Resume";
|
|
indicator.textContent = "Paused";
|
|
indicator.className = "text-yellow-400";
|
|
greyOutUI(state);
|
|
log.notice("Paused");
|
|
} else {
|
|
pauseIcon.classList.remove("hidden");
|
|
playIcon.classList.add("hidden");
|
|
pauseText.textContent = "Pause";
|
|
indicator.textContent = "Running";
|
|
indicator.className = "text-green-400";
|
|
log.notice("Resumed");
|
|
}
|
|
}
|
|
|
|
// --- Resize ------------------------------------------------------------------
|
|
|
|
function handleResize(state) {
|
|
document.querySelectorAll(".sparkline-canvas").forEach((canvas, i) => {
|
|
SparklineRenderer.sizeCanvas(canvas);
|
|
const host = state.allHosts[i];
|
|
if (host) SparklineRenderer.draw(canvas, host.history);
|
|
});
|
|
}
|
|
|
|
// --- Bootstrap ---------------------------------------------------------------
|
|
|
|
async function init() {
|
|
log.info("NetWatch starting");
|
|
|
|
// Probe common gateway IPs to find the local router
|
|
const gateway = await detectGateway();
|
|
const localHosts = [LOCAL_CPE];
|
|
if (gateway) {
|
|
localHosts.push(gateway);
|
|
log.info(`Gateway detected: ${gateway.url}`);
|
|
}
|
|
|
|
const state = new AppState(localHosts);
|
|
buildUI(state);
|
|
log.info("UI built, starting tick loop");
|
|
|
|
document
|
|
.getElementById("pause-btn")
|
|
.addEventListener("click", () => togglePause(state));
|
|
|
|
document.getElementById("debug-toggle").addEventListener("change", (e) => {
|
|
const panel = document.getElementById("debug-panel");
|
|
if (e.target.checked) {
|
|
panel.classList.remove("hidden");
|
|
renderDebugLog();
|
|
} else {
|
|
panel.classList.add("hidden");
|
|
}
|
|
});
|
|
|
|
// Pin button clicks — use event delegation so it survives DOM rebuilds
|
|
document.addEventListener("click", (e) => {
|
|
const btn = e.target.closest(".pin-btn");
|
|
if (!btn) return;
|
|
const idx = parseInt(btn.dataset.pin, 10);
|
|
const host = state.wan[idx];
|
|
if (!host) return;
|
|
host.pinned = !host.pinned;
|
|
log.notice(`${host.pinned ? "Pinned" : "Unpinned"} ${host.name}`);
|
|
sortAndRebuildWAN(state);
|
|
});
|
|
|
|
function updateClocks() {
|
|
const now = new Date();
|
|
const pad = (n) => String(n).padStart(2, "0");
|
|
const utc =
|
|
`${now.getUTCFullYear()}-${pad(now.getUTCMonth() + 1)}-${pad(now.getUTCDate())} ` +
|
|
`${pad(now.getUTCHours())}:${pad(now.getUTCMinutes())}:${pad(now.getUTCSeconds())} UTC`;
|
|
const local =
|
|
now.toLocaleString("sv-SE", { hour12: false }) +
|
|
" " +
|
|
new Intl.DateTimeFormat("en-US", { timeZoneName: "shortGeneric" })
|
|
.formatToParts(now)
|
|
.find((p) => p.type === "timeZoneName").value;
|
|
document.getElementById("clock-local").textContent = "Local: " + local;
|
|
document.getElementById("clock-utc").textContent = "UTC: " + utc;
|
|
}
|
|
updateClocks();
|
|
setInterval(updateClocks, 1000);
|
|
|
|
function doTick() {
|
|
tick(state, () => startRecoveryProbe(state, doTick));
|
|
}
|
|
|
|
doTick();
|
|
let tickIntervalId = setInterval(doTick, CONFIG.updateInterval);
|
|
|
|
document
|
|
.getElementById("interval-select")
|
|
.addEventListener("change", (e) => {
|
|
const newInterval = parseInt(e.target.value, 10);
|
|
clearInterval(tickIntervalId);
|
|
CONFIG.updateInterval = newInterval;
|
|
log.notice(
|
|
`Interval changed to ${humanDuration(newInterval / 1000)}, history reset`,
|
|
);
|
|
|
|
// Clear all host history and reset state
|
|
for (const host of state.allHosts) {
|
|
host.history = [];
|
|
host.lastLatency = null;
|
|
host.status = "pending";
|
|
}
|
|
state.tickCount = 0;
|
|
|
|
// Update dynamic text
|
|
const intervalText = document.getElementById(
|
|
"update-interval-text",
|
|
);
|
|
if (intervalText)
|
|
intervalText.textContent = `Updates every ${humanDuration(newInterval / 1000)}`;
|
|
const historyText = document.getElementById(
|
|
"history-duration-text",
|
|
);
|
|
if (historyText)
|
|
historyText.textContent = `History: ${humanDuration(CONFIG.historyDuration)}`;
|
|
const durationLabel = document.getElementById(
|
|
"summary-duration-label",
|
|
);
|
|
if (durationLabel)
|
|
durationLabel.textContent = `${humanDuration(CONFIG.historyDuration)}:`;
|
|
|
|
// Rebuild host rows (resets UI to "waiting..." state)
|
|
sortAndRebuildWAN(state);
|
|
|
|
// Reset summary and health box
|
|
updateSummary(state);
|
|
const healthText = document.getElementById("health-text");
|
|
const healthBox = document.getElementById("health-box");
|
|
if (healthText) {
|
|
healthText.textContent = "Waiting for data...";
|
|
healthText.className = "text-gray-400";
|
|
}
|
|
if (healthBox) {
|
|
healthBox.className =
|
|
"mt-4 p-3 rounded-lg border font-mono text-sm text-center bg-gray-800/70 border-gray-700/50";
|
|
}
|
|
|
|
// Start immediately with new interval
|
|
stopRecoveryProbe(state);
|
|
doTick();
|
|
tickIntervalId = setInterval(doTick, CONFIG.updateInterval);
|
|
});
|
|
|
|
window.addEventListener("resize", () => handleResize(state));
|
|
setTimeout(() => handleResize(state), 100);
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", init);
|
|
} else {
|
|
init();
|
|
}
|