274 lines
8.7 KiB
TypeScript
274 lines
8.7 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
getNumericalDataStatus,
|
|
type NumericalDataStatus,
|
|
} from '../services/monitorApi';
|
|
|
|
type TabId = 'all' | 'ocean' | 'koast';
|
|
|
|
const TABS: { id: TabId; label: string }[] = [
|
|
{ id: 'all', label: '전체' },
|
|
{ id: 'ocean', label: '기상·해양 모델' },
|
|
{ id: 'koast', label: 'KOAST' },
|
|
];
|
|
|
|
const OCEAN_MODELS = ['HYCOM', 'GFS', 'WW3'];
|
|
const KOAST_MODELS = ['KOAST POS_WIND', 'KOAST POS_HYDR', 'KOAST POS_WAVE'];
|
|
|
|
function filterByTab(rows: NumericalDataStatus[], tab: TabId): NumericalDataStatus[] {
|
|
if (tab === 'ocean') return rows.filter((r) => OCEAN_MODELS.includes(r.modelName));
|
|
if (tab === 'koast') return rows.filter((r) => KOAST_MODELS.includes(r.modelName));
|
|
return rows;
|
|
}
|
|
|
|
function formatDuration(sec: number | null): string {
|
|
if (sec == null) return '-';
|
|
const m = Math.floor(sec / 60);
|
|
const s = sec % 60;
|
|
return m > 0 ? `${m}분 ${s}초` : `${s}초`;
|
|
}
|
|
|
|
function formatDatetime(iso: string | null): string {
|
|
if (!iso) return '-';
|
|
const d = new Date(iso);
|
|
const mm = String(d.getMonth() + 1).padStart(2, '0');
|
|
const dd = String(d.getDate()).padStart(2, '0');
|
|
const hh = String(d.getHours()).padStart(2, '0');
|
|
const min = String(d.getMinutes()).padStart(2, '0');
|
|
return `${mm}-${dd} ${hh}:${min}`;
|
|
}
|
|
|
|
function formatTime(iso: string | null): string {
|
|
if (!iso) return '-';
|
|
const d = new Date(iso);
|
|
const hh = String(d.getHours()).padStart(2, '0');
|
|
const min = String(d.getMinutes()).padStart(2, '0');
|
|
return `${hh}:${min}`;
|
|
}
|
|
|
|
function StatusCell({ row }: { row: NumericalDataStatus }) {
|
|
if (row.lastStatus === 'COMPLETED') {
|
|
return <span className="text-emerald-400 text-xs">정상</span>;
|
|
}
|
|
if (row.lastStatus === 'FAILED') {
|
|
return (
|
|
<span className="text-red-400 text-xs">
|
|
오류{row.consecutiveFailures > 0 ? ` (${row.consecutiveFailures}회 연속)` : ''}
|
|
</span>
|
|
);
|
|
}
|
|
if (row.lastStatus === 'STARTED') {
|
|
return (
|
|
<span className="inline-flex items-center gap-1 text-cyan-400 text-xs">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
|
|
실행 중
|
|
</span>
|
|
);
|
|
}
|
|
return <span className="text-t3 text-xs">-</span>;
|
|
}
|
|
|
|
function StatusBadge({
|
|
loading,
|
|
errorCount,
|
|
total,
|
|
}: {
|
|
loading: boolean;
|
|
errorCount: number;
|
|
total: number;
|
|
}) {
|
|
if (loading) {
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-bg-elevated text-t2">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
|
|
조회 중...
|
|
</span>
|
|
);
|
|
}
|
|
if (errorCount === total && total > 0) {
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-red-400" />
|
|
연계 오류
|
|
</span>
|
|
);
|
|
}
|
|
if (errorCount > 0) {
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-400">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
|
|
일부 오류 ({errorCount}/{total})
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
|
정상
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const TABLE_HEADERS = [
|
|
'모델명',
|
|
'데이터 기준일',
|
|
'마지막 다운로드',
|
|
'상태',
|
|
'소요 시간',
|
|
'다음 예정',
|
|
];
|
|
|
|
function ForecastTable({
|
|
rows,
|
|
loading,
|
|
}: {
|
|
rows: NumericalDataStatus[];
|
|
loading: boolean;
|
|
}) {
|
|
return (
|
|
<div className="overflow-auto">
|
|
<table className="w-full text-xs border-collapse">
|
|
<thead>
|
|
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
|
|
{TABLE_HEADERS.map((h) => (
|
|
<th
|
|
key={h}
|
|
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
|
|
>
|
|
{h}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading && rows.length === 0
|
|
? Array.from({ length: 6 }).map((_, i) => (
|
|
<tr key={i} className="border-b border-stroke-1 animate-pulse">
|
|
{TABLE_HEADERS.map((_, j) => (
|
|
<td key={j} className="px-3 py-2">
|
|
<div className="h-3 bg-bg-elevated rounded w-16" />
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))
|
|
: rows.map((row) => (
|
|
<tr key={row.jobName} className="border-b border-stroke-1 hover:bg-bg-surface/50">
|
|
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
|
|
{row.modelName}
|
|
</td>
|
|
<td className="px-3 py-2 text-t2">{row.lastDataDate ?? '-'}</td>
|
|
<td className="px-3 py-2 text-t2">{formatDatetime(row.lastDownloadedAt)}</td>
|
|
<td className="px-3 py-2">
|
|
<StatusCell row={row} />
|
|
</td>
|
|
<td className="px-3 py-2 text-t2">{formatDuration(row.durationSec)}</td>
|
|
<td className="px-3 py-2 text-t2">{formatTime(row.nextScheduledAt)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function MonitorForecastPanel() {
|
|
const [activeTab, setActiveTab] = useState<TabId>('all');
|
|
const [rows, setRows] = useState<NumericalDataStatus[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
|
|
|
|
const fetchData = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await getNumericalDataStatus();
|
|
setRows(data);
|
|
setLastUpdate(new Date());
|
|
} catch {
|
|
// 오류 시 기존 데이터 유지
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
void fetchData();
|
|
}, [fetchData]);
|
|
|
|
const visibleRows = filterByTab(rows, activeTab);
|
|
const errorCount = visibleRows.filter(
|
|
(r) => r.lastStatus === 'FAILED'
|
|
).length;
|
|
const totalCount = visibleRows.length;
|
|
|
|
return (
|
|
<div className="flex flex-col h-full overflow-hidden">
|
|
{/* 헤더 */}
|
|
<div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
|
|
<h2 className="text-sm font-semibold text-t1">수치예측자료 모니터링</h2>
|
|
<div className="flex items-center gap-3">
|
|
{lastUpdate && (
|
|
<span className="text-xs text-t3">
|
|
갱신:{' '}
|
|
{lastUpdate.toLocaleTimeString('ko-KR', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
})}
|
|
</span>
|
|
)}
|
|
<button
|
|
onClick={() => void fetchData()}
|
|
disabled={loading}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
<svg
|
|
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
/>
|
|
</svg>
|
|
새로고침
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 탭 */}
|
|
<div className="flex gap-0 border-b border-stroke-1 shrink-0 px-5">
|
|
{TABS.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`px-4 py-2.5 text-xs font-medium border-b-2 transition-colors ${
|
|
activeTab === tab.id
|
|
? 'border-cyan-400 text-cyan-400'
|
|
: 'border-transparent text-t3 hover:text-t2'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* 상태 표시줄 */}
|
|
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
|
|
<StatusBadge loading={loading} errorCount={errorCount} total={totalCount} />
|
|
{!loading && totalCount > 0 && (
|
|
<span className="text-xs text-t3">모델 {totalCount}개</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* 테이블 */}
|
|
<div className="flex-1 overflow-auto p-5">
|
|
<ForecastTable rows={visibleRows} loading={loading} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|