Compare views rebuilt: from the zone's view, in sections, one line per record

The Compare views tab and jarl zone diff compare a zone with the same zone in other views from the view you're on: a summary per view, what is answered differently (Use this everywhere), the names only some views have (Add to VIEW), and how many are the same. One name can be compared (jarl zone diff ZONE NAME [TYPE], a Compare button per record). The CLI prints one line per record, cut to the terminal (--wide shows it whole); the web UI cuts long values with the whole one on hover. GET /zones/{zone}/compare returns these sections, with ?with, ?name and ?type.

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

internal/engine/compare.go

@@ -5,6 +5,7 @@ import (
 	"slices"
 	"strings"
 
+	"jarl/internal/dnsname"
 	"jarl/internal/model"
 )
 
@@ -14,6 +15,8 @@ type ViewSet struct {
 	ZoneID  int64    `json:"zone_id"`
 	Records []string `json:"records"`          // data (with TTL and "(disabled)" when set), sorted
 	IDs     []int64  `json:"ids"`              // the records, in the same order
+	Data    []string `json:"data"`             // their data alone, in the same order
+	TTL     *uint32  `json:"ttl,omitempty"`    // the first record's own TTL
 	Linked  string   `json:"linked,omitempty"` // shared or local, in a linked zone
 }
 
