Statistics per view: toggle views on the Statistics page

Answers, result codes, record types, zones, blocking, rate limiting and the top lists are also counted per view, from named's response log. The Statistics page has a toggle per view with All and None, remembered per browser; jarl stats --view and ?views= on the API. named's own counters stay for the whole server, and the page says so.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/static/assets/pages/stats.js

@@ -1,5 +1,6 @@
 import { h, mount, fmtTime, relTime, errorBox } from "../ui.js";
 import { get } from "../api.js";
+import { rerender } from "../app.js";
 import { lineChart, chartCard, legend, timeTable, heatmap, heatmapTable, barList, compact, stepSeconds, endLabelWidth } from "../charts.js";
 
 const ranges = [["1h", "1 hour"], ["6h", "6 hours"], ["24h", "24 hours"], ["7d", "7 days"], ["30d", "30 days"], ["90d", "90 days"]];
@@ -17,6 +18,20 @@ const rttOrder = ["<10ms", "10-100ms", "100-500ms", "500-800ms", "800-1600ms", "
 
 let generation = 0;
 
+// The views shown are remembered per browser: the ones switched off, so a
+// new view shows up switched on.
+const offKey = "jarl.stats.views.off";
+function viewsOff() {
+  try { return new Set(JSON.parse(localStorage.getItem(offKey) || "[]")); } catch { return new Set(); }
+}
+function saveViewsOff(set) {
+  try { localStorage.setItem(offKey, JSON.stringify([...set])); } catch { /* private window: not remembered */ }
+}
+
+// Breakdowns that exist per view; the others are named's own counters,
+// for the whole server.
+const perViewGroups = ["qtype", "rcode", "view", "zone", "blocklist"];
+
 export async function render(el, params, query) {
   const gen = ++generation;
   const want = query && query.get ? query.get("since") : null;
@@ -33,11 +48,21 @@ export async function render(el, params, query) {
     return;
   }
   const heatSince = rangeSecs[since] < 7 * 86400 ? "7d" : since;
+  // Which views: all of them unless some are switched off.
+  const allViews = status.query_log ? (await get("/views").catch(() => [])).map((v) => v.name) : [];
+  const off = viewsOff();
+  const shown = allViews.filter((v) => !off.has(v));
+  const filtered = allViews.length > 0 && shown.length < allViews.length;
+  const vf = filtered ? { views: shown.join(",") } : {};
+  if (filtered && !shown.length) {
+    mount(el, head, filterRow(since, allViews, off), h("div", { class: "empty" }, "No views chosen: switch one on above."));
+    return;
+  }
   let data;
   try {
-    data = await loadAll(since, heatSince, status.query_log);
+    data = await loadAll(since, heatSince, status.query_log, vf, filtered);
   } catch (e) {
-    mount(el, head, errorBox(e));
+    mount(el, head, filterRow(since, allViews, off), errorBox(e));
     return;
   }
   if (gen !== generation) return; // the user moved on
@@ -46,13 +71,17 @@ export async function render(el, params, query) {
   // sudden drop in traffic.
   const timeline = complete(data.timeline), errors = complete(data.errors);
   const step = stepSeconds[timeline.step];
-  const parts = [head, filterRow(since)];
+  const parts = [head, filterRow(since, allViews, off)];
   for (const w of status.warnings || []) parts.push(h("div", { class: "msg warn" }, w));
+  if (filtered) {
+    parts.push(h("div", { class: "msg info small" }, "Showing view" + (shown.length > 1 ? "s " : " ") + shown.join(", ") + ": answers from named's response log" +
+      (s.views_since ? ", per view since " + fmtTime(s.views_since) : "") + ". named's own figures (answer sources, upstream times, cache, the server) are for the whole server."));
+  }
 
   // Headline numbers.
   const rangeLabel = "in the last " + ranges.find((r) => r[0] === since)[1];
   parts.push(h("div", { class: "cards" },
-    tile("Queries", compact(s.queries), rangeLabel),
+    tile(filtered ? "Answers" : "Queries", compact(s.queries), rangeLabel),
     tile("Per second", s.avg_qps < 10 ? s.avg_qps.toFixed(2) : Math.round(s.avg_qps).toLocaleString(), "on average"),
     s.peak ? tile("Busiest " + s.peak.per, compact(s.peak.queries), fmtTime(s.peak.time)) : null,
     s.nxdomain_ratio != null ? tile("NXDOMAIN", pct(s.nxdomain_ratio), "of queries named no existing name") : null,
@@ -62,7 +91,7 @@ export async function render(el, params, query) {
   // Volume over time: one series, so no legend box; the title names it.
   // With blocking, a second line shows how many of them were blocked.
   const q = timeline.series.find((x) => x.key === "queries") || { values: timeline.times.map(() => 0) };
-  const qSeries = [{ label: "Queries", values: q.values, slot: 1 }];
+  const qSeries = [{ label: filtered ? "Answers" : "Queries", values: q.values, slot: 1 }];
   const bl = timeline.series.find((x) => x.key === "blocked");
   if (bl && bl.values.some((v) => v > 0)) qSeries.push({ label: "Blocked", values: bl.values, slot: 2 });
   // Failed answers: three fixed series, legend plus end labels.
@@ -71,7 +100,8 @@ export async function render(el, params, query) {
   // The two charts are one above the other: the same room for labels on
   // both sides keeps their time axes in line.
   const gutter = { left: 52, right: Math.max(endLabelWidth(qSeries), anyFailures ? endLabelWidth(fSeries) : 0) };
-  parts.push(chartCard(qSeries.length > 1 ? "Queries and blocked queries" : "Queries", "per " + stepName(timeline.step) + ", " + rangeLabel,
+  const qWord = filtered ? "Answers" : "Queries";
+  parts.push(chartCard(qSeries.length > 1 ? qWord + " and blocked queries" : qWord, "per " + stepName(timeline.step) + ", " + rangeLabel,
     lineChart({ series: qSeries, times: timeline.times, step, area: true, gutter }), timeTable(qSeries, timeline.times, step),
     { wide: true, legend: qSeries.length > 1 ? legend(qSeries) : null }));
 
@@ -117,19 +147,20 @@ export async function render(el, params, query) {
   scheduleRefresh(el, params, query, gen);
 }
 
-async function loadAll(since, heatSince, queryLog) {
+async function loadAll(since, heatSince, queryLog, vf, filtered) {
   const p = {
-    summary: get("/stats/summary", { since, top: 0 }),
-    timeline: get("/stats/timeline", { since, key: "queries,blocked" }),
-    errors: get("/stats/timeline", { since, key: failures.map((f) => f.key).join(",") }),
-    heat: get("/stats/heatmap", { since: heatSince }),
+    summary: get("/stats/summary", { since, top: 0, ...vf }),
+    timeline: get("/stats/timeline", { since, key: "queries,blocked", ...vf }),
+    errors: get("/stats/timeline", { since, key: failures.map((f) => f.key).join(","), ...vf }),
+    heat: get("/stats/heatmap", { since: heatSince, ...vf }),
     server: get("/stats/server").catch(() => null),
     gauges: get("/stats/timeline", { since, key: gaugeKeys.join(",") }),
   };
   const groups = ["qtype", "rcode", "view", "zone", "answer", "rtt", "blocklist"];
-  groups.forEach((g) => { p["b_" + g] = get("/stats/breakdown", { group: g, since }); });
+  // With some views only, named's own counters aren't asked for.
+  groups.forEach((g) => { p["b_" + g] = filtered && !perViewGroups.includes(g) ? Promise.resolve([]) : get("/stats/breakdown", { group: g, since, ...vf }); });
   if (queryLog) {
-    for (const k of ["name", "client", "nxdomain", "refused", "servfail", "blocked", "blocked_client"]) p["t_" + k] = get("/stats/top", { kind: k, since, limit: 15 });
+    for (const k of ["name", "client", "nxdomain", "refused", "servfail", "blocked", "blocked_client"]) p["t_" + k] = get("/stats/top", { kind: k, since, limit: 15, ...vf });
   }
   const keys = Object.keys(p);
   const vals = await Promise.all(Object.values(p));
@@ -162,11 +193,26 @@ function complete(tl) {
   return tl;
 }
 
-function filterRow(since) {
-  return h("div", { class: "filter-row", role: "group", "aria-label": "Time range" },
+function filterRow(since, views, off) {
+  const range = h("div", { class: "filter-row", role: "group", "aria-label": "Time range" },
     h("span", { class: "muted" }, "Range"),
     h("div", { class: "segmented" }, ranges.map(([k, label]) =>
       h("a", { href: "#/stats?since=" + k, class: k === since ? "active" : "", "aria-current": k === since ? "true" : null, title: "last " + label }, k))));
+  if (!views || views.length < 2) return range;
+  // A toggle per view (together: linked views, say), and all or none.
+  const set = (next) => { saveViewsOff(next); rerender(); };
+  const toggles = views.map((v) => {
+    const on = !off.has(v);
+    return h("button", { type: "button", class: "chip toggle-chip" + (on ? " on" : ""), "aria-pressed": on ? "true" : "false",
+      title: on ? "Leave view " + v + " out" : "Include view " + v,
+      onclick: () => { const n = new Set(off); if (on) n.add(v); else n.delete(v); set(n); } }, v);
+  });
+  return h("div", { class: "filter-rows" }, range,
+    h("div", { class: "filter-row", role: "group", "aria-label": "Views" },
+      h("span", { class: "muted" }, "Views"),
+      h("div", { class: "chips" }, toggles),
+      h("button", { type: "button", class: "small", disabled: off.size === 0, onclick: () => set(new Set()) }, "All"),
+      h("button", { type: "button", class: "small", disabled: off.size === views.length, onclick: () => set(new Set(views)) }, "None")));
 }
 
 const gaugeKeys = ["g:named:rss", "g:named:mem", "g:cache:mem", "g:named:cpu"];