340 lines
12 KiB
TypeScript
340 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 { 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);
|
|
toast.error("수집 설정 목록을 불러오는데 실패했습니다.");
|
|
} 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);
|
|
toast.error("수집 작업 실행에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
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 px-4 py-8 space-y-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="h-4 w-4 mr-2" />
|
|
새 수집 설정
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 필터 및 검색 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>필터 및 검색</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col md:flex-row gap-4">
|
|
<div className="flex-1">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<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={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
|
|
새로고침
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 수집 설정 목록 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>수집 설정 목록 ({filteredConfigs.length}개)</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="text-center py-8">
|
|
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-2" />
|
|
<p>수집 설정을 불러오는 중...</p>
|
|
</div>
|
|
) : filteredConfigs.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
{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 transition-colors hover:bg-muted/50">
|
|
<TableCell className="h-16 px-6 py-3 text-sm">
|
|
<div>
|
|
<div className="font-medium">{config.config_name}</div>
|
|
{config.description && (
|
|
<div className="text-sm text-muted-foreground">
|
|
{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="h-4 w-4 mr-2" />
|
|
수정
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => handleExecute(config)}
|
|
disabled={config.is_active !== "Y"}
|
|
>
|
|
<Play className="h-4 w-4 mr-2" />
|
|
실행
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => handleDelete(config)}>
|
|
<Trash2 className="h-4 w-4 mr-2" />
|
|
삭제
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 수집 설정 모달 */}
|
|
<CollectionConfigModal
|
|
isOpen={isModalOpen}
|
|
onClose={() => setIsModalOpen(false)}
|
|
onSave={handleModalSave}
|
|
config={selectedConfig}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|