@@ -63,7 +66,7 @@ func CompareZones(st *model.State, zones []*model.Zone) []CompareRow {
 		}
 		var first string
 		for i, z := range zones {
-			vs := ViewSet{View: st.ViewName(z), ZoneID: z.ID, Records: []string{}, IDs: []int64{}}
+			vs := ViewSet{View: st.ViewName(z), ZoneID: z.ID, Records: []string{}, IDs: []int64{}, Data: []string{}}
 			rs := slices.Clone(sets[i][k])
 			slices.SortFunc(rs, func(a, b *model.Record) int { return strings.Compare(strings.ToLower(a.Data), strings.ToLower(b.Data)) })
 			for _, r := range rs {
@@ -76,6 +79,10 @@ func CompareZones(st *model.State, zones []*model.Zone) []CompareRow {
 				}
 				vs.Records = append(vs.Records, d)
 				vs.IDs = append(vs.IDs, r.ID)
+				vs.Data = append(vs.Data, r.Data)
+				if vs.TTL == nil && r.TTL != nil {
+					vs.TTL = model.Ptr(*r.TTL)
+				}
 			}
 			if z.LinkGroup != 0 && len(rs) > 0 {
 				vs.Linked = "shared"
@@ -102,3 +109,128 @@ func relName(name, zone string) string {
 	}
 	return strings.TrimSuffix(name, "."+zone)
 }
+
+// CompareReport is a zone in one view (the base) next to the same zone in
+// other views (docs/views.md#comparing-views): what the other views answer
+// differently, the names only some views have, and how much is the same.
+type CompareReport struct {
+	Zone   string   `json:"zone"`
+	Base   string   `json:"base"`   // the view compared from
+	Views  []string `json:"views"`  // the base first
+	Linked bool     `json:"linked"` // all in one link
+	// Summary is, per other view, how it differs from the base.
+	Summary []CompareSummary `json:"summary"`
+	// Different are names and types more than one view has, with
+	// different records.
+	Different []CompareRow `json:"different"`
+	// Only are the names and types only some views have, by the views
+	// that have them.
+	Only []CompareOnly `json:"only"`
+	Same int           `json:"same"`
+	// SameRows are the ones that are the same (when asked for).
+	SameRows []CompareRow `json:"same_rows,omitempty"`
+}
+
+// CompareSummary counts how a view differs from the base view.
+type CompareSummary struct {
+	View      string `json:"view"`
+	Different int    `json:"different"`  // both have it, with different records
+	OnlyBase  int    `json:"only_base"`  // the base has it, this view doesn't
+	OnlyOther int    `json:"only_other"` // this view has it, the base doesn't
+	Same      int    `json:"same"`
+}
+
+// CompareOnly are names and types that only some views have.
+type CompareOnly struct {
+	Views []string     `json:"views"`
+	Rows  []CompareRow `json:"rows"`
+}
+
+// CompareFilter narrows a comparison to a name, and optionally a type.
+type CompareFilter struct {
+	Name string // relative ("www", "@") or absolute
+	Type string
+	All  bool // include what is the same
+}
+
+// Compare builds the report for zones (the base first). Apex NS records are
+// left out: they name the servers, which views often list differently on
+// purpose.
+func Compare(st *model.State, zones []*model.Zone, f CompareFilter) *CompareReport {
+	rep := &CompareReport{Zone: dnsname.Display(zones[0].Name), Base: st.ViewName(zones[0]), Different: []CompareRow{}, Only: []CompareOnly{}, Linked: true}
+	for _, z := range zones {
+		rep.Views = append(rep.Views, st.ViewName(z))
+		rep.Linked = rep.Linked && z.LinkGroup != 0 && z.LinkGroup == zones[0].LinkGroup
+	}
+	for _, v := range rep.Views[1:] {
+		rep.Summary = append(rep.Summary, CompareSummary{View: v})
+	}
+	want := ""
+	if f.Name != "" {
+		if o, err := dnsname.Owner(f.Name, zones[0].Name); err == nil {
+			want = o
+		}
+	}
+	only := map[string]int{}
+	for _, row := range CompareZones(st, zones) {
+		if row.FQDN == zones[0].Name && row.Type == "NS" {
+			continue
+		}
+		if want != "" && (row.FQDN != want || f.Type != "" && !strings.EqualFold(row.Type, f.Type)) {
+			continue
+		}
+		base := row.Views[0]
+		for i, vs := range row.Views[1:] {
+			s := &rep.Summary[i]
+			switch {
+			case len(base.Records) > 0 && len(vs.Records) > 0 && slices.Equal(base.Records, vs.Records):
+				s.Same++
+			case len(base.Records) > 0 && len(vs.Records) > 0:
+				s.Different++
+			case len(base.Records) > 0:
+				s.OnlyBase++
+			case len(vs.Records) > 0:
+				s.OnlyOther++
+			}
+		}
+		if row.Same {
+			rep.Same++
+			if f.All || want != "" {
+				rep.SameRows = append(rep.SameRows, row)
+			}
+			continue
+		}
+		var having []string
+		versions := map[string]bool{}
+		for _, vs := range row.Views {
+			if len(vs.Records) > 0 {
+				having = append(having, vs.View)
+				versions[strings.Join(vs.Records, "\n")] = true
+			}
+		}
+		if len(versions) > 1 {
+			rep.Different = append(rep.Different, row)
+			continue
+		}
+		k := strings.Join(having, ",")
+		i, ok := only[k]
+		if !ok {
+			i = len(rep.Only)
+			only[k] = i
+			rep.Only = append(rep.Only, CompareOnly{Views: having})
+		}
+		rep.Only[i].Rows = append(rep.Only[i].Rows, row)
+	}
+	// The base's own names first, then by how many views have them.
+	slices.SortStableFunc(rep.Only, func(a, b CompareOnly) int {
+		ab, bb := slices.Contains(a.Views, rep.Base), slices.Contains(b.Views, rep.Base)
+		if ab != bb {
+			if ab {
+				return -1
+			}
+			return 1
+		}
+		return len(b.Views) - len(a.Views)
+	})
+	return rep
+}

internal/engine/linked_test.go

@@ -341,3 +341,48 @@ func TestCompareZones(t *testing.T) {
 		t.Errorf("sharing the shared version: external %q", v)
 	}
 }
