435 lines
18 KiB
TypeScript
435 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Plus,
|
|
Search,
|
|
RefreshCw,
|
|
Database,
|
|
LayoutGrid,
|
|
CheckCircle,
|
|
Activity,
|
|
AlertTriangle,
|
|
} from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { showErrorToast } from "@/lib/utils/toastUtils";
|
|
import { useRouter } from "next/navigation";
|
|
import { BatchAPI, type BatchConfig } from "@/lib/api/batch";
|
|
import apiClient from "@/lib/api/client";
|
|
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
|
import { cn } from "@/lib/utils";
|
|
import BatchCard from "@/components/admin/BatchCard";
|
|
|
|
// 대시보드 통계 타입 (백엔드 GET /batch-management/stats)
|
|
interface BatchStats {
|
|
totalBatches: number;
|
|
activeBatches: number;
|
|
todayExecutions: number;
|
|
todayFailures: number;
|
|
prevDayExecutions?: number;
|
|
prevDayFailures?: number;
|
|
}
|
|
|
|
// 스파크라인/최근 로그 타입은 BatchCard 내부 정의 사용
|
|
|
|
/** Cron 표현식 → 한글 설명 */
|
|
function cronToKorean(cron: string): string {
|
|
if (!cron || !cron.trim()) return "-";
|
|
const parts = cron.trim().split(/\s+/);
|
|
if (parts.length < 5) return cron;
|
|
const [min, hour, dayOfMonth, month, dayOfWeek] = parts;
|
|
|
|
// 매 30분: */30 * * * *
|
|
if (min.startsWith("*/") && hour === "*" && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
|
|
const n = min.slice(2);
|
|
return `매 ${n}분`;
|
|
}
|
|
// 매 N시간: 0 */2 * * *
|
|
if (min === "0" && hour.startsWith("*/") && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
|
|
const n = hour.slice(2);
|
|
return `매 ${n}시간`;
|
|
}
|
|
// 매일 HH:MM: 0 1 * * * 또는 0 6,18 * * *
|
|
if (min === "0" && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
|
|
if (hour.includes(",")) {
|
|
const times = hour.split(",").map((h) => `${h.padStart(2, "0")}:00`);
|
|
return times.join(", ");
|
|
}
|
|
return `매일 ${hour.padStart(2, "0")}:00`;
|
|
}
|
|
// 매주 일 03:00: 0 3 * * 0
|
|
if (min === "0" && dayOfMonth === "*" && month === "*" && dayOfWeek !== "*" && dayOfWeek !== "?") {
|
|
const dayNames = ["일", "월", "화", "수", "목", "금", "토"];
|
|
const d = dayNames[parseInt(dayOfWeek, 10)] ?? dayOfWeek;
|
|
return `매주 ${d} ${hour.padStart(2, "0")}:00`;
|
|
}
|
|
// 매월 1일 00:00: 0 0 1 * *
|
|
if (min === "0" && hour === "0" && dayOfMonth !== "*" && month === "*" && dayOfWeek === "*") {
|
|
return `매월 ${dayOfMonth}일 00:00`;
|
|
}
|
|
return cron;
|
|
}
|
|
|
|
type StatusFilter = "all" | "active" | "inactive";
|
|
type TypeFilter = "all" | "mapping" | "restapi" | "node_flow";
|
|
|
|
export default function BatchManagementPage() {
|
|
const router = useRouter();
|
|
const [batchConfigs, setBatchConfigs] = useState<BatchConfig[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [stats, setStats] = useState<BatchStats | null>(null);
|
|
const [statsLoading, setStatsLoading] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
|
|
const [typeFilter, setTypeFilter] = useState<TypeFilter>("all");
|
|
const [executingBatch, setExecutingBatch] = useState<number | null>(null);
|
|
const [expandedId, setExpandedId] = useState<number | null>(null);
|
|
const [isBatchTypeModalOpen, setIsBatchTypeModalOpen] = useState(false);
|
|
|
|
const loadBatchConfigs = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await BatchAPI.getBatchConfigs({
|
|
limit: 500,
|
|
search: searchTerm || undefined,
|
|
});
|
|
if (response.success && response.data) {
|
|
setBatchConfigs(response.data);
|
|
} else {
|
|
setBatchConfigs([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("배치 목록 조회 실패:", error);
|
|
toast.error("배치 목록을 불러오는데 실패했습니다.");
|
|
setBatchConfigs([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [searchTerm]);
|
|
|
|
const loadStats = useCallback(async () => {
|
|
setStatsLoading(true);
|
|
try {
|
|
const res = await apiClient.get<{ success: boolean; data?: BatchStats }>("/batch-management/stats");
|
|
if (res.data?.success && res.data.data) {
|
|
setStats(res.data.data);
|
|
} else {
|
|
setStats(null);
|
|
}
|
|
} catch {
|
|
setStats(null);
|
|
} finally {
|
|
setStatsLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadBatchConfigs();
|
|
}, [loadBatchConfigs]);
|
|
|
|
useEffect(() => {
|
|
loadStats();
|
|
}, [loadStats]);
|
|
|
|
const executeBatch = async (batchId: number) => {
|
|
setExecutingBatch(batchId);
|
|
try {
|
|
const response = await BatchAPI.executeBatchConfig(batchId);
|
|
if (response.success) {
|
|
toast.success(
|
|
`배치가 성공적으로 실행되었습니다! (처리: ${response.data?.totalRecords ?? 0}개, 성공: ${response.data?.successRecords ?? 0}개)`
|
|
);
|
|
loadBatchConfigs();
|
|
loadStats();
|
|
} else {
|
|
toast.error("배치 실행에 실패했습니다.");
|
|
}
|
|
} catch (error) {
|
|
showErrorToast("배치 실행에 실패했습니다", error, {
|
|
guidance: "배치 설정을 확인하고 다시 시도해 주세요.",
|
|
});
|
|
} finally {
|
|
setExecutingBatch(null);
|
|
}
|
|
};
|
|
|
|
const toggleBatchStatus = async (batchId: number, currentStatus: string) => {
|
|
try {
|
|
const newStatus = currentStatus === "Y" ? "N" : "Y";
|
|
await BatchAPI.updateBatchConfig(batchId, { isActive: newStatus === "Y" });
|
|
toast.success(`배치가 ${newStatus === "Y" ? "활성화" : "비활성화"}되었습니다.`);
|
|
loadBatchConfigs();
|
|
loadStats();
|
|
} catch (error) {
|
|
console.error("배치 상태 변경 실패:", error);
|
|
toast.error("배치 상태 변경에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
const deleteBatch = async (batchId: number, batchName: string) => {
|
|
if (!confirm(`'${batchName}' 배치를 삭제하시겠습니까?`)) return;
|
|
try {
|
|
await BatchAPI.deleteBatchConfig(batchId);
|
|
toast.success("배치가 삭제되었습니다.");
|
|
loadBatchConfigs();
|
|
loadStats();
|
|
} catch (error) {
|
|
console.error("배치 삭제 실패:", error);
|
|
toast.error("배치 삭제에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
const handleCreateBatch = () => setIsBatchTypeModalOpen(true);
|
|
|
|
const handleBatchTypeSelect = (type: "db-to-db" | "restapi-to-db") => {
|
|
setIsBatchTypeModalOpen(false);
|
|
if (type === "db-to-db") {
|
|
router.push("/admin/batchmng/create");
|
|
} else {
|
|
router.push("/admin/batch-management-new");
|
|
}
|
|
};
|
|
|
|
const filteredBatches = useMemo(() => {
|
|
let list = batchConfigs;
|
|
if (statusFilter === "active") list = list.filter((b) => b.is_active === "Y");
|
|
else if (statusFilter === "inactive") list = list.filter((b) => b.is_active !== "Y");
|
|
const et = (b: BatchConfig) => (b as { execution_type?: string }).execution_type;
|
|
if (typeFilter === "mapping") list = list.filter((b) => !et(b) || et(b) === "mapping");
|
|
else if (typeFilter === "restapi") list = list.filter((b) => et(b) === "restapi");
|
|
else if (typeFilter === "node_flow") list = list.filter((b) => et(b) === "node_flow");
|
|
return list;
|
|
}, [batchConfigs, statusFilter, typeFilter]);
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col bg-background">
|
|
<div className="space-y-6 p-6">
|
|
{/* 헤더 */}
|
|
<div className="flex flex-col gap-4 border-b pb-4 sm:flex-row sm:items-end sm:justify-between">
|
|
<div className="space-y-1">
|
|
<h1 className="text-xl font-extrabold tracking-tight sm:text-3xl">배치 관리</h1>
|
|
<p className="text-xs text-muted-foreground sm:text-sm">
|
|
데이터 동기화 배치 작업을 모니터링하고 관리합니다.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="default" onClick={loadBatchConfigs} disabled={loading} className="gap-2">
|
|
<RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
|
|
새로고침
|
|
</Button>
|
|
<Button size="default" onClick={handleCreateBatch} className="gap-2">
|
|
<Plus className="h-4 w-4" />
|
|
새 배치
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 통계 카드 4개 */}
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div className="flex justify-between rounded-xl border bg-card p-4">
|
|
<div>
|
|
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">전체 배치</p>
|
|
<p className="mt-1 font-mono text-2xl font-extrabold sm:text-3xl">
|
|
{statsLoading ? "-" : (stats?.totalBatches ?? 0).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-500/10">
|
|
<LayoutGrid className="h-5 w-5 text-indigo-500" />
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between rounded-xl border bg-card p-4">
|
|
<div>
|
|
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">활성 배치</p>
|
|
<p className="mt-1 font-mono text-2xl font-extrabold text-green-600 sm:text-3xl">
|
|
{statsLoading ? "-" : (stats?.activeBatches ?? 0).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-green-500/10">
|
|
<CheckCircle className="h-5 w-5 text-green-500" />
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between rounded-xl border bg-card p-4">
|
|
<div>
|
|
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">오늘 실행</p>
|
|
<p className="mt-1 font-mono text-2xl font-extrabold text-cyan-600 sm:text-3xl">
|
|
{statsLoading ? "-" : (stats?.todayExecutions ?? 0).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-cyan-500/10">
|
|
<Activity className="h-5 w-5 text-cyan-500" />
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between rounded-xl border bg-card p-4">
|
|
<div>
|
|
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">오늘 실패</p>
|
|
<p className="mt-1 font-mono text-2xl font-extrabold text-destructive sm:text-3xl">
|
|
{statsLoading ? "-" : (stats?.todayFailures ?? 0).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-destructive/10">
|
|
<AlertTriangle className="h-5 w-5 text-destructive" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 툴바 */}
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
|
<div className="relative max-w-[320px] flex-1">
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
placeholder="배치 이름으로 검색..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="h-9 rounded-lg border bg-card pl-9 text-xs"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<div className="flex gap-0.5 rounded-lg border bg-card p-0.5">
|
|
{(["all", "active", "inactive"] as const).map((s) => (
|
|
<button
|
|
key={s}
|
|
type="button"
|
|
onClick={() => setStatusFilter(s)}
|
|
className={cn(
|
|
"rounded-md px-3 py-1.5 text-[11px] font-semibold",
|
|
statusFilter === s ? "bg-primary/10 text-primary" : "text-muted-foreground hover:opacity-80"
|
|
)}
|
|
>
|
|
{s === "all" ? "전체" : s === "active" ? "활성" : "비활성"}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex gap-0.5 rounded-lg border bg-card p-0.5">
|
|
{(["all", "mapping", "restapi", "node_flow"] as const).map((t) => (
|
|
<button
|
|
key={t}
|
|
type="button"
|
|
onClick={() => setTypeFilter(t)}
|
|
className={cn(
|
|
"rounded-md px-3 py-1.5 text-[11px] font-semibold",
|
|
typeFilter === t ? "bg-primary/10 text-primary" : "text-muted-foreground hover:opacity-80"
|
|
)}
|
|
>
|
|
{t === "all" ? "전체" : t === "mapping" ? "DB-DB" : t === "restapi" ? "API-DB" : "노드 플로우"}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="ml-auto text-[11px] text-muted-foreground">
|
|
총 <span className="font-bold text-foreground">{filteredBatches.length}</span>건
|
|
</div>
|
|
</div>
|
|
|
|
{/* 배치 테이블 */}
|
|
{filteredBatches.length === 0 ? (
|
|
<div className="flex h-64 flex-col items-center justify-center rounded-xl border bg-card">
|
|
<Database className="h-12 w-12 text-muted-foreground" />
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{searchTerm || statusFilter !== "all" || typeFilter !== "all" ? "검색 결과가 없습니다." : "배치가 없습니다."}
|
|
</p>
|
|
{!searchTerm && statusFilter === "all" && typeFilter === "all" && (
|
|
<Button onClick={handleCreateBatch} className="mt-4 gap-2" size="sm">
|
|
<Plus className="h-4 w-4" />
|
|
첫 배치 추가
|
|
</Button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="overflow-hidden rounded-xl border bg-card">
|
|
<table className="w-full table-fixed border-collapse" style={{ tableLayout: "fixed" }}>
|
|
<thead>
|
|
<tr className="h-10 bg-muted/50">
|
|
<th className="w-[44px] border-b px-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground" />
|
|
<th className="border-b px-3 text-left text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
배치
|
|
</th>
|
|
<th className="w-[100px] border-b px-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
타입
|
|
</th>
|
|
<th className="w-[130px] border-b px-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
스케줄
|
|
</th>
|
|
<th className="w-[160px] border-b px-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
최근 24h
|
|
</th>
|
|
<th className="w-[100px] border-b px-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
마지막 실행
|
|
</th>
|
|
<th className="w-[120px] border-b px-2 text-right text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
액션
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredBatches.map((batch) => (
|
|
<BatchCard
|
|
key={batch.id}
|
|
batch={batch}
|
|
expanded={expandedId === batch.id}
|
|
onToggleExpand={() => setExpandedId((id) => (id === batch.id ? null : batch.id ?? null))}
|
|
executingBatch={executingBatch}
|
|
onExecute={executeBatch}
|
|
onToggleStatus={toggleBatchStatus}
|
|
onEdit={(id) => router.push(`/admin/batchmng/edit/${id}`)}
|
|
onDelete={deleteBatch}
|
|
cronToKorean={cronToKorean}
|
|
/>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* 배치 타입 선택 모달 */}
|
|
{isBatchTypeModalOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
|
|
<div className="w-full max-w-2xl rounded-lg border bg-card p-6 shadow-lg">
|
|
<h2 className="text-center text-xl font-semibold">배치 타입 선택</h2>
|
|
<div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<button
|
|
type="button"
|
|
className="flex flex-col items-center gap-4 rounded-lg border bg-card p-6 shadow-sm transition-all hover:border-primary hover:bg-accent"
|
|
onClick={() => handleBatchTypeSelect("db-to-db")}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Database className="h-8 w-8 text-primary" />
|
|
<span className="text-muted-foreground">→</span>
|
|
<Database className="h-8 w-8 text-primary" />
|
|
</div>
|
|
<div className="space-y-1 text-center">
|
|
<div className="text-lg font-medium">DB → DB</div>
|
|
<div className="text-sm text-muted-foreground">데이터베이스 간 데이터 동기화</div>
|
|
</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="flex flex-col items-center gap-4 rounded-lg border bg-card p-6 shadow-sm transition-all hover:border-primary hover:bg-accent"
|
|
onClick={() => handleBatchTypeSelect("restapi-to-db")}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-2xl text-muted-foreground">API</span>
|
|
<span className="text-muted-foreground">→</span>
|
|
<Database className="h-8 w-8 text-primary" />
|
|
</div>
|
|
<div className="space-y-1 text-center">
|
|
<div className="text-lg font-medium">REST API → DB</div>
|
|
<div className="text-sm text-muted-foreground">REST API에서 DB로 데이터 수집</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div className="mt-6 flex justify-center">
|
|
<Button variant="outline" onClick={() => setIsBatchTypeModalOpen(false)}>
|
|
취소
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<ScrollToTop />
|
|
</div>
|
|
);
|
|
}
|