dashcaddy/status/js/live-events.js

// ========== 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;
})();