diff options
| author | 0-Zz-ang <s1998319@gmail.com> | 2025-07-10 15:56:13 +0900 |
|---|---|---|
| committer | 0-Zz-ang <s1998319@gmail.com> | 2025-07-10 15:56:13 +0900 |
| commit | 356929b399ef31a4de82906267df438cf29ea59d (patch) | |
| tree | c353a55c076e987042f99f3dbf1eab54706f6829 /lib/integration-log/table/integration-log-table-columns.tsx | |
| parent | 25d569828b704a102f681a627c76c4129afa8be3 (diff) | |
인터페이스 관련 파일 수정
Diffstat (limited to 'lib/integration-log/table/integration-log-table-columns.tsx')
| -rw-r--r-- | lib/integration-log/table/integration-log-table-columns.tsx | 238 |
1 files changed, 238 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 |
