478 lines
20 KiB
TypeScript
478 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Plus, Search, Pencil, Trash2, Database, Terminal, Globe } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import {
|
|
ExternalDbConnectionAPI,
|
|
ExternalDbConnection,
|
|
ExternalDbConnectionFilter,
|
|
ConnectionTestRequest,
|
|
} from "@/lib/api/externalDbConnection";
|
|
import { ExternalDbConnectionModal } from "@/components/admin/ExternalDbConnectionModal";
|
|
import { SqlQueryModal } from "@/components/admin/SqlQueryModal";
|
|
import { RestApiConnectionList } from "@/components/admin/RestApiConnectionList";
|
|
|
|
type ConnectionTabType = "database" | "rest-api";
|
|
|
|
// DB 타입 매핑
|
|
const DB_TYPE_LABELS: Record<string, string> = {
|
|
mysql: "MySQL",
|
|
postgresql: "PostgreSQL",
|
|
oracle: "Oracle",
|
|
mssql: "SQL Server",
|
|
sqlite: "SQLite",
|
|
};
|
|
|
|
// 활성 상태 옵션
|
|
const ACTIVE_STATUS_OPTIONS = [
|
|
{ value: "ALL", label: "전체" },
|
|
{ value: "Y", label: "활성" },
|
|
{ value: "N", label: "비활성" },
|
|
];
|
|
|
|
export default function ExternalConnectionsPage() {
|
|
const { toast } = useToast();
|
|
|
|
// 탭 상태
|
|
const [activeTab, setActiveTab] = useState<ConnectionTabType>("database");
|
|
|
|
// 상태 관리
|
|
const [connections, setConnections] = useState<ExternalDbConnection[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [dbTypeFilter, setDbTypeFilter] = useState("ALL");
|
|
const [activeStatusFilter, setActiveStatusFilter] = useState("ALL");
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingConnection, setEditingConnection] = useState<ExternalDbConnection | undefined>();
|
|
const [supportedDbTypes, setSupportedDbTypes] = useState<Array<{ value: string; label: string }>>([]);
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
const [connectionToDelete, setConnectionToDelete] = useState<ExternalDbConnection | null>(null);
|
|
const [testingConnections, setTestingConnections] = useState<Set<number>>(new Set());
|
|
const [testResults, setTestResults] = useState<Map<number, boolean>>(new Map());
|
|
const [sqlModalOpen, setSqlModalOpen] = useState(false);
|
|
const [selectedConnection, setSelectedConnection] = useState<ExternalDbConnection | null>(null);
|
|
|
|
// 데이터 로딩
|
|
const loadConnections = async () => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
const filter: ExternalDbConnectionFilter = {
|
|
search: searchTerm.trim() || undefined,
|
|
db_type: dbTypeFilter === "ALL" ? undefined : dbTypeFilter,
|
|
is_active: activeStatusFilter === "ALL" ? undefined : activeStatusFilter,
|
|
};
|
|
|
|
const data = await ExternalDbConnectionAPI.getConnections(filter);
|
|
setConnections(data);
|
|
} catch (error) {
|
|
console.error("연결 목록 로딩 오류:", error);
|
|
toast({
|
|
title: "오류",
|
|
description: "연결 목록을 불러오는데 실패했습니다.",
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 지원되는 DB 타입 로딩
|
|
const loadSupportedDbTypes = async () => {
|
|
try {
|
|
const types = await ExternalDbConnectionAPI.getSupportedTypes();
|
|
setSupportedDbTypes([{ value: "ALL", label: "전체" }, ...types]);
|
|
} catch (error) {
|
|
console.error("지원 DB 타입 로딩 오류:", error);
|
|
// 실패 시 기본값 사용
|
|
setSupportedDbTypes([
|
|
{ value: "ALL", label: "전체" },
|
|
{ value: "mysql", label: "MySQL" },
|
|
{ value: "postgresql", label: "PostgreSQL" },
|
|
{ value: "oracle", label: "Oracle" },
|
|
{ value: "mssql", label: "SQL Server" },
|
|
{ value: "sqlite", label: "SQLite" },
|
|
]);
|
|
}
|
|
};
|
|
|
|
// 초기 데이터 로딩
|
|
useEffect(() => {
|
|
loadConnections();
|
|
loadSupportedDbTypes();
|
|
}, []);
|
|
|
|
// 필터 변경 시 데이터 재로딩
|
|
useEffect(() => {
|
|
loadConnections();
|
|
}, [searchTerm, dbTypeFilter, activeStatusFilter]);
|
|
|
|
// 새 연결 추가
|
|
const handleAddConnection = () => {
|
|
setEditingConnection(undefined);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
// 연결 편집
|
|
const handleEditConnection = (connection: ExternalDbConnection) => {
|
|
setEditingConnection(connection);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
// 연결 삭제 확인 다이얼로그 열기
|
|
const handleDeleteConnection = (connection: ExternalDbConnection) => {
|
|
setConnectionToDelete(connection);
|
|
setDeleteDialogOpen(true);
|
|
};
|
|
|
|
// 연결 삭제 실행
|
|
const confirmDeleteConnection = async () => {
|
|
if (!connectionToDelete?.id) return;
|
|
|
|
try {
|
|
await ExternalDbConnectionAPI.deleteConnection(connectionToDelete.id);
|
|
toast({
|
|
title: "성공",
|
|
description: "연결이 삭제되었습니다.",
|
|
});
|
|
loadConnections();
|
|
} catch (error) {
|
|
console.error("연결 삭제 오류:", error);
|
|
toast({
|
|
title: "오류",
|
|
description: error instanceof Error ? error.message : "연결 삭제에 실패했습니다.",
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setDeleteDialogOpen(false);
|
|
setConnectionToDelete(null);
|
|
}
|
|
};
|
|
|
|
// 연결 삭제 취소
|
|
const cancelDeleteConnection = () => {
|
|
setDeleteDialogOpen(false);
|
|
setConnectionToDelete(null);
|
|
};
|
|
|
|
// 연결 테스트
|
|
const handleTestConnection = async (connection: ExternalDbConnection) => {
|
|
if (!connection.id) return;
|
|
|
|
setTestingConnections((prev) => new Set(prev).add(connection.id!));
|
|
|
|
try {
|
|
const result = await ExternalDbConnectionAPI.testConnection(connection.id);
|
|
|
|
setTestResults((prev) => new Map(prev).set(connection.id!, result.success));
|
|
|
|
if (result.success) {
|
|
toast({
|
|
title: "연결 성공",
|
|
description: `${connection.connection_name} 연결이 성공했습니다.`,
|
|
});
|
|
} else {
|
|
toast({
|
|
title: "연결 실패",
|
|
description: result.message || `${connection.connection_name} 연결에 실패했습니다.`,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("연결 테스트 오류:", error);
|
|
setTestResults((prev) => new Map(prev).set(connection.id!, false));
|
|
toast({
|
|
title: "연결 테스트 오류",
|
|
description: "연결 테스트 중 오류가 발생했습니다.",
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setTestingConnections((prev) => {
|
|
const newSet = new Set(prev);
|
|
newSet.delete(connection.id!);
|
|
return newSet;
|
|
});
|
|
}
|
|
};
|
|
|
|
// 모달 저장 처리
|
|
const handleModalSave = () => {
|
|
setIsModalOpen(false);
|
|
setEditingConnection(undefined);
|
|
loadConnections();
|
|
};
|
|
|
|
// 모달 취소 처리
|
|
const handleModalCancel = () => {
|
|
setIsModalOpen(false);
|
|
setEditingConnection(undefined);
|
|
};
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col bg-background">
|
|
<div className="space-y-6 p-6">
|
|
{/* 페이지 헤더 */}
|
|
<div className="space-y-2 border-b pb-4">
|
|
<h1 className="text-3xl font-bold tracking-tight">외부 커넥션 관리</h1>
|
|
<p className="text-sm text-muted-foreground">외부 데이터베이스 및 REST API 연결 정보를 관리합니다</p>
|
|
</div>
|
|
|
|
{/* 탭 */}
|
|
<Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as ConnectionTabType)}>
|
|
<TabsList className="grid w-[400px] grid-cols-2">
|
|
<TabsTrigger value="database" className="flex items-center gap-2">
|
|
<Database className="h-4 w-4" />
|
|
데이터베이스 연결
|
|
</TabsTrigger>
|
|
<TabsTrigger value="rest-api" className="flex items-center gap-2">
|
|
<Globe className="h-4 w-4" />
|
|
REST API 연결
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* 데이터베이스 연결 탭 */}
|
|
<TabsContent value="database" className="space-y-6">
|
|
{/* 검색 및 필터 */}
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
|
{/* 검색 */}
|
|
<div className="relative w-full sm:w-[300px]">
|
|
<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-10 pl-10 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
{/* DB 타입 필터 */}
|
|
<Select value={dbTypeFilter} onValueChange={setDbTypeFilter}>
|
|
<SelectTrigger className="h-10 w-full sm:w-[160px]">
|
|
<SelectValue placeholder="DB 타입" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{supportedDbTypes.map((type) => (
|
|
<SelectItem key={type.value} value={type.value}>
|
|
{type.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{/* 활성 상태 필터 */}
|
|
<Select value={activeStatusFilter} onValueChange={setActiveStatusFilter}>
|
|
<SelectTrigger className="h-10 w-full sm:w-[120px]">
|
|
<SelectValue placeholder="상태" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{ACTIVE_STATUS_OPTIONS.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 추가 버튼 */}
|
|
<Button onClick={handleAddConnection} className="h-10 gap-2 text-sm font-medium">
|
|
<Plus className="h-4 w-4" />
|
|
새 연결 추가
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 연결 목록 */}
|
|
{loading ? (
|
|
<div className="flex h-64 items-center justify-center bg-card">
|
|
<div className="text-sm text-muted-foreground">로딩 중...</div>
|
|
</div>
|
|
) : connections.length === 0 ? (
|
|
<div className="flex h-64 flex-col items-center justify-center bg-card">
|
|
<div className="flex flex-col items-center gap-2 text-center">
|
|
<p className="text-sm text-muted-foreground">등록된 연결이 없습니다</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="bg-card">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-background">
|
|
<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">DB 타입</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-right text-sm font-semibold">작업</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{connections.map((connection) => (
|
|
<TableRow key={connection.id} className="bg-background transition-colors hover:bg-muted/50">
|
|
<TableCell className="h-16 px-6 py-3 text-sm">
|
|
<div className="font-medium">{connection.connection_name}</div>
|
|
</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 text-sm">
|
|
{(connection as any).company_name || connection.company_code}
|
|
</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 text-sm">
|
|
<Badge variant="outline">
|
|
{DB_TYPE_LABELS[connection.db_type] || connection.db_type}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 font-mono text-sm">
|
|
{connection.host}:{connection.port}
|
|
</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.database_name}</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.username}</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 text-sm">
|
|
<Badge variant={connection.is_active === "Y" ? "default" : "secondary"}>
|
|
{connection.is_active === "Y" ? "활성" : "비활성"}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 text-sm">
|
|
{connection.created_date ? new Date(connection.created_date).toLocaleDateString() : "N/A"}
|
|
</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleTestConnection(connection)}
|
|
disabled={testingConnections.has(connection.id!)}
|
|
className="h-9 text-sm"
|
|
>
|
|
{testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
|
|
</Button>
|
|
{testResults.has(connection.id!) && (
|
|
<Badge variant={testResults.get(connection.id!) ? "default" : "destructive"}>
|
|
{testResults.get(connection.id!) ? "성공" : "실패"}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="h-16 px-6 py-3 text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => {
|
|
console.log("SQL 쿼리 실행 버튼 클릭 - connection:", connection);
|
|
setSelectedConnection(connection);
|
|
setSqlModalOpen(true);
|
|
}}
|
|
className="h-8 w-8"
|
|
title="SQL 쿼리 실행"
|
|
>
|
|
<Terminal className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleEditConnection(connection)}
|
|
className="h-8 w-8"
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleDeleteConnection(connection)}
|
|
className="h-8 w-8 text-destructive hover:bg-destructive/10"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
|
|
{/* 연결 설정 모달 */}
|
|
{isModalOpen && (
|
|
<ExternalDbConnectionModal
|
|
isOpen={isModalOpen}
|
|
onClose={handleModalCancel}
|
|
onSave={handleModalSave}
|
|
connection={editingConnection}
|
|
supportedDbTypes={supportedDbTypes.filter((type) => type.value !== "ALL")}
|
|
/>
|
|
)}
|
|
|
|
{/* 삭제 확인 다이얼로그 */}
|
|
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
|
<AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle className="text-base sm:text-lg">연결 삭제 확인</AlertDialogTitle>
|
|
<AlertDialogDescription className="text-xs sm:text-sm">
|
|
"{connectionToDelete?.connection_name}" 연결을 삭제하시겠습니까?
|
|
<br />
|
|
이 작업은 되돌릴 수 없습니다.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter className="gap-2 sm:gap-0">
|
|
<AlertDialogCancel
|
|
onClick={cancelDeleteConnection}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
취소
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={confirmDeleteConnection}
|
|
className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
삭제
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
{/* SQL 쿼리 모달 */}
|
|
{selectedConnection && (
|
|
<SqlQueryModal
|
|
isOpen={sqlModalOpen}
|
|
onClose={() => {
|
|
setSqlModalOpen(false);
|
|
setSelectedConnection(null);
|
|
}}
|
|
connectionId={selectedConnection.id!}
|
|
connectionName={selectedConnection.connection_name}
|
|
/>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* REST API 연결 탭 */}
|
|
<TabsContent value="rest-api" className="space-y-6">
|
|
<RestApiConnectionList />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|