Dashboard: list the rules' quotas

A Quotas panel with each quota's allowance, use (or, per address, the
count and the busiest), a usage bar and the next reset. The usage bar
moves to widgets.js and the Rules page's usage dialog shares it.

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

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

@@ -1,9 +1,9 @@
-// Dashboard: the ruleset's state, problems, interfaces, the busiest rules
-// and the latest drops.
-import { h, mount, table, badge, problemsList, time } from "../ui.js";
+// Dashboard: the ruleset's state, problems, interfaces, the busiest rules,
+// the quotas and the latest drops.
+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 } from "../widgets.js";
+import { describe, hits, humanCount, fmtBytes, usageBar } from "../widgets.js";
 import { lineChart, chartCard, legend, timeTable, stepSeconds } from "../charts.js";
 import { bytes } from "./stats.js";
 
@@ -11,12 +11,13 @@ export async function render(el) {
   const draw = async () => {
     const st = await get("/status");
     const config = can("config", false), logs = can("log", false);
-    const [rules, cs, log, tl, zones] = await Promise.all([
+    const [rules, cs, log, tl, zones, quotas] = await Promise.all([
       config ? get("/rules") : [],
       logs ? get("/counters").then((c) => c.counters).catch(() => ({})) : {},
       logs ? get("/log", { limit: 8 }).catch(() => []) : [],
       logs ? get("/stats/timeline", { since: "24h", step: "1h", keys: "zrx:*,ztx:*,drops" }).catch(() => null) : null,
       config ? get("/zones").catch(() => []) : [],
+      logs ? get("/quotas").catch(() => []) : [],
     ]);
     const busiest = rules.filter((r) => cs["r" + r.id] && cs["r" + r.id].packets > 0)
       .sort((a, b) => cs["r" + b.id].packets - cs["r" + a.id].packets).slice(0, 8);
@@ -54,6 +55,7 @@ export async function render(el) {
           { label: "Hits", render: (r) => hits(cs, "r" + r.id) },
           { label: "Comment", render: (r) => r.comment },
         ], busiest)) : null,
+      quotas.length ? quotaPanel(quotas) : null,
       log.length ? h("div", { class: "panel" },
         h("div", { class: "panel-head" }, h("h2", null, "Latest logged packets"), h("a", { class: "button small", href: "#/log" }, "The log")),
         table([
@@ -69,6 +71,24 @@ export async function render(el) {
   onLeave(() => clearInterval(t));
 }
 
+// quotaPanel lists every rule's quota with what it used: the total, or
+// for a per-address quota the busiest address (the rest are on the rule).
+function quotaPanel(quotas) {
+  const perAddress = (q) => q.quota.per_source || q.quota.per_destination;
+  const used = (q) => perAddress(q) ? ((q.addresses || [])[0] || { used: 0 }).used : q.used;
+  return h("div", { class: "panel" },
+    h("div", { class: "panel-head" }, h("h2", null, "Quotas"), h("a", { class: "button small", href: "#/stats" }, "Statistics")),
+    table([
+      { label: "Rule", render: (q) => h("a", { href: "#/rules?rule=" + q.rule_id }, "#" + 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 " + fmtBytes(used(q)) : ""]
+        : fmtBytes(q.used) },
+      { 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));
+}
+
 // statsCharts: the last 24 hours' traffic with the internet and drops,
 // per hour (the Statistics page has the rest).
 function statsCharts(tl, zones) {