@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,669 @@
+---
+/**
+ * CircuitBreakerStatus Component
+ *
+ * Displays the status of KV circuit breakers for all tracked projects.
+ * Shows:
+ * - Global stop flag status
+ * - Per-project circuit breaker status (Scout, Brand Copilot, Australian History MCP, Platform)
+ * - Adaptive sampling mode for platform-usage worker
+ * - D1 write usage and limits
+ *
+ * Data is populated via JavaScript after API fetch.
+ */
+
+// Projects with circuit breakers
+const projects = [
+  { id: 'scout', name: 'Scout', kvKey: 'PROJECT:SCOUT:STATUS' },
+  { id: 'brand-copilot', name: 'Brand Copilot', kvKey: 'PROJECT:BRAND-COPILOT:STATUS' },
+  {
+    id: 'australian-history-mcp',
+    name: 'Australian History MCP',
+    kvKey: 'PROJECT:AUSTRALIAN-HISTORY-MCP:STATUS',
+  },
+  { id: 'platform', name: 'Platform', kvKey: 'PROJECT:PLATFORM:STATUS' },
+];
+---
+
+<div class="circuit-breaker-panel" role="region" aria-label="Circuit breaker status">
+  <div class="panel-header">
+    <h3 class="panel-title">Circuit Breaker Status</h3>
+    <div class="global-status" id="global-status">
+      <span class="global-dot" data-status="active"></span>
+      <span class="global-label">System Active</span>
+    </div>
+  </div>
+
+  <!-- D1 Write Usage -->
+  <div class="d1-usage-section">
+    <div class="d1-header">
+      <span class="d1-label">D1 Writes (24h)</span>
+      <span id="d1-sampling-mode" class="sampling-badge" data-mode="full">FULL</span>
+    </div>
+    <div class="d1-bar-container">
+      <div id="d1-usage-bar" class="d1-bar" style="width: 0%;"></div>
+      <div class="d1-markers">
+        <div class="d1-marker" style="left: 60%;" title="HALF sampling (60%)"></div>
+        <div class="d1-marker" style="left: 80%;" title="QUARTER sampling (80%)"></div>
+        <div class="d1-marker" style="left: 90%;" title="MINIMAL sampling (90%)"></div>
+      </div>
+    </div>
+    <div class="d1-meta">
+      <span id="d1-usage-current">0</span>
+      <span class="d1-separator">/</span>
+      <span id="d1-usage-limit">1,000,000</span>
+      <span class="d1-percentage" id="d1-usage-pct">(0%)</span>
+    </div>
+  </div>
+
+  <!-- Project Circuit Breakers -->
+  <div class="project-breakers">
+    {
+      projects.map((project) => (
+        <div class="breaker-row" data-project={project.id}>
+          <div class="breaker-identity">
+            <span class="breaker-dot" data-status="active" />
+            <span class="breaker-name">{project.name}</span>
+          </div>
+          <div class="breaker-status">
+            <span class="status-label">Active</span>
+          </div>
+          <div class="breaker-actions">
+            <button
+              type="button"
+              class="reset-btn"
+              data-project={project.id}
+              title="Reset circuit breaker"
+              style="display: none;"
+            >
+              Reset
+            </button>
+          </div>
+          <div class="breaker-kv-key">
+            <code class="kv-key">{project.kvKey}</code>
+          </div>
+        </div>
+      ))
+    }
+  </div>
+
+  <!-- Adaptive Sampling Info -->
+  <div class="sampling-info">
+    <div class="sampling-header">
+      <span class="sampling-title">Adaptive Sampling</span>
+    </div>
+    <div class="sampling-modes">
+      <div class="mode-item" data-mode="full">
+        <span class="mode-dot"></span>
+        <span class="mode-label">FULL</span>
+        <span class="mode-desc">&lt;60%: Hourly</span>
+      </div>
+      <div class="mode-item" data-mode="half">
+        <span class="mode-dot"></span>
+        <span class="mode-label">HALF</span>
+        <span class="mode-desc">60-80%: Every 2h</span>
+      </div>
+      <div class="mode-item" data-mode="quarter">
+        <span class="mode-dot"></span>
+        <span class="mode-label">QUARTER</span>
+        <span class="mode-desc">80-90%: Every 4h</span>
+      </div>
+      <div class="mode-item" data-mode="minimal">
+        <span class="mode-dot"></span>
+        <span class="mode-label">MINIMAL</span>
+        <span class="mode-desc">&gt;90%: Daily</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Last Updated -->
+  <div class="panel-footer">
+    <span id="cb-last-updated" class="last-updated">Last checked: --</span>
+  </div>
+</div>
+
+<style>
+  .circuit-breaker-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;
+  }
+
+  .panel-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--usage-text-primary);
+    margin: 0;
+  }
+
+  .global-status {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    background: var(--usage-bg-tertiary);
+    border-radius: var(--usage-radius-md);
+  }
+
+  .global-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    transition: all var(--usage-transition-normal);
+  }
+
+  .global-dot[data-status='active'] {
+    background: var(--usage-status-ok);
+    box-shadow: 0 0 6px var(--usage-status-ok);
+  }
+
+  .global-dot[data-status='stopped'] {
+    background: var(--usage-status-critical);
+    box-shadow: 0 0 6px var(--usage-status-critical);
+    animation: pulse 1s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  .global-label {
+    font-size: 0.6875rem;
+    font-weight: 500;
+    color: var(--usage-text-secondary);
+  }
+
+  /* D1 Usage Section */
+  .d1-usage-section {
+    padding: 0.75rem;
+    background: var(--usage-bg-tertiary);
+    border-radius: var(--usage-radius-lg);
+  }
+
+  .d1-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .d1-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--usage-text-muted);
+  }
+
+  .sampling-badge {
+    font-size: 0.625rem;
+    font-weight: 700;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--usage-radius-sm);
+    background: var(--usage-status-ok-bg);
+    color: var(--usage-status-ok);
+  }
+
+  .sampling-badge[data-mode='half'] {
+    background: var(--usage-status-warning-bg);
+    color: var(--usage-status-warning);
+  }
+
+  .sampling-badge[data-mode='quarter'] {
+    background: var(--usage-accent-purple);
+    color: white;
+  }
+
+  .sampling-badge[data-mode='minimal'] {
+    background: var(--usage-status-critical-bg);
+    color: var(--usage-status-critical);
+  }
+
+  .d1-bar-container {
+    position: relative;
+    height: 8px;
+    background: var(--usage-bg-hover);
+    border-radius: var(--usage-radius-sm);
+    overflow: visible;
+  }
+
+  .d1-bar {
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      var(--usage-status-ok),
+      var(--usage-status-warning),
+      var(--usage-status-critical)
+    );
+    background-size: 167% 100%;
+    border-radius: var(--usage-radius-sm);
+    transition: width var(--usage-transition-slow);
+  }
+
+  .d1-markers {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+
+  .d1-marker {
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    width: 1px;
+    background: var(--usage-text-muted);
+    opacity: 0.5;
+  }
+
+  .d1-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-top: 0.375rem;
+    font-family: var(--usage-font-mono);
+    font-size: 0.6875rem;
+    color: var(--usage-text-secondary);
+  }
+
+  .d1-separator {
+    color: var(--usage-text-muted);
+  }
+
+  .d1-percentage {
+    color: var(--usage-text-muted);
+    margin-left: 0.25rem;
+  }
+
+  /* Project Breakers */
+  .project-breakers {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .breaker-row {
+    display: grid;
+    grid-template-columns: 1fr auto auto auto;
+    gap: 0.75rem;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    background: var(--usage-bg-tertiary);
+    border-radius: var(--usage-radius-md);
+    transition: background var(--usage-transition-fast);
+  }
+
+  .breaker-row:hover {
+    background: var(--usage-bg-hover);
+  }
+
+  .breaker-identity {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .breaker-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .breaker-dot[data-status='active'] {
+    background: var(--usage-status-ok);
+  }
+
+  .breaker-dot[data-status='tripped'] {
+    background: var(--usage-status-critical);
+    animation: pulse 1s ease-in-out infinite;
+  }
+
+  .breaker-dot[data-status='degraded'] {
+    background: var(--usage-status-warning);
+  }
+
+  .breaker-name {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--usage-text-primary);
+  }
+
+  .breaker-status {
+    text-align: right;
+  }
+
+  .status-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    color: var(--usage-text-secondary);
+  }
+
+  .breaker-actions {
+    display: flex;
+    align-items: center;
+  }
+
+  .reset-btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--usage-status-critical);
+    background: var(--usage-status-critical-bg);
+    border: 1px solid var(--usage-status-critical);
+    border-radius: var(--usage-radius-sm);
+    cursor: pointer;
+    transition: all var(--usage-transition-fast);
+  }
+
+  .reset-btn:hover {
+    background: var(--usage-status-critical);
+    color: white;
+  }
+
+  .reset-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .reset-btn.loading {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+
+  .breaker-kv-key {
+    display: none; /* Hidden by default, shown on hover or expanded view */
+  }
+
+  .kv-key {
+    font-family: var(--usage-font-mono);
+    font-size: 0.625rem;
+    color: var(--usage-text-muted);
+    background: var(--usage-bg-primary);
+    padding: 0.125rem 0.25rem;
+    border-radius: var(--usage-radius-sm);
+  }
+
+  /* Sampling Info */
+  .sampling-info {
+    border-top: 1px solid var(--usage-border-subtle);
+    padding-top: 0.75rem;
+  }
+
+  .sampling-header {
+    margin-bottom: 0.5rem;
+  }
+
+  .sampling-title {
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--usage-text-muted);
+  }
+
+  .sampling-modes {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.5rem;
+  }
+
+  .mode-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.375rem;
+    background: var(--usage-bg-tertiary);
+    border-radius: var(--usage-radius-md);
+    opacity: 0.5;
+    transition: opacity var(--usage-transition-fast);
+  }
+
+  .mode-item.active {
+    opacity: 1;
+    background: var(--usage-bg-hover);
+  }
+
+  .mode-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--usage-text-muted);
+  }
+
+  .mode-item[data-mode='full'] .mode-dot {
+    background: var(--usage-status-ok);
+  }
+  .mode-item[data-mode='half'] .mode-dot {
+    background: var(--usage-status-warning);
+  }
+  .mode-item[data-mode='quarter'] .mode-dot {
+    background: var(--usage-accent-purple);
+  }
+  .mode-item[data-mode='minimal'] .mode-dot {
+    background: var(--usage-status-critical);
+  }
+
+  .mode-label {
+    font-size: 0.625rem;
+    font-weight: 700;
+    color: var(--usage-text-primary);
+  }
+
+  .mode-desc {
+    font-size: 0.5625rem;
+    color: var(--usage-text-muted);
+    text-align: center;
+  }
+
+  /* Footer */
+  .panel-footer {
+    border-top: 1px solid var(--usage-border-subtle);
+    padding-top: 0.5rem;
+  }
+
+  .last-updated {
+    font-size: 0.625rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Responsive */
+  @media (max-width: 480px) {
+    .sampling-modes {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .breaker-row {
+      grid-template-columns: 1fr auto auto;
+    }
+
+    .breaker-kv-key {
+      display: none;
+    }
+
+    .reset-btn {
+      padding: 0.2rem 0.4rem;
+      font-size: 0.5625rem;
+    }
+  }
+</style>
+
+<script>
+  /**
+   * CircuitBreakerStatus JavaScript
+   *
+   * Updates circuit breaker display from API data.
+   */
+
+  interface CircuitBreakerData {
+    globalStop: boolean;
+    samplingMode: 'FULL' | 'HALF' | 'QUARTER' | 'MINIMAL';
+    d1Writes24h: number;
+    d1Limit: number;
+    projects: Array<{
+      id: string;
+      status: 'active' | 'tripped' | 'degraded';
+      label: string;
+    }>;
+    lastUpdated: string;
+  }
+
+  // Format large numbers
+  function formatNumber(n: number): string {
+    return n.toLocaleString();
+  }
+
+  // Update circuit breaker display
+  window.updateCircuitBreakerStatus = function (data: CircuitBreakerData) {
+    // Global status
+    const globalDot = document.querySelector('.global-dot') as HTMLElement;
+    const globalLabel = document.querySelector('.global-label') as HTMLElement;
+    if (globalDot && globalLabel) {
+      globalDot.setAttribute('data-status', data.globalStop ? 'stopped' : 'active');
+      globalLabel.textContent = data.globalStop ? 'GLOBAL STOP' : 'System Active';
+    }
+
+    // Sampling mode badge
+    const samplingBadge = document.getElementById('d1-sampling-mode');
+    if (samplingBadge) {
+      samplingBadge.setAttribute('data-mode', data.samplingMode.toLowerCase());
+      samplingBadge.textContent = data.samplingMode;
+    }
+
+    // D1 usage bar
+    const d1Bar = document.getElementById('d1-usage-bar');
+    const d1Current = document.getElementById('d1-usage-current');
+    const d1Limit = document.getElementById('d1-usage-limit');
+    const d1Pct = document.getElementById('d1-usage-pct');
+
+    const usagePct = (data.d1Writes24h / data.d1Limit) * 100;
+
+    if (d1Bar) {
+      d1Bar.style.width = `${Math.min(usagePct, 100)}%`;
+    }
+    if (d1Current) {
+      d1Current.textContent = formatNumber(data.d1Writes24h);
+    }
+    if (d1Limit) {
+      d1Limit.textContent = formatNumber(data.d1Limit);
+    }
+    if (d1Pct) {
+      d1Pct.textContent = `(${usagePct.toFixed(1)}%)`;
+    }
+
+    // Project statuses
+    for (const project of data.projects) {
+      const row = document.querySelector(`.breaker-row[data-project="${project.id}"]`);
+      if (!row) continue;
+
+      const dot = row.querySelector('.breaker-dot') as HTMLElement;
+      const label = row.querySelector('.status-label') as HTMLElement;
+      const resetBtn = row.querySelector('.reset-btn') as HTMLButtonElement;
+
+      if (dot) {
+        dot.setAttribute('data-status', project.status);
+      }
+      if (label) {
+        label.textContent = project.label;
+      }
+      // Show reset button only for paused/tripped projects
+      if (resetBtn) {
+        const isPausedOrTripped =
+          project.status === 'tripped' || project.label.toLowerCase() === 'paused';
+        resetBtn.style.display = isPausedOrTripped ? 'inline-block' : 'none';
+      }
+    }
+
+    // Sampling mode indicators
+    const modeItems = document.querySelectorAll('.mode-item');
+    modeItems.forEach((item) => {
+      const mode = (item as HTMLElement).dataset.mode?.toUpperCase();
+      if (mode === data.samplingMode) {
+        item.classList.add('active');
+      } else {
+        item.classList.remove('active');
+      }
+    });
+
+    // Last updated
+    const lastUpdatedEl = document.getElementById('cb-last-updated');
+    if (lastUpdatedEl) {
+      lastUpdatedEl.textContent = `Last checked: ${data.lastUpdated}`;
+    }
+  };
+
+  // Handle reset button clicks
+  async function handleResetClick(event: Event) {
+    const button = event.currentTarget as HTMLButtonElement;
+    const projectId = button.dataset.project;
+
+    if (!projectId) return;
+
+    // Confirm reset
+    const confirmed = confirm(`Reset circuit breaker for ${projectId}?`);
+    if (!confirmed) return;
+
+    // Show loading state
+    button.classList.add('loading');
+    button.textContent = '...';
+
+    try {
+      // Include credentials to pass Cloudflare Access JWT cookie
+      const response = await fetch('/api/usage/reset-circuit-breaker', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ service: projectId }),
+        credentials: 'include',
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        // Trigger refresh of circuit breaker data
+        window.dispatchEvent(new CustomEvent('usage:refresh-projects'));
+        button.style.display = 'none';
+      } else {
+        alert(`Failed to reset: ${result.error || 'Unknown error'}`);
+      }
+    } catch (error) {
+      console.error('[CircuitBreaker] Reset error:', error);
+      alert('Failed to reset circuit breaker');
+    } finally {
+      button.classList.remove('loading');
+      button.textContent = 'Reset';
+    }
+  }
+
+  // Attach click handlers to all reset buttons
+  document.querySelectorAll('.reset-btn').forEach((btn) => {
+    btn.addEventListener('click', handleResetClick);
+  });
+
+  // Type declaration
+  declare global {
+    interface Window {
+      updateCircuitBreakerStatus: (data: CircuitBreakerData) => void;
+    }
+  }
+</script>