Pause blocking, blocked clients and a blocked line in the statistics, compact view picker

jarl block pause|resume (and the Blocking page) lets every name through
for a while; jarld resumes on time. The lists stay loaded: the rules zone
just passes everything. Statistics gain the clients with the most blocked
queries and blocked queries on the queries chart. The view choice in the
blocking forms is a dropdown.

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

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

@@ -22,7 +22,7 @@ let refreshTimer = null;
 
 export async function render(el, params, query) {
   clearTimeout(refreshTimer);
-  const [lists, rules, views] = await Promise.all([get("/blocking/lists", draftQuery()), get("/blocking/rules", draftQuery()), get("/views")]);
+  const [lists, rules, views, status] = await Promise.all([get("/blocking/lists", draftQuery()), get("/blocking/rules", draftQuery()), get("/views"), get("/blocking/status")]);
   const writable = can("blocking", true);
   const recursive = lists.concat(rules).find((x) => x.auto_views);
   const autoViews = recursive ? recursive.views : null;
@@ -39,10 +39,16 @@ export async function render(el, params, query) {
     } catch (e) { mount(checkOut, errorBox(e)); }
   };
 
+  const paused = status.paused_until;
   mount(el,
     h("div", { class: "page-head" },
       h("div", { class: "grow" }, h("h1", null, "Blocking"),
-        h("div", { class: "muted" }, "Answer \"doesn't exist\" for ads, trackers and malware, for the devices that use this server to resolve names. Your rules come first, then the blocklists."))),
+        h("div", { class: "muted" }, "Answer \"doesn't exist\" for ads, trackers and malware, for the devices that use this server to resolve names. Your rules come first, then the blocklists.")),
+      writable && !paused && (lists.length || rules.length) ? pauseControls() : null),
+    paused ? h("div", { class: "msg warn" },
+      h("strong", null, "Blocking is paused until " + new Date(paused).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) + ": "),
+      "every name is answered normally. It resumes by itself. ",
+      writable ? h("button", { class: "small", onclick: () => pause(0) }, "Resume now") : null) : null,
     h("div", { class: "panel" },
       h("form", { class: "actions", onsubmit: runCheck },
         h("label", { class: "muted" }, "Check a name"), checkName, h("button", { type: "submit" }, "Check")),
@@ -51,10 +57,27 @@ export async function render(el, params, query) {
     listsPanel(lists, views, autoViews, writable));
   if (checkName.value) runCheck();
 
-  // Lists are downloaded in the background: show when they're done.
-  if (lists.some((l) => l.state === "waiting")) {
-    refreshTimer = setTimeout(() => { if (location.hash.startsWith("#/blocking") && el.isConnected) rerender(); }, 4000);
-  }
+  // Lists are downloaded in the background, and a pause ends by itself:
+  // show it when it happens.
+  let wait = 0;
+  if (lists.some((l) => l.state === "waiting")) wait = 4000;
+  if (paused) wait = Math.max(1000, Math.min(wait || Infinity, new Date(paused) - Date.now() + 3000));
+  if (wait) refreshTimer = setTimeout(() => { if (location.hash.startsWith("#/blocking") && el.isConnected) rerender(); }, wait);
+}
+
+function pauseControls() {
+  const length = select([["5", "5 minutes"], ["15", "15 minutes"], ["60", "1 hour"], ["240", "4 hours"]], "15");
+  return h("div", { class: "actions" }, length, h("button", { title: "Answer every name normally for a while, to see whether blocking is what breaks something", onclick: () => pause(Number(length.value)) }, "Pause blocking"));
+}
+
+// pause pauses blocking for minutes, or resumes it (0). It applies at
+// once, also with a draft open: it's for trying something now.
+async function pause(minutes) {
+  try {
+    await api("POST", minutes ? "/blocking/pause" : "/blocking/resume", minutes ? { body: { minutes } } : {});
+    toast(minutes ? "Blocking paused" : "Blocking resumed");
+    rerender();
+  } catch (e) { toast(e.message, "err", 8000); }
 }
 
 function checkResult(name, res, writable) {
@@ -82,17 +105,29 @@ async function addRule(name, action, exact, views, comment) {
   } catch (e) { toast(e.message, "err", 8000); return false; }
 }
 
