Release 0.1.1-rc.6

Housecarl 0.1.1's sixth release candidate. Since rc.5: the dashboard
lists the rules' quotas. make test passes.

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

CHANGELOG.md

@@ -8,6 +8,15 @@ All notable changes to Housecarl are documented here. The format follows
 
 ### Added
 
+- **Quotas on the dashboard.** With any rule holding a quota, the
+  dashboard lists them all: the allowance, what is used (for a
+  per-address quota, how many addresses and the busiest) with a bar, and
+  the next reset. Each opens its rule.
+- **Links to a rule open it.** A rule named in the matrix, the log, the
+  tracer, statistics or the dashboard's busiest rules opens the Rules
+  page on its chain, scrolled to it and highlighted (`#/rules?rule=ID`).
+  The Rules page shows each rule's ID (`#410`, as `hc` and labels name
+  it) beside its order.
 - **A clearer zone matrix.** A cell reads allow, block, or **partly**
   (some new connections let through, the rest not), with the exceptions
   counted by what they do (`+3 -1` instead of `+4`), and what they let
@@ -17,6 +26,8 @@ All notable changes to Housecarl are documented here. The format follows
   between its interfaces passes the firewall). The details list each
   rule's hits. API: `summary`, `allowed`, `blocked`, `open`,
   `same_zone`, `note`, `hits`, and `short` and `hits` per exception.
+  Raw rules that are a match and then accept, drop or reject (without
+  interfaces) are read instead of shown as unknown.
 - **Shadow mode** (`shadow.enabled` in housecarl.yaml; docs/shadow.md):
   Housecarl's ruleset is loaded beside the firewall you have but blocks,
   rejects and translates nothing. Drops and rejects are counted and accept
@@ -51,6 +62,11 @@ All notable changes to Housecarl are documented here. The format follows
 
 ### Fixed
 
+- `hc rule add --before/--after/--first` made two changes (create at the
+  end, then move), so two history entries, two probations, and the rule
+  briefly in force at the end of its chain; staged in a changeset, the
+  place was lost. The create now takes the place (`POST
+  /rules?before=ID`, `after`, `first`) and makes one change.
 - `hc matrix` in a terminal: the colours' escape codes threw the columns
   out of line.
 - `hc counters` (`GET /counters`) kept listing the objects of a

README.md

