Mark signed zones with a padlock, and name clients in statistics

The zones list shows a padlock after signed zones, linking to their
DNSSEC tab. Client lists in the statistics show the host name Jarl's
records have for each address (PTR, else A/AAAA); no DNS queries.

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

internal/web/static/assets/charts.js

@@ -324,9 +324,11 @@ export function barList(entries, { total, label = (k) => k, empty = "No data yet
     const share = sum ? (e.count / sum) * 100 : 0;
     const name = label(e.key);
     const link = href ? href(e.key) : null;
-    return h("li", { title: name + ": " + e.count.toLocaleString() + " (" + share.toFixed(1) + "%)" },
+    // Clients Jarl has a host name for: the name, then the address.
+    const shown = e.name ? [e.name, h("span", { class: "muted" }, " " + name)] : name;
+    return h("li", { title: (e.name ? e.name + " (" + name + ")" : name) + ": " + e.count.toLocaleString() + " (" + share.toFixed(1) + "%)" },
       h("div", { class: "bar-text" },
-        link ? h("a", { href: link, class: "bar-label" }, name) : h("span", { class: "bar-label" }, name),
+        link ? h("a", { href: link, class: "bar-label" }, shown) : h("span", { class: "bar-label" }, shown),
         h("span", { class: "bar-value" }, compact(e.count), h("span", { class: "muted" }, " · " + share.toFixed(share < 10 ? 1 : 0) + "%"))),
       h("div", { class: "bar-track" }, h("div", { class: "bar-fill", style: { width: Math.max(0.5, (e.count / peak) * 100) + "%" } })));
   }));

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

@@ -23,7 +23,7 @@ export async function render(el, params, query) {
     lastList.zones = hash;
     const rows = zones.filter((z) => (!q || z.name.includes(q)) && (!viewSel.value || z.view === viewSel.value) && (!typeSel.value || z.type === typeSel.value));
     mount(list, table([
-      { label: "Zone", render: (z) => [z.pending === "delete" ? h("span", null, z.display_name) : h("a", { href: "#/zones/" + z.id }, z.display_name), z.pending ? [" ", pendingBadge(z.pending)] : null], tdClass: "name" },
+      { label: "Zone", render: (z) => [z.pending === "delete" ? h("span", null, z.display_name) : h("a", { href: "#/zones/" + z.id }, z.display_name), dnssecLock(z), z.pending ? [" ", pendingBadge(z.pending)] : null], tdClass: "name" },
       views.length ? { label: "View", render: (z) => viewLink(viewsById.get(z.view_id), z.view, hash) } : null,
       { label: "Type", render: (z) => badge(z.type, z.type === "primary" ? "accent" : "") },
       { label: "Records", render: (z) => z.type === "primary" ? [String(z.record_count), z.disabled_count ? h("span", { class: "muted small", title: z.disabled_count + " disabled (left out of the zone)" }, " (" + z.disabled_count + " off)") : null] : "", class: "right", tdClass: "right" },
@@ -236,6 +236,24 @@ export function emailOf(rname) {
   return m[1].replace(/\\\./g, ".") + "@" + m[2];
 }
 
+// dnssecLock marks a signed zone with a padlock linking to its DNSSEC tab:
+// closed while signed, open while signing is being turned off (BIND's
+// insecure policy).
+function dnssecLock(z) {
+  if (!z.dnssec_policy) return null;
+  const off = z.dnssec_policy === "insecure";
+  const a = h("a", {
+    class: "dnssec-lock" + (off ? " off" : ""),
+    href: "#/zones/" + z.id + "/dnssec",
+    title: off ? "DNSSEC: signing is being turned off" : "DNSSEC: signed (policy " + z.dnssec_policy + ")",
+    "aria-label": off ? "DNSSEC being turned off" : "DNSSEC signed",
+  });
+  a.innerHTML = '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="' +
+    (off ? "M5 7V5a3 3 0 0 1 5.8-1.1" : "M5 7V5a3 3 0 0 1 6 0v2") +
+    '" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><rect x="3" y="7" width="10" height="7.5" rx="1.5" fill="currentColor"/></svg>';
+  return a;
+}
+
 export function pendingBadge(kind) {
   return badge({ add: "pending: new", change: "pending: changed", delete: "pending: delete", disable: "pending: disable", enable: "pending: enable" }[kind] || kind, kind === "delete" ? "err" : "warn");
 }

internal/web/static/assets/style.css

@@ -141,6 +141,8 @@ th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: upp
 tr:hover td { background: var(--info-soft); }
 td.data { font-family: var(--mono); font-size: 13px; word-break: break-all; }
 td.name { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
+a.dnssec-lock { display: inline-flex; vertical-align: -1px; margin-left: 6px; color: var(--ok); text-decoration: none; }
+a.dnssec-lock.off { color: var(--warn); }
 tr.same-name-next td { border-bottom-color: color-mix(in srgb, var(--border) 40%, transparent); }
 td.actions-cell { white-space: nowrap; text-align: right; width: 1%; }
 tr.editing td { background: var(--accent-soft); }