Add changesets, bandwidth limits and quotas; generic examples

Changesets, as in Jarl: configuration changes are operations that can be
staged in a changeset, checked as they are added (validation and nft -c),
reviewed with the diff of the ruleset, and applied together as one
history entry, then on probation like any change made over the network.
The web UI collects edits for review by default (pending rows, a bar with
Review and Apply now, a Changes page, a switch for live edits); hc stages
with -C ID or HOUSECARL_CHANGESET (checked like JARL_CHANGESET) and has
hc changeset create/list/show/diff/apply/discard/remove. Undo, import and
takeover refuse a changeset. --dry-run shows the ruleset's diff.

Bandwidth and quotas: rate limits in bytes, per source or destination;
quotas per rule or per address that reset daily, weekly, monthly on a
day, or by hand, with their usage carried across reloads, saved for
reboots, shown by hc quotas and on the rules page, and reset with hc rule
reset-quota. Rules that count traffic are checked before established
connections are accepted (so they see every packet) and can't accept.
Per-address limits group IPv6 by /64 by default (--group-v4/-v6).
Per-source rate meters use update. The importer turns meters, byte rates
and quotas into these fields.

The examples in the web UI, hc's help and the docs use documentation
addresses and generic names instead of the maintainer's network.

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

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

@@ -1,8 +1,8 @@
 // Rules: each chain's rules in order, with their hits; add, edit, move.
-import { h, mount, table, modal, errorBox, field, input, select, checkbox, confirmDialog, badge, textarea } from "../ui.js";
-import { get, change, can } from "../api.js";
+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 } from "../widgets.js";
+import { names, matchEditor, describe, hits, counters, listEditor, rowClass, live, fmtBytes, quotas } from "../widgets.js";
 
 const chains = [
   ["input", "Input", "Traffic to the firewall itself."],
@@ -25,7 +25,9 @@ const builtins = {
 
 export async function render(el, params, query) {
   const chain = query.get("chain") || "input";
-  const [rules, settings, cs] = await Promise.all([get("/rules", { chain }), get("/settings"), counters()]);
+  const [all, settings, cs, qs] = await Promise.all([get("/rules", { chain }), get("/settings"), counters(), quotas()]);
+  // As nftables checks them: the rules that count traffic first.
+  const rules = [...all.filter(countsTraffic), ...all.filter((r) => !countsTraffic(r))];
   const write = can("config", true);
   const info = chains.find((c) => c[0] === chain) || chains[0];
   const policy = settings[chain + "_policy"];
@@ -41,33 +43,93 @@ export async function render(el, params, query) {
         bi.map(([, mark, text], i) => [i ? " · " : "", text, mark ? [" (", hits(cs, "b-" + mark), ")"] : ""]), " — ",
         h("a", { href: "#/settings" }, "settings")) : null,
       table([
-        { label: "#", render: (r, i) => String(i + 1) },
+        { label: "#", render: (r) => r.pending === "deleted" ? "" : String(live(rules).indexOf(r) + 1) },
         { label: "Match", render: (r) => r.raw ? [badge("raw", ""), " ", h("span", { class: "mono small" }, r.raw)]
-          : [describe(r), extras(r)] },
+          : [countsTraffic(r) ? [badge("every packet", "accent"), " "] : null, describe(r), extras(r, qs[r.id])] },
         { label: "Action", render: actionBadge },
         { label: "Hits", render: (r) => hits(cs, "r" + r.id) },
         { label: "Comment", render: (r) => r.comment },
-        write ? { label: "", tdClass: "actions-cell", render: (r, i) => [
-          h("button", { class: "small reveal", title: "Move up", disabled: i === 0, onclick: () => move(r, { before: rules[i - 1].id }) }, "↑"), " ",
-          h("button", { class: "small reveal", title: "Move down", disabled: i === rules.length - 1, onclick: () => move(r, { after: rules[i + 1].id }) }, "↓"), " ",
+        write ? { label: "", tdClass: "actions-cell", render: (r) => {
+          if (r.pending === "deleted") return badge("deleted", "err");
+          // Moves stay among the rules of the same kind (counting traffic,
+          // or not): nftables checks those first.
+          const rs = live(rules).filter((x) => countsTraffic(x) === countsTraffic(r)), i = rs.indexOf(r);
+          return [
+          h("button", { class: "small reveal", title: "Move up", disabled: i === 0, onclick: () => move(r, { before: rs[i - 1].id }) }, "↑"), " ",
+          h("button", { class: "small reveal", title: "Move down", disabled: i === rs.length - 1, onclick: () => move(r, { after: rs[i + 1].id }) }, "↓"), " ",
           h("button", { class: "small reveal", onclick: () => ruleDialog(r, chain) }, "Edit"), " ",
           h("button", { class: "small reveal", onclick: () => toggle(r) }, r.disabled ? "Enable" : "Disable"), " ",
           h("button", { class: "small reveal", onclick: () => del(r) }, "Delete"),
-        ] } : null,
-      ].filter(Boolean), rules, { empty: "No rules in this chain yet.", rowClass: (r) => r.disabled ? "disabled" : "" }),
+        ];
+        } } : null,
+      ].filter(Boolean), rules, { empty: "No rules in this chain yet.", rowClass }),
+      rules.some(countsTraffic) ? h("div", { class: "muted small" }, "Rules marked “every packet” have a quota or a byte rate: they are checked before established connections are accepted, so they count all of a connection's traffic, not only its first packet. They can drop, reject or log, not accept.") : null,
       h("div", { class: "policy small" }, "Then the policy: ", badge(policy, policy === "drop" ? "err" : "ok"),
         policy === "drop" ? [" — ", hits(cs, "p-" + chain), " packets reached it"] : null)));
 }
 