@@ -123,7 +123,7 @@ The web UI is on `http://127.0.0.1:8070/` (see `listen` in
 
 ## Status
 
-Housecarl 0.1.1 is in testing (0.1.1-rc.3): zones, address sets and
+Housecarl 0.1.1 is in testing (0.1.1-rc.6): zones, address sets and
 services with ordered rules, IPv4 and IPv6, port forwards with hairpin NAT
 and IPv6 pinholes, source NAT and redirects, built-ins, probation for
 network changes (confirmed by the client that made them), the ruleset

VERSION

@@ -1 +1 @@
-0.1.1-rc.3
+0.1.1-rc.6

cmd/hc/rules.go

@@ -3,6 +3,7 @@ package main
 import (
 	"fmt"
 	"io"
+	"net/url"
 	"regexp"
 	"strconv"
 	"strings"
@@ -340,26 +341,21 @@ output (from it) or early (before connection tracking: cheap drops).
 			if err != nil {
 				return err
 			}
+			// Placed in the same change: one history entry, and never in
+			// force at the end of the chain.
+			q := url.Values{}
+			switch {
+			case rf.first:
+				q.Set("first", "1")
+			case rf.before != 0:
+				q.Set("before", fmt.Sprint(rf.before))
+			case rf.after != 0:
+				q.Set("after", fmt.Sprint(rf.after))
+			}
 			var resp api.MutationResponse
-			if err := c.Do(ctx(), "POST", "/rules", nil, r, &resp); err != nil {
+			if err := c.Do(ctx(), "POST", "/rules", q, r, &resp); err != nil {
 				return err
 			}
-			// Then place it.
-			if resp.Applied && (rf.first || rf.before != 0 || rf.after != 0) {
-				var created model.Rule
-				if err := jsonUnmarshal(resp.Object, &created); err == nil {
-					mv := api.MoveInput{Before: rf.before, After: rf.after}
-					if rf.first {
-						mv.To = "start"
-					}
-					var moved api.MutationResponse
-					if err := c.Do(ctx(), "POST", objPath("rules", fmt.Sprint(created.ID))+"/move", nil, mv, &moved); err != nil {
-						return err
-					}
-					resp.Changes = append(resp.Changes, moved.Changes...)
-					resp.ConfirmBy = moved.ConfirmBy
-				}
-			}
 			return report(&resp)
 		},
 	}

docs/api.md

@@ -114,7 +114,7 @@ share one pattern, `/{kind}` with kind `zones`, `sets`, `services`,
 | | |
 |---|---|
 | `GET /{kind}` | all of them, in order; `GET /rules?chain=input` for one chain; `GET /services` includes the built-in ones |
-| `POST /{kind}` | create; rules, forwards and NAT rules go last unless given a `position` |
+| `POST /{kind}[?before=ID\|after=ID\|first=1]` | create; rules, forwards and NAT rules go last unless given a `position`, or placed before or after another of their chain, or first, in the same change (one history entry; staged in a changeset, the place goes with it) |
 | `GET /{kind}/{ref}` | by ID, or name for zones, sets, services and forwards |
 | `PATCH /{kind}/{ref}` | change the fields given (a JSON merge: `null` clears) |
 | `DELETE /{kind}/{ref}` | refused while something uses it |

docs/rules.md

@@ -188,6 +188,10 @@ hc quotas                      # what each used, and the next reset
 hc rule reset-quota 31         # start again now
 ```
 
+In the web UI each quota's use is on its rule (with **Reset**), all of
+them together on the dashboard, and their history under **Traffic →
+Statistics**.
+
 | | |
 |---|---|
 | `per-source`, `per-destination` | each address its own allowance; without, one allowance for everything the rule matches |
@@ -332,6 +336,13 @@ The hits are the rule's packets since housecarld started, in all of its
 traffic: a rule without zones counts for every pair it covers. They are
 how you tell an exception that is used from one that isn't.
 
+A raw rule is read when it is a match followed by `accept`, `drop` or
+`reject` (with `counter` and `log` if you like): it counts as an exception
+for every pair of its chain, shown as `raw: …`. One that matches
+interfaces (the matrix can't tell which zones), jumps, translates, sets
+something or uses a verdict map shows as **unknown**: check it yourself.
+Raw rules have hits only if they say `counter`.
+
 A rule whose addresses all lie in networks directly connected to other
 zones is left out of a pair: traffic between those zones can't have them
 (`from wg_net` doesn't concern traffic coming in on the LAN). Routed

internal/matrix/matrix.go

@@ -9,6 +9,7 @@ package matrix
 import (
 	"fmt"
 	"net/netip"
+	"regexp"
 	"strings"
 
 	"housecarl/internal/api"
@@ -185,8 +186,20 @@ func walk(st *model.State, o Options, c *api.MatrixCell, chain, from, to string)
 	for _, r := range rules {
 		mark := []string{fmt.Sprintf("r%d", r.ID)}
 		if r.Raw != "" {
+			rr := readRaw(r.Raw)
+			switch {
+			case !rr.ok:
 				c.Exceptions = append(c.Exceptions, api.MatrixException{RuleID: r.ID, Chain: chain, Label: "rule " + r.Label(), Verdict: "unknown", What: "a raw rule: " + r.Raw,
 					Short: "a raw rule", Marks: mark})
+			case !rr.forNew || chain == model.ChainEarly && rr.verdict == "allowed":
+				// Not for new connections; an early accept decides nothing.
+			case rr.match == "":
+				c.Verdict, c.DecidedBy, c.RuleID, c.Marks = rr.verdict, "rule "+r.Label(), r.ID, mark
+				return true
+			default:
+				c.Exceptions = append(c.Exceptions, api.MatrixException{RuleID: r.ID, Chain: chain, Label: "rule " + r.Label(), Verdict: rr.verdict, What: "raw: " + rr.match,
+					Short: rr.short, Marks: mark})
+			}
 			continue
 		}
 		if !zones(r, from, to) || !forNew(r) {
@@ -321,6 +334,128 @@ func forNew(r *model.Rule) bool {
 	return false
 }
 
+// raw is what the matrix can read of a raw rule.
+type raw struct {
+	ok      bool   // read: it applies to every pair of its chain
+	forNew  bool   // it can match a new connection
+	verdict string // allowed or blocked
+	match   string // what it matches ("" for everything)
+	short   string
+}
+
+// rawStops are words that make a raw rule's reach or effect unclear to
+// the matrix: interfaces (which zones?), jumps, NAT, changes, verdict maps.
+var rawStops = map[string]bool{
+	"iifname": true, "oifname": true, "iif": true, "oif": true, "iiftype": true, "oiftype": true,
+	"jump": true, "goto": true, "return": true, "vmap": true, "queue": true, "continue": true,
+	"dnat": true, "snat": true, "masquerade": true, "redirect": true, "tproxy": true,
+	"set": true, "notrack": true, "dup": true, "fwd": true, "synproxy": true, "flow": true,
+}
+
+// readRaw reads a raw rule that is a match and then accept, drop or
+// reject: the verdict is the last word (but a reject's "with …"); counter
+// and log only count and log.
+func readRaw(text string) raw {
+	toks := fields(text)
+	for i, t := range toks {
+		if t == "comment" {
+			toks = toks[:i]
+			break
+		}
+	}
+	verdict := -1
+	for i, t := range toks {
+		if strings.HasPrefix(t, `"`) {
+			continue
+		}
+		w := strings.Trim(t, ",{}")
+		if rawStops[w] {
+			return raw{}
+		}
+		if w == "accept" || w == "drop" || w == "reject" {
+			verdict = i
+		}
+	}
+	if verdict < 0 || verdict != len(toks)-1 && !(toks[verdict] == "reject" && toks[verdict+1] == "with") {
+		return raw{}
+	}
+	rr := raw{ok: true, forNew: true, verdict: verdictOf(toks[verdict])}
+	var match []string
+	for i := 0; i < verdict; i++ {
+		switch toks[i] {
+		case "counter":
+			continue
+		case "log":
+			// Its options run up to the next match.
+			for i+1 < verdict && map[string]bool{"prefix": true, "level": true, "group": true, "flags": true}[toks[i+1]] {
+				i += 2
+			}
+			continue
+		}
+		match = append(match, toks[i])
+	}
+	rr.match = strings.Join(match, " ")
+	// ct state without new: not for new connections. The states are one
+	// word ("established,related") or a set ("{ established, related }").
+	for i := 0; i+2 < len(match); i++ {
+		if match[i] != "ct" || match[i+1] != "state" {
+			continue
+		}
+		list := match[i+2]
+		if list == "{" || strings.HasPrefix(list, "{") {
+			var b []string
+			for j := i + 2; j < len(match); j++ {
+				b = append(b, match[j])
+				if strings.HasSuffix(match[j], "}") {
+					break
+				}
+			}
+			list = strings.Join(b, " ")
+		}
+		rr.forNew = false
+		for _, st := range strings.FieldsFunc(list, func(c rune) bool { return c == ',' || c == ' ' || c == '{' || c == '}' }) {
+			rr.forNew = rr.forNew || st == "new"
+		}
+	}
+	rr.short = rr.match
+	if m := icmpRe.FindStringSubmatch(rr.match); m != nil {
+		rr.short = m[1]
+	}
+	if len(rr.short) > 40 {
+		rr.short = rr.short[:39] + "…"
+	}
+	return rr
+}
+
+// fields splits a rule into words, a quoted string being one.
+func fields(s string) []string {
+	var out []string
+	var cur strings.Builder
+	quoted := false
+	for _, c := range s {
+		switch {
+		case c == '"':
+			quoted = !quoted
+			cur.WriteRune(c)
+		case !quoted && (c == ' ' || c == '\t'):
+			if cur.Len() > 0 {
+				out = append(out, cur.String())
+				cur.Reset()
+			}
+		default:
+			cur.WriteRune(c)
+		}
+	}
+	if cur.Len() > 0 {
+		out = append(out, cur.String())
+	}
+	return out
+}
+
+// icmpRe finds an ICMP type match in a raw rule: shown as just icmp or
+// icmpv6.
+var icmpRe = regexp.MustCompile(`\b(icmpv6|icmp) type\b`)
+
 // short sums up an exception for the overview: its services (ICMP types
 // as just icmp or icmpv6), with the addresses it is limited to, which
 // matter as much ("tcp/22 from trusted"); times and rates are left to

