// ========== LIVE DASHBOARD EVENTS (SSE) ========== (function() { let es = null; let reconnectDelay = 1000; const MAX_RECONNECT = 30000; function connect() { if (es) { try { es.close(); } catch (_) {} } es = new EventSource('/api/v1/events/stream'); es.addEventListener('connected', () => { reconnectDelay = 1000; // reset backoff console.log('[SSE] Connected to event stream'); }); // Health status changes → update card dots/badges in real time es.addEventListener('status-change', (e) => { try { const d = JSON.parse(e.data); if (d.serviceId && typeof window.setBadge === 'function') { const up = d.status === 'up' || d.status === 'healthy'; window.setBadge(d.serviceId, up, d.responseTime || null); } } catch (_) {} }); // Resource alerts → toast notification es.addEventListener('resource-alert', (e) => { try { const d = JSON.parse(e.data); const msg = `${d.containerName || d.containerId}: ${d.metric} at ${d.value}% (threshold: ${d.threshold}%)`; if (typeof showNotification === 'function') { showNotification(msg, 'warning'); } } catch (_) {} }); // Container auto-restart es.addEventListener('auto-restart', (e) => { try { const d = JSON.parse(e.data); if (typeof showNotification === 'function') { showNotification(`Container "${d.containerName}" was auto-restarted`, 'info'); } } catch (_) {} }); // Update available → show notification dot on Updates button es.addEventListener('update-available', (e) => { try { const d = JSON.parse(e.data); const updatesBtn = document.getElementById('updates-btn'); if (updatesBtn && !updatesBtn.querySelector('.sse-dot')) { const dot = document.createElement('span'); dot.className = 'sse-dot'; dot.style.cssText = 'display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:middle;'; updatesBtn.appendChild(dot); } if (typeof showNotification === 'function') { showNotification(`Update available for ${d.containerName || d.containerId}`, 'info'); } } catch (_) {} }); // Update start/complete/failed es.addEventListener('update-complete', (e) => { try { const d = JSON.parse(e.data); if (typeof showNotification === 'function') { showNotification(`Update completed: ${d.containerName || d.containerId}`, 'success'); } // Trigger a dashboard refresh if (typeof window.refreshAll === 'function') window.refreshAll(); } catch (_) {} }); es.addEventListener('update-failed', (e) => { try { const d = JSON.parse(e.data); if (typeof showNotification === 'function') { showNotification(`Update failed: ${d.containerName || d.containerId} — ${d.error || 'unknown error'}`, 'error'); } } catch (_) {} }); // Incidents es.addEventListener('incident', (e) => { try { const d = JSON.parse(e.data); if (typeof showNotification === 'function') { if (d.type === 'created') { showNotification(`Incident: ${d.message || d.serviceId}`, 'error'); } else if (d.type === 'resolved') { showNotification(`Resolved: ${d.serviceId || 'incident'}`, 'success'); } } } catch (_) {} }); // Reconnect on error es.onerror = () => { es.close(); console.warn(`[SSE] Disconnected, reconnecting in ${reconnectDelay / 1000}s...`); setTimeout(connect, reconnectDelay); reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT); }; } // Start on page load connect(); // Expose for debugging window._sseReconnect = connect; })();