@littlebearapps/platform-admin-sdk 2.0.0 → 2.1.0

package/templates/shared/dashboard/src/components/usage/transformers.ts

@@ -0,0 +1,478 @@
+/**
+ * Usage Data Transformers
+ *
+ * Functions to transform API response data into component formats.
+ * Part of task-17.9 (Restructure page layout).
+ */
+
+import type { UnifiedResource, ResourceType, ResourceStatus } from './types';
+import { CF_PRICING } from '../../lib/cloudflare/costs';
+
+/**
+ * Transform API usage data into UnifiedResource array for the table.
+ * Consolidates all resource types (workers, D1, KV, R2, etc.) into a single list.
+ */
+export function transformToUnifiedResources(
+  data: {
+    workers?: Array<{
+      scriptName: string;
+      requests: number;
+      cpuTime: number;
+      duration: number;
+      errors: number;
+    }>;
+    d1?: Array<{
+      databaseId: string;
+      databaseName: string;
+      rowsRead: number;
+      rowsWritten: number;
+      queryCount: number;
+    }>;
+    kv?: Array<{
+      namespaceId: string;
+      namespaceName: string;
+      reads: number;
+      writes: number;
+      deletes: number;
+      lists: number;
+    }>;
+    r2?: Array<{
+      bucketName: string;
+      storageBytes: number;
+      objectCount: number;
+      classAOperations: number;
+      classBOperations: number;
+    }>;
+    vectorize?: Array<{
+      id: string;
+      name: string;
+      vectorCount: number;
+      dimensions: number;
+    }>;
+    pages?: Array<{
+      projectName: string;
+      deployments: number;
+      requests: number;
+      bandwidth: number;
+    }>;
+    durableObjects?: Array<{
+      name: string;
+      requests: number;
+      duration: number;
+      storageBytes: number;
+    }>;
+    aiGateway?: {
+      totalRequests: number;
+      totalTokens: number;
+      cachedRequests: number;
+      modelBreakdown: Array<{
+        model: string;
+        requests: number;
+        tokens: number;
+      }>;
+    };
+  },
+  costs: {
+    workers: number;
+    d1: number;
+    kv: number;
+    r2: number;
+    vectorize: number;
+    pages: number;
+    queues: number;
+    workflows: number;
+    durableObjects: number;
+    aiGateway: number;
+    total: number;
+  },
+  projectMapping: (name: string) => string
+): UnifiedResource[] {
+  const resources: UnifiedResource[] = [];
+
+  // Transform Workers - calculate cost based on actual requests and CPU time
+  if (data.workers) {
+    for (const worker of data.workers) {
+      // Workers pricing: $0.30 per million requests + $0.02 per million CPU ms
+      // Note: $5/mo base cost is account-level, not per-worker
+      const requestCost = (worker.requests / 1_000_000) * CF_PRICING.workers.requestsPerMillion;
+      const cpuCost = (worker.cpuTime / 1_000_000) * CF_PRICING.workers.cpuMsPerMillion;
+      const costPerWorker = requestCost + cpuCost;
+      resources.push({
+        id: `worker-${worker.scriptName}`,
+        name: worker.scriptName,
+        type: 'worker' as ResourceType,
+        project: projectMapping(worker.scriptName),
+        usage: {
+          value: worker.requests,
+          unit: 'requests',
+          formatted: formatNumber(worker.requests),
+        },
+        costCurrent: costPerWorker,
+        costPrior: 0, // Will be filled by comparison data
+        costDelta: 0,
+        costDeltaPct: null,
+        status: getStatusFromThreshold(worker.errors, worker.requests),
+      });
+    }
+  }
+
+  // Transform D1 databases - calculate cost based on actual rowsRead/rowsWritten
+  if (data.d1) {
+    for (const db of data.d1) {
+      // D1 pricing: $0.001 per billion rows read + $1.00 per million rows written
+      const costPerDb =
+        (db.rowsRead / 1_000_000_000) * CF_PRICING.d1.rowsReadPerBillion +
+        (db.rowsWritten / 1_000_000) * CF_PRICING.d1.rowsWrittenPerMillion;
+      resources.push({
+        id: `d1-${db.databaseId}`,
+        name: db.databaseName || db.databaseId,
+        type: 'd1' as ResourceType,
+        project: projectMapping(db.databaseName || db.databaseId),
+        usage: {
+          value: db.rowsRead,
+          unit: 'rows read',
+          formatted: formatNumber(db.rowsRead),
+        },
+        costCurrent: costPerDb,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy' as ResourceStatus,
+      });
+    }
+  }
+
+  // Transform KV namespaces - calculate cost based on actual reads/writes/deletes/lists
+  if (data.kv) {
+    for (const kv of data.kv) {
+      // KV pricing: $0.50/M reads + $5.00/M writes + $5.00/M deletes + $5.00/M lists
+      const costPerKv =
+        (kv.reads / 1_000_000) * CF_PRICING.kv.readsPerMillion +
+        (kv.writes / 1_000_000) * CF_PRICING.kv.writesPerMillion +
+        (kv.deletes / 1_000_000) * CF_PRICING.kv.deletesPerMillion +
+        (kv.lists / 1_000_000) * CF_PRICING.kv.listsPerMillion;
+      const totalOps = kv.reads + kv.writes + kv.deletes + kv.lists;
+      resources.push({
+        id: `kv-${kv.namespaceId}`,
+        name: kv.namespaceName || kv.namespaceId,
+        type: 'kv' as ResourceType,
+        project: projectMapping(kv.namespaceName || kv.namespaceId),
+        usage: {
+          value: totalOps,
+          unit: 'operations',
+          formatted: formatNumber(totalOps),
+        },
+        costCurrent: costPerKv,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy' as ResourceStatus,
+      });
+    }
+  }
+
+  // Transform R2 buckets - calculate cost based on actual storage and operations
+  if (data.r2) {
+    for (const bucket of data.r2) {
+      // R2 pricing: $0.015/GB storage + $4.50/M Class A ops + $0.36/M Class B ops
+      // Note: Cloudflare uses decimal GB (1 GB = 1,000,000,000 bytes) for billing
+      const costPerBucket =
+        (bucket.storageBytes / 1_000_000_000) * CF_PRICING.r2.storagePerGbMonth +
+        (bucket.classAOperations / 1_000_000) * CF_PRICING.r2.classAPerMillion +
+        (bucket.classBOperations / 1_000_000) * CF_PRICING.r2.classBPerMillion;
+      resources.push({
+        id: `r2-${bucket.bucketName}`,
+        name: bucket.bucketName,
+        type: 'r2' as ResourceType,
+        project: projectMapping(bucket.bucketName),
+        usage: {
+          value: bucket.storageBytes,
+          unit: 'storage',
+          formatted: formatBytes(bucket.storageBytes),
+        },
+        costCurrent: costPerBucket,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy' as ResourceStatus,
+      });
+    }
+  }
+
+  // Transform Vectorize indexes - calculate cost based on actual dimensions stored
+  if (data.vectorize) {
+    for (const index of data.vectorize) {
+      // Vectorize pricing: $0.01 per million stored dimensions
+      const storedDimensions = index.vectorCount * index.dimensions;
+      const costPerIndex =
+        (storedDimensions / 1_000_000) * CF_PRICING.vectorize.storedDimensionsPerMillion;
+      resources.push({
+        id: `vectorize-${index.id}`,
+        name: index.name || index.id,
+        type: 'vectorize' as ResourceType,
+        project: projectMapping(index.name || index.id),
+        usage: {
+          value: index.vectorCount,
+          unit: 'vectors',
+          formatted: formatNumber(index.vectorCount),
+        },
+        costCurrent: costPerIndex,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy' as ResourceStatus,
+      });
+    }
+  }
+
+  // Transform Pages projects - calculate cost based on deployments and bandwidth
+  if (data.pages) {
+    for (const page of data.pages) {
+      // Pages pricing: $0.15 per build after 500 free + $0.02 per GB bandwidth
+      // Note: First 500 builds/month are free - assuming passed in usage is billable
+      // Note: Cloudflare uses decimal GB (1 GB = 1,000,000,000 bytes) for billing
+      const buildCost = page.deployments * CF_PRICING.pages.buildCost;
+      const bandwidthCost = (page.bandwidth / 1_000_000_000) * CF_PRICING.pages.bandwidthPerGb;
+      const costPerPage = buildCost + bandwidthCost;
+      resources.push({
+        id: `pages-${page.projectName}`,
+        name: page.projectName,
+        type: 'pages' as ResourceType,
+        project: projectMapping(page.projectName),
+        usage: {
+          value: page.requests,
+          unit: 'requests',
+          formatted: formatNumber(page.requests),
+        },
+        costCurrent: costPerPage,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy' as ResourceStatus,
+      });
+    }
+  }
+
+  // Transform Durable Objects - calculate cost based on requests, duration, storage
+  if (data.durableObjects) {
+    for (const obj of data.durableObjects) {
+      // DO pricing: $0.15/M requests + $12.50/M GB-seconds + $0.20/GB storage
+      // Note: Cloudflare uses decimal GB (1 GB = 1,000,000,000 bytes) for billing
+      const requestCost = (obj.requests / 1_000_000) * CF_PRICING.durableObjects.requestsPerMillion;
+      const durationCost =
+        (obj.duration / 1_000_000) * CF_PRICING.durableObjects.gbSecondsPerMillion;
+      const storageCost =
+        (obj.storageBytes / 1_000_000_000) * CF_PRICING.durableObjects.storagePerGbMonth;
+      const costPerObj = requestCost + durationCost + storageCost;
+      resources.push({
+        id: `do-${obj.name}`,
+        name: obj.name,
+        type: 'do' as ResourceType,
+        project: projectMapping(obj.name),
+        usage: {
+          value: obj.requests,
+          unit: 'requests',
+          formatted: formatNumber(obj.requests),
+        },
+        costCurrent: costPerObj,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy' as ResourceStatus,
+      });
+    }
+  }
+
+  // Transform AI Gateway (single entry)
+  if (data.aiGateway && data.aiGateway.totalRequests > 0) {
+    resources.push({
+      id: 'ai-gateway-main',
+      name: 'AI Gateway',
+      type: 'ai-gateway' as ResourceType,
+      project: 'platform', // AI Gateway project attribution
+      usage: {
+        value: data.aiGateway.totalTokens,
+        unit: 'tokens',
+        formatted: formatNumber(data.aiGateway.totalTokens),
+      },
+      costCurrent: costs.aiGateway,
+      costPrior: 0,
+      costDelta: 0,
+      costDeltaPct: null,
+      status: 'healthy' as ResourceStatus,
+    });
+  }
+
+  return resources;
+}
+
+/**
+ * Apply comparison data to resources.
+ * Updates costPrior, costDelta, and costDeltaPct for each resource.
+ */
+export function applyComparisonData(
+  resources: UnifiedResource[],
+  priorResources: UnifiedResource[]
+): UnifiedResource[] {
+  const priorMap = new Map(priorResources.map((r) => [r.id, r]));
+
+  return resources.map((resource) => {
+    const prior = priorMap.get(resource.id);
+
+    if (!prior) {
+      // New resource - mark as NEW
+      return {
+        ...resource,
+        costDeltaPct: 'NEW' as const,
+      };
+    }
+
+    const costDelta = resource.costCurrent - prior.costCurrent;
+    // Use $0.01 threshold to avoid extreme percentages from near-zero baselines
+    // Cap at 999% for display sanity
+    const costDeltaPct =
+      prior.costCurrent >= 0.01
+        ? Math.min((costDelta / prior.costCurrent) * 100, 999)
+        : resource.costCurrent > 0
+          ? 'NEW'
+          : 0;
+
+    return {
+      ...resource,
+      costPrior: prior.costCurrent,
+      costDelta,
+      costDeltaPct:
+        typeof costDeltaPct === 'number' ? Math.round(costDeltaPct * 10) / 10 : costDeltaPct,
+    };
+  });
+}
+
+/**
+ * Filter resources based on filter state.
+ */
+export function filterResources(
+  resources: UnifiedResource[],
+  filters: {
+    project?: string;
+    serviceTypes?: string[];
+    searchQuery?: string;
+    onlyChanged?: boolean;
+    nonZeroCost?: boolean;
+  }
+): UnifiedResource[] {
+  return resources.filter((resource) => {
+    // Project filter
+    if (filters.project && filters.project !== 'all' && resource.project !== filters.project) {
+      return false;
+    }
+
+    // Service type filter
+    if (filters.serviceTypes && filters.serviceTypes.length > 0) {
+      if (!filters.serviceTypes.includes(resource.type)) {
+        return false;
+      }
+    }
+
+    // Search query filter
+    if (filters.searchQuery) {
+      const query = filters.searchQuery.toLowerCase();
+      if (!resource.name.toLowerCase().includes(query)) {
+        return false;
+      }
+    }
+
+    // Only changed filter (>5% change or NEW)
+    if (filters.onlyChanged) {
+      if (resource.costDeltaPct === 'NEW') return true;
+      if (typeof resource.costDeltaPct !== 'number') return false;
+      if (Math.abs(resource.costDeltaPct) <= 5) return false;
+    }
+
+    // Non-zero cost filter
+    if (filters.nonZeroCost && resource.costCurrent === 0) {
+      return false;
+    }
+
+    return true;
+  });
+}
+
+/**
+ * Sort resources by column.
+ */
+export function sortResources(
+  resources: UnifiedResource[],
+  column: string,
+  direction: 'asc' | 'desc'
+): UnifiedResource[] {
+  const sorted = [...resources].sort((a, b) => {
+    let comparison = 0;
+
+    switch (column) {
+      case 'name':
+        comparison = a.name.localeCompare(b.name);
+        break;
+      case 'type':
+        comparison = a.type.localeCompare(b.type);
+        break;
+      case 'project':
+        comparison = a.project.localeCompare(b.project);
+        break;
+      case 'usage':
+        comparison = a.usage.value - b.usage.value;
+        break;
+      case 'costCurrent':
+        comparison = a.costCurrent - b.costCurrent;
+        break;
+      case 'costDeltaPct': {
+        const aPct = a.costDeltaPct === 'NEW' ? Infinity : (a.costDeltaPct ?? -Infinity);
+        const bPct = b.costDeltaPct === 'NEW' ? Infinity : (b.costDeltaPct ?? -Infinity);
+        comparison = aPct - bPct;
+        break;
+      }
+      case 'status': {
+        const statusOrder = { critical: 4, high: 3, warning: 2, healthy: 1 };
+        comparison = statusOrder[a.status] - statusOrder[b.status];
+        break;
+      }
+      default:
+        comparison = 0;
+    }
+
+    return direction === 'asc' ? comparison : -comparison;
+  });
+
+  return sorted;
+}
+
+// Helper functions
+function formatNumber(num: number): string {
+  if (num === undefined || num === null || isNaN(num)) return '0';
+  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(2)}B`;
+  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(2)}M`;
+  if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+  return num.toLocaleString();
+}
+
+/**
+ * Format bytes to human-readable string using decimal (SI) units.
+ *
+ * IMPORTANT: Uses decimal (SI) units because Cloudflare bills in decimal GB:
+ * - 1 GB = 1,000,000,000 bytes (decimal/SI - used for billing)
+ * - 1 GiB = 1,073,741,824 bytes (binary - NOT used by Cloudflare)
+ */
+function formatBytes(bytes: number): string {
+  if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(2)} GB`;
+  if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(2)} MB`;
+  if (bytes >= 1_000) return `${(bytes / 1_000).toFixed(2)} KB`;
+  return `${bytes} B`;
+}
+
+function getStatusFromThreshold(errors: number, requests: number): ResourceStatus {
+  if (requests === 0) return 'healthy';
+  const errorRate = (errors / requests) * 100;
+  if (errorRate >= 10) return 'critical';
+  if (errorRate >= 5) return 'high';
+  if (errorRate >= 1) return 'warning';
+  return 'healthy';
+}