internal/matrix/matrix_test.go

@@ -158,3 +158,42 @@ func TestSummary(t *testing.T) {
 		t.Errorf("a drop policy's mark: %v", c.Marks)
 	}
 }
+
+// TestRaw: raw rules that are a match and a verdict are read; others stay
+// unknown.
+func TestRaw(t *testing.T) {
+	for _, c := range []struct {
+		raw, verdict, short string
+		ok, forNew          bool
+	}{
+		{"icmpv6 type { nd-router-solicit, nd-neighbor-advert } ip6 hoplimit 255 accept", "allowed", "icmpv6", true, true},
+		{`tcp dport 22 counter log prefix "ssh: " drop comment "x"`, "blocked", "tcp dport 22", true, true},
+		{"ip saddr 10.0.0.1 reject with icmpx type admin-prohibited", "blocked", "ip saddr 10.0.0.1", true, true},
+		{"ct state established,related accept", "allowed", "ct state established,related", true, false},
+		{"ct state { new, untracked } tcp dport 80 accept", "allowed", "ct state { new, untracked } tcp dport 80", true, true},
+		{"counter accept", "allowed", "", true, true},
+		{`iifname "wan" tcp dport 22 accept`, "", "", false, false},
+		{"tcp dport vmap { 22 : accept }", "", "", false, false},
+		{"meta mark set 1 accept", "", "", false, false},
+		{"tcp dport 22 counter", "", "", false, false},
+	} {
+		rr := readRaw(c.raw)
+		if rr.ok != c.ok || c.ok && (rr.verdict != c.verdict || rr.short != c.short || rr.forNew != c.forNew) {
+			t.Errorf("%q: %+v", c.raw, rr)
+		}
+	}
+	// In a pair: an exception that lets ND in, not "unknown".
+	st := state()
+	st.Rules = append(st.Rules, &model.Rule{ID: 90, Chain: "input", Position: 0.5, Raw: "icmpv6 type { nd-router-solicit } ip6 hoplimit 255 accept"})
+	st.Sort()
+	e := find(Build(st), "wan", Firewall).Exceptions
+	found := false
+	for _, x := range e {
+		if x.RuleID == 90 {
+			found = x.Verdict == "allowed" && x.Short == "icmpv6" && strings.HasPrefix(x.What, "raw: icmpv6 type")
+		}
+	}
+	if !found {
+		t.Errorf("the raw ND rule: %+v", e)
+	}
+}

