chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

차트 구현 phase2 완료

Browse Source
This commit is contained in:
dohyeons
2025-10-14 14:10:49 +09:00
parent e667ee7106
commit 3db7feb36b
3 changed files with 118 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/components/admin/dashboard/data-sources/DatabaseConfig.tsx
View File

@@ -1,7 +1,8 @@
"use client";
import React, { useState, useEffect } from "react";
import { ChartDataSource, ExternalConnection, ApiResponse } from "../types";
import { ChartDataSource } from "../types";
import { ExternalDbConnectionAPI, ExternalDbConnection } from "@/lib/api/externalDbConnection";
import { Card } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -19,7 +20,7 @@ interface DatabaseConfigProps {
* - 외부 커넥션 목록 불러오기
*/
export function DatabaseConfig({ dataSource, onChange }: DatabaseConfigProps) {
const [connections, setConnections] = useState<ExternalConnection[]>([]);
const [connections, setConnections] = useState<ExternalDbConnection[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -34,23 +35,8 @@ export function DatabaseConfig({ dataSource, onChange }: DatabaseConfigProps) {
setLoading(true);
setError(null);
try {
const response = await fetch("http://localhost:8080/api/external-connections", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token") || "test-token"}`,
},
});
if (!response.ok) {
throw new Error("외부 커넥션 목록을 불러오는데 실패했습니다");
}
const result: ApiResponse<ExternalConnection[]> = await response.json();
if (!result.success) {
throw new Error(result.message || "외부 커넥션 목록을 불러오는데 실패했습니다");
}
setConnections(result.data || []);
const activeConnections = await ExternalDbConnectionAPI.getConnections({ is_active: "Y" });
setConnections(activeConnections);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : "알 수 없는 오류가 발생했습니다";
setError(errorMessage);
@@ -60,7 +46,7 @@ export function DatabaseConfig({ dataSource, onChange }: DatabaseConfigProps) {
};
// 현재 선택된 커넥션 찾기
const selectedConnection = connections.find((conn) => conn.id === dataSource.externalConnectionId);
const selectedConnection = connections.find((conn) => String(conn.id) === dataSource.externalConnectionId);
return (
<div className="space-y-4">
@@ -166,10 +152,10 @@ export function DatabaseConfig({ dataSource, onChange }: DatabaseConfigProps) {
</SelectTrigger>
<SelectContent>
{connections.map((conn) => (
<SelectItem key={conn.id} value={conn.id}>
<SelectItem key={conn.id} value={String(conn.id)}>
<div className="flex items-center gap-2">
<span className="font-medium">{conn.name}</span>
<span className="text-xs text-gray-500">({conn.type})</span>
<span className="font-medium">{conn.connection_name}</span>
<span className="text-xs text-gray-500">({conn.db_type.toUpperCase()})</span>
</div>
</SelectItem>
))}
@@ -180,10 +166,10 @@ export function DatabaseConfig({ dataSource, onChange }: DatabaseConfigProps) {
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
<div className="space-y-1 text-xs text-gray-600">
<div>
<span className="font-medium">커넥션명:</span> {selectedConnection.name}
<span className="font-medium">커넥션명:</span> {selectedConnection.connection_name}
</div>
<div>
<span className="font-medium">타입:</span> {selectedConnection.type.toUpperCase()}
<span className="font-medium">타입:</span> {selectedConnection.db_type.toUpperCase()}
</div>
</div>
</div>