300 lines
12 KiB
TypeScript
300 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Plus, Search, MoreHorizontal, Edit, Trash2, Play, History, RefreshCw } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { showErrorToast } from "@/lib/utils/toastUtils";
|
|
import { CollectionAPI, DataCollectionConfig } from "@/lib/api/collection";
|
|
import CollectionConfigModal from "@/components/admin/CollectionConfigModal";
|
|
|
|
export default function CollectionManagementPage() {
|
|
const [configs, setConfigs] = useState<DataCollectionConfig[]>([]);
|
|
const [filteredConfigs, setFilteredConfigs] = useState<DataCollectionConfig[]>([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [statusFilter, setStatusFilter] = useState("all");
|
|
const [typeFilter, setTypeFilter] = useState("all");
|
|
|
|
// 모달 상태
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [selectedConfig, setSelectedConfig] = useState<DataCollectionConfig | null>(null);
|
|
|
|
const collectionTypeOptions = CollectionAPI.getCollectionTypeOptions();
|
|
|
|
useEffect(() => {
|
|
loadConfigs();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
filterConfigs();
|
|
}, [configs, searchTerm, statusFilter, typeFilter]);
|
|
|
|
const loadConfigs = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const data = await CollectionAPI.getCollectionConfigs();
|
|
setConfigs(data);
|
|
} catch (error) {
|
|
console.error("수집 설정 목록 조회 오류:", error);
|
|
showErrorToast("수집 설정 목록을 불러오는 데 실패했습니다", error, { guidance: "네트워크 연결을 확인해 주세요." });
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const filterConfigs = () => {
|
|
let filtered = configs;
|
|
|
|
// 검색어 필터
|
|
if (searchTerm) {
|
|
filtered = filtered.filter(
|
|
(config) =>
|
|
config.config_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
config.source_table.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
config.description?.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
);
|
|
}
|
|
|
|
// 상태 필터
|
|
if (statusFilter !== "all") {
|
|
filtered = filtered.filter((config) => config.is_active === statusFilter);
|
|
}
|
|
|
|
// 타입 필터
|
|
if (typeFilter !== "all") {
|
|
filtered = filtered.filter((config) => config.collection_type === typeFilter);
|
|
}
|
|
|
|
setFilteredConfigs(filtered);
|
|
};
|
|
|
|
const handleCreate = () => {
|
|
setSelectedConfig(null);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleEdit = (config: DataCollectionConfig) => {
|
|
setSelectedConfig(config);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleDelete = async (config: DataCollectionConfig) => {
|
|
if (!confirm(`"${config.config_name}" 수집 설정을 삭제하시겠습니까?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await CollectionAPI.deleteCollectionConfig(config.id!);
|
|
toast.success("수집 설정이 삭제되었습니다.");
|
|
loadConfigs();
|
|
} catch (error) {
|
|
console.error("수집 설정 삭제 오류:", error);
|
|
toast.error("수집 설정 삭제에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
const handleExecute = async (config: DataCollectionConfig) => {
|
|
try {
|
|
await CollectionAPI.executeCollection(config.id!);
|
|
toast.success(`"${config.config_name}" 수집 작업을 시작했습니다.`);
|
|
} catch (error) {
|
|
console.error("수집 작업 실행 오류:", error);
|
|
showErrorToast("수집 작업 실행에 실패했습니다", error, { guidance: "수집 설정을 확인해 주세요." });
|
|
}
|
|
};
|
|
|
|
const handleModalSave = () => {
|
|
loadConfigs();
|
|
};
|
|
|
|
const getStatusBadge = (isActive: string) => {
|
|
return isActive === "Y" ? (
|
|
<Badge className="bg-green-100 text-green-800">활성</Badge>
|
|
) : (
|
|
<Badge className="bg-red-100 text-red-800">비활성</Badge>
|
|
);
|
|
};
|
|
|
|
const getTypeBadge = (type: string) => {
|
|
const option = collectionTypeOptions.find((opt) => opt.value === type);
|
|
const colors = {
|
|
full: "bg-blue-100 text-blue-800",
|
|
incremental: "bg-purple-100 text-purple-800",
|
|
delta: "bg-orange-100 text-orange-800",
|
|
};
|
|
return (
|
|
<Badge className={colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800"}>
|
|
{option?.label || type}
|
|
</Badge>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<div className="w-full max-w-none space-y-8 px-4 py-8">
|
|
{/* 헤더 */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">수집 관리</h1>
|
|
<p className="text-muted-foreground">외부 데이터베이스에서 데이터를 수집하는 설정을 관리합니다.</p>
|
|
</div>
|
|
<Button onClick={handleCreate}>
|
|
<Plus className="mr-2 h-4 w-4" />새 수집 설정
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 필터 및 검색 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>필터 및 검색</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col gap-4 md:flex-row">
|
|
<div className="flex-1">
|
|
<div className="relative">
|
|
<Search className="text-muted-foreground absolute top-3 left-3 h-4 w-4" />
|
|
<Input
|
|
placeholder="설정명, 테이블명, 설명으로 검색..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="w-32">
|
|
<SelectValue placeholder="상태" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">전체</SelectItem>
|
|
<SelectItem value="Y">활성</SelectItem>
|
|
<SelectItem value="N">비활성</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
|
<SelectTrigger className="w-40">
|
|
<SelectValue placeholder="수집 타입" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">전체 타입</SelectItem>
|
|
{collectionTypeOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Button variant="outline" onClick={loadConfigs} disabled={isLoading}>
|
|
<RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
|
|
새로고침
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 수집 설정 목록 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>수집 설정 목록 ({filteredConfigs.length}개)</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="py-8 text-center">
|
|
<RefreshCw className="mx-auto mb-2 h-8 w-8 animate-spin" />
|
|
<p>수집 설정을 불러오는 중...</p>
|
|
</div>
|
|
) : filteredConfigs.length === 0 ? (
|
|
<div className="text-muted-foreground py-8 text-center">
|
|
{configs.length === 0 ? "수집 설정이 없습니다." : "검색 결과가 없습니다."}
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설정명</TableHead>
|
|
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">수집 타입</TableHead>
|
|
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">소스 테이블</TableHead>
|
|
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">대상 테이블</TableHead>
|
|
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">스케줄</TableHead>
|
|
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
|
|
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">마지막 수집</TableHead>
|
|
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredConfigs.map((config) => (
|
|
<TableRow key={config.id} className="bg-background hover:bg-muted/50 transition-colors">
|
|
<TableCell className="h-16 px-6 py-3 text-sm">
|
|
<div>
|
|
<div className="font-medium">{config.config_name}</div>
|
|
{config.description && (
|
|
<div className="text-muted-foreground text-sm">{config.description}</div>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 text-sm">{getTypeBadge(config.collection_type)}</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{config.source_table}</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{config.target_table || "-"}</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{config.schedule_cron || "-"}</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 text-sm">{getStatusBadge(config.is_active)}</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 text-sm">
|
|
{config.last_collected_at ? new Date(config.last_collected_at).toLocaleString() : "-"}
|
|
</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 text-sm">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => handleEdit(config)}>
|
|
<Edit className="mr-2 h-4 w-4" />
|
|
수정
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => handleExecute(config)} disabled={config.is_active !== "Y"}>
|
|
<Play className="mr-2 h-4 w-4" />
|
|
실행
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => handleDelete(config)}>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
삭제
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 수집 설정 모달 */}
|
|
<CollectionConfigModal
|
|
isOpen={isModalOpen}
|
|
onClose={() => setIsModalOpen(false)}
|
|
onSave={handleModalSave}
|
|
config={selectedConfig}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|