internal/model/changeset.go

@@ -54,6 +54,9 @@ type Op struct {
 	// Data is the object (create), the fields to change (update,
 	// settings) or where to move it (move).
 	Data json.RawMessage `json:"data,omitempty"`
+	// Place is where a create puts the object in its order (a move's
+	// data); none: at the end.
+	Place   json.RawMessage `json:"place,omitempty"`
 	Summary string          `json:"summary"`
 	AddedAt time.Time       `json:"added_at"`
 }

internal/server/h_config.go

@@ -6,6 +6,7 @@ import (
 	"net/http"
 	"net/netip"
 	"sort"
+	"strconv"
 	"strings"
 
 	udiff "github.com/aymanbagabas/go-udiff"
@@ -310,7 +311,19 @@ func (s *Server) createObject(w http.ResponseWriter, r *http.Request, p *auth.Pr
 	if _, err := decodeObject(kind, raw); err != nil {
 		return err
 	}
-	return s.change(w, r, p, model.Op{Op: model.OpCreate, Kind: kind, Data: raw})
+	op := model.Op{Op: model.OpCreate, Kind: kind, Data: raw}
+	// ?before=ID, ?after=ID or ?first=1: where it goes in its order.
+	q := r.URL.Query()
+	var place api.MoveInput
+	place.Before, _ = strconv.ParseInt(q.Get("before"), 10, 64)
+	place.After, _ = strconv.ParseInt(q.Get("after"), 10, 64)
+	if queryBool(r, "first") {
+		place.To = "start"
+	}
+	if place.Before != 0 || place.After != 0 || place.To != "" {
+		op.Place, _ = json.Marshal(place)
+	}
+	return s.change(w, r, p, op)
 }
 
 func (s *Server) updateObject(w http.ResponseWriter, r *http.Request, p *auth.Principal) error {

internal/server/ops.go

@@ -6,6 +6,7 @@ import (
 	"fmt"
 	"net/http"
 	"sort"
+	"strconv"
 	"strings"
 
 	"housecarl/internal/api"
@@ -63,7 +64,16 @@ func createOp(st *model.State, op *model.Op) (int64, error) {
 		*pos = lastPosition(st, op.Kind, chainOf(o))
 	}
 	data, _ := json.Marshal(o)
-	return op.ID, st.Put(op.Kind, op.ID, data)
+	if err := st.Put(op.Kind, op.ID, data); err != nil {
+		return 0, err
+	}
+	// Placed in the same change, so it is never in force anywhere else.
+	if len(op.Place) > 0 {
+		if _, err := moveOp(st, &model.Op{Op: model.OpMove, Kind: op.Kind, Ref: strconv.FormatInt(op.ID, 10), Data: op.Place}); err != nil {
+			return 0, err
+		}
+	}
+	return op.ID, nil
 }
 
 func updateOp(st *model.State, op *model.Op) (int64, error) {

internal/server/server_test.go

@@ -1184,3 +1184,49 @@ func (e *env) text(path string) string {
 	b, _ := io.ReadAll(resp.Body)
 	return string(b)
 }
+
+// TestCreatePlaced: a rule created ?before= another is placed in the same
+// change (one history entry), also when staged in a changeset.
+func TestCreatePlaced(t *testing.T) {
+	e := newEnv(t)
+	var a, b, c api.MutationResponse
+	e.call(e.token, "POST", "/rules", model.Rule{Chain: "input", Match: model.Match{Services: []string{"ssh"}}}, &a)
+	e.call(e.token, "POST", "/rules", model.Rule{Chain: "input", Match: model.Match{Services: []string{"dns"}}}, &b)
+	var first model.Rule
+	json.Unmarshal(a.Object, &first)
+	if code := e.call(e.token, "POST", "/rules?before="+itoa(first.ID), model.Rule{Chain: "input", Match: model.Match{Services: []string{"http"}}, Comment: "placed"}, &c); code != 201 {
+		t.Fatalf("create placed: %d %+v", code, c)
+	}
+	order := func() string {
+		var out []string
+		for _, r := range e.eng.State().Rules {
+			out = append(out, strings.Join(r.Services, ""))
+		}
+		return strings.Join(out, ",")
+	}
+	if o := order(); o != "http,ssh,dns" {
+		t.Errorf("order: %s", o)
+	}
+	var hs []model.HistoryEntry
+	e.call(e.token, "GET", "/history", nil, &hs)
+	if len(hs) != 3 || len(hs[0].Changes) != 1 || hs[0].Changes[0].Action() != "create" {
+		t.Errorf("history: %d entries, newest %+v", len(hs), hs[0])
+	}
+	// Staged, the place goes with it.
+	var cs model.Changeset
+	e.call(e.token, "POST", "/changesets", nil, &cs)
+	e.call(e.token, "POST", "/rules?first=1&changeset="+itoa(cs.ID), model.Rule{Chain: "input", Match: model.Match{Services: []string{"ntp"}}}, nil)
+	if code := e.call(e.token, "POST", "/changesets/"+itoa(cs.ID)+"/apply", nil, nil); code != 200 {
+		t.Fatalf("apply: %d", code)
+	}
+	if o := order(); o != "ntp,http,ssh,dns" {
+		t.Errorf("order after the changeset: %s", o)
+	}
+	// A bad place: refused, nothing created.
+	if code := e.call(e.token, "POST", "/rules?before=99999", model.Rule{Chain: "input"}, nil); code != 400 {
+		t.Errorf("before a rule that isn't there: %d", code)
+	}
+	if n := len(e.eng.State().Rules); n != 4 {
+		t.Errorf("%d rules", n)
+	}
+}

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);
@@ -49,11 +50,12 @@ export async function render(el) {
         h("div", { class: "panel-head" }, h("h2", null, "Busiest rules"), h("a", { class: "button small", href: "#/rules" }, "All rules")),
         table([
           { label: "Chain", render: (r) => r.chain },
-          { label: "Rule", render: (r) => r.raw || describe(r) },
+          { label: "Rule", render: (r) => h("a", { href: "#/rules?chain=" + r.chain + "&rule=" + r.id }, "#" + r.id + " ", r.raw || describe(r)) },
           { label: "Action", render: (r) => badge(r.action, { accept: "ok", drop: "err", reject: "warn" }[r.action]) },
           { 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) {

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

@@ -16,7 +16,7 @@ export async function render(el, params, query) {
       h("thead", null, h("tr", null, ["Time", "Why", "In", "Out", "From", "To", "Protocol"].map((t) => h("th", null, t)))),
       h("tbody", null, es.map((e) => h("tr", null,
         h("td", { class: "mono small" }, new Date(e.time).toLocaleTimeString(undefined, { hourCycle: "h23" })),
-        h("td", null, e.mark && e.mark.startsWith("r") ? h("a", { href: "#/rules", title: "rule " + e.mark.slice(1) }, e.prefix) : e.prefix,
+        h("td", null, e.mark && e.mark.startsWith("r") ? h("a", { href: "#/rules?rule=" + e.mark.slice(1), title: "rule #" + e.mark.slice(1) }, e.prefix) : e.prefix,
           e.shadow && /^(drop|reject)$/.test(e.verdict) ? [" ", badge("would " + e.verdict, "warn")] : null),
         h("td", { class: "mono" }, e.in || ""), h("td", { class: "mono" }, e.out || ""),
         h("td", { class: "mono" }, addr(e.source, e.source_port)), h("td", { class: "mono" }, addr(e.destination, e.destination_port)),

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

@@ -32,7 +32,7 @@ export async function render(el) {
 }
 
 function detail(c) {
-  const ruleLink = (id, chain, label) => id ? h("a", { href: "#/rules?chain=" + chain, onclick: () => document.querySelector(".modal-back") && document.querySelector(".modal-back").remove() }, label) : label;
+  const ruleLink = (id, chain, label) => id ? h("a", { href: "#/rules?chain=" + chain + "&rule=" + id, onclick: () => document.querySelector(".modal-back") && document.querySelector(".modal-back").remove() }, label) : label;
   const v = (verdict) => badge(verdict, { allowed: "ok", blocked: "err", logged: "", unknown: "warn" }[verdict]);
   const hits = (n) => h("td", { class: "small num" }, n === undefined || n === null ? "–" : n.toLocaleString());
   const summary = { allowed: "all allowed", blocked: "all blocked", partly: "partly allowed" }[c.summary];

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 } from "../widgets.js";
+import { names, matchEditor, describe, hits, counters, listEditor, rowClass, live, fmtBytes, quotas, usageBar } from "../widgets.js";
 
 const chains = [
   ["input", "Input", "Traffic to the firewall itself."],
@@ -24,7 +24,14 @@ const builtins = {
 };
 
 export async function render(el, params, query) {
-  const chain = query.get("chain") || "input";
+  // ?rule=ID (from the matrix, the log, the tracer, statistics): show
+  // that rule, in its chain, highlighted.
+  const target = Number(query.get("rule")) || 0;
+  let chain = query.get("chain");
+  if (!chain && target) {
+    try { chain = (await get("/rules/" + target)).chain; } catch { /* gone: the default chain */ }
+  }
+  chain = chain || "input";
   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(everyPacket), ...all.filter((r) => !everyPacket(r))];
@@ -40,7 +47,8 @@ export async function render(el, params, query) {
     h("div", { class: "panel" },
       builtinsRow(chain, settings, cs),
       table([
-        { label: "#", render: (r) => r.pending === "deleted" ? "" : String(live(rules).indexOf(r) + 1) },
+        { label: "Order", render: (r) => r.pending === "deleted" ? "" : String(live(rules).indexOf(r) + 1) },
+        { label: "ID", render: (r) => r.id ? h("span", { class: "muted mono small" }, "#" + r.id) : "" },
         { label: "Match", render: (r) => r.raw ? [badge("raw", ""), " ", h("span", { class: "mono small" }, r.raw)]
           : [everyPacket(r) ? [badge("every packet", "accent"), " "] : null, describe(r), extras(r, qs[r.id])] },
         { label: "Action", render: actionBadge },
@@ -59,10 +67,15 @@ export async function render(el, params, query) {
           h("button", { class: "small reveal", onclick: () => del(r) }, "Delete"),
         ];
         } } : null,
-      ].filter(Boolean), rules, { empty: "No rules in this chain yet.", rowClass }),
+      ].filter(Boolean), rules, { empty: "No rules in this chain yet.", rowClass: (r) => rowClass(r) + (target && r.id === target ? " row-target" : "") }),
       rules.some(everyPacket) ? h("div", { class: "muted small" }, "Rules marked “every packet” are checked before established connections are accepted: they see all of a connection's traffic, not only its first packet, so a quota counts all of it and a block stops connections already open. 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)));
+  if (target) {
+    const row = el.querySelector("tr.row-target");
+    if (row) requestAnimationFrame(() => row.scrollIntoView({ block: "center" }));
+    else el.querySelector(".tabs").after(h("div", { class: "msg warn" }, "There is no rule #" + target + " (any more)."));
+  }
 }
 
 // everyPacket: checked before established connections are accepted (as
@@ -171,16 +184,10 @@ async function usageDialog(r, q) {
     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))) },
+      { label: "", render: (a) => usageBar(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;

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

@@ -180,7 +180,7 @@ function rangeRow(since) {
 // ruleHref: a counter's mark to its page ("r12" → the rules, "b-…" → the
 // built-ins under Settings).
 function ruleHref(mark) {
-  if (/^r\d/.test(mark)) return "#/rules";
+  if (/^r\d+$/.test(mark)) return "#/rules?rule=" + mark.slice(1);
   if (mark.startsWith("b-") || mark.startsWith("p-")) return "#/settings";
   if (mark.startsWith("f")) return "#/nat";
   return null;

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

@@ -60,7 +60,7 @@ export async function render(el, params, query) {
         h("strong", null, p.would_drop.label || [p.would_drop.chain, p.would_drop.mark].filter(Boolean).join(" "))) : null,
       h("table", { class: "trace-steps" }, h("tbody", null, p.steps.map((s) => h("tr", { class: /^(drop|reject)/.test(s.verdict) || /\[would (drop|reject)\]/.test(s.rule || "") ? "step-drop" : s.verdict === "accept" ? "step-accept" : "" },
         h("td", { class: "muted small" }, s.table + " " + s.chain),
-        h("td", null, s.label ? (s.mark && s.mark.startsWith("r") ? h("a", { href: "#/rules?chain=" + s.chain }, s.label) : s.label)
+        h("td", null, s.label ? (s.mark && s.mark.startsWith("r") ? h("a", { href: "#/rules?chain=" + s.chain + "&rule=" + s.mark.slice(1).split("-")[0] }, s.label) : s.label)
           : s.kind === "policy" ? s.chain + " policy" : h("span", { class: "mono small" }, s.rule)),
         h("td", { class: "small" }, s.verdict))))));
   }

internal/web/static/assets/style.css

@@ -433,6 +433,9 @@ td.matrix-blocked { background: var(--del); color: var(--del-text); }
 .matrix-n { margin-left: 6px; font-weight: 400; font-size: 12px; }
 td.matrix-partly { background: var(--warn-soft); color: var(--text); }
 td.matrix-same { opacity: 0.55; }
+/* The rule a link pointed at (?rule=ID). */
+tr.row-target td { background: var(--accent-soft); font-weight: 600; }
+tr.row-target td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
 .matrix-open { display: block; font-weight: 400; font-size: 12px; opacity: 0.85; margin-top: 2px; }
 td.matrix-none { color: var(--muted); }
 tr.matrix-rest td { border-top: 2px solid var(--border); }

internal/web/static/assets/widgets.js

@@ -156,6 +156,13 @@ export function fmtBytes(n) {
   return n + " bytes";
 }
 
+// usageBar draws used out of total as a bar, red once it is all used.
+export function usageBar(used, total) {
+  const seg = h("div", { class: "seg leased" });
+  seg.style.width = Math.min(100, used / total * 100) + "%";
+  return h("div", { class: "usage" }, h("div", { class: "usage-bar" + (used >= total ? " full" : "") }, seg));
+}
+
 // quotas loads what the rules' quotas used, by rule ID ({} without
 // log:read).
 export async function quotas() {

scripts/e2e.sh

@@ -344,6 +344,7 @@ not_contains "wg0_net"
 run "the internet to the firewall" 0 H matrix wan firewall
 contains "blocked  *sources that can't come from outside"
 contains "allowed  *udp/51820"
+contains "allowed  *raw: icmpv6 type"
 
 # ---- statistics (sampled every 3 seconds here)