@littlebearapps/platform-admin-sdk 2.0.0 → 2.1.0

package/templates/standard/dashboard/src/components/reports/CircuitBreakerReport.tsx

@@ -0,0 +1,474 @@
+/**
+ * Circuit Breaker Report Component
+ * Shows global, project, and feature-level circuit breaker states with trip/reset controls
+ */
+import { useState, useEffect, useCallback } from 'react';
+
+interface BreakerState {
+  level: 'global' | 'project' | 'feature';
+  key: string;
+  label: string;
+  status: 'active' | 'stopped';
+  reason?: string;
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const isActive = status === 'active';
+  return (
+    <span className={`px-2 py-0.5 text-xs font-semibold rounded ${
+      isActive
+        ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+        : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
+    }`}>
+      {isActive ? 'ACTIVE' : 'STOPPED'}
+    </span>
+  );
+}
+
+function LevelBadge({ level }: { level: string }) {
+  const colours: Record<string, string> = {
+    global: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
+    project: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+    feature: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300',
+  };
+  return (
+    <span className={`px-2 py-0.5 text-xs font-semibold rounded ${colours[level] || colours.feature}`}>
+      {level.toUpperCase()}
+    </span>
+  );
+}
+
+// Inline confirmation with reason input
+function ActionConfirm({
+  breaker,
+  action,
+  onConfirm,
+  onCancel,
+}: {
+  breaker: BreakerState;
+  action: 'trip' | 'reset';
+  onConfirm: (reason: string) => void;
+  onCancel: () => void;
+}) {
+  const [reason, setReason] = useState('');
+  const isTrip = action === 'trip';
+  const isGlobal = breaker.level === 'global';
+
+  return (
+    <div className={`mt-2 p-3 rounded-lg border ${
+      isTrip
+        ? 'bg-red-50 dark:bg-red-900/10 border-red-200 dark:border-red-800'
+        : 'bg-green-50 dark:bg-green-900/10 border-green-200 dark:border-green-800'
+    }`}>
+      <p className={`text-sm font-medium ${isTrip ? 'text-red-700 dark:text-red-300' : 'text-green-700 dark:text-green-300'}`}>
+        {isTrip && isGlobal && 'WARNING: This will stop ALL features across ALL projects.'}
+        {isTrip && breaker.level === 'project' && `This will stop all features for ${breaker.label}.`}
+        {isTrip && breaker.level === 'feature' && `This will stop the feature: ${breaker.label}.`}
+        {!isTrip && `Reset ${breaker.label} to active?`}
+      </p>
+      <div className="mt-2 flex items-center gap-2">
+        <input
+          type="text"
+          placeholder="Reason (optional)"
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          className="flex-1 px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"
+        />
+        <button
+          onClick={() => onConfirm(reason)}
+          className={`px-3 py-1.5 text-sm font-medium rounded-lg text-white ${
+            isTrip
+              ? 'bg-red-600 hover:bg-red-700'
+              : 'bg-green-600 hover:bg-green-700'
+          }`}
+        >
+          {isTrip ? 'Confirm Trip' : 'Confirm Reset'}
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-3 py-1.5 text-sm font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function CircuitBreakerReport() {
+  const [breakers, setBreakers] = useState<BreakerState[]>([]);
+  const [recentlyTripped, setRecentlyTripped] = useState<BreakerState[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [actionTarget, setActionTarget] = useState<{ breaker: BreakerState; action: 'trip' | 'reset' } | null>(null);
+  const [actionMessage, setActionMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [actionLoading, setActionLoading] = useState(false);
+
+  // Manual feature trip state
+  const [manualFeatureKey, setManualFeatureKey] = useState('');
+  const [manualTripping, setManualTripping] = useState(false);
+  const [manualReason, setManualReason] = useState('');
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await fetch('/api/usage/circuit-breakers');
+      if (!res.ok) throw new Error('Failed to fetch circuit breaker data');
+      const data = await res.json();
+      setBreakers(data.breakers || []);
+      setRecentlyTripped(data.recentlyTripped || []);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  async function handleAction(level: string, key: string, action: 'trip' | 'reset', reason: string) {
+    setActionLoading(true);
+    setActionMessage(null);
+    try {
+      const res = await fetch('/api/usage/circuit-breakers', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ level, key, action, reason: reason || undefined }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setActionMessage({ type: 'success', text: `Successfully ${action === 'trip' ? 'tripped' : 'reset'}: ${key}` });
+        setActionTarget(null);
+        await fetchData();
+      } else {
+        setActionMessage({ type: 'error', text: data.error || `Failed to ${action} breaker` });
+      }
+    } catch (e) {
+      setActionMessage({ type: 'error', text: e instanceof Error ? e.message : 'Unknown error' });
+    } finally {
+      setActionLoading(false);
+    }
+  }
+
+  async function handleManualFeatureTrip() {
+    if (!manualFeatureKey.trim()) return;
+    setManualTripping(true);
+    setActionMessage(null);
+    try {
+      const res = await fetch('/api/usage/circuit-breakers', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ level: 'feature', key: manualFeatureKey.trim(), action: 'trip', reason: manualReason || undefined }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setActionMessage({ type: 'success', text: `Tripped feature: ${manualFeatureKey.trim()}` });
+        setManualFeatureKey('');
+        setManualReason('');
+        await fetchData();
+      } else {
+        setActionMessage({ type: 'error', text: data.error || 'Failed to trip feature' });
+      }
+    } catch (e) {
+      setActionMessage({ type: 'error', text: e instanceof Error ? e.message : 'Unknown error' });
+    } finally {
+      setManualTripping(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="bg-white dark:bg-gray-800 rounded-lg border p-4 animate-pulse">
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2"></div>
+            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-12"></div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-red-700 dark:text-red-300">
+        Error loading circuit breaker data: {error}
+      </div>
+    );
+  }
+
+  const globalBreaker = breakers.find(b => b.level === 'global');
+  const projectBreakers = breakers.filter(b => b.level === 'project');
+  const stoppedCount = breakers.filter(b => b.status === 'stopped').length;
+  const activeCount = breakers.filter(b => b.status === 'active').length;
+
+  return (
+    <div className="space-y-6">
+      {/* Action feedback */}
+      {actionMessage && (
+        <div className={`p-3 rounded-lg border text-sm font-medium ${
+          actionMessage.type === 'success'
+            ? 'bg-green-50 dark:bg-green-900/10 border-green-200 dark:border-green-800 text-green-700 dark:text-green-300'
+            : 'bg-red-50 dark:bg-red-900/10 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300'
+        }`}>
+          {actionMessage.text}
+          <button
+            onClick={() => setActionMessage(null)}
+            className="ml-2 text-xs underline opacity-70 hover:opacity-100"
+          >
+            dismiss
+          </button>
+        </div>
+      )}
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className={`bg-white dark:bg-gray-800 rounded-lg border p-4 border-l-4 ${
+          globalBreaker?.status === 'stopped' ? 'border-l-red-500' : 'border-l-green-500'
+        }`}>
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Global Status</p>
+          <p className={`text-2xl font-bold mt-1 ${
+            globalBreaker?.status === 'stopped' ? 'text-red-600' : 'text-green-600'
+          }`}>
+            {globalBreaker?.status === 'stopped' ? 'STOPPED' : 'Active'}
+          </p>
+        </div>
+        <div className={`bg-white dark:bg-gray-800 rounded-lg border p-4 border-l-4 ${
+          stoppedCount > 0 ? 'border-l-red-500' : 'border-l-green-500'
+        }`}>
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Stopped</p>
+          <p className={`text-2xl font-bold mt-1 ${stoppedCount > 0 ? 'text-red-600' : 'text-green-600'}`}>
+            {stoppedCount}
+          </p>
+        </div>
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4 border-l-4 border-l-green-500">
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Active</p>
+          <p className="text-2xl font-bold mt-1 text-green-600">{activeCount}</p>
+        </div>
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4 border-l-4 border-l-orange-500">
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Recently Tripped</p>
+          <p className="text-2xl font-bold mt-1">{recentlyTripped.length}</p>
+        </div>
+      </div>
+
+      {/* Breaker States Table */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border overflow-hidden">
+        <div className="px-4 py-3 border-b">
+          <h3 className="font-semibold text-gray-900 dark:text-white">Circuit Breaker States</h3>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+            Global kill switch and per-project circuit breakers — click Trip/Reset to control
+          </p>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-900/50">
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Level</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Label</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Status</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Reason</th>
+                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {/* Global first */}
+              {globalBreaker && (
+                <tr className="border-b hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                  <td className="px-4 py-3"><LevelBadge level="global" /></td>
+                  <td className="px-4 py-3 font-medium text-gray-900 dark:text-white">{globalBreaker.label}</td>
+                  <td className="px-4 py-3"><StatusBadge status={globalBreaker.status} /></td>
+                  <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">{globalBreaker.reason || '-'}</td>
+                  <td className="px-4 py-3 text-right">
+                    {globalBreaker.status === 'active' ? (
+                      <button
+                        onClick={() => setActionTarget({ breaker: globalBreaker, action: 'trip' })}
+                        disabled={actionLoading}
+                        className="px-3 py-1 text-xs font-medium rounded bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50 disabled:opacity-40"
+                      >
+                        Trip
+                      </button>
+                    ) : (
+                      <button
+                        onClick={() => setActionTarget({ breaker: globalBreaker, action: 'reset' })}
+                        disabled={actionLoading}
+                        className="px-3 py-1 text-xs font-medium rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300 dark:hover:bg-green-900/50 disabled:opacity-40"
+                      >
+                        Reset
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              )}
+              {/* Show inline confirm for global */}
+              {actionTarget?.breaker.level === 'global' && (
+                <tr>
+                  <td colSpan={5} className="px-4 pb-3">
+                    <ActionConfirm
+                      breaker={actionTarget.breaker}
+                      action={actionTarget.action}
+                      onConfirm={(reason) => handleAction('global', actionTarget.breaker.key, actionTarget.action, reason)}
+                      onCancel={() => setActionTarget(null)}
+                    />
+                  </td>
+                </tr>
+              )}
+              {/* Per-project */}
+              {projectBreakers.map(b => (
+                <>
+                  <tr key={b.key} className="border-b hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                    <td className="px-4 py-3"><LevelBadge level="project" /></td>
+                    <td className="px-4 py-3 font-medium text-gray-900 dark:text-white">{b.label}</td>
+                    <td className="px-4 py-3"><StatusBadge status={b.status} /></td>
+                    <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">{b.reason || '-'}</td>
+                    <td className="px-4 py-3 text-right">
+                      {b.status === 'active' ? (
+                        <button
+                          onClick={() => setActionTarget({ breaker: b, action: 'trip' })}
+                          disabled={actionLoading}
+                          className="px-3 py-1 text-xs font-medium rounded bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50 disabled:opacity-40"
+                        >
+                          Trip
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => setActionTarget({ breaker: b, action: 'reset' })}
+                          disabled={actionLoading}
+                          className="px-3 py-1 text-xs font-medium rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300 dark:hover:bg-green-900/50 disabled:opacity-40"
+                        >
+                          Reset
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                  {/* Show inline confirm for this project */}
+                  {actionTarget?.breaker.key === b.key && actionTarget.breaker.level === 'project' && (
+                    <tr key={`${b.key}-confirm`}>
+                      <td colSpan={5} className="px-4 pb-3">
+                        <ActionConfirm
+                          breaker={actionTarget.breaker}
+                          action={actionTarget.action}
+                          onConfirm={(reason) => handleAction('project', b.key, actionTarget.action, reason)}
+                          onCancel={() => setActionTarget(null)}
+                        />
+                      </td>
+                    </tr>
+                  )}
+                </>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Recently Tripped Features */}
+      {recentlyTripped.length > 0 ? (
+        <div className="bg-white dark:bg-gray-800 rounded-lg border overflow-hidden">
+          <div className="px-4 py-3 border-b">
+            <h3 className="font-semibold text-gray-900 dark:text-white">Recently Tripped Features (24h)</h3>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 dark:bg-gray-900/50">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Feature</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Current Status</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Reason</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {recentlyTripped.map(b => (
+                  <>
+                    <tr key={b.key} className="border-b hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                      <td className="px-4 py-3 font-medium text-gray-900 dark:text-white">{b.label}</td>
+                      <td className="px-4 py-3"><StatusBadge status={b.status} /></td>
+                      <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 max-w-xs truncate">
+                        {b.reason || '-'}
+                      </td>
+                      <td className="px-4 py-3 text-right">
+                        {b.status === 'stopped' ? (
+                          <button
+                            onClick={() => setActionTarget({ breaker: b, action: 'reset' })}
+                            disabled={actionLoading}
+                            className="px-3 py-1 text-xs font-medium rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300 dark:hover:bg-green-900/50 disabled:opacity-40"
+                          >
+                            Reset
+                          </button>
+                        ) : (
+                          <button
+                            onClick={() => setActionTarget({ breaker: b, action: 'trip' })}
+                            disabled={actionLoading}
+                            className="px-3 py-1 text-xs font-medium rounded bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50 disabled:opacity-40"
+                          >
+                            Trip
+                          </button>
+                        )}
+                      </td>
+                    </tr>
+                    {actionTarget?.breaker.key === b.key && actionTarget.breaker.level === 'feature' && (
+                      <tr key={`${b.key}-confirm`}>
+                        <td colSpan={4} className="px-4 pb-3">
+                          <ActionConfirm
+                            breaker={actionTarget.breaker}
+                            action={actionTarget.action}
+                            onConfirm={(reason) => handleAction('feature', b.key, actionTarget.action, reason)}
+                            onCancel={() => setActionTarget(null)}
+                          />
+                        </td>
+                      </tr>
+                    )}
+                  </>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      ) : (
+        <div className="bg-green-50 dark:bg-green-900/10 border border-green-200 dark:border-green-800 rounded-lg p-4 text-green-700 dark:text-green-300 text-sm">
+          No feature circuit breakers have tripped in the last 24 hours.
+        </div>
+      )}
+
+      {/* Manual Feature Trip */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border overflow-hidden">
+        <div className="px-4 py-3 border-b">
+          <h3 className="font-semibold text-gray-900 dark:text-white">Manual Feature Control</h3>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+            Trip or manage a specific feature by key (format: project:category:feature)
+          </p>
+        </div>
+        <div className="p-4">
+          <div className="flex items-end gap-3">
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Feature Key</label>
+              <input
+                type="text"
+                placeholder="e.g. my-project:scanner:github"
+                value={manualFeatureKey}
+                onChange={(e) => setManualFeatureKey(e.target.value)}
+                className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"
+              />
+            </div>
+            <div className="w-48">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Reason (optional)</label>
+              <input
+                type="text"
+                placeholder="Manual override"
+                value={manualReason}
+                onChange={(e) => setManualReason(e.target.value)}
+                className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"
+              />
+            </div>
+            <button
+              onClick={handleManualFeatureTrip}
+              disabled={!manualFeatureKey.trim() || manualTripping}
+              className="px-4 py-2 text-sm font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              {manualTripping ? 'Tripping...' : 'Trip Feature'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}