snapshot+hugo: speedtest tab with recent table + per-node aggregates

stats-site/layouts/index.html

@@ -40,6 +40,7 @@
     </section>
 
     <nav class="footer-nav">
+      <a href="/speedtest/">Speedtest</a>
       <a href="/about/">About</a>
     </nav>
   </main>

stats-site/layouts/speedtest/list.html

@@ -0,0 +1,140 @@
+{{ define "main" }}
+<section class="speedtest">
+  <h1>Speedtest results</h1>
+  <p class="muted">Updated <span id="ts">…</span>. Retention 30 days.</p>
+
+  <h2>Last 24h / 7d / 30d (median)</h2>
+  <table class="agg">
+    <thead><tr><th>Node</th><th>Period</th><th>Count</th><th>↓ Mbps</th><th>↑ Mbps</th><th>Ping ms</th></tr></thead>
+    <tbody id="agg-tbody"></tbody>
+  </table>
+
+  <h2>Recent tests (last 200)</h2>
+  <div class="filters">
+    Node:
+    <select id="filter-node">
+      <option value="">all</option>
+      <option value="fl">fl</option>
+      <option value="pl1">pl1</option>
+    </select>
+    Country:
+    <input type="text" id="filter-country" maxlength="2" placeholder="RU" style="width: 4rem;">
+  </div>
+  <table class="recent">
+    <thead><tr>
+      <th>Time</th><th>Node</th><th>Country</th>
+      <th>↓ Mbps</th><th>↑ Mbps</th><th>Ping ms</th><th>Jitter ms</th>
+    </tr></thead>
+    <tbody id="recent-tbody"></tbody>
+  </table>
+</section>
+
+<script>
+function clearChildren(el) {
+    while (el.firstChild) el.removeChild(el.firstChild);
+}
+
+function appendCell(row, text) {
+    const td = document.createElement('td');
+    td.textContent = text;
+    row.appendChild(td);
+}
+
+function fmtNumber(n, fixed) {
+    if (typeof n !== 'number' || !isFinite(n)) return '0';
+    return n.toFixed(fixed);
+}
+
+function fmtTimestamp(unixSeconds) {
+    if (typeof unixSeconds !== 'number') return '';
+    return new Date(unixSeconds * 1000).toISOString().replace('T', ' ').slice(0, 19);
+}
+
+function renderAggTable(snapshot) {
+    const aggBody = document.getElementById('agg-tbody');
+    clearChildren(aggBody);
+    const periods = [
+        { key: 'agg_day',   label: '24h' },
+        { key: 'agg_week',  label: '7d'  },
+        { key: 'agg_month', label: '30d' },
+    ];
+    for (const { key, label } of periods) {
+        const m = snapshot[key] || {};
+        for (const node of ['fl', 'pl1']) {
+            const a = m[node];
+            if (!a) continue;
+            const tr = document.createElement('tr');
+            appendCell(tr, node);
+            appendCell(tr, label);
+            appendCell(tr, String(a.count | 0));
+            appendCell(tr, fmtNumber(a.median_dl, 1));
+            appendCell(tr, fmtNumber(a.median_ul, 1));
+            appendCell(tr, fmtNumber(a.median_ping, 1));
+            aggBody.appendChild(tr);
+        }
+    }
+}
+
+function renderRecentTable(rows) {
+    const body = document.getElementById('recent-tbody');
+    clearChildren(body);
+    const limited = rows.slice(0, 200);
+    for (const r of limited) {
+        const tr = document.createElement('tr');
+        appendCell(tr, fmtTimestamp(r.Timestamp));
+        appendCell(tr, String(r.Node || ''));
+        appendCell(tr, String(r.Country || ''));
+        appendCell(tr, fmtNumber(r.DlMbps, 1));
+        appendCell(tr, fmtNumber(r.UlMbps, 1));
+        appendCell(tr, fmtNumber(r.PingMs, 1));
+        appendCell(tr, fmtNumber(r.JitterMs, 1));
+        body.appendChild(tr);
+    }
+}
+
+async function loadSnapshot() {
+    let snapshot;
+    try {
+        const r = await fetch('/data/snapshot.json', { cache: 'no-store' });
+        snapshot = await r.json();
+    } catch (e) {
+        document.getElementById('ts').textContent = 'load error';
+        return;
+    }
+    const st = snapshot.speedtest;
+    if (!st) {
+        document.getElementById('ts').textContent = 'no data';
+        return;
+    }
+
+    document.getElementById('ts').textContent = fmtTimestamp(st.generated_at);
+    renderAggTable(st);
+
+    const recent = Array.isArray(st.recent) ? st.recent : [];
+    const filterNode = document.getElementById('filter-node');
+    const filterCountry = document.getElementById('filter-country');
+
+    function applyFilters() {
+        const fn = filterNode.value;
+        const fc = filterCountry.value.toUpperCase();
+        const filtered = recent.filter(row =>
+            (!fn || row.Node === fn) &&
+            (!fc || row.Country === fc));
+        renderRecentTable(filtered);
+    }
+
+    filterNode.addEventListener('change', applyFilters);
+    filterCountry.addEventListener('input', applyFilters);
+    applyFilters();
+}
+
+loadSnapshot();
+</script>
+
+<style>
+.speedtest table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
+.speedtest th, .speedtest td { padding: 0.4rem 0.7rem; border-bottom: 1px solid #333; text-align: left; }
+.speedtest .muted { opacity: 0.6; font-size: 0.9rem; }
+.speedtest .filters { margin: 1rem 0; }
+</style>
+{{ end }}