+
{/* Sidebar */}
{/* Main Content */}
-
+ = {
- SUCCESS: 'bg-green-100 text-green-800',
- FAIL: 'bg-red-100 text-red-800',
- DENIED: 'bg-red-100 text-red-800',
- EXPIRED: 'bg-orange-100 text-orange-800',
- INVALID_KEY: 'bg-red-100 text-red-800',
- ERROR: 'bg-orange-100 text-orange-800',
- FAILED: 'bg-gray-100 text-gray-800',
+const STATUS_VARIANT: Record = {
+ SUCCESS: 'success',
+ FAIL: 'danger',
+ DENIED: 'warning',
+ EXPIRED: 'warning',
+ INVALID_KEY: 'danger',
+ ERROR: 'danger',
+ FAILED: 'default',
};
const AUTO_REFRESH_MS = 30000;
@@ -93,6 +85,28 @@ const DashboardPage = () => {
return () => clearInterval(interval);
}, [fetchAll]);
+ // 모든 데이터 소스에서 서비스명을 통합 수집 → 고정 인덱스 매핑
+ const serviceColorMap = useMemo(() => {
+ const allNames = new Set();
+ serviceRatio.forEach((s) => allNames.add(s.serviceName));
+ errorTrend.forEach((e) => allNames.add(e.serviceName));
+ topApis.forEach((a) => allNames.add(a.serviceName));
+ recentLogs.forEach((l) => { if (l.serviceName) allNames.add(l.serviceName); });
+
+ const map: Record = {};
+ [...allNames].sort().forEach((name, i) => {
+ map[name] = {
+ index: i,
+ chartColor: chartColors[i % chartColors.length],
+ badgeVariant: SERVICE_BADGE_VARIANTS[i % SERVICE_BADGE_VARIANTS.length],
+ };
+ });
+ return map;
+ }, [serviceRatio, errorTrend, topApis, recentLogs, chartColors]);
+
+ const getServiceChartColor = (name: string) => serviceColorMap[name]?.chartColor ?? chartColors[0];
+ const getServiceVariant = (name: string) => serviceColorMap[name]?.badgeVariant ?? 'blue';
+
const errorTrendPivoted = useMemo(() => {
const serviceNames = [...new Set(errorTrend.map((e) => e.serviceName))];
const byHour: Record> = {};
@@ -108,18 +122,6 @@ const DashboardPage = () => {
};
}, [errorTrend]);
- const topApiServiceColorMap = useMemo(() => {
- const serviceNames = [...new Set(topApis.map((a) => a.serviceName))];
- const map: Record = {};
- serviceNames.forEach((name, i) => {
- map[name] = {
- tag: SERVICE_TAG_STYLES[i % SERVICE_TAG_STYLES.length],
- bar: chartColors[i % chartColors.length],
- };
- });
- return map;
- }, [topApis, chartColors]);
-
if (isLoading) {
return (
{/* Header */}
@@ -373,7 +373,7 @@ const MainLayout = () => {
{/* Content */}
-
+
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 0114c41..e016b06 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -11,26 +11,18 @@ import {
getSummary, getHourlyTrend, getServiceRatio,
getErrorTrend, getTopApis, getRecentLogs, getHeartbeat,
} from '../services/dashboardService';
-import { CHART_COLORS_HEX } from '../constants/chart';
+import { CHART_COLORS_HEX, SERVICE_BADGE_VARIANTS } from '../constants/chart';
import { useTheme } from '../hooks/useTheme';
+import Badge, { type BadgeVariant } from '../components/ui/Badge';
-const SERVICE_TAG_STYLES = [
- 'bg-blue-100 text-blue-700',
- 'bg-emerald-100 text-emerald-700',
- 'bg-amber-100 text-amber-700',
- 'bg-red-100 text-red-700',
- 'bg-violet-100 text-violet-700',
- 'bg-cyan-100 text-cyan-700',
-];
-
-const STATUS_BADGE: Record
@@ -131,211 +133,238 @@ const DashboardPage = () => {
return (
{/* Header */}
-
-
Dashboard
+
+
- {/* Row 1: Summary Cards */}
- {stats && (
-
+
{lastUpdated && (
마지막 갱신: {lastUpdated}
)}
+
+
+
+
+ Dashboard
+API Gateway 요약 및 실시간 현황을 확인합니다
+
-
- )}
-
- {/* Row 2: Heartbeat Status Cards */}
-
-
- 오늘 총 요청
-{stats.totalRequests.toLocaleString()}
-0 ? 'text-green-600' : stats.changePercent < 0 ? 'text-red-600' : 'text-[var(--color-text-secondary)]'}`}> - {stats.changePercent > 0 ? '\u25B2' : stats.changePercent < 0 ? '\u25BC' : ''} 전일 대비 {stats.changePercent.toFixed(2)}% -
-
-
- 성공률
-{stats.successRate.toFixed(1)}%
-실패 {stats.failureCount}건
-
-
- 평균 응답 시간
-{stats.avgResponseTime.toFixed(0)}ms
-
-
- API 요청 사용자
-{stats.activeUserCount}
-오늘
-
- {heartbeat.length > 0 ? (
-
- {heartbeat.map((svc) => {
- const isUp = svc.healthStatus === 'UP';
- const isDown = svc.healthStatus === 'DOWN';
- const borderColor = isUp ? 'border-green-500' : isDown ? 'border-red-500' : 'border-gray-400';
-
- return (
-
- ) : (
- navigate('/monitoring/service-status')}
- >
-
- );
- })}
-
-
- {svc.serviceName}
-
-
-
- {isUp ? 'Operational' : isDown ? 'Down' : 'Unknown'}
-
- {svc.healthCheckedAt && (
- {svc.healthCheckedAt}
- )}
-
-
-
등록된 서비스가 없습니다
+ {/* Row 1: Summary Cards (50%) + Heartbeat (50%) */} +
+ {/* 좌측: 요약 카드 1x4 */}
+ {stats && (
+
{/* Row 3: Charts 2x2 */}
-
+
)}
+
+ {/* 우측: 서비스 상태 카드 (필 그리드) */}
+
+
+ 오늘 총 요청
+{stats.totalRequests.toLocaleString()}
+0 ? 'text-green-600' : stats.changePercent < 0 ? 'text-red-600' : 'text-[var(--color-text-secondary)]'}`}> + {stats.changePercent > 0 ? '\u25B2' : stats.changePercent < 0 ? '\u25BC' : ''} {stats.changePercent.toFixed(1)}% +
+
+
+ 성공률
+{stats.successRate.toFixed(1)}%
+실패 {stats.failureCount}건
+
+
+ 평균 응답
+{stats.avgResponseTime.toFixed(0)}ms
+
+
요청 사용자
+{stats.activeUserCount}
+
+ {/* 헤더 */}
+
+
+
+ {/* 필 그리드 */}
+
+
+ 서비스 상태
+
+ 0 && heartbeat.every((s) => s.healthStatus === 'UP') ? 'text-green-500' : 'text-amber-500'}`}>
+ {heartbeat.filter((s) => s.healthStatus === 'UP').length}/{heartbeat.length} 정상
+
+
+ {heartbeat.length > 0 ? (
+ heartbeat.map((svc) => {
+ const isUp = svc.healthStatus === 'UP';
+ const isDown = svc.healthStatus === 'DOWN';
+ const dotColor = isUp ? 'bg-green-500' : isDown ? 'bg-red-500' : 'bg-gray-400';
+ const borderHover = isUp ? 'hover:border-green-500/40' : isDown ? 'hover:border-red-500/40' : 'hover:border-gray-400/40';
+ const borderBase = isUp ? 'border-green-500/15' : isDown ? 'border-red-500/15' : 'border-gray-400/15';
+ return (
+
+ navigate('/monitoring/service-status')}
+ >
+
+ );
+ })
+ ) : (
+
+ {isUp && }
+
+
+ {svc.serviceName}
+ {svc.healthResponseTime !== null && (
+ {svc.healthResponseTime}ms
+ )}
+ 등록된 서비스가 없습니다
+ )} +
- {/* Chart 1: Hourly Trend */}
-
-
시간별 요청 추이
+
+ {/* Chart 1: Hourly Trend (3/4) */}
+
+
+
`${h}시`} />
- `${h}시`} />
-
+ `${h}시`} tick={{ fontSize: 10 }} />
+ `${h}시`} contentStyle={{ fontSize: 11 }} labelStyle={{ fontSize: 11 }} />
+
) : (
-
{/* Chart 2: Service Ratio */}
- 시간별 요청 추이
{hourlyTrend.length > 0 ? ( -데이터가 없습니다
+
+
)}
데이터가 없습니다
+
-
서비스별 요청 비율
+
+
+
- {serviceRatio.map((_, idx) => (
- |
+ {serviceRatio.map((entry, idx) => (
+ |
))}
-
) : (
-
- {/* Chart 3: Error Trend */}
- 서비스별 요청 비율
{serviceRatio.length > 0 ? ( -데이터가 없습니다
+
+
)}
데이터가 없습니다
+
-
에러율 추이
+ {/* Chart 3: Error Trend (1/4) */} +
+
+
`${h}시`} />
- `${h}시`} />
-
- {errorTrendPivoted.serviceNames.map((name, idx) => (
+ `${h}시`} tick={{ fontSize: 10 }} />
+ `${h}시`} contentStyle={{ fontSize: 11 }} labelStyle={{ fontSize: 11 }} />
+
+ {errorTrendPivoted.serviceNames.map((name) => (
))}
) : (
-
- {/* Chart 4: Top APIs */}
- 에러율 추이
{errorTrendPivoted.data.length > 0 ? ( -데이터가 없습니다
+
+
)}
데이터가 없습니다
+
-
상위 호출 API
+ {/* Chart 4: Top APIs (3/4) */} +
+
상위 호출 API
{topApis.length > 0 ? ( -
- {topApis.map((api, idx) => {
+
+ {topApis.slice(0, 5).map((api, idx) => {
const maxCount = topApis[0]?.count || 1;
const pct = (api.count / maxCount) * 100;
- const colors = topApiServiceColorMap[api.serviceName] || { tag: SERVICE_TAG_STYLES[0], bar: chartColors[0] };
return (
-
{/* Row 4: Recent Logs */}
-
- {idx + 1}
-
- {api.serviceName}
-
-
+
+ {idx + 1}
+ {api.serviceName}
+
{api.apiName}
-
) : (
-
+
- {api.count}
+ {api.count}
);
})}
데이터가 없습니다
+
+
)}
데이터가 없습니다
+
-
-
최근 요청 로그
+
+
+
{recentLogs.length > 0 ? (
<>
최근 요청 로그
-
+
-
| 시간 | -서비스 | -사용자 | -URL | -상태 | -응답시간 | +서비스 | +사용자 | +URL | +응답시간 | +상태 | +시간 | {log.requestedAt} | -{log.serviceName ?? '-'} | -{log.userName ?? '-'} | -- {truncate(log.requestUrl, 40)} + |
+ {log.serviceName ? (
+ |
- - - {log.requestStatus} - + | {log.userName ?? '-'} | ++ {truncate(log.requestUrl, 70)} | -+ | {log.responseTime !== null ? `${log.responseTime}ms` : '-'} | +
+ |
+ + {log.requestedAt?.length > 23 ? log.requestedAt.substring(0, 23) : log.requestedAt} + | ))}
|---|
+