마지막 업데이트:
- |
연결 상태:
연결 중...
@@ -1129,8 +1208,7 @@ HTML_TEMPLATE = """
function connectWebSocket() {
try {
- const proto = (window.location.protocol === 'https:') ? 'wss' : 'ws';
- ws = new WebSocket(`${proto}://${window.location.host}/ws`);
+ ws = new WebSocket(`ws://${window.location.host}/ws`);
ws.onopen = function() {
console.log('WebSocket 연결이 성공했습니다.');
@@ -1150,6 +1228,11 @@ HTML_TEMPLATE = """
}
updateDashboard(data);
+
+ // 세션 이벤트가 있으면 타임라인 업데이트
+ if (data.session_events) {
+ renderTimeline(data.session_events);
+ }
} catch (e) {
console.error('데이터 파싱 오류:', e);
}
@@ -1446,6 +1529,71 @@ HTML_TEMPLATE = """
});
}
+ function refreshTimeline() {
+ fetch('/api/session_events?limit=100')
+ .then(r => r.json())
+ .then(data => renderTimeline(data.events || []))
+ .catch(() => {
+ document.getElementById('timeline-body').innerHTML = '
타임라인 로드 실패
';
+ });
+ }
+
+ function renderTimeline(events) {
+ const container = document.getElementById('timeline-body');
+ if (!events || events.length === 0) {
+ container.innerHTML = '
이벤트 없음
';
+ return;
+ }
+
+ // 최신 이벤트가 위로 오도록 역순 정렬
+ const sortedEvents = events.slice().sort((a, b) => b.timestamp - a.timestamp);
+
+ let html = '
';
+ sortedEvents.forEach(event => {
+ const timestamp = new Date(event.timestamp * 1000).toLocaleString('ko-KR', {
+ year: '2-digit',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ });
+
+ let icon = '🔹';
+ let color = '#6c757d';
+ if (event.event_type === 'session_create') {
+ icon = '✅';
+ color = '#28a745';
+ } else if (event.event_type === 'session_destroy') {
+ icon = '❌';
+ color = '#dc3545';
+ } else if (event.event_type.includes('scale_up')) {
+ icon = '⬆️';
+ color = '#007bff';
+ } else if (event.event_type.includes('scale_down')) {
+ icon = '⬇️';
+ color = '#ffc107';
+ }
+
+ html += '
';
+ html += '' + icon + '';
+ html += '' + timestamp + '';
+ html += '' + event.event_type + '';
+ if (event.model_type) {
+ html += '[' + event.model_type + ']';
+ }
+ if (event.session_id) {
+ html += '' + event.session_id + '';
+ }
+ if (event.details && Object.keys(event.details).length > 0) {
+ html += '' + JSON.stringify(event.details) + '';
+ }
+ html += '
';
+ });
+ html += '
';
+ container.innerHTML = html;
+ }
+
function updateAlerts(alerts) {
const container = document.getElementById('alerts-container');
container.innerHTML = '';
@@ -1719,32 +1867,6 @@ HTML_TEMPLATE = """
});
}
- function renderTimeline(events) {
- const el = document.getElementById('scale-timeline');
- if (!Array.isArray(events) || events.length === 0) {
- el.innerHTML = '
이벤트 없음
';
- return;
- }
- const rows = events.slice().reverse().map(ev => {
- const ts = ev.timestamp ? new Date(ev.timestamp*1000).toLocaleTimeString() : '';
- if (ev.type === 'worker_scale') {
- return `[${ts}] WORKERS ${ev.action.toUpperCase()} -> ${ev.new_count} (queue=${ev.queue_size}, vram=${(ev.vram_usage*100||0).toFixed(1)}%)`;
- }
- if (ev.type === 'session') {
- return `[${ts}] SESSION ${ev.action.toUpperCase()} (${ev.model}) size=${ev.pool_size}`;
- }
- return `[${ts}] ${ev.type}`;
- }).join('\n');
- el.textContent = rows;
- }
-
- function refreshTimeline() {
- fetch('/api/scale-events')
- .then(r => r.json())
- .then(data => renderTimeline(data.events || []))
- .catch(() => { document.getElementById('scale-timeline').innerHTML = '
타임라인 로딩 실패
'; });
- }
-
// 페이지 로드 시 초기화
document.addEventListener('DOMContentLoaded', function() {
// 로그 및 성능 통계 초기 로딩
@@ -1753,6 +1875,7 @@ HTML_TEMPLATE = """
refreshModelUsageStats();
refreshSystemAlerts();
refreshErrors();
+ refreshTimeline();
// 30초마다 로그 및 성능 통계 자동 새로고침
setInterval(refreshLogs, 30000);
@@ -1760,6 +1883,7 @@ HTML_TEMPLATE = """
setInterval(refreshModelUsageStats, 15000); // 15초마다
setInterval(refreshSystemAlerts, 10000); // 10초마다
setInterval(refreshErrors, 10000); // 10초마다
+ setInterval(refreshTimeline, 15000); // 15초마다 타임라인 새로고침
});