Quotas: usage as a share, and their statistics per rule

What a quota used shows its percentage of the allowance on the Rules
page (line and dialog), the dashboard and in hc quotas. Statistics'
Quotas card links each entry to its rule, named, without the share of
the total; per-address quotas are in it at last: their quota:rN series
is the sum of their addresses.

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

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

@@ -3,7 +3,7 @@
 import { h, mount, table, badge, problemsList, time, plural } from "../ui.js";
 import { get, can } from "../api.js";
 import { onLeave } from "../app.js";
-import { describe, hits, humanCount, fmtBytes, usageBar, lookupNames, named } from "../widgets.js";
+import { describe, hits, humanCount, fmtBytes, usageBar, lookupNames, named, pct } from "../widgets.js";
 import { lineChart, chartCard, legend, timeTable, stepSeconds } from "../charts.js";
 import { bytes } from "./stats.js";
 
@@ -82,8 +82,8 @@ function quotaPanel(quotas, names) {
       { label: "Rule", render: (q) => h("a", { href: "#/rules?rule=" + q.rule_id }, q.rule) },
       { label: "Allowance", render: (q) => fmtBytes(q.quota.bytes) + (q.quota.per_source ? " each source" : q.quota.per_destination ? " each destination" : "") },
       { label: "Used", render: (q) => perAddress(q)
-        ? [plural((q.addresses || []).length, "address", "addresses"), q.addresses && q.addresses.length ? [", busiest ", named(names, q.addresses[0].address), " " + fmtBytes(used(q))] : ""]
-        : fmtBytes(q.used) },
+        ? [plural((q.addresses || []).length, "address", "addresses"), q.addresses && q.addresses.length ? [", busiest ", named(names, q.addresses[0].address), " " + fmtBytes(used(q)) + " (" + pct(used(q), q.quota.bytes) + ")"] : ""]
+        : fmtBytes(q.used) + " (" + pct(q.used, q.quota.bytes) + ")" },
       { label: "", render: (q) => usageBar(used(q), q.quota.bytes) },
       { label: "Next reset", render: (q) => q.next_reset ? time(q.next_reset) : h("span", { class: "muted" }, "by hand") },
     ], quotas));

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

@@ -2,7 +2,7 @@
 import { h, mount, table, modal, errorBox, field, input, select, checkbox, confirmDialog, badge, textarea, toast } from "../ui.js";
 import { get, api, change, can } from "../api.js";
 import { rerender } from "../app.js";
-import { names, matchEditor, describe, hits, counters, listEditor, rowClass, live, fmtBytes, quotas, usageBar, lookupNames, named } from "../widgets.js";
+import { names, matchEditor, describe, hits, counters, listEditor, rowClass, live, fmtBytes, quotas, usageBar, lookupNames, named, pct } from "../widgets.js";
 
 const chains = [
   ["input", "Input", "Traffic to the firewall itself."],
@@ -165,10 +165,10 @@ function quotaLine(r, q) {
   const each = qt.per_source ? " each source" : qt.per_destination ? " each destination" : "";
   const resets = qt.reset === "monthly" ? "monthly" : qt.reset || "reset by hand";
   let used = fmtBytes(qt.bytes) + each;
-  if (q && !each) used = fmtBytes(q.used) + " of " + fmtBytes(qt.bytes) + " used";
+  if (q && !each) used = fmtBytes(q.used) + " of " + fmtBytes(qt.bytes) + " used (" + pct(q.used, qt.bytes) + ")";
   else if (q) {
     const n = (q.addresses || []).length;
-    used += " · " + (n === 1 ? "1 address" : n + " addresses") + (n ? ", busiest " + fmtBytes(q.addresses[0].used) : "");
+    used += " · " + (n === 1 ? "1 address" : n + " addresses") + (n ? ", busiest " + fmtBytes(q.addresses[0].used) + " (" + pct(q.addresses[0].used, qt.bytes) + ")" : "");
   }
   const text = "quota " + used + " · " + resets;
   return h("div", { class: "muted small" }, q && r.pending !== "new"
@@ -193,12 +193,13 @@ async function quotaDialog(r, q) {
     perAddress ? table([
       { label: "Address", render: (a) => h("span", { class: "mono" }, named(names, a.address)) },
       { label: "Used", render: (a) => fmtBytes(a.used) },
+      { label: "", class: "num", tdClass: "num", render: (a) => pct(a.used, qt.bytes) },
       { label: "", render: (a) => usageBar(a.used, qt.bytes) },
       write ? { label: "", render: (a) => h("span", { class: "nowrap" },
         h("button", { class: "small", onclick: then(() => resetQuota(r, a.address)) }, "Reset"), " ",
         h("button", { class: "small", onclick: then(() => giveBack(r, a.address)) }, "Give back…")) } : null,
     ].filter(Boolean), q.addresses || [], { empty: "No address has used it since the last reset." })
-      : h("div", null, h("strong", null, fmtBytes(q.used)), " of " + fmtBytes(qt.bytes) + " used", usageBar(q.used, qt.bytes))),
+      : h("div", null, h("strong", null, fmtBytes(q.used)), " of " + fmtBytes(qt.bytes) + " used (" + pct(q.used, qt.bytes) + ")", usageBar(q.used, qt.bytes))),
   [
     ...(write ? [{ label: perAddress ? "Reset all" : "Reset", value: "reset" }, { label: perAddress ? "Give back to all…" : "Give back…", value: "give" }] : []),
     { label: "Close", value: null },

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

@@ -104,7 +104,7 @@ export async function render(el, params, query) {
     listCard("What they tried", "the logged drops' protocol and port", barList(s.blocked_ports, { empty: "No logged drops " + rangeLabel + "." })),
     listCard("Devices, received", "bytes from external zones, by inside address (IPv6 per /64)", s.devices_down.length ? barList(s.devices_down, { format: bytes, href: connHref }) : devHint),
     listCard("Devices, sent", "bytes to external zones", s.devices_up.length ? barList(s.devices_up, { format: bytes, href: connHref }) : devHint.cloneNode(true)),
-    d.quotas.length ? listCard("Quotas", "bytes counted against each rule's quota, " + rangeLabel, barList(d.quotas, { format: bytes, label: (k) => "rule #" + k.slice(1), href: () => "#/rules" })) : null,
+    d.quotas.length ? listCard("Quotas", "bytes counted against each rule's quota, " + rangeLabel, barList(d.quotas, { format: bytes, label: (k) => (d.hits.find((x) => x.key === k) || {}).name || "rule #" + k.slice(1), href: ruleHref, share: false })) : null,
     listCard("Rules that matched nothing", "in the last 30 days (or since statistics started): candidates to remove",
       unused.length ? h("div", null, h("ul", { class: "plain-list" }, unused.slice(0, 12).map((e) => h("li", null, h("a", { href: ruleHref(e.key) }, e.name || e.key)))),
         unused.length > 12 ? h("div", { class: "muted small" }, "and " + (unused.length - 12) + " more: hc stats rules --unused") : null) : h("div", { class: "empty" }, "Every rule matched something."))));