Explore the statistics: a query log to drill down by client, name, view and more; storage on the dashboard

jarld keeps every answer for a while (stats.retention.queries, default 7 days) in the statistics database: time, client, view, name, type, result and what blocked it. Every client, name, view, record type, result and blocklist on the Statistics page leads to an explore page for it: answers over time, the top values of every other dimension (each a link that narrows further) and the latest answers. GET /stats/explore.

The dashboard shows the size of Jarl's databases (and the query log's rows) and, per disk Jarl uses, how full it is and the databases' share.

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

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

@@ -18,6 +18,7 @@ export async function render(el) {
     st.backup ? backupCard(st.backup) : null,
     exposure ? exposureCard(exposure) : null,
     st.certificates ? certCard(st.certificates) : null,
+    st.storage ? storageCard(st.storage) : null,
     st.encrypted_dns ? h("a", { class: "card link", href: "#/encrypted-dns" }, h("div", { class: "label" }, "Encrypted DNS"),
       h("div", { class: "value" }, st.encrypted_dns.ok ? badge("working", "ok") : badge("not working", "err")),
       h("div", { class: "sub" }, "checked ", time(st.encrypted_dns.checked))) : null,
@@ -100,6 +101,7 @@ export async function render(el) {
     h("h2", null, "Configuration checks"),
     real.length ? problemsList(real) : h("div", { class: "msg ok" }, "No problems found in the current configuration."),
     problems.length > real.length ? h("details", null, h("summary", { class: "muted" }, plural(problems.length - real.length, "note")), problemsList(problems.filter((p) => p.severity === "info"))) : null));
+  if (st.storage) parts.push(storagePanel(st.storage));
   if (s.paths) {
     parts.push(h("div", { class: "panel" }, h("h2", null, "Files"), h("dl", { class: "kv" },
       h("dt", null, "named's main config"), h("dd", { class: "mono" }, s.main_config || "–"),
@@ -140,3 +142,44 @@ function certCard(c) {
 function card(label, value, sub) {
   return h("div", { class: "card" }, h("div", { class: "label" }, label), h("div", { class: "value" }, value), sub ? h("div", { class: "sub" }, sub) : null);
 }
+
+// storageCard: the databases' size, and the fullest disk Jarl uses.
+function storageCard(sg) {
+  const fullest = sg.disks.reduce((a, d) => (!a || used(d) > used(a) ? d : a), null);
+  const value = h("span", null, bytes(sg.total));
+  const sub = fullest ? [h("span", { class: used(fullest) > 0.9 ? "warn-text" : "" }, Math.round(used(fullest) * 100) + "% full"), " · " + fullest.path] : "databases";
+  return h("a", { class: "card link", href: "#storage" , onclick: (e) => { e.preventDefault(); document.getElementById("storage")?.scrollIntoView({ behavior: "smooth" }); } },
+    h("div", { class: "label" }, "Databases"), h("div", { class: "value" }, value), h("div", { class: "sub" }, sub));
+}
+
+// storagePanel shows each database's size and, per disk Jarl uses, a bar:
+// the databases, everything else, and what is free.
+function storagePanel(sg) {
+  const dbRows = sg.databases.map((d) => [h("dt", null, d.label),
+    h("dd", null, h("strong", null, bytes(d.bytes)), " ", h("span", { class: "mono small muted" }, d.path),
+      d.query_log_rows != null ? h("div", { class: "small muted" }, "the query log holds " + d.query_log_rows.toLocaleString() + " answers (stats.retention.queries)") : null)]);
+  return h("div", { class: "panel", id: "storage" },
+    h("h2", null, "Storage"),
+    h("dl", { class: "kv" }, dbRows, h("dt", null, "Together"), h("dd", null, h("strong", null, bytes(sg.total)))),
+    sg.disks.map((d) => {
+      const other = Math.max(0, d.total - d.free - d.databases);
+      const pctOf = (n) => (d.total ? (n / d.total) * 100 : 0) + "%";
+      const u = used(d);
+      return h("div", { class: "disk" },
+        h("div", { class: "disk-head" }, h("span", { class: "mono" }, d.path), h("span", { class: "muted small" }, " · " + d.holds.join(", ")),
+          h("span", { class: "grow" }), h("span", { class: u > 0.9 ? "warn-text" : "muted" }, bytes(d.free) + " free of " + bytes(d.total) + " (" + Math.round(u * 100) + "% used)")),
+        h("div", { class: "disk-bar", role: "img", "aria-label": Math.round(u * 100) + "% used, Jarl's databases " + bytes(d.databases) },
+          d.databases ? h("div", { class: "seg db", title: "Jarl's databases: " + bytes(d.databases), style: { width: pctOf(d.databases) } }) : null,
+          h("div", { class: "seg other" + (u > 0.9 ? " full" : ""), title: "Everything else: " + bytes(other), style: { width: pctOf(other) } })),
+        d.databases ? h("div", { class: "small muted" }, h("span", { class: "swatch db" }), " Jarl's databases " + bytes(d.databases), "  ", h("span", { class: "swatch other" }), " everything else") : null);
+    }));
+}
+
+function used(d) { return d.total ? (d.total - d.free) / d.total : 0; }
+
+function bytes(n) {
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
+  return (n >= 100 || i === 0 ? Math.round(n) : n.toFixed(1)) + " " + units[i];
+}