+
+func TestCompareReport(t *testing.T) {
+	env := linkedEnv(t)
+	env.submit(env.admin, NewRequest(OpZoneCreate, 0, ZoneInput{Name: model.Ptr("example.com"), View: model.Ptr("external"), LinkWith: "internal"}))
+	env.submit(env.admin,
+		NewRequest(OpRRSetReplace, 0, RRSetInput{Zone: "example.com", View: "external", Name: "www", Type: "A", Data: []string{"203.0.113.10"}, Local: model.Ptr(true)}),
+		NewRequest(OpRecordCreate, 0, RecordInput{Zone: "example.com", View: "internal", Name: model.Ptr("nas"), Type: model.Ptr("A"), Data: model.Ptr("10.0.0.20"), Local: model.Ptr(true)}),
+		NewRequest(OpRecordCreate, 0, RecordInput{Zone: "example.com", View: "internal", Name: model.Ptr("printer"), Type: model.Ptr("A"), Data: model.Ptr("10.0.0.30"), Local: model.Ptr(true)}),
+		NewRequest(OpRecordCreate, 0, RecordInput{Zone: "example.com", View: "external", Name: model.Ptr("shop"), Type: model.Ptr("CNAME"), Data: model.Ptr("shops.example.net."), Local: model.Ptr(true)}))
+	st := env.state()
+	zones := []*model.Zone{st.FindZone("example.com.", st.ViewByName("internal").ID), st.FindZone("example.com.", st.ViewByName("external").ID)}
+
+	rep := Compare(st, zones, CompareFilter{})
+	if rep.Base != "internal" || !rep.Linked || !slices.Equal(rep.Views, []string{"internal", "external"}) {
+		t.Errorf("report %+v", rep)
+	}
+	if s := rep.Summary[0]; s.View != "external" || s.Different != 1 || s.OnlyBase != 2 || s.OnlyOther != 1 || s.Same != 2 {
+		t.Errorf("summary %+v", s)
+	}
+	if len(rep.Different) != 1 || rep.Different[0].Name != "www" {
+		t.Errorf("different %+v", rep.Different)
+	}
+	var only []string
+	for _, o := range rep.Only {
+		var names []string
+		for _, r := range o.Rows {
+			names = append(names, r.Name)
+		}
+		only = append(only, strings.Join(o.Views, "+")+": "+strings.Join(names, ","))
+	}
+	want(t, "only", only, "internal: nas,printer", "external: shop")
+	if rep.Same != 2 || rep.SameRows != nil {
+		t.Errorf("same %d, rows %v", rep.Same, rep.SameRows)
+	}
+
+	// One name: just its rows, the same ones included.
+	rep = Compare(st, zones, CompareFilter{Name: "www"})
+	if len(rep.Different) != 1 || len(rep.Only) != 0 || len(rep.SameRows) != 0 {
+		t.Errorf("www: %+v", rep)
+	}
+	rep = Compare(st, zones, CompareFilter{Name: "mail.example.com.", Type: "A"})
+	if len(rep.SameRows) != 1 || rep.SameRows[0].Name != "mail" || len(rep.Different)+len(rep.Only) != 0 {
+		t.Errorf("mail A: %+v", rep)
+	}
+}

internal/server/h_compare.go

@@ -9,15 +9,29 @@ import (
 	"jarl/internal/model"
 )
 
