385 lines
14 KiB
TypeScript
385 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { flowExternalDbApi } from "@/lib/api/flowExternalDb";
|
|
import {
|
|
FlowExternalDbConnection,
|
|
CreateFlowExternalDbConnectionRequest,
|
|
UpdateFlowExternalDbConnectionRequest,
|
|
DB_TYPE_OPTIONS,
|
|
getDbTypeLabel,
|
|
} from "@/types/flowExternalDb";
|
|
import { Plus, Pencil, Trash2, TestTube, Loader2 } from "lucide-react";
|
|
import { Switch } from "@/components/ui/switch";
|
|
|
|
export default function FlowExternalDbPage() {
|
|
const { toast } = useToast();
|
|
const [connections, setConnections] = useState<FlowExternalDbConnection[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showDialog, setShowDialog] = useState(false);
|
|
const [editingConnection, setEditingConnection] = useState<FlowExternalDbConnection | null>(null);
|
|
const [testingId, setTestingId] = useState<number | null>(null);
|
|
|
|
// 폼 상태
|
|
const [formData, setFormData] = useState<
|
|
CreateFlowExternalDbConnectionRequest | UpdateFlowExternalDbConnectionRequest
|
|
>({
|
|
name: "",
|
|
description: "",
|
|
dbType: "postgresql",
|
|
host: "",
|
|
port: 5432,
|
|
databaseName: "",
|
|
username: "",
|
|
password: "",
|
|
sslEnabled: false,
|
|
});
|
|
|
|
useEffect(() => {
|
|
loadConnections();
|
|
}, []);
|
|
|
|
const loadConnections = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await flowExternalDbApi.getAll();
|
|
if (response.success) {
|
|
setConnections(response.data);
|
|
}
|
|
} catch (error: any) {
|
|
toast({
|
|
title: "오류",
|
|
description: error.message || "외부 DB 연결 목록 조회 실패",
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCreate = () => {
|
|
setEditingConnection(null);
|
|
setFormData({
|
|
name: "",
|
|
description: "",
|
|
dbType: "postgresql",
|
|
host: "",
|
|
port: 5432,
|
|
databaseName: "",
|
|
username: "",
|
|
password: "",
|
|
sslEnabled: false,
|
|
});
|
|
setShowDialog(true);
|
|
};
|
|
|
|
const handleEdit = (connection: FlowExternalDbConnection) => {
|
|
setEditingConnection(connection);
|
|
setFormData({
|
|
name: connection.name,
|
|
description: connection.description,
|
|
host: connection.host,
|
|
port: connection.port,
|
|
databaseName: connection.databaseName,
|
|
username: connection.username,
|
|
password: "", // 비밀번호는 비워둠
|
|
sslEnabled: connection.sslEnabled,
|
|
isActive: connection.isActive,
|
|
});
|
|
setShowDialog(true);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
try {
|
|
if (editingConnection) {
|
|
// 수정
|
|
await flowExternalDbApi.update(editingConnection.id, formData);
|
|
toast({ title: "성공", description: "외부 DB 연결이 수정되었습니다" });
|
|
} else {
|
|
// 생성
|
|
await flowExternalDbApi.create(formData as CreateFlowExternalDbConnectionRequest);
|
|
toast({ title: "성공", description: "외부 DB 연결이 생성되었습니다" });
|
|
}
|
|
setShowDialog(false);
|
|
loadConnections();
|
|
} catch (error: any) {
|
|
toast({
|
|
title: "오류",
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: number, name: string) => {
|
|
if (!confirm(`"${name}" 연결을 삭제하시겠습니까?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await flowExternalDbApi.delete(id);
|
|
toast({ title: "성공", description: "외부 DB 연결이 삭제되었습니다" });
|
|
loadConnections();
|
|
} catch (error: any) {
|
|
toast({
|
|
title: "오류",
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleTestConnection = async (id: number, name: string) => {
|
|
setTestingId(id);
|
|
try {
|
|
const result = await flowExternalDbApi.testConnection(id);
|
|
toast({
|
|
title: result.success ? "연결 성공" : "연결 실패",
|
|
description: result.message,
|
|
variant: result.success ? "default" : "destructive",
|
|
});
|
|
} catch (error: any) {
|
|
toast({
|
|
title: "오류",
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setTestingId(null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto py-6">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">외부 DB 연결 관리</h1>
|
|
<p className="text-muted-foreground mt-1 text-sm">플로우에서 사용할 외부 데이터베이스 연결을 관리합니다</p>
|
|
</div>
|
|
<Button onClick={handleCreate}>
|
|
<Plus className="mr-2 h-4 w-4" />새 연결 추가
|
|
</Button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="h-8 w-8 animate-spin" />
|
|
</div>
|
|
) : connections.length === 0 ? (
|
|
<div className="bg-muted/50 rounded-lg border py-12 text-center">
|
|
<p className="text-muted-foreground">등록된 외부 DB 연결이 없습니다</p>
|
|
<Button onClick={handleCreate} className="mt-4">
|
|
<Plus className="mr-2 h-4 w-4" />첫 연결 추가하기
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>이름</TableHead>
|
|
<TableHead>DB 타입</TableHead>
|
|
<TableHead>호스트</TableHead>
|
|
<TableHead>데이터베이스</TableHead>
|
|
<TableHead>상태</TableHead>
|
|
<TableHead className="text-right">작업</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{connections.map((conn) => (
|
|
<TableRow key={conn.id}>
|
|
<TableCell className="font-medium">
|
|
<div>
|
|
<div>{conn.name}</div>
|
|
{conn.description && <div className="text-muted-foreground text-xs">{conn.description}</div>}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline">{getDbTypeLabel(conn.dbType)}</Badge>
|
|
</TableCell>
|
|
<TableCell className="font-mono text-sm">
|
|
{conn.host}:{conn.port}
|
|
</TableCell>
|
|
<TableCell className="font-mono text-sm">{conn.databaseName}</TableCell>
|
|
<TableCell>
|
|
<Badge variant={conn.isActive ? "default" : "secondary"}>{conn.isActive ? "활성" : "비활성"}</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleTestConnection(conn.id, conn.name)}
|
|
disabled={testingId === conn.id}
|
|
>
|
|
{testingId === conn.id ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<TestTube className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => handleEdit(conn)}>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => handleDelete(conn.id, conn.name)}>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
|
|
{/* 생성/수정 다이얼로그 */}
|
|
<Dialog open={showDialog} onOpenChange={setShowDialog}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{editingConnection ? "외부 DB 연결 수정" : "새 외부 DB 연결 추가"}</DialogTitle>
|
|
<DialogDescription>외부 데이터베이스 연결 정보를 입력하세요</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="col-span-2">
|
|
<Label htmlFor="name">연결 이름 *</Label>
|
|
<Input
|
|
id="name"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
placeholder="예: 운영_PostgreSQL"
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-span-2">
|
|
<Label htmlFor="description">설명</Label>
|
|
<Input
|
|
id="description"
|
|
value={formData.description || ""}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
placeholder="연결에 대한 설명"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="dbType">DB 타입 *</Label>
|
|
<Select
|
|
value={formData.dbType}
|
|
onValueChange={(value: any) => setFormData({ ...formData, dbType: value })}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{DB_TYPE_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex items-end gap-2">
|
|
<div className="flex-1">
|
|
<Label htmlFor="host">호스트 *</Label>
|
|
<Input
|
|
id="host"
|
|
value={formData.host}
|
|
onChange={(e) => setFormData({ ...formData, host: e.target.value })}
|
|
placeholder="localhost"
|
|
/>
|
|
</div>
|
|
<div className="w-24">
|
|
<Label htmlFor="port">포트 *</Label>
|
|
<Input
|
|
id="port"
|
|
type="number"
|
|
value={formData.port}
|
|
onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) || 0 })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-span-2">
|
|
<Label htmlFor="databaseName">데이터베이스명 *</Label>
|
|
<Input
|
|
id="databaseName"
|
|
value={formData.databaseName}
|
|
onChange={(e) => setFormData({ ...formData, databaseName: e.target.value })}
|
|
placeholder="mydb"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="username">사용자명 *</Label>
|
|
<Input
|
|
id="username"
|
|
value={formData.username}
|
|
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
|
|
placeholder="dbuser"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="password">비밀번호 {editingConnection && "(변경 시에만 입력)"}</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
value={formData.password || ""}
|
|
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
|
placeholder={editingConnection ? "변경하지 않으려면 비워두세요" : "비밀번호"}
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-span-2 flex items-center gap-2">
|
|
<Switch
|
|
id="sslEnabled"
|
|
checked={formData.sslEnabled}
|
|
onCheckedChange={(checked) => setFormData({ ...formData, sslEnabled: checked })}
|
|
/>
|
|
<Label htmlFor="sslEnabled">SSL 사용</Label>
|
|
</div>
|
|
|
|
{editingConnection && (
|
|
<div className="col-span-2 flex items-center gap-2">
|
|
<Switch
|
|
id="isActive"
|
|
checked={(formData as UpdateFlowExternalDbConnectionRequest).isActive ?? true}
|
|
onCheckedChange={(checked) => setFormData({ ...formData, isActive: checked })}
|
|
/>
|
|
<Label htmlFor="isActive">활성화</Label>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setShowDialog(false)}>
|
|
취소
|
|
</Button>
|
|
<Button onClick={handleSave}>{editingConnection ? "수정" : "생성"}</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|