-// viewPicker returns checkboxes for the views (none ticked: automatic).
-function viewPicker(views, autoViews, selected) {
+// viewPicker is a compact choice of views: it shows the choice, and opens
+// a list of checkboxes (none ticked: every view that offers recursion).
+function viewPicker(views, autoViews) {
   if (!views.length) return { el: null, value: () => [] };
-  const boxes = views.map((v) => checkbox(v.name, (selected || []).includes(v.name)));
-  const hint = autoViews && autoViews.length ? "none ticked: " + autoViews.join(", ") + " (every view that offers recursion)" : "none ticked: every view that offers recursion";
-  return {
-    el: h("div", { class: "f" }, h("label", null, "Views"), h("div", { class: "actions" }, boxes, h("span", { class: "muted small" }, hint))),
-    value: () => views.filter((v, i) => boxes[i].input.checked).map((v) => v.name),
+  const boxes = views.map((v) => checkbox(v.name, false));
+  const value = () => views.filter((v, i) => boxes[i].input.checked).map((v) => v.name);
+  const summary = h("summary");
+  const show = () => {
+    const sel = value();
+    summary.textContent = sel.length ? sel.join(", ") : "automatic" + (autoViews && autoViews.length ? " (" + autoViews.join(", ") + ")" : "");
   };
+  boxes.forEach((b) => b.input.addEventListener("change", show));
+  show();
+  const picker = h("details", { class: "view-picker" }, summary,
+    h("div", { class: "view-picker-list" }, h("div", { class: "muted small" }, "None ticked: every view that offers recursion"), boxes));
+  return { el: h("div", { class: "f" }, h("label", null, "Views"), picker), value };
 }
 
+// An open view picker closes when you click elsewhere.
+document.addEventListener("click", (ev) => {
+  for (const d of document.querySelectorAll("details.view-picker[open]")) if (!d.contains(ev.target)) d.open = false;
+});
+
 function viewsCell(x) {
   if (!x.views.length) return h("span", { class: "muted" }, "none");
   return x.auto_views ? [x.views.join(", "), h("span", { class: "muted small" }, " (auto)")] : x.views.join(", ");

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

@@ -1,4 +1,4 @@
-import { h, mount, time, relTime, problemsList, badge, plural } from "../ui.js";
+import { h, mount, time, fmtTime, relTime, problemsList, badge, plural } from "../ui.js";
 import { get, state } from "../api.js";
 
 export async function render(el) {
@@ -40,6 +40,10 @@ export async function render(el) {
       h("strong", null, "The last backup failed "), time(b.last_error_at), ": " + b.last_error,
       h("div", { class: "small" }, "See 'journalctl -u jarl-backup' on the server.")));
   }
+  if (st.blocking_paused_until) {
+    parts.push(h("div", { class: "msg info" },
+      h("strong", null, "Blocking is paused until " + fmtTime(st.blocking_paused_until) + "."), " It resumes by itself. ", h("a", { href: "#/blocking" }, "Blocking")));
+  }
   for (const e of st.blocklist_errors || []) {
     parts.push(h("div", { class: "msg warn" },
       h("strong", null, "Blocklist " + e.name + " couldn't be updated: "), e.error + ". ",

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

@@ -60,10 +60,14 @@ export async function render(el, params, query) {
     s.blocked_ratio != null ? tile("Blocked", pct(s.blocked_ratio), compact(s.blocked) + " queries, by your rules and blocklists") : null));
 
   // 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 }];
-  parts.push(chartCard("Queries", "per " + stepName(timeline.step) + ", " + rangeLabel,
-    lineChart({ series: qSeries, times: timeline.times, step, area: true }), timeTable(qSeries, timeline.times, step), { wide: true }));
+  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 });
+  parts.push(chartCard(qSeries.length > 1 ? "Queries and blocked queries" : "Queries", "per " + stepName(timeline.step) + ", " + rangeLabel,
+    lineChart({ series: qSeries, times: timeline.times, step, area: true }), timeTable(qSeries, timeline.times, step),
+    { wide: true, legend: qSeries.length > 1 ? legend(qSeries) : null }));
 
   // Failed answers: three fixed series, legend plus end labels.
   const fSeries = failures.map((f) => ({ ...f, values: (errors.series.find((x) => x.key === f.key) || { values: errors.times.map(() => 0) }).values }));
@@ -86,6 +90,7 @@ export async function render(el, params, query) {
       listCard("Names that don't exist", "NXDOMAIN answers: typos, removed hosts, misconfigured clients, malware", barList(t.nxdomain, { empty: "None " + rangeLabel + "." })),
       listCard("Refused clients", "clients asking for something they may not have (often internet scanners)", barList(t.refused, { empty: "None " + rangeLabel + "." })),
       t.servfail.length ? listCard("Names that failed to resolve", "SERVFAIL answers", barList(t.servfail)) : null,
+      t.blocked_client.length ? listCard("Clients with the most blocked queries", "often a smart TV, phone or app phoning home", barList(t.blocked_client)) : null,
       t.blocked.length ? listCard("Most blocked names", "answered \"doesn't exist\" by blocking; click a name to see why, or to allow it", barList(t.blocked, { href: (k) => "#/blocking?check=" + encodeURIComponent(k) })) : null));
   } else {
     parts.push(h("div", { class: "msg info" }, "Top names and clients need the response log: set stats.query_log: true in /etc/jarl/jarl.yaml and restart jarl."));
@@ -110,14 +115,14 @@ export async function render(el, params, query) {
 async function loadAll(since, heatSince, queryLog) {
   const p = {
     summary: get("/stats/summary", { since, top: 0 }),
-    timeline: get("/stats/timeline", { since, key: "queries" }),
+    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 }),
   };
   const groups = ["qtype", "rcode", "view", "zone", "answer", "rtt", "blocklist"];
   groups.forEach((g) => { p["b_" + g] = get("/stats/breakdown", { group: g, since }); });
   if (queryLog) {
-    for (const k of ["name", "client", "nxdomain", "refused", "servfail", "blocked"]) 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 });
   }
   const keys = Object.keys(p);
   const vals = await Promise.all(Object.values(p));