package/templates/shared/dashboard/src/components/usage/unified/AlertBanner.tsx

@@ -0,0 +1,172 @@
+/**
+ * AlertBanner Component
+ *
+ * Displays critical alerts for services approaching or exceeding limits.
+ * Dismissible alerts are stored in localStorage.
+ * Supports collapse/expand for managing alert visibility.
+ */
+
+import { useState, useMemo } from 'react';
+import { AlertTriangle, X, ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react';
+import { clsx } from 'clsx';
+import type { ServiceUtilisation, BurnRateData } from './types';
+
+interface AlertBannerProps {
+  services: ServiceUtilisation[];
+  burnRate: BurnRateData | null;
+  onDismiss: (alertId: string) => void;
+  dismissedAlerts: Set<string>;
+}
+
+interface AlertItem {
+  id: string;
+  type: 'budget' | 'service';
+  title: string;
+  detail: string;
+}
+
+export function AlertBanner({ services, burnRate, onDismiss, dismissedAlerts }: AlertBannerProps) {
+  // Collapsed state - which alerts are collapsed (show title only)
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  // All alerts collapsed state for the header toggle
+  const [allCollapsed, setAllCollapsed] = useState(false);
+
+  // Filter to critical/overage alerts that haven't been dismissed
+  const criticalAlerts = services
+    .filter((s) => s.status === 'critical' || s.status === 'overage')
+    .filter((s) => !dismissedAlerts.has(s.id));
+
+  // Check for budget alert
+  const showBudgetAlert = burnRate?.status === 'red' && !dismissedAlerts.has('budget');
+
+  // Build unified alert list for count
+  const alerts = useMemo(() => {
+    const list: AlertItem[] = [];
+
+    if (showBudgetAlert && burnRate) {
+      list.push({
+        id: 'budget',
+        type: 'budget',
+        title: 'BUDGET ALERT: Projected spend exceeds target',
+        detail: `Projected: $${burnRate.projectedMonthlyCost.toFixed(2)} | Daily burn: $${burnRate.dailyBurnRate.toFixed(2)}/day | ${burnRate.daysRemaining} days remaining`,
+      });
+    }
+
+    for (const alert of criticalAlerts) {
+      list.push({
+        id: alert.id,
+        type: 'service',
+        title: `CRITICAL: ${alert.label} at ${alert.percentage.toFixed(0)}% of limit`,
+        detail: `Current: ${alert.current.toLocaleString()} ${alert.unit} / Limit: ${alert.limit.toLocaleString()} ${alert.unit}${alert.costEstimate > 0 ? ` | Est. cost: $${alert.costEstimate.toFixed(2)}` : ''}`,
+      });
+    }
+
+    return list;
+  }, [showBudgetAlert, burnRate, criticalAlerts]);
+
+  if (alerts.length === 0) {
+    return null;
+  }
+
+  const toggleCollapse = (id: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const toggleAll = () => {
+    if (allCollapsed) {
+      // Expand all
+      setCollapsed(new Set());
+      setAllCollapsed(false);
+    } else {
+      // Collapse all
+      setCollapsed(new Set(alerts.map((a) => a.id)));
+      setAllCollapsed(true);
+    }
+  };
+
+  return (
+    <div className="mb-6">
+      {/* Alert Header with count and collapse toggle */}
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <AlertTriangle className="w-4 h-4 text-rose-400" />
+          <span className="text-xs font-semibold text-rose-300 uppercase tracking-wider">
+            {alerts.length} Active Alert{alerts.length !== 1 ? 's' : ''}
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={toggleAll}
+          className="flex items-center gap-1 text-xs text-gray-600 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 transition-colors px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-slate-800"
+        >
+          <ChevronsUpDown className="w-3 h-3" />
+          {allCollapsed ? 'Expand All' : 'Collapse All'}
+        </button>
+      </div>
+
+      {/* Alerts List */}
+      <div className="space-y-2">
+        {alerts.map((alert) => {
+          const isCollapsed = collapsed.has(alert.id);
+
+          return (
+            <div
+              key={alert.id}
+              className="bg-rose-500/10 border border-rose-500/30 rounded-sm overflow-hidden transition-all"
+            >
+              {/* Alert Header Row - always visible */}
+              <div className="p-3 flex items-center gap-3">
+                <button
+                  type="button"
+                  onClick={() => toggleCollapse(alert.id)}
+                  className="text-rose-400 hover:text-rose-300 p-1 rounded hover:bg-rose-500/20 transition-colors"
+                  aria-label={isCollapsed ? 'Expand alert' : 'Collapse alert'}
+                >
+                  {isCollapsed ? (
+                    <ChevronDown className="w-4 h-4" />
+                  ) : (
+                    <ChevronUp className="w-4 h-4" />
+                  )}
+                </button>
+                <AlertTriangle className="w-4 h-4 text-rose-400 flex-shrink-0" />
+                <span className="text-rose-200 font-semibold text-sm flex-1 truncate">
+                  {alert.title}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => onDismiss(alert.id)}
+                  className="text-rose-400 hover:text-rose-300 p-1 rounded hover:bg-rose-500/20 transition-colors"
+                  aria-label="Dismiss alert"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+
+              {/* Alert Details - collapsible */}
+              <div
+                className={clsx(
+                  'overflow-hidden transition-all duration-200 ease-in-out',
+                  isCollapsed ? 'max-h-0' : 'max-h-24'
+                )}
+              >
+                <div className="px-4 pb-3 pl-12">
+                  <p className="text-rose-300/80 text-xs font-mono">{alert.detail}</p>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default AlertBanner;