kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

감사 로그 테이블 공통 컬럼 통일

Browse Source
This commit is contained in:
김용연
2026-05-15 13:26:08 +09:00
parent 94f33a0a64
commit 055a804f7f
3 changed files with 255 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
adminfront/src/features/audit/AuditLogsPage.tsx
View File

@@ -32,6 +32,14 @@ import {
TableHeader,
TableRow,
} from "../../components/ui/table";
import {
formatAuditDateParts,
formatAuditValue,
parseAuditDetails,
resolveAuditAction,
resolveAuditActor,
resolveAuditTarget,
} from "../../../../common/core/audit";
import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
import { PageHeader } from "../../../../common/core/components/page";
import type { AuditLog } from "../../lib/adminApi";
@@ -44,61 +52,6 @@ const defaultAuditFilters = [
"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("");
@@ -146,7 +99,7 @@ function AuditLogsPage() {
if (isLoading) {
return (
<div className="p-8 text-center">
{t("msg.admin.audit.loading", "Loading audit logs...")}
{t("msg.common.audit.loading", "Loading audit logs...")}
</div>
);
}
@@ -157,7 +110,7 @@ function AuditLogsPage() {
(error as Error).message;
return (
<div className="p-8 text-center text-red-500">
{t("msg.admin.audit.load_error", "Error loading logs: {{error}}", {
{t("msg.common.audit.load_error", "Error loading logs: {{error}}", {
error: errMsg,
})}
</div>
@@ -169,7 +122,7 @@ function AuditLogsPage() {
<PageHeader
sticky
titleAs="h2"
title={t("ui.admin.audit.title", "감사 로그")}
title={t("ui.common.audit.title", "감사 로그")}
description={t(
"msg.admin.audit.subtitle",
"Command 요청 기반 ClickHouse 로그를 조회합니다. 사용자/테넌트는 추후 세션 연동 시 자동 채워집니다.",
@@ -196,7 +149,7 @@ function AuditLogsPage() {
<CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
<div>
<CardTitle>
{t("ui.admin.audit.registry.title", "Log Registry")}
{t("ui.common.audit.registry.title", "Audit registry")}
</CardTitle>
<CardDescription>
{t("msg.admin.audit.registry.count", "총 {{count}}개 로그", {
@@ -274,25 +227,15 @@ function AuditLogsPage() {
<TableHeader className={commonStickyTableHeaderClass}>
<TableRow>
<TableHead className="w-[140px]">
{t("ui.admin.audit.table.time", "TIME")}
{t("ui.common.audit.table.time", "시간")}
</TableHead>
<TableHead className="w-[160px]">
{t("ui.admin.audit.table.actor", "ACTOR (ID)")}
</TableHead>
<TableHead>
{t("ui.admin.audit.table.request", "REQUEST")}
</TableHead>
<TableHead>
{t("ui.admin.audit.table.path", "PATH")}
{t("ui.common.audit.table.actor", "수행자")}
</TableHead>
<TableHead>{t("ui.common.audit.table.action", "액션")}</TableHead>
<TableHead>{t("ui.common.audit.table.target", "대상")}</TableHead>
<TableHead className="w-[120px]">
{t("ui.admin.audit.table.status", "STATUS")}
</TableHead>
<TableHead>
{t(
"ui.admin.audit.table.action_target",
"Action / Target",
)}
{t("ui.common.audit.table.status", "상태")}
</TableHead>
<TableHead className="w-[80px]" />
</TableRow>
@@ -300,28 +243,26 @@ function AuditLogsPage() {
<TableBody>
{isLoading && (
<TableRow>
<TableCell colSpan={7}>
<TableCell colSpan={6}>
{t("msg.common.loading", "로딩 중...")}
</TableCell>
</TableRow>
)}
{!isLoading && logs.length === 0 && (
<TableRow>
<TableCell colSpan={7}>
<TableCell colSpan={6}>
{t(
"msg.admin.audit.empty",
"msg.common.audit.empty",
"아직 수집된 감사 로그가 없습니다.",
)}
</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 details = parseAuditDetails(row.details);
const actionLabel = resolveAuditAction(row, details);
const actorLabel = resolveAuditActor(row, details);
const targetLabel = resolveAuditTarget(details);
const rowKey = `${row.event_id}-${row.timestamp}-${index}`;
const isExpanded = Boolean(expandedRows[rowKey]);
return (
@@ -329,7 +270,7 @@ function AuditLogsPage() {
<TableRow className="bg-card/40">
<TableCell className="text-xs text-[var(--color-muted)]">
{(() => {
const { date, time } = formatIsoDateTime(
const { date, time } = formatAuditDateParts(
row.timestamp,
);
return (
@@ -343,45 +284,18 @@ function AuditLogsPage() {
<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 || "-"}
{actorLabel}
</code>
{(row.user_id || details.actor_id) && (
{actorLabel !== "-" && (
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-primary"
aria-label={t(
"ui.admin.audit.copy.actor_id",
"ui.common.audit.copy.actor_id",
"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={t(
"ui.admin.audit.copy.request_id",
"Copy request id",
)}
onClick={() =>
handleCopy(details.request_id || "")
}
onClick={() => handleCopy(actorLabel)}
>
<Copy className="h-3 w-3" />
</Button>
@@ -390,10 +304,26 @@ function AuditLogsPage() {
</TableCell>
<TableCell className="text-xs text-[var(--color-muted)]">
<div className="font-semibold text-foreground">
{formatCellValue(details.method)}
{actionLabel}
</div>
<div className="break-all">
{formatCellValue(details.path)}
</TableCell>
<TableCell className="text-xs text-[var(--color-muted)]">
<div className="flex items-center gap-2">
<span className="break-all">{targetLabel}</span>
{targetLabel !== "-" && (
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-primary"
aria-label={t(
"ui.common.audit.copy.target",
"Copy target",
)}
onClick={() => handleCopy(targetLabel)}
>
<Copy className="h-3 w-3" />
</Button>
)}
</div>
</TableCell>
<TableCell>
@@ -407,38 +337,6 @@ function AuditLogsPage() {
{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">
{t(
"ui.admin.audit.target",
"Target · {{target}}",
{
target: details.target,
},
)}
</span>
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-primary"
aria-label={t(
"ui.admin.audit.copy.target",
"Copy target",
)}
onClick={() =>
handleCopy(details.target || "")
}
>
<Copy className="h-3 w-3" />
</Button>
</div>
)}
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
@@ -460,21 +358,21 @@ function AuditLogsPage() {
</TableRow>
{isExpanded && (
<TableRow className="bg-card/20">
<TableCell colSpan={7} className="text-xs">
<TableCell colSpan={6} 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]">
{t(
"ui.admin.audit.details.request",
"ui.common.audit.details.request",
"Request",
)}
</div>
<div className="break-all">
{t(
"ui.admin.audit.details.request_id",
"ui.common.audit.details.request_id",
"Request ID · {{value}}",
{
value: formatCellValue(
value: formatAuditValue(
details.request_id,
),
},
@@ -482,25 +380,31 @@ function AuditLogsPage() {
</div>
<div className="break-all">
{t(
"ui.admin.audit.details.event_id",
"ui.common.audit.details.event_id",
"Event ID · {{value}}",
{
value: formatCellValue(row.event_id),
value: formatAuditValue(row.event_id),
},
)}
</div>
<div>
{t(
"ui.admin.audit.details.ip",
"ui.common.audit.details.ip",
"IP · {{value}}",
{
value: formatCellValue(row.ip_address),
value: formatAuditValue(row.ip_address),
},
)}
</div>
<div className="break-all">
Method · {formatAuditValue(details.method)}
</div>
<div className="break-all">
Path · {formatAuditValue(details.path)}
</div>
<div>
{t(
"ui.admin.audit.details.latency",
"ui.common.audit.details.latency",
"Latency · {{value}}",
{
value:
@@ -513,26 +417,23 @@ function AuditLogsPage() {
</div>
<div className="space-y-1">
<div className="uppercase tracking-[0.16em]">
{t("ui.admin.audit.details.actor", "Actor")}
{t("ui.common.audit.details.actor", "Actor")}
</div>
<div>
{t(
"ui.admin.audit.details.actor_id",
"ui.common.audit.details.actor_id",
"Actor ID · {{value}}",
{
value:
row.user_id ||
details.actor_id ||
"-",
value: actorLabel,
},
)}
</div>
<div>
{t(
"ui.admin.audit.details.tenant",
"ui.common.audit.details.tenant",
"Tenant · {{value}}",
{
value: formatCellValue(
value: formatAuditValue(
details.tenant_id,
),
},
@@ -540,45 +441,48 @@ function AuditLogsPage() {
</div>
<div>
{t(
"ui.admin.audit.details.device",
"ui.common.audit.details.device",
"Device · {{value}}",
{
value: formatCellValue(row.device_id),
value: formatAuditValue(row.device_id),
},
)}
</div>
<div className="break-all">
Target · {targetLabel}
</div>
</div>
<div className="space-y-1">
<div className="uppercase tracking-[0.16em]">
{t(
"ui.admin.audit.details.result",
"ui.common.audit.details.result",
"Result",
)}
</div>
<div className="break-all">
{t(
"ui.admin.audit.details.error",
"ui.common.audit.details.error",
"Error · {{value}}",
{
value: formatCellValue(details.error),
value: formatAuditValue(details.error),
},
)}
</div>
<div className="break-all">
{t(
"ui.admin.audit.details.before",
"ui.common.audit.details.before",
"Before · {{value}}",
{
value: formatCellValue(details.before),
value: formatAuditValue(details.before),
},
)}
</div>
<div className="break-all">
{t(
"ui.admin.audit.details.after",
"ui.common.audit.details.after",
"After · {{value}}",
{
value: formatCellValue(details.after),
value: formatAuditValue(details.after),
},
)}
</div>
@@ -603,7 +507,7 @@ function AuditLogsPage() {
>
{isFetchingNextPage
? t("msg.common.loading", "Loading...")
: t("ui.admin.audit.load_more", "Load more")}
: t("ui.common.audit.load_more", "더 보기")}
</Button>
) : (
<span className="text-xs text-[var(--color-muted)]">

92
common/core/audit/index.ts Normal file
View File

@@ -0,0 +1,92 @@
export type CommonAuditLog = {
event_id: string;
timestamp: string;
user_id: string;
event_type: string;
status: string;
ip_address: string;
user_agent: string;
device_id?: string;
details?: string;
};
export 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;
target_id?: string;
before?: unknown;
after?: unknown;
};
export function parseAuditDetails(details?: string): AuditDetails {
if (!details) {
return {};
}
try {
const parsed = JSON.parse(details);
if (parsed && typeof parsed === "object") {
return parsed as AuditDetails;
}
} catch {}
return {};
}
export function formatAuditValue(value: unknown) {
if (value === null || value === undefined || value === "") {
return "-";
}
if (typeof value === "string") {
return value;
}
try {
return JSON.stringify(value);
} catch {
return String(value);
}
}
export function formatAuditDateParts(value: string) {
if (!value) {
return { date: "-", time: "-" };
}
const parsed = new Date(value);
if (Number.isNaN(parsed.getTime())) {
return { date: value, time: "-" };
}
return {
date: parsed.toISOString().slice(0, 10),
time: parsed.toLocaleTimeString("ko-KR", { hour12: false }),
};
}
export function resolveAuditActor(
log: Pick<CommonAuditLog, "user_id">,
details: AuditDetails,
) {
return log.user_id || details.actor_id || "-";
}
export function resolveAuditAction(
log: Pick<CommonAuditLog, "event_type">,
details: AuditDetails,
) {
if (details.action) {
return details.action;
}
if (details.method && details.path) {
return `${details.method} ${details.path}`;
}
return log.event_type;
}
export function resolveAuditTarget(details: AuditDetails) {
return details.target || details.target_id || "-";
}

159
devfront/src/features/audit/AuditLogsPage.tsx
View File

@@ -30,59 +30,20 @@ import {
TableHeader,
TableRow,
} from "../../components/ui/table";
import {
formatAuditDateParts,
formatAuditValue,
parseAuditDetails,
resolveAuditAction,
resolveAuditActor,
resolveAuditTarget,
} from "../../../../common/core/audit";
import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
import { PageHeader } from "../../../../common/core/components/page";
import type { DevAuditLog } from "../../lib/devApi";
import { fetchDevAuditLogs } from "../../lib/devApi";
import { t } from "../../lib/i18n";
type AuditDetails = {
request_id?: string;
method?: string;
path?: string;
tenant_id?: string;
action?: string;
target_id?: string;
before?: unknown;
after?: unknown;
error?: string;
};
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 formatValue(value: unknown): string {
if (value === null || value === undefined || value === "") {
return "-";
}
if (typeof value === "string") {
return value;
}
try {
return JSON.stringify(value);
} catch {
return String(value);
}
}
function formatDateTime(value: string): string {
const parsed = new Date(value);
if (Number.isNaN(parsed.getTime())) {
return value;
}
return parsed.toLocaleString("ko-KR");
}
function toCsv(logs: DevAuditLog[]) {
const header = [
"timestamp",
@@ -95,7 +56,7 @@ function toCsv(logs: DevAuditLog[]) {
"request_id",
];
const rows = logs.map((logItem) => {
const details = parseDetails(logItem.details);
const details = parseAuditDetails(logItem.details);
return [
logItem.timestamp,
logItem.user_id || "",
@@ -184,7 +145,7 @@ function AuditLogsPage() {
axiosError.response?.data?.error ?? (query.error as Error).message;
return (
<div className="p-8 text-center text-red-500">
{t("msg.dev.audit.load_error", "Error loading logs: {{error}}", {
{t("msg.common.audit.load_error", "Error loading logs: {{error}}", {
error: errMsg,
})}
</div>
@@ -194,8 +155,8 @@ function AuditLogsPage() {
return (
<div className="space-y-6">
<PageHeader
eyebrow={t("ui.dev.audit.registry.title", "Audit registry")}
title={t("ui.dev.audit.title", "Audit Logs")}
eyebrow={t("ui.common.audit.registry.title", "Audit registry")}
title={t("ui.common.audit.title", "Audit Logs")}
description={t(
"msg.dev.audit.subtitle",
"Shows DevFront activity history within current tenant/app scope.",
@@ -291,19 +252,19 @@ function AuditLogsPage() {
<TableHeader className={commonStickyTableHeaderClass}>
<TableRow>
<TableHead className="w-[190px]">
{t("ui.dev.audit.table.time", "Time")}
{t("ui.common.audit.table.time", "Time")}
</TableHead>
<TableHead className="w-[180px]">
{t("ui.dev.audit.table.actor", "Actor")}
{t("ui.common.audit.table.actor", "Actor")}
</TableHead>
<TableHead className="w-[180px]">
{t("ui.dev.audit.table.action", "Action")}
{t("ui.common.audit.table.action", "Action")}
</TableHead>
<TableHead className="w-[260px]">
{t("ui.dev.audit.table.target", "Target")}
{t("ui.common.audit.table.target", "Target")}
</TableHead>
<TableHead className="w-[120px]">
{t("ui.dev.audit.table.status", "Status")}
{t("ui.common.audit.table.status", "Status")}
</TableHead>
<TableHead className="w-[80px]" />
</TableRow>
@@ -315,7 +276,7 @@ function AuditLogsPage() {
colSpan={6}
className="py-8 text-center text-muted-foreground"
>
{t("msg.dev.audit.loading", "Loading audit logs...")}
{t("msg.common.audit.loading", "Loading audit logs...")}
</TableCell>
</TableRow>
) : logs.length === 0 ? (
@@ -324,31 +285,42 @@ function AuditLogsPage() {
colSpan={6}
className="text-center text-muted-foreground"
>
{t("msg.dev.audit.empty", "No audit logs found.")}
{t("msg.common.audit.empty", "No audit logs found.")}
</TableCell>
</TableRow>
) : (
logs.map((row, index) => {
const details = parseDetails(row.details);
const actionLabel = details.action || row.event_type;
const targetValue = details.target_id || "-";
const details = parseAuditDetails(row.details);
const actionLabel = resolveAuditAction(row, details);
const actorLabel = resolveAuditActor(row, details);
const targetValue = resolveAuditTarget(details);
const rowKey = `${row.event_id}-${row.timestamp}-${index}`;
const expanded = Boolean(expandedRows[rowKey]);
return (
<React.Fragment key={rowKey}>
<TableRow>
<TableCell className="text-xs text-muted-foreground">
{formatDateTime(row.timestamp)}
{(() => {
const { date, time } = formatAuditDateParts(
row.timestamp,
);
return (
<div className="space-y-1">
<div>{date}</div>
<div>{time}</div>
</div>
);
})()}
</TableCell>
<TableCell className="font-mono text-xs">
<div className="flex items-center gap-2">
<span>{row.user_id || "-"}</span>
{row.user_id ? (
<span>{actorLabel}</span>
{actorLabel !== "-" ? (
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground"
onClick={() => handleCopy(row.user_id)}
onClick={() => handleCopy(actorLabel)}
>
<Copy className="h-3 w-3" />
</Button>
@@ -411,31 +383,64 @@ function AuditLogsPage() {
colSpan={6}
className="text-xs text-muted-foreground"
>
<div className="grid gap-3 md:grid-cols-2">
<div className="grid gap-4 md:grid-cols-3">
<div className="space-y-1">
<div>
<div className="uppercase tracking-[0.16em]">
Request
</div>
<div className="break-all">
Request ID:{" "}
{formatValue(details.request_id)}
{formatAuditValue(details.request_id)}
</div>
<div className="break-all">
Event ID:{" "}
{formatAuditValue(row.event_id)}
</div>
<div>IP: {formatAuditValue(row.ip_address)}</div>
<div className="break-all">
Method: {formatAuditValue(details.method)}
</div>
<div className="break-all">
Path: {formatAuditValue(details.path)}
</div>
<div>
Method: {formatValue(details.method)}
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: {actorLabel}</div>
<div>
Tenant:{" "}
{formatAuditValue(details.tenant_id)}
</div>
<div>
Path: {formatValue(details.path)}
Device:{" "}
{formatAuditValue(row.device_id)}
</div>
<div>
Tenant: {formatValue(details.tenant_id)}
<div className="break-all">
Target: {targetValue}
</div>
</div>
<div className="space-y-1 break-all">
<div>
Before: {formatValue(details.before)}
<div className="uppercase tracking-[0.16em]">
Result
</div>
<div>
After: {formatValue(details.after)}
Error:{" "}
{formatAuditValue(details.error)}
</div>
<div>
Error: {formatValue(details.error)}
Before:{" "}
{formatAuditValue(details.before)}
</div>
<div>
After: {formatAuditValue(details.after)}
</div>
</div>
</div>
@@ -461,7 +466,7 @@ function AuditLogsPage() {
>
{query.isFetchingNextPage
? t("msg.common.loading", "Loading...")
: t("ui.dev.audit.load_more", "Load more")}
: t("ui.common.audit.load_more", "Load more")}
</Button>
</div>
) : null}