@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/CircuitBreakerEventLog.astro

@@ -0,0 +1,542 @@
+---
+/**
+ * CircuitBreakerEventLog Component
+ *
+ * Displays recent circuit breaker trip/reset events.
+ * Data is populated via JavaScript after API fetch.
+ *
+ * Features:
+ * - Recent trip/reset events from D1
+ * - Filter by event type
+ * - Click to filter by feature
+ */
+---
+
+<div class="circuit-breaker-log-panel" role="region" aria-label="Circuit breaker event log">
+  <!-- Header -->
+  <div class="panel-header">
+    <div class="header-left">
+      <h3 class="panel-title">Circuit Breaker Events</h3>
+      <span class="event-count" id="cb-event-count">0 events</span>
+    </div>
+    <div class="header-actions">
+      <select id="cb-event-type-filter" class="filter-select" title="Filter by event type">
+        <option value="">All events</option>
+        <option value="trip">Trips only</option>
+        <option value="reset">Resets only</option>
+      </select>
+      <button type="button" class="refresh-btn" id="refresh-cb-events-btn" title="Refresh">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="23 4 23 10 17 10"></polyline>
+          <polyline points="1 20 1 14 7 14"></polyline>
+          <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Empty state -->
+  <div id="cb-events-empty-state" class="empty-state">
+    <div class="empty-icon">⚡</div>
+    <p class="empty-title">No circuit breaker events</p>
+    <p class="empty-desc">
+      Events will appear here when circuit breakers trip or reset due to budget violations.
+    </p>
+  </div>
+
+  <!-- Events list -->
+  <div id="cb-events-container" class="events-container hidden">
+    <div id="cb-events-list" class="events-list">
+      <!-- Events populated via JavaScript -->
+    </div>
+  </div>
+
+  <!-- Last updated -->
+  <div class="panel-footer">
+    <span id="cb-events-last-updated" class="last-updated">Last updated: --</span>
+  </div>
+</div>
+
+<style>
+  .circuit-breaker-log-panel {
+    background: var(--usage-bg-secondary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-xl);
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: baseline;
+    gap: 0.75rem;
+  }
+
+  .panel-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--usage-text-primary);
+    margin: 0;
+  }
+
+  .event-count {
+    font-size: 0.75rem;
+    color: var(--usage-text-muted);
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .filter-select {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-sm);
+    background: var(--usage-bg-primary);
+    color: var(--usage-text-primary);
+    cursor: pointer;
+  }
+
+  .refresh-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.375rem;
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-md);
+    background: var(--usage-bg-primary);
+    color: var(--usage-text-secondary);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .refresh-btn:hover {
+    border-color: var(--usage-primary);
+    color: var(--usage-primary);
+    background: var(--usage-primary-muted);
+  }
+
+  .refresh-btn.loading svg {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 2rem 1rem;
+  }
+
+  .empty-icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .empty-title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--usage-text-primary);
+    margin: 0 0 0.25rem;
+  }
+
+  .empty-desc {
+    font-size: 0.75rem;
+    color: var(--usage-text-muted);
+    margin: 0;
+    max-width: 300px;
+    margin-inline: auto;
+  }
+
+  .events-container {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  .events-container.hidden {
+    display: none;
+  }
+
+  .events-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .panel-footer {
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--usage-border-subtle);
+  }
+
+  .last-updated {
+    font-size: 0.7rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Event item styles */
+  :global(.cb-event-item) {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-subtle);
+    border-radius: var(--usage-radius-md);
+    transition: border-color 0.15s ease;
+  }
+
+  :global(.cb-event-item:hover) {
+    border-color: var(--usage-border-default);
+  }
+
+  :global(.cb-event-icon) {
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    font-size: 0.875rem;
+  }
+
+  :global(.cb-event-icon.trip) {
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+  }
+
+  :global(.cb-event-icon.reset) {
+    background: rgba(34, 197, 94, 0.1);
+    color: #22c55e;
+  }
+
+  :global(.cb-event-icon.manual_disable) {
+    background: rgba(251, 191, 36, 0.1);
+    color: #fbbf24;
+  }
+
+  :global(.cb-event-icon.manual_enable) {
+    background: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+  }
+
+  :global(.cb-event-content) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  :global(.cb-event-header) {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+
+  :global(.cb-event-feature) {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--usage-text-primary);
+    word-break: break-word;
+  }
+
+  :global(.cb-event-type) {
+    font-size: 0.6875rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--usage-radius-sm);
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  :global(.cb-event-type.trip) {
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+  }
+
+  :global(.cb-event-type.reset) {
+    background: rgba(34, 197, 94, 0.1);
+    color: #22c55e;
+  }
+
+  :global(.cb-event-type.manual_disable) {
+    background: rgba(251, 191, 36, 0.1);
+    color: #fbbf24;
+  }
+
+  :global(.cb-event-type.manual_enable) {
+    background: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+  }
+
+  :global(.cb-event-reason) {
+    font-size: 0.75rem;
+    color: var(--usage-text-secondary);
+    margin-bottom: 0.25rem;
+    word-break: break-word;
+  }
+
+  :global(.cb-event-meta) {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted);
+  }
+
+  :global(.cb-event-meta-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  :global(.cb-event-badge) {
+    padding: 0.0625rem 0.25rem;
+    border-radius: var(--usage-radius-xs);
+    font-size: 0.625rem;
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+
+  :global(.cb-event-badge.auto-reset) {
+    background: rgba(99, 102, 241, 0.1);
+    color: #6366f1;
+  }
+
+  :global(.cb-event-badge.alert-sent) {
+    background: rgba(236, 72, 153, 0.1);
+    color: #ec4899;
+  }
+</style>
+
+<script>
+  interface CircuitBreakerEvent {
+    id: string;
+    featureKey: string;
+    eventType: 'trip' | 'reset' | 'manual_disable' | 'manual_enable';
+    reason: string | null;
+    violatedResource: string | null;
+    currentValue: number | null;
+    budgetLimit: number | null;
+    autoReset: boolean;
+    alertSent: boolean;
+    createdAt: string;
+  }
+
+  interface EventsResponse {
+    success: boolean;
+    events: CircuitBreakerEvent[];
+    count: number;
+    timestamp: string;
+  }
+
+  const eventsList = document.getElementById('cb-events-list');
+  const eventsContainer = document.getElementById('cb-events-container');
+  const emptyState = document.getElementById('cb-events-empty-state');
+  const eventCount = document.getElementById('cb-event-count');
+  const lastUpdated = document.getElementById('cb-events-last-updated');
+  const refreshBtn = document.getElementById('refresh-cb-events-btn');
+  const typeFilter = document.getElementById('cb-event-type-filter') as HTMLSelectElement | null;
+
+  function getEventIcon(eventType: string): string {
+    switch (eventType) {
+      case 'trip':
+        return '⚡';
+      case 'reset':
+        return '✓';
+      case 'manual_disable':
+        return '⏸';
+      case 'manual_enable':
+        return '▶';
+      default:
+        return '•';
+    }
+  }
+
+  function getEventTypeLabel(eventType: string): string {
+    switch (eventType) {
+      case 'trip':
+        return 'Trip';
+      case 'reset':
+        return 'Reset';
+      case 'manual_disable':
+        return 'Manual Disable';
+      case 'manual_enable':
+        return 'Manual Enable';
+      default:
+        return eventType;
+    }
+  }
+
+  function formatTimeAgo(dateString: string): string {
+    const date = new Date(dateString + 'Z'); // Assume UTC
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  }
+
+  function createEventItem(event: CircuitBreakerEvent): HTMLElement {
+    const item = document.createElement('div');
+    item.className = 'cb-event-item';
+
+    // Icon
+    const icon = document.createElement('div');
+    icon.className = `cb-event-icon ${event.eventType}`;
+    icon.textContent = getEventIcon(event.eventType);
+    item.appendChild(icon);
+
+    // Content
+    const content = document.createElement('div');
+    content.className = 'cb-event-content';
+
+    // Header (feature + type badge)
+    const header = document.createElement('div');
+    header.className = 'cb-event-header';
+
+    const feature = document.createElement('span');
+    feature.className = 'cb-event-feature';
+    feature.textContent = event.featureKey;
+    header.appendChild(feature);
+
+    const typeBadge = document.createElement('span');
+    typeBadge.className = `cb-event-type ${event.eventType}`;
+    typeBadge.textContent = getEventTypeLabel(event.eventType);
+    header.appendChild(typeBadge);
+
+    content.appendChild(header);
+
+    // Reason (if present)
+    if (event.reason) {
+      const reason = document.createElement('div');
+      reason.className = 'cb-event-reason';
+      reason.textContent = event.reason;
+      content.appendChild(reason);
+    }
+
+    // Meta (time + badges)
+    const meta = document.createElement('div');
+    meta.className = 'cb-event-meta';
+
+    const timeItem = document.createElement('span');
+    timeItem.className = 'cb-event-meta-item';
+    timeItem.textContent = formatTimeAgo(event.createdAt);
+    meta.appendChild(timeItem);
+
+    if (event.autoReset) {
+      const autoResetBadge = document.createElement('span');
+      autoResetBadge.className = 'cb-event-badge auto-reset';
+      autoResetBadge.textContent = 'Auto-reset';
+      meta.appendChild(autoResetBadge);
+    }
+
+    if (event.alertSent) {
+      const alertBadge = document.createElement('span');
+      alertBadge.className = 'cb-event-badge alert-sent';
+      alertBadge.textContent = 'Alert sent';
+      meta.appendChild(alertBadge);
+    }
+
+    content.appendChild(meta);
+    item.appendChild(content);
+
+    return item;
+  }
+
+  function clearEventsList(): void {
+    if (!eventsList) return;
+    while (eventsList.firstChild) {
+      eventsList.removeChild(eventsList.firstChild);
+    }
+  }
+
+  async function fetchEvents(): Promise<void> {
+    if (!eventsList || !eventsContainer || !emptyState || !eventCount || !lastUpdated) return;
+
+    refreshBtn?.classList.add('loading');
+
+    try {
+      const eventType = typeFilter?.value || '';
+      const params = new URLSearchParams({ limit: '50' });
+      if (eventType) params.set('eventType', eventType);
+
+      const res = await fetch(`/api/usage/features/circuit-breaker-events?${params}`, {
+        credentials: 'include',
+      });
+
+      if (!res.ok) {
+        throw new Error(`Failed to fetch events: ${res.status}`);
+      }
+
+      const data: EventsResponse = await res.json();
+
+      if (!data.success || !data.events || data.events.length === 0) {
+        clearEventsList();
+        eventsContainer.classList.add('hidden');
+        emptyState.classList.remove('hidden');
+        eventCount.textContent = '0 events';
+      } else {
+        clearEventsList();
+        data.events.forEach((event) => {
+          eventsList.appendChild(createEventItem(event));
+        });
+        eventsContainer.classList.remove('hidden');
+        emptyState.classList.add('hidden');
+        eventCount.textContent = `${data.events.length} event${data.events.length !== 1 ? 's' : ''}`;
+      }
+
+      lastUpdated.textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
+    } catch (error) {
+      console.error('Error fetching circuit breaker events:', error);
+      eventCount.textContent = 'Error';
+    } finally {
+      refreshBtn?.classList.remove('loading');
+    }
+  }
+
+  // Initial fetch
+  fetchEvents();
+
+  // Refresh button
+  refreshBtn?.addEventListener('click', () => fetchEvents());
+
+  // Filter change
+  typeFilter?.addEventListener('change', () => fetchEvents());
+
+  // Auto-refresh every 60 seconds
+  setInterval(fetchEvents, 60000);
+</script>