coryHawkvelt/gatehouse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove invalid ip_address and user_agent params from AuditService.log_action calls

Browse Source
This commit is contained in:
Ubuntu
2026-05-08 08:03:32 +00:00
parent 63db8975a5
commit 2366847151
3 changed files with 394 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/admin/SystemAuditPage.tsx
+135 -14
View File
@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from "react";
import {
Download,
Search,
Filter,
RefreshCw,
@@ -15,6 +16,7 @@ import {
Loader2,
CheckCircle2,
XCircle,
X,
Globe,
Lock,
} from "lucide-react";
@@ -123,6 +125,7 @@ const ACTION_FILTER_OPTIONS = [
export default function SystemAuditPage() {
const [logs, setLogs] = useState<AuditLogEntry[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [isExporting, setIsExporting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [accessDenied, setAccessDenied] = useState(false);
const [isAdminView, setIsAdminView] = useState(false);
@@ -132,6 +135,8 @@ export default function SystemAuditPage() {
const [debouncedSearch, setDebouncedSearch] = useState("");
const [actionFilter, setActionFilter] = useState("all");
const [successFilter, setSuccessFilter] = useState("all");
const [userFilter, setUserFilter] = useState<string | null>(null);
const [userFilterLabel, setUserFilterLabel] = useState<string | null>(null);
// pagination
const [page, setPage] = useState(1);
@@ -156,6 +161,7 @@ export default function SystemAuditPage() {
};
if (actionFilter !== "all") params.action = actionFilter;
if (successFilter !== "all") params.success = successFilter;
if (userFilter) params.user_id = userFilter;
if (debouncedSearch) params.q = debouncedSearch;
const resp = await api.admin.getAuditLogs(params);
@@ -173,7 +179,7 @@ export default function SystemAuditPage() {
} finally {
setIsLoading(false);
}
}, [page, actionFilter, successFilter, debouncedSearch]);
}, [page, actionFilter, successFilter, userFilter, debouncedSearch]);
useEffect(() => {
fetchLogs();
@@ -182,7 +188,7 @@ export default function SystemAuditPage() {
// reset to page 1 when filters change
useEffect(() => {
setPage(1);
}, [actionFilter, successFilter, debouncedSearch]);
}, [actionFilter, successFilter, userFilter, debouncedSearch]);
const formatDate = (dateString: string) => formatDateTime(dateString);
@@ -193,6 +199,59 @@ export default function SystemAuditPage() {
return ua.slice(0, 40);
};
const handleExport = useCallback(async () => {
setIsExporting(true);
try {
const EXPORT_PER_PAGE = 200;
const buildParams = (p: number) => {
const params: Record<string, string> = { page: String(p), per_page: String(EXPORT_PER_PAGE) };
if (actionFilter !== "all") params.action = actionFilter;
if (successFilter !== "all") params.success = successFilter;
if (userFilter) params.user_id = userFilter;
if (debouncedSearch) params.q = debouncedSearch;
return params;
};
const first = await api.admin.getAuditLogs(buildParams(1));
const allLogs = [...(first.audit_logs ?? [])];
const totalPages = first.pages ?? 1;
if (totalPages > 1) {
const remaining = await Promise.all(
Array.from({ length: totalPages - 1 }, (_, i) =>
api.admin.getAuditLogs(buildParams(i + 2))
)
);
for (const r of remaining) allLogs.push(...(r.audit_logs ?? []));
}
const esc = (v: string) => `"${v.replace(/"/g, '""')}"`;
const header = ["ID","Action","Description","User Email","User ID","Resource Type","Resource ID","IP Address","User Agent","Success","Error Message","Created At","Updated At"];
const rows = allLogs.map((l) => [
l.id, l.action, l.description ?? "",
l.user?.email ?? "", l.user_id ?? "",
l.resource_type ?? "", l.resource_id ?? "",
l.ip_address ?? "", l.user_agent ?? "",
l.success ? "Yes" : "No",
l.error_message ?? "",
l.created_at, l.updated_at ?? "",
].map(esc).join(","));
const csv = [header.map(esc).join(","), ...rows].join("\n");
const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `audit-logs-${new Date().toISOString().slice(0, 10)}.csv`;
a.click();
URL.revokeObjectURL(url);
} catch (err) {
console.error("Export failed:", err);
} finally {
setIsExporting(false);
}
}, [actionFilter, successFilter, userFilter, debouncedSearch]);
return (
<div className="page-container">
{/* Header */}
@@ -205,15 +264,25 @@ export default function SystemAuditPage() {
: "Your account events"}
</p>
</div>
<Button
variant="outline"
size="sm"
onClick={() => fetchLogs()}
disabled={isLoading}
>
<RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
Refresh
</Button>
<div className="flex items-center gap-2">
<Button
variant="outline" size="sm"
onClick={handleExport}
disabled={isExporting || isLoading}
>
<Download className="w-4 h-4 mr-2" />
{isExporting ? "Exporting…" : "Export CSV"}
</Button>
<Button
variant="outline"
size="sm"
onClick={() => fetchLogs()}
disabled={isLoading}
>
<RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
Refresh
</Button>
</div>
</div>
{/* Filters */}
@@ -250,6 +319,39 @@ export default function SystemAuditPage() {
</Select>
</div>
{/* Active filter chips */}
{(actionFilter !== "all" || successFilter !== "all" || userFilter) && (
<div className="flex flex-wrap items-center gap-2 mb-4">
{actionFilter !== "all" && (
<Badge variant="secondary" className="gap-1 px-3 py-1">
<span className="text-xs">Action: {getActionLabel(actionFilter)}</span>
<X
className="w-3 h-3 cursor-pointer hover:text-destructive"
onClick={() => setActionFilter("all")}
/>
</Badge>
)}
{userFilter && (
<Badge variant="secondary" className="gap-1 px-3 py-1">
<span className="text-xs">User: {userFilterLabel ?? userFilter.slice(0, 8) + "…"}</span>
<X
className="w-3 h-3 cursor-pointer hover:text-destructive"
onClick={() => { setUserFilter(null); setUserFilterLabel(null); }}
/>
</Badge>
)}
{successFilter !== "all" && (
<Badge variant="secondary" className="gap-1 px-3 py-1">
<span className="text-xs">Status: {successFilter === "true" ? "Success only" : "Failures only"}</span>
<X
className="w-3 h-3 cursor-pointer hover:text-destructive"
onClick={() => setSuccessFilter("all")}
/>
</Badge>
)}
</div>
)}
{/* Table */}
<Card>
<CardContent className="p-0">
@@ -294,7 +396,12 @@ export default function SystemAuditPage() {
{/* Body */}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<span className="font-medium text-sm text-foreground">
<span
className="font-medium text-sm text-foreground cursor-pointer hover:text-primary transition-colors"
onClick={() =>
setActionFilter((prev) => (prev === log.action ? "all" : log.action))
}
>
{getActionLabel(log.action)}
</span>
<Badge variant="secondary" className={`text-xs px-1.5 py-0 ${meta.color}`}>
@@ -323,9 +430,23 @@ export default function SystemAuditPage() {
{/* Meta row */}
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground">
{log.user?.email ? (
<span className="font-medium text-foreground/70">{log.user.email}</span>
<span
className="font-medium text-foreground/70 cursor-pointer hover:text-foreground transition-colors"
onClick={() => {
if (log.user_id) {
setUserFilter((prev) => (prev === log.user_id ? null : log.user_id));
setUserFilterLabel((prev) => (prev === log.user.email ? null : log.user.email));
}
}}
>{log.user.email}</span>
) : log.user_id ? (
<span className="font-mono">{log.user_id.slice(0, 8)}…</span>
<span
className="font-mono cursor-pointer hover:text-foreground transition-colors"
onClick={() => {
setUserFilter((prev) => (prev === log.user_id ? null : log.user_id));
setUserFilterLabel((prev) => prev === log.user_id ? null : `${log.user_id!.slice(0, 8)}…`);
}}
>{log.user_id.slice(0, 8)}…</span>
) : (
<span className="italic">System</span>
)}