@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/unified/index.ts.hbs

@@ -0,0 +1,50 @@
+/**
+ * Unified Observability Dashboard Components
+ *
+ * Barrel export for all unified dashboard components.
+ */
+
+// Main orchestrator
+export { UnifiedShell } from './UnifiedShell';
+export { default as UnifiedShellDefault } from './UnifiedShell';
+
+// Header
+export { LiveHeader } from './LiveHeader';
+export { default as LiveHeaderDefault } from './LiveHeader';
+
+// Hero cards
+export { HeroCardsRow } from './HeroCardsRow';
+export { default as HeroCardsRowDefault } from './HeroCardsRow';
+
+// Alert banner
+export { AlertBanner } from './AlertBanner';
+export { default as AlertBannerDefault } from './AlertBanner';
+
+// Table components
+export { ProjectsTable } from './ProjectsTable';
+export { default as ProjectsTableDefault } from './ProjectsTable';
+
+export { ResourceBreakdown } from './ResourceBreakdown';
+export { default as ResourceBreakdownDefault } from './ResourceBreakdown';
+
+// Utilities
+export { Sparkline } from './Sparkline';
+export { default as SparklineDefault } from './Sparkline';
+
+{{#if isStandard}}
+// Features tab components (standard tier)
+export { FeatureBudgets } from './FeatureBudgets';
+export { default as FeatureBudgetsDefault } from './FeatureBudgets';
+
+export { CircuitBreakerEvents } from './CircuitBreakerEvents';
+export { default as CircuitBreakerEventsDefault } from './CircuitBreakerEvents';
+{{/if}}
+
+{{#if isFull}}
+// Recommendations (full tier)
+export { Recommendations } from './Recommendations';
+export { default as RecommendationsDefault } from './Recommendations';
+{{/if}}
+
+// Types
+export * from './types';

package/templates/shared/dashboard/src/components/usage/unified/types.ts

@@ -0,0 +1,416 @@
+/**
+ * Unified Observability Dashboard Types
+ *
+ * Industrial Command Centre aesthetic - data-dense, monospace metrics
+ */
+
+// ============================================================================
+// Period & Tab Types
+// ============================================================================
+
+export type Period = '24h' | '7d' | '30d';
+export type Tab = 'overview' | 'features';
+export type SortField = 'name' | 'cost' | 'activity';
+export type SortDir = 'asc' | 'desc';
+
+// ============================================================================
+// URL State
+// ============================================================================
+
+export interface URLState {
+  period: Period;
+  search: string;
+  sort: SortField;
+  dir: SortDir;
+  tab: Tab;
+  expanded: string[]; // project IDs
+}
+
+// ============================================================================
+// Project Status & Health
+// ============================================================================
+
+export type OperationalStatus = 'RUN' | 'WARN' | 'STOP';
+export type CircuitBreakerState = 'active' | 'tripped' | 'disabled';
+export type HealthStatus = 'online' | 'idle' | 'unknown';
+
+export interface ProjectStatus {
+  status: OperationalStatus;
+  spend: number;
+  cap: number;
+  percentage: number;
+  circuitBreaker: CircuitBreakerState;
+  lastSeen?: string; // ISO timestamp from heartbeat
+}
+
+// ============================================================================
+// Hero Cards Data
+// ============================================================================
+
+export interface BurnRateData {
+  mtdCost: number;
+  mtdStartDate: string;
+  mtdEndDate: string;
+  projectedMonthlyCost: number;
+  dailyBurnRate: number;
+  daysIntoMonth: number;
+  daysRemaining: number;
+  confidence: 'low' | 'medium' | 'high';
+  vsLastMonthPct: number | null;
+  billingPeriodStart: string;
+  billingPeriodEnd: string;
+  status: 'green' | 'yellow' | 'red';
+  statusLabel: string;
+  statusDetail: string;
+}
+
+export interface ServiceUtilisation {
+  id: string;
+  label: string;
+  percentage: number;
+  current: number;
+  limit: number;
+  unit: string;
+  status: 'normal' | 'warning' | 'high' | 'critical' | 'overage';
+  costEstimate: number;
+}
+
+export interface UtilisationResponse {
+  success: boolean;
+  burnRate: BurnRateData;
+  cloudflareServices: ServiceUtilisation[];
+  projects: ProjectSummary[];
+  cached?: boolean;
+}
+
+// ============================================================================
+// Project Data
+// ============================================================================
+
+export interface ProjectSummary {
+  projectId: string;
+  projectName: string;
+  primaryResource: string;
+  mtdCost: number;
+  costDeltaPct: number;
+  utilizationPct: number;
+  utilizationCurrent: number;
+  utilizationLimit: number;
+  utilizationUnit: string;
+  status: 'green' | 'yellow' | 'red';
+  sparklineData?: number[];
+  circuitBreakerStatus?: 'active' | 'tripped' | 'degraded';
+  repoUrl?: string;
+}
+
+export interface ProjectTableRow {
+  id: string;
+  name: string;
+  status: OperationalStatus;
+  mtdCost: number;
+  costDeltaPct: number;
+  activity: number;
+  activityTrend: number[]; // Last 6 data points for sparkline
+  circuitBreaker: CircuitBreakerState;
+  lastSeen?: string;
+}
+
+// ============================================================================
+// Resource Breakdown (Lazy-loaded)
+// ============================================================================
+
+export type ResourceType =
+  | 'd1'
+  | 'kv'
+  | 'r2'
+  | 'vectorize'
+  | 'workers'
+  | 'durableObjects'
+  | 'queues'
+  | 'workersAI'
+  | 'pages';
+
+/**
+ * Tool types for stacked bar chart (all 9 Cloudflare tools)
+ */
+export type ToolType =
+  | 'workers'
+  | 'd1'
+  | 'kv'
+  | 'r2'
+  | 'vectorize'
+  | 'durableObjects'
+  | 'queues'
+  | 'workersAI'
+  | 'pages';
+
+export interface ResourceMetric {
+  type: ResourceType;
+  label: string;
+  cost: number;
+  usage: number;
+  usageFormatted: string;
+  unit: string;
+  limit?: number;
+  limitPct?: number;
+  trend: number[]; // Last 6 data points for sparkline
+}
+
+export interface ProjectBreakdown {
+  projectId: string;
+  resources: ResourceMetric[];
+  totalCost: number;
+  fetchedAt: number; // timestamp for cache expiry
+}
+
+// ============================================================================
+// Chart Data
+// ============================================================================
+
+export interface ChartDataPoint {
+  time: string;
+  timestamp: number;
+  d1: number;
+  kv: number;
+  workers: number;
+  r2: number;
+  vectorize: number;
+  durableObjects: number;
+  queues: number;
+  workersAI: number;
+  pages: number;
+  total: number;
+}
+
+export interface UsageRow {
+  time_bucket: string;
+  project_id: string;
+  d1_writes: number;
+  d1_reads: number;
+  kv_reads: number;
+  kv_writes: number;
+  workers_requests: number;
+  interaction_count: number;
+}
+
+// ============================================================================
+// API Responses
+// ============================================================================
+
+export interface StatusResponse {
+  success: boolean;
+  projects: Record<string, ProjectStatus>;
+  timestamp: string;
+}
+
+export interface QueryResponse {
+  success: boolean;
+  data: UsageRow[];
+}
+
+export interface DailyResponse {
+  success: boolean;
+  data: ResourceMetric[];
+}
+
+/**
+ * Daily cost breakdown data from /api/usage/daily endpoint
+ */
+export interface DailyCostBreakdown {
+  date: string;
+  workers: number;
+  d1: number;
+  kv: number;
+  r2: number;
+  durableObjects: number;
+  vectorize: number;
+  queues: number;
+  workersAI: number;
+  pages: number;
+  total: number;
+}
+
+export interface DailyCostTotals {
+  workers: number;
+  d1: number;
+  kv: number;
+  r2: number;
+  durableObjects: number;
+  vectorize: number;
+  queues: number;
+  workersAI: number;
+  pages: number;
+  total: number;
+}
+
+export interface DailyCostData {
+  days: DailyCostBreakdown[];
+  totals: DailyCostTotals;
+  period: {
+    start: string;
+    end: string;
+  };
+}
+
+// ============================================================================
+// Billing Context (from /api/usage/billing-context)
+// ============================================================================
+
+export interface BillingPeriod {
+  startDate: string; // ISO date
+  endDate: string; // ISO date
+  daysInPeriod: number;
+  daysElapsed: number;
+  daysRemaining: number;
+  progress: number; // 0-1
+}
+
+export interface ServiceAllowance {
+  monthly: number;
+  prorated: number;
+  unit: string;
+  isPaidPlan: boolean;
+}
+
+export type PlanType = 'free' | 'paid' | 'enterprise';
+
+export interface BillingContextResponse {
+  success: boolean;
+  billingPeriod: BillingPeriod;
+  planType: PlanType;
+  allowances: Record<ToolType, ServiceAllowance>;
+  periodFormatted: string;
+  countdownText: string;
+  prorationFactors: {
+    '24h': number;
+    '7d': number;
+    '30d': number;
+  };
+  timestamp: string;
+}
+
+// ============================================================================
+// Granular Usage (from /api/usage/granular)
+// ============================================================================
+
+export interface DailyToolUsage {
+  date: string; // ISO date (YYYY-MM-DD)
+  workers: number;
+  d1: number;
+  kv: number;
+  r2: number;
+  vectorize: number;
+  durableObjects: number;
+  queues: number;
+  workersAI: number;
+  pages: number;
+  total: number;
+}
+
+export interface ProjectResourceBreakdown {
+  resourceType: ToolType;
+  usage: number;
+  cost: number;
+  unit: string;
+  isCostDriver: boolean; // True for top 3 costs in project
+}
+
+export interface ProjectUsageSummary {
+  project: string;
+  totalRequests: number;
+  totalCost: number;
+  resources: ProjectResourceBreakdown[];
+  topCostDrivers: ToolType[]; // Top 3 cost driver tool types
+}
+
+export interface GranularResponse {
+  success: boolean;
+  period: {
+    start: string;
+    end: string;
+    days: number;
+  };
+  byDate: DailyToolUsage[];
+  byProject: ProjectUsageSummary[];
+  totals: {
+    requests: number;
+    cost: number;
+    byTool: Record<ToolType, { requests: number; cost: number }>;
+  };
+  timestamp: string;
+}
+
+// ============================================================================
+// Colour Configuration
+// ============================================================================
+
+export const STATUS_COLORS: Record<OperationalStatus, { bg: string; text: string; glow: string }> =
+  {
+    RUN: {
+      bg: 'bg-emerald-500/20',
+      text: 'text-emerald-400',
+      glow: 'shadow-emerald-500/20',
+    },
+    WARN: {
+      bg: 'bg-amber-500/20',
+      text: 'text-amber-400',
+      glow: 'shadow-amber-500/20',
+    },
+    STOP: {
+      bg: 'bg-rose-500/20',
+      text: 'text-rose-400',
+      glow: 'shadow-rose-500/20',
+    },
+  };
+
+export const CB_COLORS: Record<CircuitBreakerState, string> = {
+  active: 'bg-emerald-500',
+  tripped: 'bg-rose-500',
+  disabled: 'bg-slate-500',
+};
+
+export const HEALTH_COLORS: Record<HealthStatus, { dot: string; text: string }> = {
+  online: { dot: 'bg-emerald-500', text: 'text-emerald-400' },
+  idle: { dot: 'bg-amber-500', text: 'text-amber-400' },
+  unknown: { dot: 'bg-slate-500', text: 'text-slate-500' },
+};
+
+export const RESOURCE_COLORS: Record<ResourceType, { bg: string; stroke: string }> = {
+  d1: { bg: 'rgba(59, 130, 246, 0.3)', stroke: '#3b82f6' }, // Blue
+  kv: { bg: 'rgba(139, 92, 246, 0.3)', stroke: '#8b5cf6' }, // Purple
+  r2: { bg: 'rgba(16, 185, 129, 0.3)', stroke: '#10b981' }, // Green
+  vectorize: { bg: 'rgba(236, 72, 153, 0.3)', stroke: '#ec4899' }, // Pink
+  workers: { bg: 'rgba(249, 115, 22, 0.3)', stroke: '#f97316' }, // Orange
+  durableObjects: { bg: 'rgba(99, 102, 241, 0.3)', stroke: '#6366f1' }, // Indigo
+  queues: { bg: 'rgba(20, 184, 166, 0.3)', stroke: '#14b8a6' }, // Teal
+  workersAI: { bg: 'rgba(245, 158, 11, 0.3)', stroke: '#f59e0b' }, // Amber
+  pages: { bg: 'rgba(132, 204, 22, 0.3)', stroke: '#84cc16' }, // Lime
+};
+
+export const RESOURCE_LABELS: Record<ResourceType, string> = {
+  d1: 'D1',
+  kv: 'KV',
+  r2: 'R2',
+  vectorize: 'Vectorize',
+  workers: 'Workers',
+  durableObjects: 'Durable Objects',
+  queues: 'Queues',
+  workersAI: 'Workers AI',
+  pages: 'Pages',
+};
+
+/**
+ * Tool configuration for stacked bar chart
+ * Includes color, label, and sort order
+ */
+export const TOOL_CONFIG: Record<ToolType, { color: string; label: string; order: number }> = {
+  workers: { color: '#F97316', label: 'Workers', order: 1 },
+  d1: { color: '#3B82F6', label: 'D1', order: 2 },
+  kv: { color: '#8B5CF6', label: 'KV', order: 3 },
+  r2: { color: '#10B981', label: 'R2', order: 4 },
+  vectorize: { color: '#EC4899', label: 'Vectorize', order: 5 },
+  durableObjects: { color: '#6366F1', label: 'Durable Objects', order: 6 },
+  queues: { color: '#14B8A6', label: 'Queues', order: 7 },
+  workersAI: { color: '#F59E0B', label: 'Workers AI', order: 8 },
+  pages: { color: '#84CC16', label: 'Pages', order: 9 },
+};