@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/standard/dashboard/src/components/usage/react/UsageTable.tsx

@@ -0,0 +1,385 @@
+/**
+ * UsageTable Component
+ * Industrial Command Center aesthetic - dense rows, sparklines, progress bars
+ */
+
+import { useMemo, useState } from 'react';
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  flexRender,
+  type ColumnDef,
+  type SortingState,
+} from '@tanstack/react-table';
+import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
+import { clsx } from 'clsx';
+import {
+  type ProjectTableRow,
+  type ProjectStatus,
+  type UsageRow,
+  type HealthStatus,
+  CB_COLORS,
+  HEALTH_COLORS,
+} from './types';
+import { StatusBadge } from './StatusBadge';
+
+interface UsageTableProps {
+  data: UsageRow[];
+  statusMap: Record<string, ProjectStatus>;
+  loading?: boolean;
+}
+
+/**
+ * Format number with K/M suffix
+ */
+function formatNumber(value: number): string {
+  if (isNaN(value) || value === 0) return '0';
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
+  return value.toFixed(0);
+}
+
+/**
+ * Format currency
+ */
+function formatCurrency(value: number): string {
+  return `$${value.toFixed(2)}`;
+}
+
+/**
+ * Mini sparkline bar chart
+ */
+function Sparkline({ data, className }: { data: number[]; className?: string }) {
+  if (!data.length) return null;
+
+  const max = Math.max(...data, 1);
+  const normalised = data.map((v) => (v / max) * 100);
+
+  return (
+    <div className={clsx('flex items-end gap-0.5 h-4', className)}>
+      {normalised.map((height, i) => (
+        <div
+          key={i}
+          className="w-1 bg-slate-600 rounded-sm transition-all"
+          style={{ height: `${Math.max(height, 5)}%` }}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Progress bar with threshold colours
+ */
+function SpendBar({ percentage, className }: { percentage: number; className?: string }) {
+  const getColour = (pct: number): string => {
+    if (pct >= 90) return 'bg-rose-500';
+    if (pct >= 75) return 'bg-amber-500';
+    if (pct >= 50) return 'bg-yellow-500';
+    return 'bg-emerald-500';
+  };
+
+  return (
+    <div className={clsx('w-full bg-slate-800 rounded-sm h-2 overflow-hidden', className)}>
+      <div
+        className={clsx('h-full rounded-sm transition-all', getColour(percentage))}
+        style={{ width: `${Math.min(percentage, 100)}%` }}
+      />
+    </div>
+  );
+}
+
+/**
+ * Circuit breaker status dot
+ */
+function CBDot({ state }: { state: 'active' | 'tripped' }) {
+  return (
+    <span
+      className={clsx(
+        'inline-block w-3 h-3 rounded-full',
+        CB_COLORS[state],
+        state === 'tripped' && 'animate-pulse'
+      )}
+      title={state === 'active' ? 'Circuit breaker active' : 'Circuit breaker tripped'}
+    />
+  );
+}
+
+/**
+ * Determine health status from lastSeen timestamp
+ */
+function getHealthStatus(lastSeen?: string): HealthStatus {
+  if (!lastSeen) return 'unknown';
+
+  const lastSeenDate = new Date(lastSeen);
+  const hourAgo = Date.now() - 60 * 60 * 1000;
+
+  return lastSeenDate.getTime() > hourAgo ? 'online' : 'idle';
+}
+
+/**
+ * Health indicator dot with tooltip
+ */
+function HealthDot({ lastSeen }: { lastSeen?: string }) {
+  const status = getHealthStatus(lastSeen);
+  const { dot, text } = HEALTH_COLORS[status];
+
+  const label = status === 'online' ? 'Online' : status === 'idle' ? 'Idle' : 'Unknown';
+  const tooltip = lastSeen
+    ? `Last seen: ${new Date(lastSeen).toLocaleString()}`
+    : 'No heartbeat received';
+
+  return (
+    <span className={clsx('flex items-center gap-1', text)} title={tooltip}>
+      <span>{dot}</span>
+      <span className="text-xs hidden sm:inline">{label}</span>
+    </span>
+  );
+}
+
+/**
+ * Transform usage data + status map into table rows
+ */
+function transformToTableRows(
+  usageData: UsageRow[],
+  statusMap: Record<string, ProjectStatus>
+): ProjectTableRow[] {
+  // Group usage by project
+  const projectActivity = new Map<string, { total: number; trend: number[] }>();
+
+  for (const row of usageData) {
+    const existing = projectActivity.get(row.project_id);
+    const activity =
+      (row.d1_reads || 0) +
+      (row.d1_writes || 0) +
+      (row.kv_reads || 0) +
+      (row.kv_writes || 0) +
+      (row.workers_requests || 0);
+
+    if (existing) {
+      existing.total += activity;
+      existing.trend.push(activity);
+    } else {
+      projectActivity.set(row.project_id, { total: activity, trend: [activity] });
+    }
+  }
+
+  // Combine with status data
+  const rows: ProjectTableRow[] = [];
+
+  // First add projects from status map
+  for (const [projectId, status] of Object.entries(statusMap)) {
+    const activityData = projectActivity.get(projectId) || { total: 0, trend: [] };
+    rows.push({
+      id: projectId,
+      name: projectId.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()),
+      status: status.status,
+      activity: activityData.total,
+      activityTrend: activityData.trend.slice(-6), // Last 6 data points
+      spend: status.spend,
+      cap: status.cap,
+      percentage: status.percentage,
+      circuitBreaker: status.circuitBreaker,
+      lastSeen: status.lastSeen,
+    });
+  }
+
+  // Add any projects from usage data not in status map
+  for (const [projectId, activityData] of projectActivity) {
+    if (!statusMap[projectId]) {
+      rows.push({
+        id: projectId,
+        name: projectId.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()),
+        status: 'RUN',
+        activity: activityData.total,
+        activityTrend: activityData.trend.slice(-6),
+        spend: 0,
+        cap: 100,
+        percentage: 0,
+        circuitBreaker: 'active',
+      });
+    }
+  }
+
+  return rows;
+}
+
+/**
+ * Sorting indicator
+ */
+function SortIndicator({ isSorted }: { isSorted: false | 'asc' | 'desc' }) {
+  if (!isSorted) {
+    return <ChevronsUpDown className="w-3 h-3 text-slate-600" />;
+  }
+  return isSorted === 'asc' ? (
+    <ChevronUp className="w-3 h-3 text-slate-400" />
+  ) : (
+    <ChevronDown className="w-3 h-3 text-slate-400" />
+  );
+}
+
+/**
+ * Loading skeleton
+ */
+function TableSkeleton() {
+  return (
+    <div className="bg-slate-900 rounded-sm border border-slate-800 overflow-hidden">
+      <div className="animate-pulse">
+        {/* Header */}
+        <div className="h-10 bg-slate-800/50 border-b border-slate-700" />
+        {/* Rows */}
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className="h-12 border-b border-slate-800 flex items-center px-4 gap-4">
+            <div className="h-4 bg-slate-800 rounded w-24" />
+            <div className="h-4 bg-slate-800 rounded w-16" />
+            <div className="flex-1 h-2 bg-slate-800 rounded" />
+            <div className="h-3 bg-slate-800 rounded-full w-3" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function UsageTable({ data, statusMap, loading = false }: UsageTableProps) {
+  const [sorting, setSorting] = useState<SortingState>([{ id: 'percentage', desc: true }]);
+
+  const tableData = useMemo(() => transformToTableRows(data, statusMap), [data, statusMap]);
+
+  const columns = useMemo<ColumnDef<ProjectTableRow>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: 'Project',
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <StatusBadge status={row.original.status} size="sm" showLabel={false} />
+            <span className="font-mono text-sm text-slate-200 truncate max-w-[150px]">
+              {row.original.name}
+            </span>
+          </div>
+        ),
+      },
+      {
+        accessorKey: 'activity',
+        header: 'Activity',
+        cell: ({ row }) => (
+          <div className="flex items-center gap-3">
+            {/* Hide sparkline on mobile */}
+            <Sparkline data={row.original.activityTrend} className="hidden sm:flex" />
+            <span className="font-mono text-sm text-slate-300">
+              {formatNumber(row.original.activity)}
+            </span>
+          </div>
+        ),
+      },
+      {
+        accessorKey: 'percentage',
+        header: 'Spend',
+        cell: ({ row }) => (
+          <div className="flex items-center gap-3 min-w-[120px]">
+            <SpendBar percentage={row.original.percentage} className="flex-1" />
+            <span className="font-mono text-xs text-slate-400 w-12 text-right">
+              {row.original.percentage.toFixed(0)}%
+            </span>
+          </div>
+        ),
+      },
+      {
+        accessorKey: 'spend',
+        header: 'Cost',
+        cell: ({ row }) => (
+          <span className="font-mono text-sm text-slate-300">
+            {formatCurrency(row.original.spend)}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'circuitBreaker',
+        header: 'CB',
+        cell: ({ row }) => (
+          <div className="flex justify-center">
+            <CBDot state={row.original.circuitBreaker} />
+          </div>
+        ),
+      },
+      {
+        accessorKey: 'lastSeen',
+        header: 'Health',
+        cell: ({ row }) => (
+          <div className="flex justify-center">
+            <HealthDot lastSeen={row.original.lastSeen} />
+          </div>
+        ),
+      },
+    ],
+    []
+  );
+
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  if (loading) return <TableSkeleton />;
+
+  if (tableData.length === 0) {
+    return (
+      <div className="bg-slate-900 rounded-sm border border-slate-800 p-8 text-center">
+        <p className="text-slate-500 font-mono text-sm">No project data available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-slate-900 rounded-sm border border-slate-800 overflow-hidden">
+      <table className="w-full">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id} className="bg-slate-800/50 border-b border-slate-700">
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className={clsx(
+                    'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-400',
+                    'cursor-pointer hover:text-slate-200 transition-colors select-none'
+                  )}
+                  onClick={header.column.getToggleSortingHandler()}
+                >
+                  <div className="flex items-center gap-1">
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                    <SortIndicator isSorted={header.column.getIsSorted()} />
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <tr
+              key={row.id}
+              className={clsx(
+                'border-b border-slate-800 hover:bg-slate-800/30 transition-colors',
+                row.original.status === 'STOP' && 'bg-rose-500/5'
+              )}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id} className="px-4 py-3">
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default UsageTable;

package/templates/standard/dashboard/src/components/usage/unified/CircuitBreakerEvents.tsx

@@ -0,0 +1,305 @@
+/**
+ * CircuitBreakerEvents Component (React)
+ *
+ * React version of the Circuit Breaker Event Log for the unified dashboard.
+ * Displays recent circuit breaker trip/reset events.
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { RefreshCw, AlertTriangle, Zap, Check, Pause, Play } from 'lucide-react';
+import { clsx } from 'clsx';
+import { fetchWithDedup } from '../../../lib/usage/fetchWithDedup';
+
+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;
+}
+
+type EventTypeFilter = '' | 'trip' | 'reset';
+
+function getEventIcon(eventType: string) {
+  switch (eventType) {
+    case 'trip':
+      return <Zap className="w-3.5 h-3.5" />;
+    case 'reset':
+      return <Check className="w-3.5 h-3.5" />;
+    case 'manual_disable':
+      return <Pause className="w-3.5 h-3.5" />;
+    case 'manual_enable':
+      return <Play className="w-3.5 h-3.5" />;
+    default:
+      return <Zap className="w-3.5 h-3.5" />;
+  }
+}
+
+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();
+}
+
+const eventTypeColors: Record<string, { icon: string; badge: string }> = {
+  trip: {
+    icon: 'bg-rose-500/20 text-rose-400',
+    badge: 'bg-rose-500/20 text-rose-400',
+  },
+  reset: {
+    icon: 'bg-emerald-500/20 text-emerald-400',
+    badge: 'bg-emerald-500/20 text-emerald-400',
+  },
+  manual_disable: {
+    icon: 'bg-amber-500/20 text-amber-400',
+    badge: 'bg-amber-500/20 text-amber-400',
+  },
+  manual_enable: {
+    icon: 'bg-blue-500/20 text-blue-400',
+    badge: 'bg-blue-500/20 text-blue-400',
+  },
+};
+
+export function CircuitBreakerEvents() {
+  const [events, setEvents] = useState<CircuitBreakerEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+  const [filter, setFilter] = useState<EventTypeFilter>('');
+
+  // Ref to track current filter for use in interval callback
+  const filterRef = useRef(filter);
+
+  // Keep ref in sync with state
+  useEffect(() => {
+    filterRef.current = filter;
+  }, [filter]);
+
+  const fetchEvents = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const params = new URLSearchParams({ limit: '50' });
+      // Use ref to get current filter value
+      if (filterRef.current) {
+        params.set('eventType', filterRef.current);
+      }
+
+      const data = await fetchWithDedup<{
+        success: boolean;
+        events?: CircuitBreakerEvent[];
+        error?: string;
+      }>(`/api/usage/features/circuit-breaker-events?${params}`);
+
+      if (data.success) {
+        setEvents(data.events || []);
+        setLastUpdated(new Date());
+      } else {
+        throw new Error(data.error || 'Failed to fetch events');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  }, []); // No dependencies - uses ref for filter
+
+  // Fetch on mount and when filter changes
+  useEffect(() => {
+    fetchEvents();
+  }, [filter, fetchEvents]);
+
+  // Separate stable interval - doesn't restart on filter change
+  useEffect(() => {
+    const interval = setInterval(fetchEvents, 60_000);
+    return () => clearInterval(interval);
+  }, [fetchEvents]);
+
+  if (loading && events.length === 0) {
+    return (
+      <div className="bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-sm p-6">
+        <div className="flex items-center justify-center gap-2 text-gray-600 dark:text-slate-400">
+          <RefreshCw className="w-4 h-4 animate-spin" />
+          <span className="text-sm">Loading circuit breaker events...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-sm p-6">
+        <div className="flex items-center gap-2 text-rose-400">
+          <AlertTriangle className="w-4 h-4" />
+          <span className="text-sm">{error}</span>
+        </div>
+        <button
+          type="button"
+          onClick={fetchEvents}
+          className="mt-3 px-3 py-1.5 bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-300 text-xs font-mono rounded-sm"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-sm">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-slate-800">
+        <div className="flex items-center gap-3">
+          <h3 className="text-sm font-semibold text-gray-900 dark:text-slate-200">
+            Circuit Breaker Events
+          </h3>
+          <span className="text-xs text-gray-500 dark:text-slate-500 bg-gray-100 dark:bg-slate-800 px-2 py-0.5 rounded">
+            {events.length} event{events.length !== 1 ? 's' : ''}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <select
+            value={filter}
+            onChange={(e) => setFilter(e.target.value as EventTypeFilter)}
+            className="bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-sm px-2 py-1 text-xs text-gray-700 dark:text-slate-300"
+          >
+            <option value="">All events</option>
+            <option value="trip">Trips only</option>
+            <option value="reset">Resets only</option>
+          </select>
+          <button
+            type="button"
+            onClick={fetchEvents}
+            disabled={loading}
+            className="p-1.5 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-sm transition-colors"
+            title="Refresh"
+          >
+            <RefreshCw
+              className={clsx(
+                'w-4 h-4 text-gray-600 dark:text-slate-400',
+                loading && 'animate-spin'
+              )}
+            />
+          </button>
+        </div>
+      </div>
+
+      {/* Empty State */}
+      {events.length === 0 && (
+        <div className="p-8 text-center">
+          <div className="text-3xl mb-3">⚡</div>
+          <h4 className="text-sm font-semibold text-gray-900 dark:text-slate-200 mb-1">
+            No circuit breaker events
+          </h4>
+          <p className="text-xs text-gray-500 dark:text-slate-500 max-w-xs mx-auto">
+            Events will appear here when circuit breakers trip or reset due to budget violations.
+          </p>
+        </div>
+      )}
+
+      {/* Events List */}
+      {events.length > 0 && (
+        <div className="max-h-96 overflow-y-auto">
+          <div className="p-4 space-y-3">
+            {events.map((event) => {
+              const colors = eventTypeColors[event.eventType] || eventTypeColors.trip;
+
+              return (
+                <div
+                  key={event.id}
+                  className="flex items-start gap-3 p-3 bg-gray-100/30 dark:bg-slate-800/30 border border-gray-200/50 dark:border-slate-800/50 rounded-sm hover:border-gray-300 dark:hover:border-slate-700 transition-colors"
+                >
+                  {/* Icon */}
+                  <div
+                    className={clsx(
+                      'flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center',
+                      colors.icon
+                    )}
+                  >
+                    {getEventIcon(event.eventType)}
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    {/* Header */}
+                    <div className="flex items-baseline gap-2 mb-1">
+                      <span className="text-sm font-medium text-gray-800 dark:text-slate-200 truncate">
+                        {event.featureKey}
+                      </span>
+                      <span
+                        className={clsx(
+                          'text-[10px] font-semibold uppercase px-1.5 py-0.5 rounded',
+                          colors.badge
+                        )}
+                      >
+                        {getEventTypeLabel(event.eventType)}
+                      </span>
+                    </div>
+
+                    {/* Reason */}
+                    {event.reason && (
+                      <p className="text-xs text-gray-600 dark:text-slate-400 mb-1 truncate">
+                        {event.reason}
+                      </p>
+                    )}
+
+                    {/* Meta */}
+                    <div className="flex items-center gap-3 text-[10px] text-gray-500 dark:text-slate-500">
+                      <span>{formatTimeAgo(event.createdAt)}</span>
+                      {event.autoReset && (
+                        <span className="px-1.5 py-0.5 bg-indigo-500/20 text-indigo-400 rounded uppercase font-semibold">
+                          Auto-reset
+                        </span>
+                      )}
+                      {event.alertSent && (
+                        <span className="px-1.5 py-0.5 bg-pink-500/20 text-pink-400 rounded uppercase font-semibold">
+                          Alert sent
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="px-4 py-2 border-t border-gray-200 dark:border-slate-800 text-[10px] text-gray-500 dark:text-slate-500">
+        Last updated: {lastUpdated ? lastUpdated.toLocaleTimeString() : '--'}
+      </div>
+    </div>
+  );
+}
+
+export default CircuitBreakerEvents;