@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/CircuitBreakerPanel.tsx

@@ -0,0 +1,292 @@
+/**
+ * CircuitBreakerPanel — Circuit breaker status at all 3 levels with manual toggles
+ *
+ * Shows global, per-project, and recently-tripped feature breaker state.
+ * Fetches GET /api/usage/circuit-breakers and POSTs trip/reset actions.
+ */
+import { useState, useEffect, useCallback } from 'react';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface BreakerState {
+  level: 'global' | 'project' | 'feature';
+  key: string;
+  label: string;
+  status: 'active' | 'stopped';
+  reason?: string;
+  integrated?: boolean;
+}
+
+interface CircuitBreakerData {
+  success: true;
+  breakers: BreakerState[];
+  recentlyTripped: BreakerState[];
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export default function CircuitBreakerPanel() {
+  const [data, setData] = useState<CircuitBreakerData | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [pendingAction, setPendingAction] = useState<string | null>(null);
+  const [confirm, setConfirm] = useState<{ level: string; key: string; action: 'trip' | 'reset'; label: string } | null>(null);
+
+  const fetchData = useCallback(() => {
+    fetch('/api/usage/circuit-breakers')
+      .then((res) => res.json())
+      .then((json) => {
+        if (json.success) {
+          setData(json as CircuitBreakerData);
+        } else {
+          setError(json.error ?? 'Unknown error');
+        }
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleToggle = async (level: string, key: string, action: 'trip' | 'reset'): Promise<void> => {
+    const actionKey = `${level}:${key}`;
+    setPendingAction(actionKey);
+    setConfirm(null);
+
+    try {
+      const res = await fetch('/api/usage/circuit-breakers', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ level, key, action }),
+      });
+      const json = await res.json();
+      if (!json.success) {
+        setError(json.error ?? 'Toggle failed');
+      } else {
+        // Refresh state
+        fetchData();
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Toggle failed');
+    } finally {
+      setPendingAction(null);
+    }
+  };
+
+  const requestToggle = (breaker: BreakerState): void => {
+    const action = breaker.status === 'active' ? 'trip' : 'reset';
+    setConfirm({ level: breaker.level, key: breaker.key, action, label: breaker.label });
+  };
+
+  if (loading) {
+    return (
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
+        <div className="animate-pulse space-y-3">
+          <div className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-1/3" />
+          <div className="space-y-2">
+            {[...Array(4)].map((_, i) => (
+              <div key={i} className="h-8 bg-gray-200 dark:bg-gray-700 rounded" />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !data) {
+    return (
+      <div className="bg-white dark:bg-gray-800 border border-red-200 dark:border-red-800 rounded-lg p-4 shadow-sm">
+        <p className="text-sm text-red-600 dark:text-red-400">Failed to load circuit breakers: {error}</p>
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  const globalBreaker = data.breakers.find((b) => b.level === 'global');
+  const projectBreakers = data.breakers.filter((b) => b.level === 'project');
+  const featureBreakers = data.recentlyTripped;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+          Circuit Breakers
+        </h3>
+        <button
+          onClick={fetchData}
+          className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+          title="Refresh"
+        >
+          Refresh
+        </button>
+      </div>
+
+      {/* Confirmation Dialog */}
+      {confirm && (
+        <div className="mb-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
+          <p className="text-sm text-amber-800 dark:text-amber-200 mb-2">
+            {confirm.action === 'trip'
+              ? `Stop all traffic for "${confirm.label}"?`
+              : `Re-enable traffic for "${confirm.label}"?`}
+          </p>
+          <div className="flex gap-2">
+            <button
+              onClick={() => handleToggle(confirm.level, confirm.key, confirm.action)}
+              className={`px-3 py-1 text-xs font-medium rounded ${
+                confirm.action === 'trip'
+                  ? 'bg-red-600 text-white hover:bg-red-700'
+                  : 'bg-emerald-600 text-white hover:bg-emerald-700'
+              } transition-colors`}
+            >
+              {confirm.action === 'trip' ? 'Confirm Stop' : 'Confirm Reset'}
+            </button>
+            <button
+              onClick={() => setConfirm(null)}
+              className="px-3 py-1 text-xs font-medium text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Error banner (non-fatal) */}
+      {error && data && (
+        <div className="mb-3 p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded text-xs text-red-600 dark:text-red-400">
+          {error}
+        </div>
+      )}
+
+      <div className="space-y-4">
+        {/* Global */}
+        {globalBreaker && (
+          <BreakerRow
+            breaker={globalBreaker}
+            icon="globe"
+            onToggle={requestToggle}
+            isPending={pendingAction === `global:${globalBreaker.key}`}
+          />
+        )}
+
+        {/* Projects */}
+        <div>
+          <p className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
+            Projects
+          </p>
+          <div className="space-y-1.5">
+            {projectBreakers.map((b) => (
+              <BreakerRow
+                key={b.key}
+                breaker={b}
+                icon="project"
+                onToggle={requestToggle}
+                isPending={pendingAction === `project:${b.key}`}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Recently Tripped Features */}
+        <div>
+          <p className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
+            Recently Tripped Features (24h)
+          </p>
+          {featureBreakers.length === 0 ? (
+            <p className="text-xs text-gray-400 dark:text-gray-500 italic">None</p>
+          ) : (
+            <div className="space-y-1.5">
+              {featureBreakers.map((b) => (
+                <BreakerRow
+                  key={b.key}
+                  breaker={b}
+                  icon="feature"
+                  onToggle={requestToggle}
+                  isPending={pendingAction === `feature:${b.key}`}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// =============================================================================
+// SUB-COMPONENT: BreakerRow
+// =============================================================================
+
+interface BreakerRowProps {
+  breaker: BreakerState;
+  icon: 'globe' | 'project' | 'feature';
+  onToggle: (breaker: BreakerState) => void;
+  isPending: boolean;
+}
+
+const ICONS: Record<string, string> = {
+  globe: '\uD83C\uDF10',
+  project: '\uD83D\uDCE6',
+  feature: '\u26A1',
+};
+
+function BreakerRow({ breaker, icon, onToggle, isPending }: BreakerRowProps) {
+  const isActive = breaker.status === 'active';
+  const isNotIntegrated = breaker.level === 'project' && breaker.integrated === false;
+
+  return (
+    <div className={`flex items-center justify-between py-1.5 px-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors ${isNotIntegrated ? 'opacity-50' : ''}`}>
+      <div className="flex items-center gap-2 min-w-0">
+        <span className="text-sm flex-shrink-0">{ICONS[icon]}</span>
+        <span className={`text-sm truncate ${isNotIntegrated ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}`}>
+          {breaker.label}
+        </span>
+        {isNotIntegrated && (
+          <span className="text-[10px] text-gray-400 dark:text-gray-500 flex-shrink-0">(no SDK)</span>
+        )}
+        {breaker.reason && (
+          <span className="text-xs text-gray-400 dark:text-gray-500 truncate" title={breaker.reason}>
+            ({breaker.reason})
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-2 flex-shrink-0 ml-2">
+        {isNotIntegrated ? (
+          <span className="inline-flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500">
+            <span className="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600" />
+            N/A
+          </span>
+        ) : (
+          <span className={`inline-flex items-center gap-1 text-xs font-medium ${
+            isActive
+              ? 'text-emerald-600 dark:text-emerald-400'
+              : 'text-red-600 dark:text-red-400'
+          }`}>
+            <span className={`w-1.5 h-1.5 rounded-full ${isActive ? 'bg-emerald-500' : 'bg-red-500'}`} />
+            {isActive ? 'Active' : 'Stopped'}
+          </span>
+        )}
+        <button
+          onClick={() => onToggle(breaker)}
+          disabled={isPending}
+          className={`px-2 py-0.5 text-xs rounded border transition-colors ${
+            isPending
+              ? 'opacity-50 cursor-wait'
+              : isActive
+                ? 'text-red-600 border-red-200 hover:bg-red-50 dark:text-red-400 dark:border-red-800 dark:hover:bg-red-900/20'
+                : 'text-emerald-600 border-emerald-200 hover:bg-emerald-50 dark:text-emerald-400 dark:border-emerald-800 dark:hover:bg-emerald-900/20'
+          }`}
+        >
+          {isPending ? '...' : isActive ? 'Trip' : 'Reset'}
+        </button>
+      </div>
+    </div>
+  );
+}