api관리 구현(대시보드쪽)
This commit is contained in:
dohyeons
parent
7ec60bed6c
commit
b62f2ffc10
|
|
@ -1,12 +1,14 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { ChartDataSource, QueryResult, KeyValuePair } from "../types";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, X, Play, AlertCircle } from "lucide-react";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { ExternalDbConnectionAPI, ExternalApiConnection } from "@/lib/api/externalDbConnection";
|
||||
|
||||
interface ApiConfigProps {
|
||||
dataSource: ChartDataSource;
|
||||
|
|
@ -24,6 +26,106 @@ export function ApiConfig({ dataSource, onChange, onTestResult }: ApiConfigProps
|
|||
const [testing, setTesting] = useState(false);
|
||||
const [testResult, setTestResult] = useState<QueryResult | null>(null);
|
||||
const [testError, setTestError] = useState<string | null>(null);
|
||||
const [apiConnections, setApiConnections] = useState<ExternalApiConnection[]>([]);
|
||||
const [selectedConnectionId, setSelectedConnectionId] = useState<string>("");
|
||||
|
||||
// 외부 API 커넥션 목록 로드
|
||||
useEffect(() => {
|
||||
const loadApiConnections = async () => {
|
||||
const connections = await ExternalDbConnectionAPI.getApiConnections({ is_active: "Y" });
|
||||
setApiConnections(connections);
|
||||
};
|
||||
loadApiConnections();
|
||||
}, []);
|
||||
|
||||
// 외부 커넥션 선택 핸들러
|
||||
const handleConnectionSelect = async (connectionId: string) => {
|
||||
setSelectedConnectionId(connectionId);
|
||||
|
||||
if (!connectionId || connectionId === "manual") return;
|
||||
|
||||
const connection = await ExternalDbConnectionAPI.getApiConnectionById(Number(connectionId));
|
||||
if (!connection) {
|
||||
console.error("커넥션을 찾을 수 없습니다:", connectionId);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("불러온 커넥션:", connection);
|
||||
|
||||
// 커넥션 설정을 API 설정에 자동 적용
|
||||
const updates: Partial<ChartDataSource> = {
|
||||
endpoint: connection.base_url,
|
||||
};
|
||||
|
||||
const headers: KeyValuePair[] = [];
|
||||
const queryParams: KeyValuePair[] = [];
|
||||
|
||||
// 기본 헤더가 있으면 적용
|
||||
if (connection.default_headers && Object.keys(connection.default_headers).length > 0) {
|
||||
Object.entries(connection.default_headers).forEach(([key, value]) => {
|
||||
headers.push({
|
||||
id: `header_${Date.now()}_${Math.random()}`,
|
||||
key,
|
||||
value,
|
||||
});
|
||||
});
|
||||
console.log("기본 헤더 적용:", headers);
|
||||
}
|
||||
|
||||
// 인증 설정이 있으면 헤더 또는 쿼리 파라미터에 추가
|
||||
if (connection.auth_type && connection.auth_type !== "none" && connection.auth_config) {
|
||||
console.log("인증 설정:", connection.auth_type, connection.auth_config);
|
||||
|
||||
if (connection.auth_type === "bearer" && connection.auth_config.token) {
|
||||
headers.push({
|
||||
id: `header_${Date.now()}_auth`,
|
||||
key: "Authorization",
|
||||
value: `Bearer ${connection.auth_config.token}`,
|
||||
});
|
||||
console.log("Bearer 토큰 추가");
|
||||
} else if (connection.auth_type === "api-key") {
|
||||
console.log("API Key 설정:", connection.auth_config);
|
||||
|
||||
if (connection.auth_config.keyName && connection.auth_config.keyValue) {
|
||||
if (connection.auth_config.keyLocation === "header") {
|
||||
headers.push({
|
||||
id: `header_${Date.now()}_apikey`,
|
||||
key: connection.auth_config.keyName,
|
||||
value: connection.auth_config.keyValue,
|
||||
});
|
||||
console.log(`API Key 헤더 추가: ${connection.auth_config.keyName}=${connection.auth_config.keyValue}`);
|
||||
} else if (connection.auth_config.keyLocation === "query") {
|
||||
queryParams.push({
|
||||
id: `param_${Date.now()}_apikey`,
|
||||
key: connection.auth_config.keyName,
|
||||
value: connection.auth_config.keyValue,
|
||||
});
|
||||
console.log(
|
||||
`API Key 쿼리 파라미터 추가: ${connection.auth_config.keyName}=${connection.auth_config.keyValue}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
connection.auth_type === "basic" &&
|
||||
connection.auth_config.username &&
|
||||
connection.auth_config.password
|
||||
) {
|
||||
const basicAuth = btoa(`${connection.auth_config.username}:${connection.auth_config.password}`);
|
||||
headers.push({
|
||||
id: `header_${Date.now()}_basic`,
|
||||
key: "Authorization",
|
||||
value: `Basic ${basicAuth}`,
|
||||
});
|
||||
console.log("Basic Auth 추가");
|
||||
}
|
||||
}
|
||||
|
||||
updates.headers = headers;
|
||||
updates.queryParams = queryParams;
|
||||
console.log("최종 업데이트:", updates);
|
||||
|
||||
onChange(updates);
|
||||
};
|
||||
|
||||
// 헤더를 배열로 정규화 (객체 형식 호환)
|
||||
const normalizeHeaders = (): KeyValuePair[] => {
|
||||
|
|
@ -217,6 +319,30 @@ export function ApiConfig({ dataSource, onChange, onTestResult }: ApiConfigProps
|
|||
<p className="mt-1 text-sm text-gray-600">외부 API에서 데이터를 가져올 설정을 입력하세요</p>
|
||||
</div>
|
||||
|
||||
{/* 외부 커넥션 선택 */}
|
||||
{apiConnections.length > 0 && (
|
||||
<Card className="space-y-4 p-4">
|
||||
<div>
|
||||
<Label className="text-sm font-medium text-gray-700">외부 커넥션 (선택)</Label>
|
||||
<Select value={selectedConnectionId} onValueChange={handleConnectionSelect}>
|
||||
<SelectTrigger className="mt-2">
|
||||
<SelectValue placeholder="저장된 커넥션 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="z-[9999]">
|
||||
<SelectItem value="manual">직접 입력</SelectItem>
|
||||
{apiConnections.map((conn) => (
|
||||
<SelectItem key={conn.id} value={String(conn.id)}>
|
||||
{conn.connection_name}
|
||||
{conn.description && <span className="ml-2 text-xs text-gray-500">({conn.description})</span>}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="mt-1 text-xs text-gray-500">외부 커넥션 관리에서 저장한 REST API 설정을 불러올 수 있습니다</p>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* API URL */}
|
||||
<Card className="space-y-4 p-4">
|
||||
<div>
|
||||
|
|
@ -230,13 +356,6 @@ export function ApiConfig({ dataSource, onChange, onTestResult }: ApiConfigProps
|
|||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">GET 요청을 보낼 API 엔드포인트</p>
|
||||
</div>
|
||||
|
||||
{/* HTTP 메서드 (고정) */}
|
||||
<div>
|
||||
<Label className="text-sm font-medium text-gray-700">HTTP 메서드</Label>
|
||||
<div className="mt-2 rounded border border-gray-300 bg-gray-100 p-2 text-sm text-gray-700">GET (고정)</div>
|
||||
<p className="mt-1 text-xs text-gray-500">데이터 조회는 GET 메서드만 지원합니다</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 쿼리 파라미터 */}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,36 @@ export interface ExternalDbConnection {
|
|||
updated_by?: string;
|
||||
}
|
||||
|
||||
export type AuthType = "none" | "api-key" | "bearer" | "basic" | "oauth2";
|
||||
|
||||
export interface ExternalApiConnection {
|
||||
id?: number;
|
||||
connection_name: string;
|
||||
description?: string;
|
||||
base_url: string;
|
||||
default_headers: Record<string, string>;
|
||||
auth_type: AuthType;
|
||||
auth_config?: {
|
||||
keyLocation?: "header" | "query";
|
||||
keyName?: string;
|
||||
keyValue?: string;
|
||||
token?: string;
|
||||
username?: string;
|
||||
password?: string;
|
||||
clientId?: string;
|
||||
clientSecret?: string;
|
||||
tokenUrl?: string;
|
||||
accessToken?: string;
|
||||
};
|
||||
timeout?: number;
|
||||
company_code: string;
|
||||
is_active: string;
|
||||
created_date?: Date;
|
||||
created_by?: string;
|
||||
updated_date?: Date;
|
||||
updated_by?: string;
|
||||
}
|
||||
|
||||
export interface ExternalDbConnectionFilter {
|
||||
db_type?: string;
|
||||
is_active?: string;
|
||||
|
|
@ -209,7 +239,7 @@ export class ExternalDbConnectionAPI {
|
|||
try {
|
||||
const response = await apiClient.post<ApiResponse<ConnectionTestResult>>(
|
||||
`${this.BASE_PATH}/${connectionId}/test`,
|
||||
password ? { password } : undefined
|
||||
password ? { password } : undefined,
|
||||
);
|
||||
|
||||
if (!response.data.success) {
|
||||
|
|
@ -220,10 +250,12 @@ export class ExternalDbConnectionAPI {
|
|||
};
|
||||
}
|
||||
|
||||
return response.data.data || {
|
||||
success: true,
|
||||
message: response.data.message || "연결 테스트가 완료되었습니다.",
|
||||
};
|
||||
return (
|
||||
response.data.data || {
|
||||
success: true,
|
||||
message: response.data.message || "연결 테스트가 완료되었습니다.",
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("연결 테스트 오류:", error);
|
||||
|
||||
|
|
@ -246,9 +278,7 @@ export class ExternalDbConnectionAPI {
|
|||
*/
|
||||
static async getTables(connectionId: number): Promise<ApiResponse<string[]>> {
|
||||
try {
|
||||
const response = await apiClient.get<ApiResponse<string[]>>(
|
||||
`${this.BASE_PATH}/${connectionId}/tables`
|
||||
);
|
||||
const response = await apiClient.get<ApiResponse<string[]>>(`${this.BASE_PATH}/${connectionId}/tables`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("테이블 목록 조회 오류:", error);
|
||||
|
|
@ -260,7 +290,7 @@ export class ExternalDbConnectionAPI {
|
|||
try {
|
||||
console.log("컬럼 정보 API 요청:", `${this.BASE_PATH}/${connectionId}/tables/${tableName}/columns`);
|
||||
const response = await apiClient.get<ApiResponse<any[]>>(
|
||||
`${this.BASE_PATH}/${connectionId}/tables/${tableName}/columns`
|
||||
`${this.BASE_PATH}/${connectionId}/tables/${tableName}/columns`,
|
||||
);
|
||||
console.log("컬럼 정보 API 응답:", response.data);
|
||||
return response.data;
|
||||
|
|
@ -273,10 +303,7 @@ export class ExternalDbConnectionAPI {
|
|||
static async executeQuery(connectionId: number, query: string): Promise<ApiResponse<any[]>> {
|
||||
try {
|
||||
console.log("API 요청:", `${this.BASE_PATH}/${connectionId}/execute`, { query });
|
||||
const response = await apiClient.post<ApiResponse<any[]>>(
|
||||
`${this.BASE_PATH}/${connectionId}/execute`,
|
||||
{ query }
|
||||
);
|
||||
const response = await apiClient.post<ApiResponse<any[]>>(`${this.BASE_PATH}/${connectionId}/execute`, { query });
|
||||
console.log("API 응답:", response.data);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
|
|
@ -284,4 +311,45 @@ export class ExternalDbConnectionAPI {
|
|||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* REST API 연결 목록 조회 (외부 커넥션에서)
|
||||
*/
|
||||
static async getApiConnections(filter: { is_active?: string } = {}): Promise<ExternalApiConnection[]> {
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (filter.is_active) params.append("is_active", filter.is_active);
|
||||
|
||||
const response = await apiClient.get<ApiResponse<ExternalApiConnection[]>>(
|
||||
`/external-rest-api-connections?${params.toString()}`,
|
||||
);
|
||||
|
||||
if (!response.data.success) {
|
||||
throw new Error(response.data.message || "API 연결 목록 조회에 실패했습니다.");
|
||||
}
|
||||
|
||||
return response.data.data || [];
|
||||
} catch (error) {
|
||||
console.error("API 연결 목록 조회 오류:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 특정 REST API 연결 조회
|
||||
*/
|
||||
static async getApiConnectionById(id: number): Promise<ExternalApiConnection | null> {
|
||||
try {
|
||||
const response = await apiClient.get<ApiResponse<ExternalApiConnection>>(`/external-rest-api-connections/${id}`);
|
||||
|
||||
if (!response.data.success || !response.data.data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return response.data.data;
|
||||
} catch (error) {
|
||||
console.error("API 연결 조회 오류:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue