diff options
Diffstat (limited to 'lib/integration-log/table')
| -rw-r--r-- | lib/integration-log/table/integration-log-table-columns.tsx | 238 | ||||
| -rw-r--r-- | lib/integration-log/table/integration-log-table.tsx | 112 |
2 files changed, 350 insertions, 0 deletions
diff --git a/lib/integration-log/table/integration-log-table-columns.tsx b/lib/integration-log/table/integration-log-table-columns.tsx new file mode 100644 index 00000000..6a955287 --- /dev/null +++ b/lib/integration-log/table/integration-log-table-columns.tsx @@ -0,0 +1,238 @@ +"use client"; +import * as React from "react"; +import { type ColumnDef } from "@tanstack/react-table"; +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"; +import { Badge } from "@/components/ui/badge"; +import { Clock, Activity, Globe, Zap, AlertCircle } from "lucide-react"; +import { formatDateTime } from "@/lib/utils"; +import { integrationLogTable } from "@/db/schema/integration-log"; + +// 확장된 타입 정의 (JOIN 결과) +type IntegrationLogWithIntegration = typeof integrationLogTable.$inferSelect & { + code?: string; + name?: string; + type?: string; + sourceSystem?: string; + targetSystem?: string; + status?: string; +}; + +export function getColumns(): ColumnDef<IntegrationLogWithIntegration>[] { + return [ + { + accessorKey: "name", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="통합명" /> + ), + cell: ({ row }) => { + const name = row.getValue("name") as string; + const code = row.getValue("code") as string; + return ( + <div className="flex items-center gap-2"> + <Activity className="h-4 w-4 text-muted-foreground" /> + <div className="flex flex-col"> + <span className="font-medium">{name || "-"}</span> + {code && ( + <span className="text-xs text-muted-foreground">{code}</span> + )} + </div> + </div> + ); + }, + enableResizing: true, + minSize: 150, + size: 200, + }, + { + accessorKey: "type", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="타입" /> + ), + cell: ({ row }) => { + const type = row.getValue("type") as string; + if (!type) return <span>-</span>; + + const typeMap: Record<string, { label: string; variant: "default" | "secondary" | "outline" }> = { + rest_api: { label: "REST API", variant: "default" }, + soap: { label: "SOAP", variant: "secondary" }, + db_to_db: { label: "DB to DB", variant: "outline" }, + }; + + const config = typeMap[type] || { label: type, variant: "outline" }; + + return ( + <Badge variant={config.variant}> + {config.label} + </Badge> + ); + }, + enableResizing: true, + minSize: 100, + size: 120, + }, + { + accessorKey: "status", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="상태" /> + ), + cell: ({ row }) => { + const status = row.getValue("status") as string; + const statusMap: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = { + success: { label: "성공", variant: "default" }, + failed: { label: "실패", variant: "destructive" }, + timeout: { label: "타임아웃", variant: "secondary" }, + pending: { label: "대기중", variant: "outline" }, + }; + + const config = statusMap[status] || { label: status, variant: "outline" }; + + return ( + <Badge variant={config.variant}> + {config.label} + </Badge> + ); + }, + enableResizing: true, + minSize: 100, + size: 120, + }, + { + accessorKey: "requestMethod", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="메서드" /> + ), + cell: ({ row }) => { + const method = row.getValue("requestMethod") as string; + if (!method) return <span>-</span>; + + const methodColors: Record<string, string> = { + GET: "bg-blue-100 text-blue-800", + POST: "bg-green-100 text-green-800", + PUT: "bg-yellow-100 text-yellow-800", + DELETE: "bg-red-100 text-red-800", + }; + + return ( + <span className={`px-2 py-1 rounded text-xs font-mono ${methodColors[method] || "bg-gray-100 text-gray-800"}`}> + {method} + </span> + ); + }, + enableResizing: true, + minSize: 80, + size: 100, + }, + { + accessorKey: "httpStatusCode", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="상태코드" /> + ), + cell: ({ row }) => { + const statusCode = row.getValue("httpStatusCode") as number; + if (!statusCode) return <span>-</span>; + + const isClientError = statusCode >= 400 && statusCode < 500; + const isServerError = statusCode >= 500; + + let colorClass = "text-green-600"; + if (isClientError) colorClass = "text-yellow-600"; + if (isServerError) colorClass = "text-red-600"; + + return ( + <span className={`font-mono text-sm ${colorClass}`}> + {statusCode} + </span> + ); + }, + enableResizing: true, + minSize: 100, + size: 120, + }, + { + accessorKey: "responseTime", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="응답시간" /> + ), + cell: ({ row }) => { + const responseTime = row.getValue("responseTime") as number; + if (!responseTime) return <span>-</span>; + + let colorClass = "text-green-600"; + if (responseTime > 1000) colorClass = "text-yellow-600"; + if (responseTime > 5000) colorClass = "text-red-600"; + + return ( + <div className="flex items-center gap-2"> + <Zap className="h-4 w-4 text-muted-foreground" /> + <span className={`text-sm ${colorClass}`}> + {responseTime}ms + </span> + </div> + ); + }, + enableResizing: true, + minSize: 100, + size: 120, + }, + { + accessorKey: "executionTime", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="실행시간" /> + ), + cell: ({ cell }) => { + const executionTime = cell.getValue() as Date; + return ( + <div className="flex items-center gap-2"> + <Clock className="h-4 w-4 text-muted-foreground" /> + <span className="text-sm">{formatDateTime(executionTime)}</span> + </div> + ); + }, + enableResizing: true, + minSize: 150, + size: 180, + }, + { + accessorKey: "requestUrl", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="요청 URL" /> + ), + cell: ({ row }) => { + const url = row.getValue("requestUrl") as string; + return ( + <div className="flex items-center gap-2"> + <Globe className="h-4 w-4 text-muted-foreground" /> + <div className="max-w-[200px] truncate text-sm"> + {url || "-"} + </div> + </div> + ); + }, + enableResizing: true, + minSize: 150, + size: 200, + }, + { + accessorKey: "errorMessage", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="에러" /> + ), + cell: ({ row }) => { + const errorMessage = row.getValue("errorMessage") as string; + if (!errorMessage) return <span>-</span>; + + return ( + <div className="flex items-center gap-2"> + <AlertCircle className="h-4 w-4 text-red-500" /> + <div className="max-w-[150px] truncate text-sm text-red-600"> + {errorMessage} + </div> + </div> + ); + }, + enableResizing: true, + minSize: 120, + size: 150, + }, + ]; +}
\ No newline at end of file diff --git a/lib/integration-log/table/integration-log-table.tsx b/lib/integration-log/table/integration-log-table.tsx new file mode 100644 index 00000000..1b62a258 --- /dev/null +++ b/lib/integration-log/table/integration-log-table.tsx @@ -0,0 +1,112 @@ +"use client"; +import * as React from "react"; +import { useDataTable } from "@/hooks/use-data-table"; +import { DataTable } from "@/components/data-table/data-table"; +import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"; +import type { + DataTableAdvancedFilterField, +} from "@/types/table" +import { getIntegrationLogs } from "../service"; +import { getColumns } from "./integration-log-table-columns"; + +interface IntegrationLogTableProps { + promises?: Promise<[{ data: Record<string, unknown>[]; pageCount: number }]>; +} + +export function IntegrationLogTable({ promises }: IntegrationLogTableProps) { + const [rawData, setRawData] = React.useState<{ data: Record<string, unknown>[]; pageCount: number }>({ data: [], pageCount: 0 }); + + React.useEffect(() => { + if (promises) { + promises.then(([result]) => { + setRawData(result); + }); + } else { + // fallback: 클라이언트에서 직접 fetch (CSR) + (async () => { + try { + const result = await getIntegrationLogs({ + page: 1, + perPage: 10, + search: "", + sort: [{ id: "executionTime", desc: true }], + filters: [], + joinOperator: "and", + flags: ["advancedTable"], + status: "", + errorMessage: "", + requestUrl: "", + requestMethod: "", + }); + setRawData(result); + } catch (error) { + console.error("Error refreshing data:", error); + } + })(); + } + }, [promises]); + + + + // 컬럼 설정 - 외부 파일에서 가져옴 + const columns = React.useMemo( + () => getColumns() as any, + [] + ) + + // 고급 필터 필드 설정 + const advancedFilterFields: DataTableAdvancedFilterField<Record<string, unknown>>[] = [ + { id: "name", label: "통합명", type: "text" }, + { id: "type", label: "타입", type: "select", options: [ + { label: "REST API", value: "rest_api" }, + { label: "SOAP", value: "soap" }, + { label: "DB to DB", value: "db_to_db" }, + ]}, + { id: "status", label: "상태", type: "select", options: [ + { label: "성공", value: "success" }, + { label: "실패", value: "failed" }, + { label: "타임아웃", value: "timeout" }, + { label: "대기중", value: "pending" }, + ]}, + { id: "requestMethod", label: "메서드", type: "select", options: [ + { label: "GET", value: "GET" }, + { label: "POST", value: "POST" }, + { label: "PUT", value: "PUT" }, + { label: "DELETE", value: "DELETE" }, + ]}, + { id: "httpStatusCode", label: "HTTP 상태코드", type: "number" }, + { id: "responseTime", label: "응답시간", type: "number" }, + { id: "executionTime", label: "실행시간", type: "date" }, + ]; + + const { table } = useDataTable({ + data: rawData.data, + columns, + pageCount: rawData.pageCount, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "executionTime", desc: true }], + }, + getRowId: (originalRow) => String(originalRow.id), + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + <DataTable table={table}> + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + > + <div className="flex items-center gap-2"> + <span className="text-sm text-muted-foreground"> + 총 {rawData.data.length}개의 이력 + </span> + </div> + </DataTableAdvancedToolbar> + </DataTable> + </> + ); +}
\ No newline at end of file |