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(", ");