-function extras(r) {
+// countsTraffic: a quota or a byte rate (as model.Rule.CountsTraffic).
+function countsTraffic(r) {
+  return !r.raw && (!!r.quota || !!(r.limit && ["bytes", "kbytes", "mbytes"].includes(r.limit.unit)));
+}
+
+function extras(r, q) {
   const x = [];
   if ((r.ct_state || []).length) x.push("state " + r.ct_state.join(","));
   if ((r.ct_status || []).length) x.push("status " + r.ct_status.join(","));
   if ((r.days || []).length) x.push(r.days.join(","));
   if (r.hour_from) x.push(r.hour_from + "–" + r.hour_to);
-  if (r.limit) x.push((r.limit.over ? "over " : "") + r.limit.rate + "/" + r.limit.per + (r.limit.per_source ? " per source" : ""));
+  if (r.limit) {
+    const l = r.limit;
+    x.push((l.over ? "over " : "") + l.rate + (l.unit && l.unit !== "packets" ? " " + l.unit : "") + "/" + l.per +
+      (l.per_source ? " per source" : l.per_destination ? " per destination" : ""));
+  }
   if (r.conn_limit) x.push("over " + r.conn_limit + " connections");
-  return x.length ? h("div", { class: "muted small" }, x.join(" · ")) : null;
+  const out = x.length ? [h("div", { class: "muted small" }, x.join(" · "))] : [];
+  if (r.quota) out.push(quotaLine(r, q));
+  return out;
+}
+
+// quotaLine shows a quota, and what it used: in total, or per address
+// (the busiest, and the rest in a dialog).
+function quotaLine(r, q) {
+  const qt = r.quota;
+  const each = qt.per_source ? " each source" : qt.per_destination ? " each destination" : "";
+  const resets = qt.reset === "monthly" ? "monthly on day " + (qt.day || 1) : qt.reset || "by hand";
+  let used = null;
+  if (q && !qt.per_source && !qt.per_destination) {
+    used = [h("strong", null, fmtBytes(q.used)), " of " + fmtBytes(qt.bytes) + " used"];
+  } else if (q) {
+    const n = (q.addresses || []).length;
+    used = [n === 1 ? "1 address" : n + " addresses", n ? [", busiest ", h("strong", null, fmtBytes(q.addresses[0].used))] : null, " ",
+      n ? h("button", { class: "small", onclick: () => usageDialog(r, q) }, "Usage…") : null];
+  }
+  return h("div", { class: "muted small" }, (qt.over ? "quota over " : "quota ") + fmtBytes(qt.bytes) + each + ", resets " + resets,
+    used ? [" · ", used] : null,
+    q && q.next_reset ? " · next reset " + new Date(q.next_reset).toLocaleString() : null,
+    can("config", true) && q && r.pending !== "new" ? [" ", h("button", { class: "small", onclick: () => resetQuota(r) }, "Reset")] : null);
+}
+
+async function usageDialog(r, q) {
+  await modal("Quota usage of " + (r.comment || "rule #" + r.id), h("div", null,
+    h("p", { class: "muted" }, "Each " + (r.quota.per_source ? "source" : "destination") + " has " + fmtBytes(r.quota.bytes) + "."),
+    table([
+      { label: "Address", render: (a) => h("span", { class: "mono" }, a.address) },
+      { label: "Used", render: (a) => fmtBytes(a.used) },
+      { label: "", render: (a) => h("div", { class: "usage" }, h("div", { class: "usage-bar" + (a.used >= r.quota.bytes ? " full" : "") }, bar(a.used / r.quota.bytes))) },
+    ], q.addresses)), [{ label: "Close", value: null }], { wide: true });
+}
+
+function bar(f) {
+  const seg = h("div", { class: "seg leased" });
+  seg.style.width = Math.min(100, f * 100) + "%";
+  return seg;
+}
+
+async function resetQuota(r) {
+  if (!await confirmDialog("Reset the quota", "Start the quota of " + (r.comment || "rule #" + r.id) + " again now" +
+    (r.quota.per_source || r.quota.per_destination ? ", for every address" : "") + "? This is done at once, not staged.", "Reset")) return;
+  try { await api("POST", "/rules/" + r.id + "/reset-quota"); toast("Quota reset"); rerender(); } catch (e) { modal("Not reset", errorBox(e)); }
 }
 
 async function move(r, where) {
@@ -101,14 +163,30 @@ export async function ruleDialog(r, chain) {
   const hourTo = input({ value: r.hour_to || "", placeholder: "17:30", class: "short" });
   const l = r.limit || {};
   const rate = input({ value: l.rate || "", placeholder: "10", class: "short", type: "number", min: 1 });
-  const per = select(["second", "minute", "hour", "day"], l.per || "minute");
+  const unit = select([["", "packets"], ["bytes", "bytes"], ["kbytes", "KB"], ["mbytes", "MB"]], l.unit || "", { class: "inline" });
+  const per = select(["second", "minute", "hour", "day"], l.per || "minute", { class: "inline" });
   const burst = input({ value: l.burst || "", placeholder: "burst", class: "short", type: "number", min: 0 });
-  const over = checkbox("match beyond the rate (to drop floods)", l.over);
-  const perSource = checkbox("per source address", l.per_source);
+  const over = checkbox("match beyond the rate (to drop floods, or traffic over a bandwidth)", l.over);
+  const keyOf = (x) => x.per_source ? "source" : x.per_destination ? "destination" : "";
+  const keys = [["", "for everything the rule matches"], ["source", "for each source address"], ["destination", "for each destination address"]];
+  const limitKey = select(keys, keyOf(l), { class: "inline" });
+  const qt = r.quota || {};
+  const gb = qt.bytes && qt.bytes % (1 << 30) === 0;
+  const quotaAmount = input({ value: qt.bytes ? qt.bytes / (gb ? 1 << 30 : 1 << 20) : "", placeholder: "50", class: "short", type: "number", min: 1 });
+  const quotaUnit = select([["mb", "MB"], ["gb", "GB"]], gb || !qt.bytes ? "gb" : "mb", { class: "inline" });
+  const quotaOver = checkbox("match once it is used up (to drop); otherwise while it lasts (to accept)", qt.over === undefined ? true : qt.over);
+  const quotaKey = select(keys, keyOf(qt), { class: "inline" });
+  const quotaReset = select([["", "only by hand"], ["daily", "daily, at midnight"], ["weekly", "weekly, on Mondays"], ["monthly", "monthly, on day"]], qt.reset || "", { class: "inline" });
+  const quotaDay = input({ value: qt.day || "", placeholder: "1", class: "short", type: "number", min: 1, max: 31 });
+  const showDay = () => quotaDay.classList.toggle("hidden", quotaReset.value !== "monthly");
+  quotaReset.addEventListener("change", showDay);
+  showDay();
+  const group4 = input({ value: r.group_v4 || "", placeholder: "32", class: "short", type: "number", min: 1, max: 32 });
+  const group6 = input({ value: r.group_v6 || "", placeholder: "64", class: "short", type: "number", min: 1, max: 128 });
   const conn = input({ value: r.conn_limit || "", placeholder: "e.g. 20", class: "short", type: "number", min: 1 });
   const log = checkbox("log matching packets (Log page)", r.log);
   const logPrefix = input({ value: r.log_prefix || "", placeholder: "default: hc CHAIN #ID ACTION:" });
-  const raw = textarea(r.raw || "", { rows: 2, class: "mono", placeholder: "iifname != \"wan\" ct state invalid ip daddr @trusted_v4 accept" });
+  const raw = textarea(r.raw || "", { rows: 2, class: "mono", placeholder: "ip saddr @admins_v4 tcp dport 22 ct state new accept" });
   const comment = input({ value: r.comment || "" });
   const disabled = checkbox("disabled: keep the rule but don't use it", r.disabled);
   const err = h("div");
@@ -121,7 +199,12 @@ export async function ruleDialog(r, chain) {
       field("Connection status", statuses, "dnat: the connection was port forwarded."),
       field("Days", days),
       field("Hours", h("div", null, hourFrom, " to ", hourTo), "22:00 to 06:00 passes midnight."),
-      field("Rate limit", h("div", null, rate, " packets per ", per, " ", burst, over, perSource), "Empty: no limit."),
+      field("Rate limit", h("div", null, rate, " ", unit, " per ", per, " ", burst, " ", limitKey, over),
+        "Empty: no limit. In bytes, it is a bandwidth (KB or MB per second or minute); traffic beyond it is dropped, not queued. The burst is in the same unit."),
+      field("Quota", h("div", null, quotaAmount, " ", quotaUnit, " ", quotaKey, " resets ", quotaReset, " ", quotaDay, quotaOver),
+        "Empty: none. An allowance of traffic; Housecarl keeps the count across changes and restarts."),
+      field("Group addresses", h("div", null, "IPv4 /", group4, " IPv6 /", group6),
+        "Per-address limits, connection limits and quotas count addresses by these prefixes. Default: each IPv4 address, IPv6 by /64 (one device has several addresses)."),
       field("Connection limit", conn, "Match a source that already has more than this many connections."),
       field("Log", h("div", null, log, logPrefix)),
       field("Raw nftables", raw, "Instead of all the above: one nftables rule, for what Housecarl can't say. Checked by nftables."),
@@ -138,7 +221,12 @@ export async function ruleDialog(r, chain) {
     mount(err);
     const v = { chain: ch.value, ...match.value(), action: action.value, reject_with: action.value === "reject" ? rejectWith.value : "",
       ct_state: states.value(), ct_status: statuses.value(), days: days.value(), hour_from: hourFrom.value.trim(), hour_to: hourTo.value.trim(),
-      limit: rate.value ? { rate: parseInt(rate.value, 10), per: per.value, burst: parseInt(burst.value || "0", 10), over: over.input.checked, per_source: perSource.input.checked } : null,
+      limit: rate.value ? { rate: parseInt(rate.value, 10), unit: unit.value, per: per.value, burst: parseInt(burst.value || "0", 10), over: over.input.checked,
+        per_source: limitKey.value === "source", per_destination: limitKey.value === "destination" } : null,
+      quota: quotaAmount.value ? { bytes: parseInt(quotaAmount.value, 10) * (quotaUnit.value === "gb" ? 1 << 30 : 1 << 20), over: quotaOver.input.checked,
+        per_source: quotaKey.value === "source", per_destination: quotaKey.value === "destination",
+        reset: quotaReset.value, day: quotaReset.value === "monthly" ? parseInt(quotaDay.value || "1", 10) : 0 } : null,
+      group_v4: parseInt(group4.value || "0", 10), group_v6: parseInt(group6.value || "0", 10),
       conn_limit: parseInt(conn.value || "0", 10), log: log.input.checked, log_prefix: logPrefix.value.trim(), raw: raw.value.trim(), comment: comment.value.trim() };
     if (r.id) v.disabled = disabled.input.checked;
     try {