milestone 17: real deadlines, validator holes, upstream editor, trusted proxies, contract samples, badvers

2026-08-07 17:55:59 +02:00
parent 9b12dbaaa0
commit c50c6d285a
57 changed files with 2926 additions and 126 deletions
@@ -0,0 +1,131 @@
+import { useState } from "react";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import InlineError from "@/lib/InlineError";
+import { upstreamCreateMutation, upstreamDeleteMutation, upstreamUpdateMutation, upstreamsQuery } from "@/lib/queries";
+import type { Upstream, UpstreamInput } from "@/lib/types";
+import { raiseRestartBanner } from "../settings/restartBanner";
+import UpstreamForm from "./UpstreamForm";
+
+const TH_CLASS = "border-b border-zinc-300 px-3 py-2 text-left font-medium dark:border-zinc-700";
+const TD_CLASS = "border-b border-zinc-200 px-3 py-2 dark:border-zinc-800";
+
+export default function UpstreamsPage() {
+	const queryClient = useQueryClient();
+	const { data: upstreams } = useSuspenseQuery(upstreamsQuery());
+	const [editing, setEditing] = useState<Upstream | null>(null);
+
+	const create = useMutation(upstreamCreateMutation(queryClient));
+	const save = useMutation(upstreamUpdateMutation(queryClient));
+	const toggle = useMutation(upstreamUpdateMutation(queryClient));
+	const remove = useMutation(upstreamDeleteMutation(queryClient));
+
+	async function submitForm(input: UpstreamInput) {
+		if (editing === null) {
+			await create.mutateAsync(input);
+		} else {
+			await save.mutateAsync({ id: editing.id, input });
+			setEditing(null);
+		}
+		raiseRestartBanner();
+	}
+
+	function toggleEnabled(u: Upstream) {
+		toggle.mutate(
+			{
+				id: u.id,
+				input: { url: u.url, priority: u.priority, enabled: !u.enabled, tls_name: u.tls_name },
+			},
+			{ onSuccess: () => raiseRestartBanner() },
+		);
+	}
+
+	function deleteUpstream(u: Upstream) {
+		if (window.confirm(`Delete upstream "${u.url}"? Queries stop being forwarded to it.`)) {
+			remove.mutate(u.id, { onSuccess: () => raiseRestartBanner() });
+		}
+	}
+
+	const formError = editing === null ? create.error : save.error;
+	const tableError = remove.error ?? toggle.error;
+
+	return (
+		<section>
+			<h1 className="text-2xl font-semibold">Upstreams</h1>
+			<p className="mt-2 max-w-2xl text-sm text-zinc-500">
+				The pool builds its clients at startup, so an edit here takes effect at the next restart. The upstream
+				health table on the Dashboard reflects the running pool, not this list.
+			</p>
+
+			{upstreams.length === 0 ? (
+				<p className="mt-4 text-zinc-500">No upstreams yet. Add one below.</p>
+			) : (
+				<div className="mt-4 overflow-x-auto">
+					<table className="w-full min-w-max border-collapse text-sm">
+						<thead>
+							<tr>
+								<th className={TH_CLASS}>URL</th>
+								<th className={TH_CLASS}>Priority</th>
+								<th className={TH_CLASS}>Enabled</th>
+								<th className={TH_CLASS}>TLS name</th>
+								<th className={TH_CLASS}>
+									<span className="sr-only">Actions</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{upstreams.map((u) => (
+								<tr key={u.id}>
+									<td className={TD_CLASS}>
+										<span className="block max-w-72 truncate font-medium" title={u.url}>
+											{u.url}
+										</span>
+									</td>
+									<td className={`${TD_CLASS} tabular-nums`}>{u.priority}</td>
+									<td className={TD_CLASS}>
+										<input
+											type="checkbox"
+											aria-label={`${u.url} enabled`}
+											checked={u.enabled}
+											disabled={toggle.isPending}
+											onChange={() => toggleEnabled(u)}
+										/>
+									</td>
+									<td className={TD_CLASS}>{u.tls_name === "" ? "—" : u.tls_name}</td>
+									<td className={TD_CLASS}>
+										<div className="flex gap-3">
+											<button
+												type="button"
+												onClick={() => setEditing(u)}
+												className="text-sm font-medium text-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:text-blue-400"
+											>
+												Edit
+											</button>
+											<button
+												type="button"
+												onClick={() => deleteUpstream(u)}
+												disabled={remove.isPending}
+												className="text-sm font-medium text-red-600 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:text-red-400"
+											>
+												Delete
+											</button>
+										</div>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+			<InlineError error={tableError} />
+
+			<UpstreamForm
+				key={editing?.id ?? "add"}
+				initial={editing ?? undefined}
+				busy={editing === null ? create.isPending : save.isPending}
+				error={formError}
+				onSubmit={submitForm}
+				onCancel={editing === null ? undefined : () => setEditing(null)}
+			/>
+		</section>
+	);
+}