abrown38andClaude Opus 5.5
2880f7ddc9
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>
56 lines
3.5 KiB
JavaScript
56 lines
3.5 KiB
JavaScript
// Zones: groups of interfaces, and the machine's interfaces.
|
|
import { h, mount, table, modal, errorBox, field, input, checkbox, confirmDialog, badge } from "../ui.js";
|
|
import { get, change, can } from "../api.js";
|
|
import { rerender } from "../app.js";
|
|
import { listEditor, rowClass } from "../widgets.js";
|
|
|
|
export async function render(el) {
|
|
const [zones, ifs] = await Promise.all([get("/zones"), get("/interfaces")]);
|
|
const write = can("config", true);
|
|
mount(el,
|
|
h("div", { class: "page-head" },
|
|
h("div", { class: "grow" }, h("h1", null, "Zones"), h("div", { class: "muted" }, "Groups of interfaces that rules name. External zones face the internet: antispoofing, MSS clamping and port forwards apply there.")),
|
|
write ? h("div", { class: "actions" }, h("button", { class: "primary", onclick: () => zoneDialog(null, ifs) }, "Add zone")) : null),
|
|
h("div", { class: "panel" }, table([
|
|
{ label: "Name", render: (z) => h("strong", null, z.name) },
|
|
{ label: "Interfaces", render: (z) => h("span", { class: "mono" }, z.interfaces.join(", ")) },
|
|
{ label: "", render: (z) => z.external ? badge("external", "warn") : badge("internal", "") },
|
|
{ label: "Comment", render: (z) => z.comment },
|
|
write ? { label: "", tdClass: "actions-cell", render: (z) => z.pending === "deleted" ? badge("deleted", "err") : [
|
|
h("button", { class: "small reveal", onclick: () => zoneDialog(z, ifs) }, "Edit"), " ",
|
|
h("button", { class: "small reveal", onclick: () => del(z) }, "Delete")] } : null,
|
|
].filter(Boolean), zones, { empty: "No zones yet: add one per network (wan, lan, guest…).", rowClass })),
|
|
h("div", { class: "panel" }, h("h2", null, "This machine's interfaces"), table([
|
|
{ label: "Interface", render: (i) => h("span", { class: "mono" }, i.name) },
|
|
{ label: "State", render: (i) => badge(i.up ? "up" : "down", i.up ? "ok" : "") },
|
|
{ label: "Zone", render: (i) => i.zone || h("span", { class: "muted" }, "none") },
|
|
{ label: "Addresses", render: (i) => h("span", { class: "mono small" }, i.addresses.join(", ")) },
|
|
], ifs)));
|
|
}
|
|
|
|
async function del(z) {
|
|
if (!await confirmDialog("Delete zone", "Delete zone " + z.name + "?", "Delete", "danger")) return;
|
|
try { await change("DELETE", "/zones/" + z.id); rerender(); } catch (e) { modal("Not deleted", errorBox(e)); }
|
|
}
|
|
|
|
async function zoneDialog(z, ifs) {
|
|
z = z || { interfaces: [] };
|
|
const name = input({ value: z.name || "", placeholder: "wan, lan, guest" });
|
|
const list = listEditor(z.interfaces, { suggestions: ifs.map((i) => i.name), placeholder: "eth0, or incusbr* for many", addLabel: "Add interface" });
|
|
const ext = checkbox("external: faces the internet", z.external);
|
|
const comment = input({ value: z.comment || "" });
|
|
const err = h("div");
|
|
await modal(z.id ? "Edit zone " + z.name : "Add zone", h("div", null, h("div", { class: "form-grid" },
|
|
field("Name", name), field("Interfaces", list, "A trailing * matches many (incusbr*)."), h("label"), ext, field("Comment", comment)), err), [
|
|
{ label: "Cancel", value: null },
|
|
{ label: z.id ? "Save" : "Add zone", kind: "primary", onclick: async () => {
|
|
mount(err);
|
|
try {
|
|
await change(z.id ? "PATCH" : "POST", z.id ? "/zones/" + z.id : "/zones", { name: name.value.trim(), interfaces: list.value(), external: ext.input.checked, comment: comment.value.trim() });
|
|
rerender();
|
|
return true;
|
|
} catch (e) { mount(err, errorBox(e)); return false; }
|
|
} },
|
|
], { sticky: true });
|
|
}
|