forked from baron/baron-sso
415 lines
14 KiB
TypeScript
415 lines
14 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
Database,
|
|
ShieldAlert,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
import { RoleGuard } from "../../components/auth/RoleGuard";
|
|
import { Badge } from "../../components/ui/badge";
|
|
import { Button } from "../../components/ui/button";
|
|
import {
|
|
type DataIntegrityCheck,
|
|
type DataIntegrityStatus,
|
|
type OrphanUserLoginID,
|
|
deleteOrphanUserLoginIDs,
|
|
fetchDataIntegrityReport,
|
|
fetchOrphanUserLoginIDs,
|
|
} from "../../lib/adminApi";
|
|
|
|
function statusLabel(status: DataIntegrityStatus) {
|
|
switch (status) {
|
|
case "pass":
|
|
return "정상";
|
|
case "warning":
|
|
return "주의";
|
|
case "fail":
|
|
return "실패";
|
|
default:
|
|
return status;
|
|
}
|
|
}
|
|
|
|
function statusBadgeVariant(status: DataIntegrityStatus) {
|
|
switch (status) {
|
|
case "pass":
|
|
return "success";
|
|
case "warning":
|
|
return "warning";
|
|
default:
|
|
return "warning";
|
|
}
|
|
}
|
|
|
|
function formatDateTime(value?: string) {
|
|
if (!value) return "-";
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return value;
|
|
return new Intl.DateTimeFormat("ko-KR", {
|
|
dateStyle: "medium",
|
|
timeStyle: "medium",
|
|
}).format(date);
|
|
}
|
|
|
|
function CheckIcon({ check }: { check: DataIntegrityCheck }) {
|
|
if (check.status === "pass") {
|
|
return <CheckCircle2 className="text-emerald-600" size={18} />;
|
|
}
|
|
if (check.status === "warning") {
|
|
return <AlertTriangle className="text-amber-600" size={18} />;
|
|
}
|
|
return <ShieldAlert className="text-destructive" size={18} />;
|
|
}
|
|
|
|
function reasonLabel(reason: string) {
|
|
switch (reason) {
|
|
case "missing_user":
|
|
return "사용자 없음";
|
|
case "deleted_user":
|
|
return "삭제된 사용자";
|
|
case "missing_tenant":
|
|
return "테넌트 없음";
|
|
case "deleted_tenant":
|
|
return "삭제된 테넌트";
|
|
default:
|
|
return reason;
|
|
}
|
|
}
|
|
|
|
function recheckStatusText(status: "idle" | "running" | "success" | "error") {
|
|
switch (status) {
|
|
case "running":
|
|
return "정합성 검사를 실행 중입니다.";
|
|
case "success":
|
|
return "검사가 완료되었습니다.";
|
|
case "error":
|
|
return "검사에 실패했습니다.";
|
|
default:
|
|
return "";
|
|
}
|
|
}
|
|
|
|
function OrphanLoginIDTable({
|
|
items,
|
|
selectedIds,
|
|
onToggle,
|
|
}: {
|
|
items: OrphanUserLoginID[];
|
|
selectedIds: string[];
|
|
onToggle: (id: string) => void;
|
|
}) {
|
|
if (items.length === 0) {
|
|
return (
|
|
<div className="rounded border border-border/60 px-3 py-6 text-center text-sm text-muted-foreground">
|
|
삭제할 유령 로그인 ID가 없습니다.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const selectedSet = new Set(selectedIds);
|
|
return (
|
|
<div className="overflow-x-auto rounded border border-border/60">
|
|
<table className="w-full min-w-[760px] text-sm">
|
|
<thead className="bg-muted/50 text-left text-muted-foreground">
|
|
<tr>
|
|
<th className="w-12 px-3 py-2">선택</th>
|
|
<th className="px-3 py-2">Login ID</th>
|
|
<th className="px-3 py-2">Field</th>
|
|
<th className="px-3 py-2">User</th>
|
|
<th className="px-3 py-2">Tenant</th>
|
|
<th className="px-3 py-2">사유</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{items.map((item) => (
|
|
<tr key={item.id}>
|
|
<td className="px-3 py-2">
|
|
<input
|
|
type="checkbox"
|
|
aria-label={`${item.loginId} 선택`}
|
|
checked={selectedSet.has(item.id)}
|
|
onChange={() => onToggle(item.id)}
|
|
className="h-4 w-4 rounded border-input"
|
|
/>
|
|
</td>
|
|
<td className="px-3 py-2 font-medium">{item.loginId}</td>
|
|
<td className="px-3 py-2 text-muted-foreground">
|
|
{item.fieldKey}
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
<div>{item.userEmail || "-"}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{item.userId}
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
<div>{item.tenantSlug || "-"}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{item.tenantId}
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
<div className="flex flex-wrap gap-1">
|
|
{item.reasons.map((reason) => (
|
|
<Badge key={reason} variant="warning">
|
|
{reasonLabel(reason)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DataIntegrityContent() {
|
|
const queryClient = useQueryClient();
|
|
const [selectedOrphanIds, setSelectedOrphanIds] = useState<string[]>([]);
|
|
const [recheckStatus, setRecheckStatus] = useState<
|
|
"idle" | "running" | "success" | "error"
|
|
>("idle");
|
|
const { data, isLoading, isError, error, refetch, isFetching } = useQuery({
|
|
queryKey: ["data-integrity-report"],
|
|
queryFn: fetchDataIntegrityReport,
|
|
});
|
|
const orphanLoginIDsQuery = useQuery({
|
|
queryKey: ["orphan-user-login-ids"],
|
|
queryFn: fetchOrphanUserLoginIDs,
|
|
});
|
|
const deleteMutation = useMutation({
|
|
mutationFn: deleteOrphanUserLoginIDs,
|
|
onSuccess: async () => {
|
|
setSelectedOrphanIds([]);
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["data-integrity-report"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["orphan-user-login-ids"] }),
|
|
]);
|
|
},
|
|
});
|
|
|
|
const orphanItems = orphanLoginIDsQuery.data?.items ?? [];
|
|
const toggleOrphanID = (id: string) => {
|
|
setSelectedOrphanIds((current) =>
|
|
current.includes(id)
|
|
? current.filter((selectedID) => selectedID !== id)
|
|
: [...current, id],
|
|
);
|
|
};
|
|
const handleDeleteSelected = () => {
|
|
if (selectedOrphanIds.length === 0) {
|
|
return;
|
|
}
|
|
const confirmed = window.confirm(
|
|
`선택한 ${selectedOrphanIds.length}개의 유령 로그인 ID를 삭제하시겠습니까?`,
|
|
);
|
|
if (confirmed) {
|
|
deleteMutation.mutate(selectedOrphanIds);
|
|
}
|
|
};
|
|
const isManualRechecking = recheckStatus === "running";
|
|
const handleRecheck = async () => {
|
|
if (isManualRechecking) {
|
|
return;
|
|
}
|
|
setRecheckStatus("running");
|
|
const result = await refetch();
|
|
setRecheckStatus(result.isError ? "error" : "success");
|
|
};
|
|
const recheckMessage = recheckStatusText(recheckStatus);
|
|
|
|
return (
|
|
<main className="space-y-6 p-6 md:p-8">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">System</p>
|
|
<h2 className="text-2xl font-semibold tracking-tight">
|
|
데이터 정합성 검증
|
|
</h2>
|
|
</div>
|
|
<div className="flex flex-col items-end gap-1">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleRecheck}
|
|
disabled={isLoading || isFetching || isManualRechecking}
|
|
>
|
|
<Database size={16} />
|
|
{isManualRechecking ? "검사 중" : "다시 검사"}
|
|
</Button>
|
|
{recheckMessage ? (
|
|
<output
|
|
aria-live="polite"
|
|
className="text-xs text-muted-foreground"
|
|
>
|
|
{recheckMessage}
|
|
</output>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{isError ? (
|
|
<section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
|
|
{(error as Error)?.message || "정합성 리포트를 불러오지 못했습니다."}
|
|
</section>
|
|
) : null}
|
|
|
|
<section className="rounded-lg border border-border bg-card p-5">
|
|
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="grid h-10 w-10 place-items-center rounded-lg bg-primary/10 text-primary">
|
|
<ShieldAlert size={18} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-base font-semibold">Read model integrity</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Ory SoT를 덮어쓰지 않고 backend DB read model의 이상 징후만
|
|
확인합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{data ? (
|
|
<Badge variant={statusBadgeVariant(data.status)}>
|
|
{statusLabel(data.status)}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="py-8 text-sm text-muted-foreground">불러오는 중</div>
|
|
) : (
|
|
<dl className="grid gap-4 py-5 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div>
|
|
<dt className="text-sm text-muted-foreground">검사 항목</dt>
|
|
<dd className="mt-1 text-xl font-semibold tabular-nums">
|
|
{data?.summary.totalChecks ?? 0}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm text-muted-foreground">정상</dt>
|
|
<dd className="mt-1 text-xl font-semibold tabular-nums">
|
|
{data?.summary.passed ?? 0}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm text-muted-foreground">실패 건수</dt>
|
|
<dd className="mt-1 text-xl font-semibold tabular-nums">
|
|
{data?.summary.failures ?? 0}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm text-muted-foreground">검사 시각</dt>
|
|
<dd className="mt-1 text-sm">
|
|
{formatDateTime(data?.checkedAt)}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
)}
|
|
</section>
|
|
|
|
<div className="space-y-4">
|
|
{(data?.sections ?? []).map((section) => (
|
|
<section
|
|
key={section.key}
|
|
className="rounded-lg border border-border bg-card p-5"
|
|
>
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<h3 className="text-base font-semibold">{section.label}</h3>
|
|
<Badge variant={statusBadgeVariant(section.status)}>
|
|
{statusLabel(section.status)}
|
|
</Badge>
|
|
</div>
|
|
<div className="divide-y divide-border">
|
|
{section.checks.map((check) => (
|
|
<div
|
|
key={check.key}
|
|
className="grid gap-3 py-4 md:grid-cols-[1fr_auto]"
|
|
>
|
|
<div className="flex gap-3">
|
|
<CheckIcon check={check} />
|
|
<div>
|
|
<div className="font-medium">{check.label}</div>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{check.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 md:justify-end">
|
|
<Badge variant={statusBadgeVariant(check.status)}>
|
|
{statusLabel(check.status)}
|
|
</Badge>
|
|
<span className="min-w-12 text-right text-lg font-semibold tabular-nums">
|
|
{check.count}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
|
|
<section className="rounded-lg border border-border bg-card p-5">
|
|
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h3 className="text-base font-semibold">유령 로그인 ID 정리</h3>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
삭제되었거나 존재하지 않는 사용자/테넌트를 참조하는 로그인 ID를
|
|
확인한 뒤 선택 삭제합니다.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
onClick={handleDeleteSelected}
|
|
disabled={
|
|
selectedOrphanIds.length === 0 || deleteMutation.isPending
|
|
}
|
|
>
|
|
선택 삭제
|
|
</Button>
|
|
</div>
|
|
{orphanLoginIDsQuery.isError ? (
|
|
<div className="mb-3 rounded border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
|
|
유령 로그인 ID 대상을 불러오지 못했습니다.
|
|
</div>
|
|
) : null}
|
|
{deleteMutation.data ? (
|
|
<div className="mb-3 rounded border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200">
|
|
{deleteMutation.data.deletedCount}개의 유령 로그인 ID를
|
|
삭제했습니다.
|
|
</div>
|
|
) : null}
|
|
<OrphanLoginIDTable
|
|
items={orphanItems}
|
|
selectedIds={selectedOrphanIds}
|
|
onToggle={toggleOrphanID}
|
|
/>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default function DataIntegrityPage() {
|
|
return (
|
|
<RoleGuard
|
|
roles={["super_admin"]}
|
|
fallback={
|
|
<main className="p-6 md:p-8">
|
|
<section className="rounded-lg border border-border bg-card p-5">
|
|
<h2 className="text-lg font-semibold">접근 권한이 없습니다</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
이 화면은 super_admin 권한으로만 접근할 수 있습니다.
|
|
</p>
|
|
</section>
|
|
</main>
|
|
}
|
|
>
|
|
<DataIntegrityContent />
|
|
</RoleGuard>
|
|
);
|
|
}
|