Server statistics, multi-view record commands, and rc.3 fixes

Added:
- Server statistics: named's memory and CPU (from /proc), cache size,
  sockets and client counts against their limits (statistics channel,
  rndc status), host memory and load, and free disk space. Memory and
  CPU are kept over time as gauges (sum and sample count, averaged in
  timelines). Statistics page Server section, jarl stats server,
  GET /stats/server.
- jarl record add|set|delete|disable|enable --view a,b | all: the same
  change in each view, applied as one changeset.
- Blocking can be paused until resumed (jarl block pause indefinitely,
  "Until I resume", {"indefinitely": true}).

Changed:
- List options (allow-transfer, forwarders, ...) get their braces added
  when given without them.
- The dashboard lists named-checkconf's warnings about the running
  configuration; the CLI prints them after an apply.
- Stats page: tile and card rows fill their width, and the queries and
  failed answers charts share margins so their time axes line up.
- Dashboard: options have their own tile.
- 24-hour times in the web UI.

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

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

@@ -1,6 +1,6 @@
-import { h, mount, fmtTime, errorBox } from "../ui.js";
+import { h, mount, fmtTime, relTime, errorBox } from "../ui.js";
 import { get } from "../api.js";
-import { lineChart, chartCard, legend, timeTable, heatmap, heatmapTable, barList, compact, stepSeconds } from "../charts.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"]];
 const rangeSecs = { "1h": 3600, "6h": 6 * 3600, "24h": 86400, "7d": 7 * 86400, "30d": 30 * 86400, "90d": 90 * 86400 };
@@ -65,15 +65,18 @@ export async function render(el, params, query) {
   const qSeries = [{ label: "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 });
-  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 }));
   const anyFailures = fSeries.some((f) => f.values.some((v) => v > 0));
+  // 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,
+    lineChart({ series: qSeries, times: timeline.times, step, area: true, gutter }), timeTable(qSeries, timeline.times, step),
+    { wide: true, legend: qSeries.length > 1 ? legend(qSeries) : null }));
+
   parts.push(chartCard("Failed answers", "NXDOMAIN: the name doesn't exist · SERVFAIL: resolution failed · REFUSED: not allowed",
-    anyFailures ? lineChart({ series: fSeries, times: errors.times, step: stepSeconds[errors.step] }) : h("div", { class: "empty" }, "No failed answers " + rangeLabel + "."),
+    anyFailures ? lineChart({ series: fSeries, times: errors.times, step: stepSeconds[errors.step], gutter }) : h("div", { class: "empty" }, "No failed answers " + rangeLabel + "."),
     anyFailures ? timeTable(fSeries, errors.times, stepSeconds[errors.step]) : null,
     { wide: true, legend: anyFailures ? legend(fSeries) : null }));
 
@@ -107,6 +110,8 @@ export async function render(el, params, query) {
     b.answer.length ? listCard("Answers", "authoritative (your zones) or recursive (from the cache or the internet)", barList(b.answer)) : null,
     rtt.length ? listCard("Upstream response time", "how long other servers took to answer named's recursive queries", barList(rtt)) : null,
     b.blocklist.length ? listCard("Blocked by", "which of your rules and blocklists blocked queries", barList(b.blocklist, { label: (k) => (k === "rules" ? "your rules" : k), href: () => "#/blocking" })) : null));
+
+  parts.push(...serverSection(data.server, complete(data.gauges), rangeLabel));
   el.classList.remove("refreshing");
   mount(el, parts);
   scheduleRefresh(el, params, query, gen);
@@ -118,6 +123,8 @@ async function loadAll(since, heatSince, queryLog) {
     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 }),
+    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 }); });
@@ -162,6 +169,63 @@ function filterRow(since) {
       h("a", { href: "#/stats?since=" + k, class: k === since ? "active" : "", "aria-current": k === since ? "true" : null, title: "last " + label }, k))));
 }
 
