@gmickel/gno 1.28.0 → 1.29.0

package/src/serve/public/components/EgressAuditPanel.tsx

@@ -0,0 +1,278 @@
+import {
+  ChevronRightIcon,
+  Loader2Icon,
+  ReceiptTextIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { apiFetch } from "../hooks/use-api";
+import { Button } from "./ui/button";
+
+interface AuditReceipt {
+  action: string;
+  auditId: string;
+  byteSize: number;
+  contentClass: string;
+  createdAtMs: number;
+  decision: "allow" | "deny";
+  destinationZone: string;
+  effectivePolicy: string;
+  reasonCode: string;
+}
+
+interface AuditPage {
+  nextCursor: string | null;
+  receipts: AuditReceipt[];
+}
+
+interface AuditStatus {
+  bytes: number;
+  receipts: number;
+  retention: {
+    maxAgeDays: number;
+    maxBytes: number;
+    maxReceipts: number;
+  };
+}
+
+interface CleanupResult {
+  auditId?: string;
+  checkpointedFrames: number;
+  deleted: number;
+  physicalCleanup: string;
+  remainingWalFrames: number;
+}
+
+export function EgressAuditPanel() {
+  const [receipts, setReceipts] = useState<AuditReceipt[]>([]);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const [status, setStatus] = useState<AuditStatus | null>(null);
+  const [selected, setSelected] = useState<AuditReceipt | null>(null);
+  const [pendingDelete, setPendingDelete] = useState<string | null>(null);
+  const [purgeConfirmed, setPurgeConfirmed] = useState(false);
+  const [cleanup, setCleanup] = useState<CleanupResult | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadStatus = useCallback(async () => {
+    const response = await apiFetch<AuditStatus>("/api/egress/audits/status");
+    if (response.data) setStatus(response.data);
+    else if (response.error) setError(response.error);
+  }, []);
+
+  const loadPage = useCallback(async (cursor?: string) => {
+    setLoading(true);
+    setError(null);
+    const suffix = cursor
+      ? `?limit=10&cursor=${encodeURIComponent(cursor)}`
+      : "?limit=10";
+    const response = await apiFetch<AuditPage>(`/api/egress/audits${suffix}`);
+    setLoading(false);
+    if (response.error || !response.data) {
+      setError(response.error ?? "Audit list failed");
+      return;
+    }
+    const page = response.data;
+    setReceipts((current) =>
+      cursor ? [...current, ...page.receipts] : page.receipts
+    );
+    setNextCursor(page.nextCursor);
+  }, []);
+
+  useEffect(() => {
+    void Promise.all([loadPage(), loadStatus()]);
+  }, [loadPage, loadStatus]);
+
+  const show = async (auditId: string) => {
+    setError(null);
+    const response = await apiFetch<{ receipt: AuditReceipt }>(
+      `/api/egress/audits/${encodeURIComponent(auditId)}`
+    );
+    if (response.data) setSelected(response.data.receipt);
+    else setError(response.error ?? "Audit receipt unavailable");
+  };
+
+  const remove = async (auditId: string) => {
+    setError(null);
+    const response = await apiFetch<CleanupResult>(
+      `/api/egress/audits/${encodeURIComponent(auditId)}`,
+      { method: "DELETE" }
+    );
+    setPendingDelete(null);
+    if (response.error || !response.data) {
+      setError(response.error ?? "Audit deletion failed");
+      return;
+    }
+    setCleanup(response.data);
+    setSelected((current) => (current?.auditId === auditId ? null : current));
+    setReceipts((current) =>
+      current.filter((receipt) => receipt.auditId !== auditId)
+    );
+    await loadStatus();
+  };
+
+  const purge = async () => {
+    setError(null);
+    const response = await apiFetch<CleanupResult>("/api/egress/audits", {
+      method: "DELETE",
+    });
+    setPurgeConfirmed(false);
+    if (response.error || !response.data) {
+      setError(response.error ?? "Audit purge failed");
+      return;
+    }
+    setCleanup(response.data);
+    setReceipts([]);
+    setNextCursor(null);
+    setSelected(null);
+    await loadStatus();
+  };
+
+  return (
+    <section
+      aria-labelledby="egress-audit-title"
+      className="space-y-3 border-border/15 border-t px-6 py-5"
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h3
+            className="flex items-center gap-2 font-medium text-[13px]"
+            id="egress-audit-title"
+          >
+            <ReceiptTextIcon className="size-3.5 text-secondary/70" />
+            Local audit receipts
+          </h3>
+          <p className="mt-1 text-muted-foreground/50 text-xs">
+            Content-free decisions; newest first; retained locally.
+          </p>
+        </div>
+        <p className="font-mono text-[10px] text-muted-foreground/50">
+          {status
+            ? `${status.receipts} receipts · ${status.bytes} bytes`
+            : "loading status"}
+        </p>
+      </div>
+
+      {error ? (
+        <p className="text-destructive text-xs" role="alert">
+          {error}
+        </p>
+      ) : null}
+
+      <div className="max-h-44 overflow-y-auto rounded-md border border-border/20">
+        {receipts.length === 0 && !loading ? (
+          <p className="p-3 text-muted-foreground/50 text-xs">
+            No audit receipts yet.
+          </p>
+        ) : null}
+        {receipts.map((receipt) => (
+          <div
+            className="flex items-center gap-2 border-border/15 border-b px-3 py-2 last:border-0"
+            key={receipt.auditId}
+          >
+            <button
+              className="min-w-0 flex-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary"
+              onClick={() => void show(receipt.auditId)}
+              type="button"
+            >
+              <span className="block truncate font-mono text-[10px]">
+                {receipt.decision} · {receipt.reasonCode}
+              </span>
+              <span className="block text-[10px] text-muted-foreground/45">
+                {receipt.action} / {receipt.destinationZone} /{" "}
+                {receipt.contentClass}
+              </span>
+            </button>
+            {pendingDelete === receipt.auditId ? (
+              <div className="flex gap-1">
+                <Button
+                  onClick={() => void remove(receipt.auditId)}
+                  size="sm"
+                  type="button"
+                  variant="destructive"
+                >
+                  Confirm
+                </Button>
+                <Button
+                  onClick={() => setPendingDelete(null)}
+                  size="sm"
+                  type="button"
+                  variant="ghost"
+                >
+                  Cancel
+                </Button>
+              </div>
+            ) : (
+              <Button
+                aria-label="Delete audit receipt"
+                onClick={() => setPendingDelete(receipt.auditId)}
+                size="icon-sm"
+                type="button"
+                variant="ghost"
+              >
+                <Trash2Icon className="size-3" />
+              </Button>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {nextCursor ? (
+        <Button
+          disabled={loading}
+          onClick={() => void loadPage(nextCursor)}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          {loading ? <Loader2Icon className="size-3 animate-spin" /> : null}
+          Load older
+          <ChevronRightIcon className="size-3" />
+        </Button>
+      ) : null}
+
+      {selected ? (
+        <output className="block rounded-md border border-border/20 bg-muted/10 p-3 font-mono text-[10px]">
+          <span className="block">{selected.auditId}</span>
+          <span className="block text-muted-foreground/60">
+            {selected.effectivePolicy} · {selected.reasonCode} ·{" "}
+            {selected.byteSize} bytes
+          </span>
+        </output>
+      ) : null}
+
+      {cleanup ? (
+        <output
+          aria-live="polite"
+          className="block text-[10px] text-muted-foreground/60"
+        >
+          Deleted {cleanup.deleted}; cleanup {cleanup.physicalCleanup};
+          checkpointed {cleanup.checkpointedFrames}; WAL remaining{" "}
+          {cleanup.remainingWalFrames}.
+        </output>
+      ) : null}
+
+      <div className="flex flex-wrap items-center gap-3 border-border/15 border-t pt-3">
+        <label className="flex items-center gap-2 text-xs">
+          <input
+            checked={purgeConfirmed}
+            onChange={(event) => setPurgeConfirmed(event.target.checked)}
+            type="checkbox"
+          />
+          Confirm purge of all local audit receipts
+        </label>
+        <Button
+          className="ml-auto"
+          disabled={!purgeConfirmed}
+          onClick={() => void purge()}
+          size="sm"
+          type="button"
+          variant="destructive"
+        >
+          Purge audits
+        </Button>
+      </div>
+    </section>
+  );
+}