AUD-04: backend-authorizer + dev-server + next.js audit-log-ansicht
This commit is contained in:
sysops
@@ -0,0 +1,17 @@
|
||||
export const metadata = {
|
||||
title: "NEXARCH Audit-Log",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="de">
|
||||
<body style={{ fontFamily: "system-ui, sans-serif", margin: 0, background: "#f5f6f8" }}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { fetchRecords, exportURL, type AuditRecord, type AuditFilter } from "@/lib/api";
|
||||
|
||||
const EMPTY_FILTER: AuditFilter = { tenant: "", actor: "", action: "", from: "", to: "" };
|
||||
|
||||
export default function Page() {
|
||||
const [caller, setCaller] = useState("");
|
||||
const [filter, setFilter] = useState<AuditFilter>(EMPTY_FILTER);
|
||||
const [records, setRecords] = useState<AuditRecord[] | null>(null);
|
||||
const [selected, setSelected] = useState<AuditRecord | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function onSearch() {
|
||||
setError(null);
|
||||
setSelected(null);
|
||||
try {
|
||||
const data = await fetchRecords(caller.trim(), filter);
|
||||
setRecords(data);
|
||||
} catch (e: any) {
|
||||
setError(e.message ?? "Unbekannter Fehler");
|
||||
setRecords(null);
|
||||
}
|
||||
}
|
||||
|
||||
function onExport(format: "csv" | "json") {
|
||||
const url = exportURL(caller.trim(), filter, format);
|
||||
// Echter Datei-Download ueber Browser-Navigation, KEIN erneutes Parsen
|
||||
// im Frontend (Akzeptanzkriterium 2: Export aus AUD-03 direkt ausloesbar).
|
||||
window.open(url, "_blank");
|
||||
}
|
||||
|
||||
return (
|
||||
<main style={{ maxWidth: 1000, margin: "0 auto", padding: "2rem 1rem" }}>
|
||||
<h1>Audit-Log</h1>
|
||||
|
||||
<div style={{ display: "grid", gap: "0.5rem", gridTemplateColumns: "repeat(3, 1fr)", marginBottom: "1rem" }}>
|
||||
<input
|
||||
value={caller}
|
||||
onChange={(e) => setCaller(e.target.value)}
|
||||
placeholder="Admin-Token (Berechtigung)"
|
||||
style={{ padding: "0.5rem", gridColumn: "span 3" }}
|
||||
/>
|
||||
<input
|
||||
value={filter.tenant}
|
||||
onChange={(e) => setFilter({ ...filter, tenant: e.target.value })}
|
||||
placeholder="Tenant"
|
||||
style={{ padding: "0.5rem" }}
|
||||
/>
|
||||
<input
|
||||
value={filter.actor}
|
||||
onChange={(e) => setFilter({ ...filter, actor: e.target.value })}
|
||||
placeholder="Akteur"
|
||||
style={{ padding: "0.5rem" }}
|
||||
/>
|
||||
<input
|
||||
value={filter.action}
|
||||
onChange={(e) => setFilter({ ...filter, action: e.target.value })}
|
||||
placeholder="Aktion"
|
||||
style={{ padding: "0.5rem" }}
|
||||
/>
|
||||
<label>
|
||||
Von
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={filter.from}
|
||||
onChange={(e) =>
|
||||
setFilter({ ...filter, from: e.target.value ? new Date(e.target.value).toISOString() : "" })
|
||||
}
|
||||
style={{ width: "100%", padding: "0.4rem" }}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Bis
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={filter.to}
|
||||
onChange={(e) =>
|
||||
setFilter({ ...filter, to: e.target.value ? new Date(e.target.value).toISOString() : "" })
|
||||
}
|
||||
style={{ width: "100%", padding: "0.4rem" }}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem" }}>
|
||||
<button onClick={onSearch}>Suchen</button>
|
||||
<button onClick={() => onExport("csv")}>Export als CSV</button>
|
||||
<button onClick={() => onExport("json")}>Export als JSON</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p style={{ color: "#c62828" }} role="alert">
|
||||
Fehler: {error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{records && (
|
||||
<table style={{ width: "100%", borderCollapse: "collapse", background: "white" }}>
|
||||
<thead>
|
||||
<tr style={{ textAlign: "left", borderBottom: "2px solid #ddd" }}>
|
||||
<th style={{ padding: "0.5rem" }}>Zeitpunkt</th>
|
||||
<th style={{ padding: "0.5rem" }}>Tenant</th>
|
||||
<th style={{ padding: "0.5rem" }}>Akteur</th>
|
||||
<th style={{ padding: "0.5rem" }}>Aktion</th>
|
||||
<th style={{ padding: "0.5rem" }}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{records.map((r, i) => (
|
||||
<tr key={i} style={{ borderBottom: "1px solid #eee" }}>
|
||||
<td style={{ padding: "0.5rem" }}>{new Date(r.occurred_at).toLocaleString("de-DE")}</td>
|
||||
<td style={{ padding: "0.5rem" }}>{r.tenant_slug}</td>
|
||||
<td style={{ padding: "0.5rem" }}>{r.actor}</td>
|
||||
<td style={{ padding: "0.5rem" }}>{r.action}</td>
|
||||
<td style={{ padding: "0.5rem" }}>
|
||||
<button onClick={() => setSelected(r)}>Details</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{records.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} style={{ padding: "0.5rem" }}>
|
||||
Keine Einträge gefunden.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{selected && (
|
||||
<section style={{ background: "white", padding: "1rem", borderRadius: 8, marginTop: "1.5rem" }}>
|
||||
<h2>Eintrag-Details</h2>
|
||||
<dl>
|
||||
<dt>Zeitpunkt</dt>
|
||||
<dd>{new Date(selected.occurred_at).toLocaleString("de-DE")}</dd>
|
||||
<dt>Tenant</dt>
|
||||
<dd>{selected.tenant_slug}</dd>
|
||||
<dt>Akteur</dt>
|
||||
<dd>{selected.actor}</dd>
|
||||
<dt>Aktion</dt>
|
||||
<dd>{selected.action}</dd>
|
||||
<dt>Ziel</dt>
|
||||
<dd>{selected.target}</dd>
|
||||
<dt>Metadaten</dt>
|
||||
<dd>
|
||||
<pre style={{ whiteSpace: "pre-wrap", background: "#f5f6f8", padding: "0.5rem" }}>
|
||||
{JSON.stringify(selected.metadata, null, 2)}
|
||||
</pre>
|
||||
</dd>
|
||||
</dl>
|
||||
<button onClick={() => setSelected(null)}>Schließen</button>
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user