forked from baron/baron-sso
563 lines
30 KiB
TypeScript
563 lines
30 KiB
TypeScript
import { useInfiniteQuery } from "@tanstack/react-query";
|
||
import type { AxiosError } from "axios";
|
||
import {
|
||
ChevronDown,
|
||
ChevronUp,
|
||
Copy,
|
||
ListChecks,
|
||
RefreshCw,
|
||
Search,
|
||
Terminal,
|
||
} from "lucide-react";
|
||
import * as React from "react";
|
||
import { Badge } from "../../components/ui/badge";
|
||
import { Button } from "../../components/ui/button";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "../../components/ui/card";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "../../components/ui/table";
|
||
import type { AuditLog } from "../../lib/adminApi";
|
||
import { fetchAuditLogs } from "../../lib/adminApi";
|
||
|
||
const defaultAuditFilters = [
|
||
"method:POST path:/api/v1/*",
|
||
"status:failure",
|
||
"latency_ms:>1000",
|
||
];
|
||
|
||
type AuditDetails = {
|
||
request_id?: string;
|
||
method?: string;
|
||
path?: string;
|
||
status?: number;
|
||
latency_ms?: number;
|
||
error?: string;
|
||
tenant_id?: string;
|
||
actor_id?: string;
|
||
action?: string;
|
||
target?: string;
|
||
before?: unknown;
|
||
after?: unknown;
|
||
};
|
||
|
||
function parseDetails(details?: string): AuditDetails {
|
||
if (!details) {
|
||
return {};
|
||
}
|
||
try {
|
||
const parsed = JSON.parse(details);
|
||
if (parsed && typeof parsed === "object") {
|
||
return parsed as AuditDetails;
|
||
}
|
||
} catch {}
|
||
return {};
|
||
}
|
||
|
||
function formatCellValue(value: unknown) {
|
||
if (value === null || value === undefined || value === "") {
|
||
return "-";
|
||
}
|
||
if (typeof value === "string") {
|
||
return value;
|
||
}
|
||
try {
|
||
return JSON.stringify(value);
|
||
} catch {
|
||
return String(value);
|
||
}
|
||
}
|
||
|
||
function formatIsoDateTime(value: string) {
|
||
if (!value) {
|
||
return { date: "-", time: "-" };
|
||
}
|
||
const parsed = new Date(value);
|
||
if (Number.isNaN(parsed.getTime())) {
|
||
return { date: value, time: "-" };
|
||
}
|
||
const date = parsed.toISOString().slice(0, 10);
|
||
const time = parsed.toLocaleTimeString("ko-KR", { hour12: false });
|
||
return { date, time };
|
||
}
|
||
|
||
function AuditLogsPage() {
|
||
const [filters, setFilters] = React.useState(defaultAuditFilters);
|
||
const [filterDraft, setFilterDraft] = React.useState("");
|
||
const [expandedRows, setExpandedRows] = React.useState<
|
||
Record<string, boolean>
|
||
>({});
|
||
|
||
const handleCopy = (value: string) => {
|
||
if (!value) {
|
||
return;
|
||
}
|
||
navigator.clipboard.writeText(value);
|
||
};
|
||
const {
|
||
data,
|
||
isLoading,
|
||
error,
|
||
fetchNextPage,
|
||
hasNextPage,
|
||
isFetchingNextPage,
|
||
isFetching,
|
||
refetch,
|
||
} = useInfiniteQuery({
|
||
queryKey: ["audit-logs"],
|
||
queryFn: ({ pageParam }) => fetchAuditLogs(50, pageParam),
|
||
initialPageParam: undefined as string | undefined,
|
||
getNextPageParam: (lastPage) => lastPage.next_cursor || undefined,
|
||
});
|
||
|
||
const logs =
|
||
data?.pages?.flatMap(
|
||
(page) =>
|
||
page?.items?.filter((item): item is AuditLog =>
|
||
Boolean(item),
|
||
) ?? [],
|
||
) ?? [];
|
||
|
||
const handleAddFilter = () => {
|
||
const trimmed = filterDraft.trim();
|
||
if (!trimmed) {
|
||
return;
|
||
}
|
||
setFilters((prev) =>
|
||
prev.includes(trimmed) ? prev : [...prev, trimmed],
|
||
);
|
||
setFilterDraft("");
|
||
};
|
||
|
||
if (isLoading) {
|
||
return <div className="p-8 text-center">Loading audit logs...</div>;
|
||
}
|
||
|
||
if (error) {
|
||
const errMsg =
|
||
(error as AxiosError<{ error?: string }>).response?.data?.error ??
|
||
(error as Error).message;
|
||
return (
|
||
<div className="p-8 text-center text-red-500">
|
||
Error loading logs: {errMsg}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-8">
|
||
<header className="flex flex-wrap items-start justify-between gap-4">
|
||
<div>
|
||
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
|
||
<span>Audit</span>
|
||
<span>/</span>
|
||
<span className="text-foreground">Logs</span>
|
||
</div>
|
||
<h2 className="text-3xl font-semibold">감사 로그</h2>
|
||
<p className="text-sm text-[var(--color-muted)]">
|
||
Command 요청 기반 ClickHouse 로그를 조회합니다.
|
||
사용자/테넌트는 추후 세션 연동 시 자동 채워집니다.
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => refetch()}
|
||
disabled={isFetching}
|
||
>
|
||
<RefreshCw size={16} />
|
||
새로고침
|
||
</Button>
|
||
<Button>
|
||
<ListChecks size={16} />
|
||
Export CSV
|
||
</Button>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="space-y-4">
|
||
<Card className="glass-panel">
|
||
<CardHeader className="flex flex-row items-center justify-between">
|
||
<div>
|
||
<CardTitle>Audit registry</CardTitle>
|
||
<CardDescription>
|
||
로드된 로그 {logs.length}건
|
||
</CardDescription>
|
||
</div>
|
||
<Badge variant="muted">Command only</Badge>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||
<div className="flex flex-1 items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-2 text-[var(--color-muted)]">
|
||
<Search size={14} />
|
||
<input
|
||
value={filterDraft}
|
||
onChange={(event) =>
|
||
setFilterDraft(event.target.value)
|
||
}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter") {
|
||
handleAddFilter();
|
||
}
|
||
}}
|
||
placeholder="필터 추가 (예: status:failure)"
|
||
className="w-full bg-transparent text-sm text-foreground outline-none"
|
||
/>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={handleAddFilter}
|
||
>
|
||
추가
|
||
</Button>
|
||
</div>
|
||
{filters.length === 0 ? (
|
||
<span className="text-xs text-[var(--color-muted)]">
|
||
필터 없음
|
||
</span>
|
||
) : (
|
||
filters.map((filter) => (
|
||
<span
|
||
key={filter}
|
||
className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.04)] px-3 py-1 text-xs text-[var(--color-muted)]"
|
||
>
|
||
<Terminal size={12} />
|
||
{filter}
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
setFilters((prev) =>
|
||
prev.filter(
|
||
(item) =>
|
||
item !== filter,
|
||
),
|
||
)
|
||
}
|
||
className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-[var(--color-border)] text-[10px] text-[var(--color-muted)]"
|
||
aria-label={`${filter} 필터 제거`}
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
))
|
||
)}
|
||
</div>
|
||
<Table className="table-fixed">
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead className="w-[140px]">
|
||
TIME
|
||
</TableHead>
|
||
<TableHead className="w-[160px]">
|
||
ACTOR (ID)
|
||
</TableHead>
|
||
<TableHead>REQUEST</TableHead>
|
||
<TableHead>PATH</TableHead>
|
||
<TableHead className="w-[120px]">
|
||
STATUS
|
||
</TableHead>
|
||
<TableHead>Action / Target</TableHead>
|
||
<TableHead className="w-[80px]"></TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{isLoading && (
|
||
<TableRow>
|
||
<TableCell colSpan={7}>
|
||
로딩 중...
|
||
</TableCell>
|
||
</TableRow>
|
||
)}
|
||
{!isLoading && logs.length === 0 && (
|
||
<TableRow>
|
||
<TableCell colSpan={7}>
|
||
아직 수집된 감사 로그가 없습니다.
|
||
</TableCell>
|
||
</TableRow>
|
||
)}
|
||
{logs.map((row, index) => {
|
||
const details = parseDetails(row.details);
|
||
const actionLabel =
|
||
details.action ||
|
||
(details.method && details.path
|
||
? `${details.method} ${details.path}`
|
||
: row.event_type);
|
||
const rowKey = `${row.event_id}-${row.timestamp}-${index}`;
|
||
const isExpanded = Boolean(
|
||
expandedRows[rowKey],
|
||
);
|
||
return (
|
||
<React.Fragment key={rowKey}>
|
||
<TableRow className="bg-card/40">
|
||
<TableCell className="text-xs text-[var(--color-muted)]">
|
||
{(() => {
|
||
const { date, time } =
|
||
formatIsoDateTime(
|
||
row.timestamp,
|
||
);
|
||
return (
|
||
<div className="space-y-1">
|
||
<div>
|
||
{date}
|
||
</div>
|
||
<div>
|
||
{time}
|
||
</div>
|
||
</div>
|
||
);
|
||
})()}
|
||
</TableCell>
|
||
<TableCell>
|
||
<div className="flex items-center gap-2">
|
||
<code className="rounded-md bg-secondary/60 px-2 py-1 text-xs text-muted-foreground">
|
||
{row.user_id ||
|
||
details.actor_id ||
|
||
"-"}
|
||
</code>
|
||
{(row.user_id ||
|
||
details.actor_id) && (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-7 w-7 text-muted-foreground hover:text-primary"
|
||
aria-label="Copy actor id"
|
||
onClick={() =>
|
||
handleCopy(
|
||
row.user_id ||
|
||
details.actor_id ||
|
||
"",
|
||
)
|
||
}
|
||
>
|
||
<Copy className="h-3 w-3" />
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell className="text-xs text-[var(--color-muted)]">
|
||
<div className="flex items-start gap-2">
|
||
<span className="break-all">
|
||
{formatCellValue(
|
||
details.request_id,
|
||
)}
|
||
</span>
|
||
{details.request_id && (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-7 w-7 text-muted-foreground hover:text-primary"
|
||
aria-label="Copy request id"
|
||
onClick={() =>
|
||
handleCopy(
|
||
details.request_id ||
|
||
"",
|
||
)
|
||
}
|
||
>
|
||
<Copy className="h-3 w-3" />
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell className="text-xs text-[var(--color-muted)]">
|
||
<div className="font-semibold text-foreground">
|
||
{formatCellValue(
|
||
details.method,
|
||
)}
|
||
</div>
|
||
<div className="break-all">
|
||
{formatCellValue(
|
||
details.path,
|
||
)}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Badge
|
||
variant={
|
||
row.status ===
|
||
"success" ||
|
||
row.status === "ok"
|
||
? "success"
|
||
: "warning"
|
||
}
|
||
>
|
||
{row.status}
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell className="text-xs text-[var(--color-muted)]">
|
||
<div className="font-semibold text-foreground">
|
||
{actionLabel}
|
||
</div>
|
||
{details.target && (
|
||
<div className="flex items-center gap-2">
|
||
<span className="break-all">
|
||
Target ·{" "}
|
||
{details.target}
|
||
</span>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-7 w-7 text-muted-foreground hover:text-primary"
|
||
aria-label="Copy target"
|
||
onClick={() =>
|
||
handleCopy(
|
||
details.target ||
|
||
"",
|
||
)
|
||
}
|
||
>
|
||
<Copy className="h-3 w-3" />
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() =>
|
||
setExpandedRows(
|
||
(prev) => ({
|
||
...prev,
|
||
[rowKey]:
|
||
!isExpanded,
|
||
}),
|
||
)
|
||
}
|
||
>
|
||
{isExpanded ? (
|
||
<ChevronUp className="h-4 w-4" />
|
||
) : (
|
||
<ChevronDown className="h-4 w-4" />
|
||
)}
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
{isExpanded && (
|
||
<TableRow className="bg-card/20">
|
||
<TableCell
|
||
colSpan={7}
|
||
className="text-xs"
|
||
>
|
||
<div className="grid gap-4 text-[var(--color-muted)] md:grid-cols-3">
|
||
<div className="space-y-1">
|
||
<div className="uppercase tracking-[0.16em]">
|
||
Request
|
||
</div>
|
||
<div className="break-all">
|
||
Request ID ·{" "}
|
||
{formatCellValue(
|
||
details.request_id,
|
||
)}
|
||
</div>
|
||
<div className="break-all">
|
||
Event ID ·{" "}
|
||
{formatCellValue(
|
||
row.event_id,
|
||
)}
|
||
</div>
|
||
<div>
|
||
IP ·{" "}
|
||
{formatCellValue(
|
||
row.ip_address,
|
||
)}
|
||
</div>
|
||
<div>
|
||
Latency ·{" "}
|
||
{details.latency_ms !==
|
||
undefined
|
||
? `${details.latency_ms}ms`
|
||
: "-"}
|
||
</div>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="uppercase tracking-[0.16em]">
|
||
Actor
|
||
</div>
|
||
<div>
|
||
Actor ID ·{" "}
|
||
{row.user_id ||
|
||
details.actor_id ||
|
||
"-"}
|
||
</div>
|
||
<div>
|
||
Tenant ·{" "}
|
||
{formatCellValue(
|
||
details.tenant_id,
|
||
)}
|
||
</div>
|
||
<div>
|
||
Device ·{" "}
|
||
{formatCellValue(
|
||
row.device_id,
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="uppercase tracking-[0.16em]">
|
||
Result
|
||
</div>
|
||
<div className="break-all">
|
||
Error ·{" "}
|
||
{formatCellValue(
|
||
details.error,
|
||
)}
|
||
</div>
|
||
<div className="break-all">
|
||
Before ·{" "}
|
||
{formatCellValue(
|
||
details.before,
|
||
)}
|
||
</div>
|
||
<div className="break-all">
|
||
After ·{" "}
|
||
{formatCellValue(
|
||
details.after,
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
)}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</TableBody>
|
||
</Table>
|
||
<div className="pt-4 text-center">
|
||
{hasNextPage ? (
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => fetchNextPage()}
|
||
disabled={isFetchingNextPage}
|
||
>
|
||
{isFetchingNextPage
|
||
? "Loading..."
|
||
: "Load more"}
|
||
</Button>
|
||
) : (
|
||
<span className="text-xs text-[var(--color-muted)]">
|
||
End of audit feed
|
||
</span>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default AuditLogsPage;
|