+const gaugeKeys = ["g:named:rss", "g:named:mem", "g:cache:mem", "g:named:cpu"];
+
+// serverSection shows named's process, cache, clients, the host and the
+// disks now, and named's memory and CPU over time.
+function serverSection(sv, gauges, rangeLabel) {
+  const srv = (sv && sv.server) || {};
+  const named = (sv && sv.named) || {};
+  const host = srv.host || {};
+  const out = [h("h2", { class: "section" }, "Server")];
+  const clients = (v, what) => {
+    // "now/soft/hard" or "now/limit".
+    const [now, ...limits] = (v || "").split("/");
+    return v ? [now, "of " + limits[limits.length - 1] + " allowed" + what] : null;
+  };
+  const rc = clients(named.recursive_clients, srv.recursion_highwater ? " · most at once: " + srv.recursion_highwater : "");
+  const tc = clients(named.tcp_clients, srv.tcp_highwater ? " · most at once: " + srv.tcp_highwater : "");
+  out.push(h("div", { class: "cards" },
+    tile("named memory", srv.rss ? bytes(srv.rss) : "–", srv.rss ? "resident · named counts " + bytes(srv.mem_in_use) + " · " + srv.threads + " threads" : "named's process isn't visible to jarld"),
+    tile("named CPU", srv.pid ? srv.cpu_percent.toFixed(1) + "%" : "–", "of one CPU, last minute" + (named.cpus ? " · " + named.cpus + " CPUs" : "")),
+    tile("Cache", compact(srv.cache_rrsets || 0) + " RRsets", bytes(srv.cache_mem || 0) + " of memory, all views"),
+    rc ? tile("Recursive clients", rc[0], rc[1]) : null,
+    tc ? tile("TCP clients", tc[0], tc[1]) : null,
+    tile("Up since", srv.boot_time ? relTime(srv.boot_time).replace(" ago", "") : "–", srv.config_time ? "named started " + fmtTime(srv.boot_time) + " · reconfigured " + relTime(srv.config_time) : ""),
+    host.mem_total ? tile("Host memory", pct((host.mem_total - host.mem_available) / host.mem_total), "of " + bytes(host.mem_total) + " in use · load " + (host.load || []).map((x) => x.toFixed(2)).join(" ")) : null,
+    ...((sv && sv.disks) || []).map((d) => tile("Disk space", bytes(d.free) + " free", h("span", { title: d.path }, "of " + bytes(d.total) + ", for " + d.holds.join(", "))))));
+  if (sv && sv.named_error) out.push(h("div", { class: "msg info" }, "Client counts need rndc: " + sv.named_error));
+  // Gauges over time: averages, -1 where there was no sample.
+  const series = (key) => ((gauges.series || []).find((x) => x.key === key) || { values: gauges.times.map(() => -1) }).values.map((v) => (v < 0 ? null : v));
+  const gStep = stepSeconds[gauges.step];
+  const memSeries = [
+    { label: "Resident", values: series("g:named:rss"), slot: 1 },
+    { label: "named's count", values: series("g:named:mem"), slot: 2 },
+    { label: "Cache", values: series("g:cache:mem"), slot: 3 },
+  ];
+  const cpuSeries = [{ label: "CPU", values: series("g:named:cpu").map((v) => (v == null ? null : v / 10)), slot: 1 }];
+  const any = (ss) => ss.some((x) => x.values.some((v) => v != null));
+  const gutter = { left: 64, right: endLabelWidth(memSeries) };
+  out.push(chartCard("named memory", "average per " + stepName(gauges.step) + ", " + rangeLabel + " · resident is what the system sees",
+    any(memSeries) ? lineChart({ series: memSeries, times: gauges.times, step: gStep, gutter, format: bytes }) : h("div", { class: "empty" }, "No samples yet: they are taken once a minute."),
+    any(memSeries) ? timeTable(memSeries, gauges.times, gStep, bytes) : null, { wide: true, legend: any(memSeries) ? legend(memSeries) : null }));
+  out.push(chartCard("named CPU", "percent of one CPU, average per " + stepName(gauges.step),
+    any(cpuSeries) ? lineChart({ series: cpuSeries, times: gauges.times, step: gStep, gutter, format: (v) => (Math.round(v * 10) / 10) + "%" }) : h("div", { class: "empty" }, "No samples yet."),
+    any(cpuSeries) ? timeTable(cpuSeries, gauges.times, gStep, (v) => v.toFixed(1) + "%") : null, { wide: true }));
+  return out;
+}
+
+// bytes formats a size in binary units.
+function bytes(n) {
+  const units = ["B", "KiB", "MiB", "GiB", "TiB"];
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i++;
+  }
+  return (i === 0 || n >= 100 ? Math.round(n) : n.toFixed(1).replace(/\.0$/, "")) + " " + units[i];
+}
+
 function tile(label, value, sub) {
   return h("div", { class: "card stat" }, h("div", { class: "label" }, label), h("div", { class: "value big" }, value), h("div", { class: "sub" }, sub));
 }