Steward 0.1.0 (in development): a DHCPv4 server with a web UI, API and CLI

Subnets served per interface, pools, reservations, options at three
levels, leases in SQLite saved before the ACK, ping and decline conflict
checks, validated changes with history and undo, users and tokens, an
audit log, a Kea importer, a sandboxed systemd unit and Debian packages.
Tested with real udhcpc and dhcpcd clients in Docker (scripts/e2e.sh).

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

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

@@ -0,0 +1,90 @@
+// Reservations: fixed addresses for clients.
+import { h, mount, table, input, modal, errorBox, field, confirmDialog, select, debounce } from "../ui.js";
+import { get, change, can } from "../api.js";
+import { optionsEditor, subnetLabel } from "../widgets.js";
+
+// reservationsTable lists reservations with Edit and Delete.
+export function reservationsTable(rs, done, opts = {}) {
+  const write = can("config", true);
+  return table([
+    { label: "Address", render: (r) => h("span", { class: "mono" }, r.ip) },
+    { label: "Client", render: (r) => h("span", { class: "mono" }, r.client_id ? "id " + r.client_id : r.mac) },
+    { label: "Host name", render: (r) => r.hostname || h("span", { class: "muted" }, "–") },
+    opts.subnet ? null : { label: "Subnet", render: (r) => r.subnet_id ? h("a", { href: "#/subnets/" + r.subnet_id }, r.subnet) : "–" },
+    { label: "Online", render: (r) => r.lease ? h("span", { title: "lease until " + new Date(r.lease.end).toLocaleString() }, "yes, on " + r.lease.interface) : h("span", { class: "muted" }, "no") },
+    { label: "Options", render: (r) => r.options.length ? h("span", { class: "mono small" }, r.options.map((o) => o.name + "=" + o.value).join("; ")) : "" },
+    { label: "Comment", render: (r) => r.comment },
+    write ? { label: "", tdClass: "actions-cell", render: (r) => [
+      h("button", { class: "small reveal", onclick: () => reservationDialog(r, done) }, "Edit"), " ",
+      h("button", { class: "small reveal", onclick: () => del(r, done) }, "Delete"),
+    ] } : null,
+  ].filter(Boolean), rs, { empty: opts.empty || "No reservations." });
+}
+
+async function del(r, done) {
+  if (!await confirmDialog("Delete reservation", "Delete the reservation of " + r.ip + " for " + (r.hostname || r.mac || r.client_id) + "? The client keeps its address until its lease runs out.", "Delete", "danger")) return;
+  try {
+    await change("DELETE", "/reservations/" + r.id);
+    done();
+  } catch (e) { modal("Not deleted", errorBox(e)); }
+}
+
+// reservationDialog adds (r null) or edits a reservation. preset may give
+// {ip, mac, hostname} for a new one.
+export async function reservationDialog(r, done, preset = {}) {
+  const [settings, subnets] = await Promise.all([get("/settings"), get("/subnets")]);
+  // What the client gets from above: the settings', then its subnet's.
+  const sub = subnets.find((x) => x.id === (r && r.subnet_id));
+  const inherited = [...settings.options.filter((o) => !(sub && sub.options.some((x) => x.code === o.code))), ...(sub ? sub.options : [])];
+  const ip = input({ value: r ? r.ip : preset.ip || "", placeholder: "10.0.10.20", class: "mono" });
+  const mac = input({ value: r ? r.mac || "" : preset.mac || "", placeholder: "aa:bb:cc:dd:ee:ff", class: "mono" });
+  const cid = input({ value: r ? r.client_id || "" : "", placeholder: "only for clients known by a client identifier", class: "mono" });
+  const host = input({ value: r ? r.hostname : preset.hostname || "", placeholder: "nas" });
+  const opts = await optionsEditor(r ? r.options : [], inherited);
+  const comment = input({ value: r ? r.comment : "" });
+  const err = h("div");
+  const body = h("div", null, h("div", { class: "form-grid" },
+    field("Address", ip, "Its subnet is the one whose network holds it. Inside a pool is fine: nobody else gets it."),
+    field("MAC address", mac),
+    field("Client identifier", cid, "Optional: match the client's identifier (option 61, hex) instead of its MAC address."),
+    field("Host name", host, "Sent to the client."),
+    field("Options", opts, "Only for this client; they win over the subnet's."),
+    field("Comment", comment)), err);
+  await modal(r ? "Edit reservation " + r.ip : "New reservation", body, [
+    { label: "Cancel", value: null },
+    { label: r ? "Save" : "Add reservation", kind: "primary", onclick: async () => {
+      mount(err);
+      const v = { ip: ip.value.trim(), mac: mac.value.trim(), client_id: cid.value.trim(), hostname: host.value.trim(), options: opts.value(), comment: comment.value };
+      try {
+        await change(r ? "PATCH" : "POST", r ? "/reservations/" + r.id : "/reservations", v);
+        done();
+        return true;
+      } catch (e) {
+        mount(err, errorBox(e));
+        return false;
+      }
+    } },
+  ], { wide: true, sticky: true });
+}
+
+export async function render(el, params, query) {
+  const subnets = await get("/subnets");
+  const subnetSel = select([["", "all subnets"], ...subnets.map((s) => [String(s.id), subnetLabel(s)])], query.get("subnet") || "");
+  const search = input({ type: "search", placeholder: "address, MAC or host name" });
+  const out = h("div");
+  const draw = async () => {
+    const q = search.value.trim().toLowerCase();
+    const rs = (await get("/reservations", { subnet: subnetSel.value })).filter((r) =>
+      !q || r.ip.includes(q) || (r.mac || "").includes(q) || (r.hostname || "").toLowerCase().includes(q) || (r.client_id || "").includes(q));
+    mount(out, reservationsTable(rs, draw, { empty: q || subnetSel.value ? "None match." : "No reservations yet." }));
+  };
+  subnetSel.addEventListener("change", draw);
+  search.addEventListener("input", debounce(draw, 200));
+  mount(el,
+    h("div", { class: "page-head" },
+      h("div", { class: "grow" }, h("h1", null, "Reservations"), h("div", { class: "muted" }, "Fixed addresses for clients, by MAC address or client identifier.")),
+      can("config", true) ? h("div", { class: "actions" }, h("button", { class: "primary", onclick: () => reservationDialog(null, draw) }, "New reservation")) : null),
+    h("div", { class: "filter-row" }, subnetSel, search),
+    h("div", { class: "panel" }, out));
+  await draw();
+}