-// zoneCompare: GET /zones/{zone}/compare lines up a zone's records across
-// the views that have it (docs/views.md#linked-zones). ?views=a,b picks the
-// views (default: every view with a primary zone of that name), ?all=1
-// includes the names and types that are the same everywhere.
+// zoneCompare: GET /zones/{zone}/compare compares a zone with the same
+// zone in other views (docs/views.md#comparing-views), from the zone's own
+// view: ?with=a,b picks the other views (default: every view with a
+// primary zone of that name), ?name=www[&type=A] narrows it to one name,
+// ?all=1 includes what is the same. A zone named without its view is
+// compared from the first view that has it. (?views=a,b, the views to
+// compare with the first as the base, works too.)
 func (s *Server) zoneCompare(w http.ResponseWriter, r *http.Request, p *auth.Principal) error {
 	st, err := s.state(r)
 	if err != nil {
 		return err
 	}
+	q := r.URL.Query()
+	list := func(k string) []string {
+		var out []string
+		for _, v := range strings.Split(q.Get(k), ",") {
+			if v = strings.TrimSpace(v); v != "" {
+				out = append(out, v)
+			}
+		}
+		return out
+	}
+	with, views := list("with"), list("views")
 	z, err := s.zoneByPath(r, st, p)
 	if err != nil {
 		// A name in several views is what there is to compare.
@@ -26,56 +40,45 @@ func (s *Server) zoneCompare(w http.ResponseWriter, r *http.Request, p *auth.Pri
 			ref = "."
 		}
 		name, perr := engine.ParseZoneName(ref)
-		if zs := st.ZonesNamed(name); perr != nil || len(zs) < 2 {
+		zs := st.ZonesNamed(name)
+		if perr != nil || len(zs) < 2 {
 			return err
-		} else {
-			z = zs[0]
+		}
+		st.SortByView(zs)
+		z = zs[0]
+		if len(views) > 0 {
+			for _, o := range zs {
+				if strings.EqualFold(st.ViewName(o), views[0]) {
+					z = o
+				}
+			}
 		}
 	}
-	var want []string
-	for _, v := range strings.Split(r.URL.Query().Get("views"), ",") {
-		if v = strings.TrimSpace(v); v != "" {
-			want = append(want, v)
-		}
+	readable := func(o *model.Zone) bool {
+		vn := st.ViewName(o)
+		return o.Type == model.ZonePrimary && p.CanSeeZone(o.Name, vn) && p.Can(auth.Action{Resource: auth.ResRecords, Zone: o.Name, View: vn})
 	}
-	var zones []*model.Zone
+	if !readable(z) {
+		return badRequest("zone %s isn't a primary zone whose records you may read", engine.Display(z.Name))
+	}
+	zones := []*model.Zone{z}
+	var others []*model.Zone
 	for _, o := range st.ZonesNamed(z.Name) {
 		vn := st.ViewName(o)
-		if o.Type != model.ZonePrimary || !p.CanSeeZone(o.Name, vn) || !p.Can(auth.Action{Resource: auth.ResRecords, Zone: o.Name, View: vn}) {
+		if o.ID == z.ID || !readable(o) {
 			continue
 		}
-		if len(want) > 0 && !containsFold(want, vn) {
+		if len(with) > 0 && !containsFold(with, vn) || len(views) > 0 && !containsFold(views, vn) {
 			continue
 		}
-		zones = append(zones, o)
+		others = append(others, o)
 	}
-	st.SortByView(zones)
+	st.SortByView(others)
+	zones = append(zones, others...)
 	if len(zones) < 2 {
 		return badRequest("zone %s is in only one view (that you may read): there is nothing to compare", engine.Display(z.Name))
 	}
-	rows := engine.CompareZones(st, zones)
-	all := queryBool(r, "all")
-	out := struct {
-		Zone   string              `json:"zone"`
-		Views  []string            `json:"views"`
-		Linked bool                `json:"linked"` // all of them in one link
-		Same   int                 `json:"same"`   // names and types the same everywhere
-		Rows   []engine.CompareRow `json:"rows"`
-	}{Zone: engine.Display(z.Name), Rows: []engine.CompareRow{}, Linked: true}
-	for _, o := range zones {
-		out.Views = append(out.Views, st.ViewName(o))
-		out.Linked = out.Linked && o.LinkGroup != 0 && o.LinkGroup == zones[0].LinkGroup
-	}
-	for _, row := range rows {
-		if row.Same {
-			out.Same++
-			if !all {
-				continue
-			}
-		}
-		out.Rows = append(out.Rows, row)
-	}
-	writeJSON(w, http.StatusOK, out)
+	writeJSON(w, http.StatusOK, engine.Compare(st, zones, engine.CompareFilter{Name: q.Get("name"), Type: q.Get("type"), All: queryBool(r, "all")}))
 	return nil
 }
 

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

@@ -1,5 +1,5 @@
 import { h, mount, table, field, input, select, textarea, toast, errorBox, display, badge, confirmDialog, modal, checkbox, time, diffView, backLink, viewLink, lastList, plural } from "../ui.js";
-import { api, get, stream, change, describeResult, rrtypes, state, draftQuery, can } from "../api.js";
+import { api, get, stream, change, changeMany, describeResult, rrtypes, state, draftQuery, can } from "../api.js";
 import { rerender } from "../app.js";
 import { optionsEditor } from "./options.js";
 import { emailOf, pendingBadge } from "./zones.js";
@@ -70,7 +70,7 @@ export async function render(el, params, query) {
   else if (tab === "servers") await serversTab(body, zone);
   else if (tab === "dnssec") await dnssecTab(body, zone);
   else if (tab === "registrar") await registrarTab(body, zone);
-  else if (tab === "compare") await compareTab(body, zone);
+  else if (tab === "compare") await compareTab(body, zone, query);
   // A later click (another tab) has taken over the page.
   if (seq !== renderSeq || !holder.isConnected) return;
   holder.replaceWith(body);
@@ -82,34 +82,110 @@ export async function render(el, params, query) {
 
 // compareTab shows the names and types that differ between the views that
 // have the zone, with a button to share one view's version (linked zones).
-async function compareTab(el, zone) {
-  let all = false;
+// compareTab compares the zone with the same zone in other views, from
+// this one (docs/views.md#comparing-views): a summary, what the views
+// answer differently, the names only some views have, and how much is
+// the same. ?name= (and &type=) narrows it to one name.
+async function compareTab(el, zone, query) {
+  const others = zone.other_views || [];
+  const withSel = select([...(others.length > 1 ? [["", "all other views"]] : []), ...others.map((v) => [v, v])], query.get("with") || others[0] || "");
+  const nameIn = input({ value: query.get("name") || "", placeholder: "all names, or one: www, @", class: "mono", style: { width: "200px" } });
+  const typeIn = input({ value: query.get("type") || "", placeholder: "any type", class: "mono", style: { width: "90px" } });
+  let showSame = false;
   const out = h("div");
+  const one = (d) => h("div", { class: "oneline mono small", title: d }, d);
   const draw = async () => {
-    const r = await get("/zones/" + zone.id + "/compare", { all: all ? 1 : "" });
-    const head = h("tr", null, h("th", null, "Name"), h("th", null, "Type"), r.views.map((v) => h("th", null, v)));
-    const rows = r.rows.map((row) => h("tr", { class: row.same ? "muted" : "" },
-      h("td", { class: "mono" }, row.name), h("td", null, h("strong", null, row.type)),
-      row.views.map((vs) => h("td", { class: "compare-cell" },
-        vs.records.length ? vs.records.map((d) => h("div", { class: "mono small" }, d)) : h("span", { class: "muted" }, "–"),
-        vs.linked === "local" ? [badge("only " + vs.view, "accent"), " "] : null,
-        r.linked && !row.same && vs.records.length ? h("button", { class: "small", title: "Make view " + vs.view + "'s version every view's: the others' records of this name and type are replaced",
-          onclick: () => share(vs, row) }, "Use this version") : null))));
-    mount(out,
-      h("p", { class: "muted" }, r.same + " names and types are the same in " + r.views.join(", ") + (r.rows.length && !all ? "; these differ." : ".") + " ",
-        r.linked ? "The zones are linked: shared records are kept in step, and a view's own records override them there." : "The zones aren't linked: a change in one doesn't reach the others. Link them (Link… above) to keep what is the same in step; linking changes no answer."),
-      r.rows.length ? h("div", { class: "table-wrap" }, h("table", { class: "compare" }, h("thead", null, head), h("tbody", null, rows))) : h("div", { class: "empty" }, "Nothing differs."),
-      h("label", { class: "check" }, h("input", { type: "checkbox", checked: all, onchange: (e) => { all = e.target.checked; draw(); } }), "Show what is the same too"));
+    const q = { with: withSel.value || undefined, name: nameIn.value.trim() || undefined, type: nameIn.value.trim() ? typeIn.value.trim() || undefined : undefined, all: showSame ? 1 : undefined };
+    let r;
+    try { r = await get("/zones/" + zone.id + "/compare", draftQuery(q)); } catch (e) { mount(out, errorBox(e)); return; }
+    const oneName = !!q.name;
+    const parts = [];
+    parts.push(h("p", { class: "muted" }, r.linked
+      ? "The zones are linked: shared records are kept in step, so a difference is a view's own records, there on purpose."
+      : "The zones aren't linked: nothing keeps them in step, so a difference may be one that crept in. Link them (Link… above) to keep what is the same in step."));
+    if (!oneName) parts.push(h("ul", { class: "compare-summary" }, r.summary.map((s) => h("li", null,
+      h("strong", null, s.view), ": ",
+      [[s.different, "answered differently"], [s.only_base, "only in " + r.base], [s.only_other, "only in " + s.view], [s.same, "the same"]]
+        .map(([n, what], i) => [i ? " · " : "", h("span", { class: n && i < 3 ? "" : "muted" }, n + " " + what)])))));
+
+    if (r.different.length) {
+      parts.push(h("h3", null, "Answered differently (" + r.different.length + ")"),
+        h("div", { class: "table-wrap" }, h("table", { class: "compare" },
+          h("thead", null, h("tr", null, h("th", null, "Name"), h("th", null, "Type"), r.views.map((v) => h("th", null, v)))),
+          h("tbody", null, r.different.map((row) => h("tr", null,
+            h("td", { class: "mono" }, row.name), h("td", null, h("strong", null, row.type)),
+            row.views.map((vs) => h("td", { class: "compare-cell" },
+              vs.records.length ? vs.records.map(one) : h("span", { class: "muted" }, "–"),
+              vs.records.length ? h("div", { class: "compare-actions" },
+                vs.linked === "local" ? [badge("own records", "accent"), " "] : null,
+                h("button", { class: "small", title: "Every view gets " + vs.view + "'s records for " + row.name + " " + row.type, onclick: () => useEverywhere(r, row, vs) }, "Use this everywhere")) : null))))))));
+    }
+    for (const o of r.only) {
+      const missing = r.views.filter((v) => !o.views.includes(v));
+      parts.push(h("details", { class: "compare-only", open: oneName || o.rows.length <= 8 },
+        h("summary", null, h("strong", null, "Only in " + o.views.join(" and ")), " (" + o.rows.length + ")",
+          h("span", { class: "muted small" }, " · " + missing.join(", ") + (missing.length > 1 ? " have" : " has") + " no records of these names and types")),
+        h("div", { class: "table-wrap" }, h("table", { class: "compare" }, h("tbody", null, o.rows.map((row) => {
+          const src = row.views.find((vs) => vs.records.length);
+          return h("tr", null, h("td", { class: "mono" }, row.name), h("td", null, h("strong", null, row.type)),
+            h("td", { class: "compare-cell" }, src.records.map(one)),
+            h("td", { class: "actions-cell" }, missing.map((v) => h("button", { class: "small", title: "Give view " + v + " the same records (its own, local to it)", onclick: () => copyTo(row, src, row.views.find((x) => x.view === v)) }, "Add to " + v))));
+        }))))));
+    }
+    if (r.same_rows && r.same_rows.length) {
+      parts.push(h("h3", null, "The same in " + r.views.join(", ") + " (" + r.same_rows.length + ")"),
+        h("div", { class: "table-wrap" }, h("table", { class: "compare" }, h("tbody", null, r.same_rows.map((row) => h("tr", { class: "muted" },
+          h("td", { class: "mono" }, row.name), h("td", null, row.type), h("td", { class: "compare-cell" }, row.views[0].records.map(one))))))));
+    } else if (!oneName && r.same) {
+      parts.push(h("p", { class: "muted" }, r.same + " names and types are the same. ", h("a", { href: "#", onclick: (e) => { e.preventDefault(); showSame = true; draw(); } }, "List them")));
+    }
+    if (oneName && !r.different.length && !r.only.length && !(r.same_rows || []).length) parts.push(h("div", { class: "empty" }, "No records of that name in these views."));
+    else if (!r.different.length && !r.only.length && !oneName) parts.push(h("div", { class: "empty" }, "Nothing differs."));
+    mount(out, parts);
   };
-  const share = async (vs, row) => {
-    if (!await confirmDialog("Use view " + vs.view + "'s " + row.name + " " + row.type, "Every view gets " + vs.records.join(", ") + " for " + row.name + " " + row.type + ", shared from now on; the other views' records of that name and type are replaced.", "Use this version")) return;
+  // useEverywhere gives every view one view's records of a name and type:
+  // in a linked zone by sharing them, otherwise by setting each zone's.
+  const useEverywhere = async (r, row, vs) => {
+    const rest = row.views.filter((x) => x !== vs);
+    const linkedAll = r.linked && zone.linked_with;
+    const msg = linkedAll
+      ? "View " + vs.view + "'s " + row.name + " " + row.type + " records become shared: every linked view (" + [zone.view, ...zone.linked_with].join(", ") + ") answers " + vs.data.join(", ") + ", and their own records of that name and type are replaced."
+      : rest.map((x) => x.view).join(" and ") + " get" + (rest.length > 1 ? "" : "s") + " " + vs.data.join(", ") + " for " + row.name + " " + row.type + ", replacing what " + (rest.length > 1 ? "they have" : "it has") + ".";
+    if (!await confirmDialog("Use " + vs.view + "'s " + row.name + " " + row.type, msg, "Use this everywhere")) return;
     try {
-      toast(describeResult(await change("PATCH", "/records/" + vs.ids[0], { local: false })));
+      const res = linkedAll
+        ? await change("PATCH", "/records/" + vs.ids[0], { local: false })
+        : await changeMany(rest.map((x) => ({ op: "rrset.replace", data: rrsetFrom(row, vs, x) })), "use " + vs.view + "'s " + row.name + " " + row.type);
+      toast(describeResult(res));
       await draw();
     } catch (e) { toast(e.message, "err", 8000); }
   };
+  const copyTo = async (row, src, dst) => {
+    try {
+      toast(describeResult(await changeMany([{ op: "rrset.replace", data: rrsetFrom(row, src, dst) }], "add " + row.name + " " + row.type + " to view " + dst.view)));
+      await draw();
+    } catch (e) { toast(e.message, "err", 8000); }
+  };
+  const go = () => draw();
+  withSel.addEventListener("change", go);
+  nameIn.addEventListener("keydown", (e) => { if (e.key === "Enter") go(); });
+  typeIn.addEventListener("keydown", (e) => { if (e.key === "Enter") go(); });
+  mount(el, h("div", { class: "panel" },
+    h("div", { class: "compare-controls" },
+      h("label", null, "Compare " + zone.view + " with "), withSel, " ",
+      h("label", null, " Name "), nameIn, typeIn, " ",
+      h("button", { class: "small", onclick: go }, "Compare"),
+      nameIn.value ? [" ", h("button", { class: "small", onclick: () => { nameIn.value = ""; typeIn.value = ""; go(); } }, "All names")] : null),
+    out));
   await draw();
-  mount(el, out);
+}
+
+// rrsetFrom is the request giving zone dst a name and type's records from
+// src: its own (local) records, in a linked zone.
+function rrsetFrom(row, src, dst) {
+  const d = { zone_id: dst.zone_id, name: row.fqdn, type: row.type, data: src.data, local: true };
+  if (src.ttl !== undefined && src.ttl !== null) d.ttl = src.ttl;
+  return d;
 }
 
 // ---- linked zones (docs/views.md#linked-zones)
@@ -610,6 +686,7 @@ async function recordsTab(el, zone, query) {
           : h("button", { class: "small reveal", title: "Make " + r.relative_name + " " + r.type + " this view's own, so it can differ here; the other views keep the shared one", onclick: () => setLocal(r, true) }, "Only here"), " "] : null,
         !reverse && (r.type === "A" || r.type === "AAAA") && !r.disabled
           ? [h("button", { class: "small reveal", title: "Add a CNAME record that points to " + r.name.replace(/\.$/, ""), onclick: () => aliasTo(r) }, "+ CNAME"), " "] : null,
+        zone.other_views && !(r.type === "NS" && r.relative_name === "@") ? [h("a", { class: "button small reveal", href: "#/zones/" + zone.id + "/compare?name=" + encodeURIComponent(r.relative_name) + "&type=" + r.type, title: "Compare " + r.relative_name + " " + r.type + " with view" + (zone.other_views.length > 1 ? "s " : " ") + zone.other_views.join(", ") }, "Compare"), " "] : null,
         h("button", { class: "small", title: "Edit", onclick: () => edit(r) }, "Edit"), " ",
         r.disabled
           ? h("button", { class: "small toggle", title: "Put the record back in the zone", onclick: () => toggle(r) }, "Enable")

internal/web/static/assets/style.css

@@ -564,8 +564,20 @@ ul.probes > li { padding: 6px 0; border-bottom: 1px solid var(--border); }
 ul.probes > li .msg { margin: 6px 0 0; }
 
 /* Comparing a zone across views. */
-table.compare td.compare-cell { vertical-align: top; }
+table.compare td { vertical-align: top; }
+/* The same name and type columns in every section, so they line up. */
+table.compare { table-layout: auto; width: 100%; }
+table.compare tr > :nth-child(1) { width: 18ch; }
+table.compare tr > :nth-child(2) { width: 8ch; }
 table.compare td.compare-cell button { margin-top: 4px; }
+/* One line per record: a long TXT record is cut, with the whole of it on hover. */
+table.compare .oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
+.compare-actions { margin-top: 4px; }
+.compare-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
+.compare-controls label { color: var(--muted); }
+ul.compare-summary { margin: 0 0 12px; padding-left: 18px; }
+details.compare-only { margin: 12px 0; }
+details.compare-only summary { cursor: pointer; padding: 4px 0; }
 table.compare tr.muted td { color: var(--muted); }
 
 /* Text that wraps anywhere, e.g. long statements in the Added by Jarl table. */