323 lines
10 KiB
TypeScript
323 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { isValidElement, useEffect, useMemo, useState } from "react";
|
|
import type { ReactNode } from "react";
|
|
import { format } from "date-fns";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { Loader2 } from "lucide-react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import type { BadgeVariant } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetDescription,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet";
|
|
import { apiGet } from "@/lib/api/client";
|
|
|
|
const AUDIT_LOG_REFRESH_INTERVAL_MS = 10_000;
|
|
const AUDIT_LOG_PAGE_SIZE = 50;
|
|
const SUMMARY_MAX_LENGTH = 120;
|
|
|
|
interface AuditLogDrawerProps {
|
|
sessionId?: string;
|
|
trigger: ReactNode;
|
|
}
|
|
|
|
interface AuditLogEntry {
|
|
id: string;
|
|
userId: string;
|
|
sessionId: string;
|
|
provider: string;
|
|
action: string;
|
|
content: string | null;
|
|
metadata: unknown;
|
|
createdAt: string;
|
|
}
|
|
|
|
interface AuditLogResponse {
|
|
items: AuditLogEntry[];
|
|
total: number;
|
|
page: number;
|
|
pages: number;
|
|
}
|
|
|
|
function isRecord(value: unknown): value is Record<string, unknown> {
|
|
return typeof value === "object" && value !== null;
|
|
}
|
|
|
|
function truncateText(value: string, maxLength: number): string {
|
|
if (value.length <= maxLength) {
|
|
return value;
|
|
}
|
|
|
|
return `${value.slice(0, maxLength - 1)}…`;
|
|
}
|
|
|
|
function truncateSessionId(sessionId: string): string {
|
|
return sessionId.slice(0, 8);
|
|
}
|
|
|
|
function formatTimestamp(value: string): string {
|
|
const parsed = new Date(value);
|
|
|
|
if (Number.isNaN(parsed.getTime())) {
|
|
return "Unknown";
|
|
}
|
|
|
|
return format(parsed, "yyyy-MM-dd HH:mm:ss");
|
|
}
|
|
|
|
function stringifyPayloadValue(value: unknown): string {
|
|
if (typeof value === "string") {
|
|
return value;
|
|
}
|
|
|
|
if (typeof value === "number" || typeof value === "boolean") {
|
|
return String(value);
|
|
}
|
|
|
|
try {
|
|
return JSON.stringify(value);
|
|
} catch {
|
|
return "[unserializable]";
|
|
}
|
|
}
|
|
|
|
function getPayloadSummary(entry: AuditLogEntry): string {
|
|
const metadata = isRecord(entry.metadata) ? entry.metadata : undefined;
|
|
const payload = metadata && isRecord(metadata.payload) ? metadata.payload : undefined;
|
|
|
|
if (typeof entry.content === "string" && entry.content.trim().length > 0) {
|
|
return truncateText(entry.content.trim(), SUMMARY_MAX_LENGTH);
|
|
}
|
|
|
|
if (payload) {
|
|
const summary = Object.entries(payload)
|
|
.map(([key, value]) => `${key}=${stringifyPayloadValue(value)}`)
|
|
.join(", ");
|
|
|
|
if (summary.length > 0) {
|
|
return truncateText(summary, SUMMARY_MAX_LENGTH);
|
|
}
|
|
}
|
|
|
|
return "—";
|
|
}
|
|
|
|
function getActionVariant(action: string): BadgeVariant {
|
|
switch (action) {
|
|
case "inject":
|
|
return "badge-blue";
|
|
case "pause":
|
|
return "status-warning";
|
|
case "resume":
|
|
return "status-success";
|
|
case "kill":
|
|
return "status-error";
|
|
default:
|
|
return "status-neutral";
|
|
}
|
|
}
|
|
|
|
async function fetchAuditLog(
|
|
sessionId: string | undefined,
|
|
page: number
|
|
): Promise<AuditLogResponse> {
|
|
const params = new URLSearchParams({
|
|
page: String(page),
|
|
limit: String(AUDIT_LOG_PAGE_SIZE),
|
|
});
|
|
|
|
const normalizedSessionId = sessionId?.trim();
|
|
if (normalizedSessionId && normalizedSessionId.length > 0) {
|
|
params.set("sessionId", normalizedSessionId);
|
|
}
|
|
|
|
return apiGet<AuditLogResponse>(`/api/mission-control/audit-log?${params.toString()}`);
|
|
}
|
|
|
|
export function AuditLogDrawer({ sessionId, trigger }: AuditLogDrawerProps): React.JSX.Element {
|
|
const [open, setOpen] = useState(false);
|
|
const [page, setPage] = useState(1);
|
|
|
|
const triggerElement = useMemo(
|
|
() =>
|
|
isValidElement(trigger) ? (
|
|
trigger
|
|
) : (
|
|
<Button variant="outline" size="sm">
|
|
{trigger}
|
|
</Button>
|
|
),
|
|
[trigger]
|
|
);
|
|
|
|
const auditLogQuery = useQuery<AuditLogResponse>({
|
|
queryKey: ["mission-control", "audit-log", sessionId ?? "all", page],
|
|
queryFn: async (): Promise<AuditLogResponse> => fetchAuditLog(sessionId, page),
|
|
enabled: open,
|
|
refetchInterval: open ? AUDIT_LOG_REFRESH_INTERVAL_MS : false,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setPage(1);
|
|
}
|
|
}, [open, sessionId]);
|
|
|
|
useEffect(() => {
|
|
const pages = auditLogQuery.data?.pages;
|
|
if (pages !== undefined && pages > 0 && page > pages) {
|
|
setPage(pages);
|
|
}
|
|
}, [auditLogQuery.data?.pages, page]);
|
|
|
|
const totalItems = auditLogQuery.data?.total ?? 0;
|
|
const totalPages = auditLogQuery.data?.pages ?? 0;
|
|
const items = auditLogQuery.data?.items ?? [];
|
|
|
|
const canGoPrevious = page > 1;
|
|
const canGoNext = totalPages > 0 && page < totalPages;
|
|
const errorMessage =
|
|
auditLogQuery.error instanceof Error ? auditLogQuery.error.message : "Failed to load audit log";
|
|
|
|
return (
|
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetTrigger asChild>{triggerElement}</SheetTrigger>
|
|
<SheetContent className="sm:max-w-[920px]">
|
|
<SheetHeader>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<SheetTitle>Audit Log</SheetTitle>
|
|
{auditLogQuery.isFetching ? (
|
|
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-hidden="true" />
|
|
) : null}
|
|
</div>
|
|
<SheetDescription>
|
|
{sessionId
|
|
? `Showing actions for session ${sessionId}.`
|
|
: "Showing operator actions across all mission control sessions."}
|
|
</SheetDescription>
|
|
</SheetHeader>
|
|
|
|
<div className="mt-4 flex min-h-0 flex-1 flex-col gap-3">
|
|
<div className="rounded-md border border-border/70">
|
|
<ScrollArea className="h-[64vh]">
|
|
<table className="w-full min-w-[760px] border-collapse text-sm">
|
|
<thead className="sticky top-0 z-10 bg-muted/90">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
|
|
Timestamp
|
|
</th>
|
|
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
|
|
Action
|
|
</th>
|
|
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
|
|
Session
|
|
</th>
|
|
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
|
|
Operator
|
|
</th>
|
|
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
|
|
Payload
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{auditLogQuery.isLoading ? (
|
|
<tr>
|
|
<td
|
|
colSpan={5}
|
|
className="px-3 py-6 text-center text-sm text-muted-foreground"
|
|
>
|
|
Loading audit log...
|
|
</td>
|
|
</tr>
|
|
) : auditLogQuery.error ? (
|
|
<tr>
|
|
<td colSpan={5} className="px-3 py-6 text-center text-sm text-red-500">
|
|
{errorMessage}
|
|
</td>
|
|
</tr>
|
|
) : items.length === 0 ? (
|
|
<tr>
|
|
<td
|
|
colSpan={5}
|
|
className="px-3 py-6 text-center text-sm text-muted-foreground"
|
|
>
|
|
No audit entries found.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
items.map((entry) => {
|
|
const payloadSummary = getPayloadSummary(entry);
|
|
|
|
return (
|
|
<tr key={entry.id} className="border-t border-border/60 align-top">
|
|
<td className="px-3 py-2 font-mono text-xs text-muted-foreground">
|
|
{formatTimestamp(entry.createdAt)}
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
<Badge variant={getActionVariant(entry.action)} className="capitalize">
|
|
{entry.action}
|
|
</Badge>
|
|
</td>
|
|
<td className="px-3 py-2 font-mono text-xs" title={entry.sessionId}>
|
|
{truncateSessionId(entry.sessionId)}
|
|
</td>
|
|
<td
|
|
className="px-3 py-2 text-xs text-muted-foreground"
|
|
title={entry.userId}
|
|
>
|
|
{entry.userId}
|
|
</td>
|
|
<td className="px-3 py-2 text-xs" title={payloadSummary}>
|
|
{payloadSummary}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</ScrollArea>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs text-muted-foreground">{totalItems} total entries</p>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={!canGoPrevious || auditLogQuery.isFetching}
|
|
onClick={() => {
|
|
setPage((currentPage) => Math.max(1, currentPage - 1));
|
|
}}
|
|
>
|
|
Previous
|
|
</Button>
|
|
<span className="text-xs text-muted-foreground">
|
|
Page {page} of {Math.max(totalPages, 1)}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={!canGoNext || auditLogQuery.isFetching}
|
|
onClick={() => {
|
|
setPage((currentPage) => currentPage + 1);
|
|
}}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|