@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/AnomalyAlerts.astro

@@ -0,0 +1,633 @@
+---
+/**
+ * AnomalyAlerts Component
+ *
+ * Displays usage anomalies detected by the platform-usage worker.
+ * Shows metric spikes with deviation factors and resolution status.
+ *
+ * Part of Enhancement #2: Anomaly alerts visualization.
+ *
+ * Features:
+ * - Lists recent anomalies with severity indicators
+ * - Shows deviation factor (how many stddevs above average)
+ * - Visual indicators for resolved/unresolved status
+ * - Filters by time range and resolved status
+ */
+
+export interface AnomalyData {
+  id: string;
+  detectedAt: string;
+  metric: string;
+  project: string;
+  currentValue: number;
+  rollingAvg: number;
+  deviationFactor: number;
+  alertSent: boolean;
+  alertChannel: string | null;
+  resolved: boolean;
+  resolvedAt: string | null;
+  resolvedBy: string | null;
+}
+
+interface Props {
+  /** Initial anomalies (if server-rendered) */
+  anomalies?: AnomalyData[];
+}
+
+const { anomalies = [] } = Astro.props;
+
+// Format metric names for display
+function formatMetric(metric: string): string {
+  const map: Record<string, string> = {
+    workers_requests: 'Workers Requests',
+    d1_rows_read: 'D1 Reads',
+    d1_rows_written: 'D1 Writes',
+    kv_reads: 'KV Reads',
+    kv_writes: 'KV Writes',
+    r2_class_a: 'R2 Class A',
+    r2_class_b: 'R2 Class B',
+    total_cost_usd: 'Total Cost',
+    ai_requests: 'AI Requests',
+    ai_tokens: 'AI Tokens',
+  };
+  return map[metric] ?? metric.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+// Format large numbers
+function formatNumber(num: number): string {
+  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();
+}
+
+// Get severity class based on deviation factor
+function getSeverity(deviationFactor: number): 'critical' | 'high' | 'medium' | 'low' {
+  if (deviationFactor >= 4) return 'critical';
+  if (deviationFactor >= 3) return 'high';
+  if (deviationFactor >= 2) return 'medium';
+  return 'low';
+}
+
+// Format relative time
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffDays > 0) return `${diffDays}d ago`;
+  if (diffHours > 0) return `${diffHours}h ago`;
+  return 'Just now';
+}
+---
+
+<section class="anomaly-alerts-section" data-component="anomaly-alerts">
+  <div class="section-header">
+    <h3 class="section-title">
+      <span class="title-icon">⚠️</span>
+      Usage Anomalies
+    </h3>
+    <p class="section-description">Detected usage spikes based on 7-day rolling averages</p>
+  </div>
+
+  <div class="anomaly-controls">
+    <div class="filter-group">
+      <label for="anomaly-days">Lookback:</label>
+      <select id="anomaly-days" class="filter-select">
+        <option value="7">7 days</option>
+        <option value="14">14 days</option>
+        <option value="30">30 days</option>
+      </select>
+    </div>
+    <div class="filter-group">
+      <label for="anomaly-resolved">Status:</label>
+      <select id="anomaly-resolved" class="filter-select">
+        <option value="all">All</option>
+        <option value="false">Unresolved</option>
+        <option value="true">Resolved</option>
+      </select>
+    </div>
+    <button type="button" id="anomaly-refresh" class="refresh-btn" title="Refresh"> 🔄 </button>
+  </div>
+
+  <div class="anomaly-list-container" id="anomaly-list-container">
+    <!-- Loading state -->
+    <div class="loading-state" id="anomaly-loading">
+      <div class="loading-spinner"></div>
+      <span>Loading anomalies...</span>
+    </div>
+
+    <!-- Empty state -->
+    <div class="empty-state" id="anomaly-empty" style="display: none;">
+      <span class="empty-icon">✅</span>
+      <span class="empty-text">No anomalies detected in this period</span>
+      <span class="empty-subtext">Your usage is within normal ranges</span>
+    </div>
+
+    <!-- Anomaly cards -->
+    <div class="anomaly-cards" id="anomaly-cards" style="display: none;">
+      <!-- Cards populated by JavaScript -->
+    </div>
+  </div>
+</section>
+
+<style>
+  .anomaly-alerts-section {
+    margin-bottom: 1.5rem;
+  }
+
+  .section-header {
+    margin-bottom: 1rem;
+  }
+
+  .section-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin: 0 0 0.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .title-icon {
+    font-size: 1.25rem;
+  }
+
+  .section-description {
+    color: var(--text-secondary, #666);
+    font-size: 0.875rem;
+    margin: 0;
+  }
+
+  .anomaly-controls {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .filter-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .filter-group label {
+    font-size: 0.875rem;
+    color: var(--text-secondary, #666);
+  }
+
+  .filter-select {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 4px;
+    background: var(--bg-secondary, #fff);
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+
+  .refresh-btn {
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 4px;
+    background: var(--bg-secondary, #fff);
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 1;
+    transition: background-color 0.2s;
+  }
+
+  .refresh-btn:hover {
+    background: var(--bg-hover, #f5f5f5);
+  }
+
+  .refresh-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .anomaly-list-container {
+    min-height: 150px;
+  }
+
+  .loading-state,
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    color: var(--text-secondary, #666);
+  }
+
+  .loading-spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--border-color, #ddd);
+    border-top-color: var(--primary-color, #3b82f6);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-bottom: 0.5rem;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .empty-icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .empty-text {
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+  }
+
+  .empty-subtext {
+    font-size: 0.8rem;
+    opacity: 0.8;
+  }
+
+  .anomaly-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .anomaly-card {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    gap: 1rem;
+    align-items: center;
+    padding: 1rem;
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 8px;
+    background: var(--bg-secondary, #fff);
+    transition: box-shadow 0.2s;
+  }
+
+  .anomaly-card:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .anomaly-card.resolved {
+    opacity: 0.7;
+    border-left: 3px solid #10b981;
+  }
+
+  .anomaly-card.unresolved {
+    border-left: 3px solid #ef4444;
+  }
+
+  .severity-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    font-weight: 600;
+    font-size: 0.875rem;
+  }
+
+  .severity-badge.critical {
+    background: #fee2e2;
+    color: #dc2626;
+  }
+
+  .severity-badge.high {
+    background: #ffedd5;
+    color: #ea580c;
+  }
+
+  .severity-badge.medium {
+    background: #fef3c7;
+    color: #d97706;
+  }
+
+  .severity-badge.low {
+    background: #dbeafe;
+    color: #2563eb;
+  }
+
+  .anomaly-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+
+  .anomaly-metric {
+    font-weight: 600;
+    font-size: 0.95rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .anomaly-details {
+    font-size: 0.8rem;
+    color: var(--text-secondary, #666);
+  }
+
+  .anomaly-project {
+    font-weight: 500;
+  }
+
+  .anomaly-values {
+    text-align: right;
+    font-size: 0.875rem;
+  }
+
+  .anomaly-current {
+    font-weight: 600;
+  }
+
+  .anomaly-avg {
+    font-size: 0.75rem;
+    color: var(--text-secondary, #666);
+  }
+
+  .anomaly-time {
+    font-size: 0.8rem;
+    color: var(--text-secondary, #666);
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  .anomaly-status {
+    font-size: 0.7rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: 3px;
+    margin-top: 0.25rem;
+  }
+
+  .anomaly-status.resolved {
+    background: #dcfce7;
+    color: #166534;
+  }
+
+  .anomaly-status.unresolved {
+    background: #fee2e2;
+    color: #991b1b;
+  }
+
+  @media (max-width: 768px) {
+    .anomaly-card {
+      grid-template-columns: auto 1fr;
+      grid-template-rows: auto auto;
+    }
+
+    .anomaly-values,
+    .anomaly-time {
+      grid-column: 2;
+      text-align: left;
+    }
+  }
+</style>
+
+<script>
+  // Type definitions
+  interface AnomalyData {
+    id: string;
+    detectedAt: string;
+    metric: string;
+    project: string;
+    currentValue: number;
+    rollingAvg: number;
+    deviationFactor: number;
+    alertSent: boolean;
+    alertChannel: string | null;
+    resolved: boolean;
+    resolvedAt: string | null;
+    resolvedBy: string | null;
+  }
+
+  // Global update function
+  declare global {
+    interface Window {
+      updateAnomalyAlerts?: (anomalies: AnomalyData[]) => void;
+      refreshAnomalyAlerts?: () => Promise<void>;
+    }
+  }
+
+  // Format metric names for display
+  function formatMetric(metric: string): string {
+    const map: Record<string, string> = {
+      workers_requests: 'Workers Requests',
+      d1_rows_read: 'D1 Reads',
+      d1_rows_written: 'D1 Writes',
+      kv_reads: 'KV Reads',
+      kv_writes: 'KV Writes',
+      r2_class_a: 'R2 Class A',
+      r2_class_b: 'R2 Class B',
+      total_cost_usd: 'Total Cost',
+      ai_requests: 'AI Requests',
+      ai_tokens: 'AI Tokens',
+    };
+    return map[metric] ?? metric.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+
+  // Format large numbers
+  function formatNumber(num: number): string {
+    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();
+  }
+
+  // Get severity class based on deviation factor
+  function getSeverity(deviationFactor: number): string {
+    if (deviationFactor >= 4) return 'critical';
+    if (deviationFactor >= 3) return 'high';
+    if (deviationFactor >= 2) return 'medium';
+    return 'low';
+  }
+
+  // Format relative time
+  function formatRelativeTime(dateStr: string): string {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffDays > 0) return `${diffDays}d ago`;
+    if (diffHours > 0) return `${diffHours}h ago`;
+    return 'Just now';
+  }
+
+  // Create anomaly card element using safe DOM methods
+  function createAnomalyCard(anomaly: AnomalyData): HTMLElement {
+    const card = document.createElement('div');
+    card.className = `anomaly-card ${anomaly.resolved ? 'resolved' : 'unresolved'}`;
+
+    // Severity badge
+    const severity = getSeverity(anomaly.deviationFactor);
+    const badge = document.createElement('div');
+    badge.className = `severity-badge ${severity}`;
+    badge.textContent = `${anomaly.deviationFactor}x`;
+    badge.title = `${anomaly.deviationFactor}x standard deviation`;
+    card.appendChild(badge);
+
+    // Info section
+    const info = document.createElement('div');
+    info.className = 'anomaly-info';
+
+    const metricEl = document.createElement('div');
+    metricEl.className = 'anomaly-metric';
+    metricEl.textContent = formatMetric(anomaly.metric);
+    info.appendChild(metricEl);
+
+    const details = document.createElement('div');
+    details.className = 'anomaly-details';
+    const projectSpan = document.createElement('span');
+    projectSpan.className = 'anomaly-project';
+    projectSpan.textContent = anomaly.project === 'all' ? 'All Projects' : anomaly.project;
+    details.appendChild(projectSpan);
+    info.appendChild(details);
+
+    card.appendChild(info);
+
+    // Values section
+    const values = document.createElement('div');
+    values.className = 'anomaly-values';
+
+    const current = document.createElement('div');
+    current.className = 'anomaly-current';
+    current.textContent = formatNumber(anomaly.currentValue);
+    values.appendChild(current);
+
+    const avg = document.createElement('div');
+    avg.className = 'anomaly-avg';
+    avg.textContent = `avg: ${formatNumber(anomaly.rollingAvg)}`;
+    values.appendChild(avg);
+
+    card.appendChild(values);
+
+    // Time section
+    const time = document.createElement('div');
+    time.className = 'anomaly-time';
+
+    const timeText = document.createElement('div');
+    timeText.textContent = formatRelativeTime(anomaly.detectedAt);
+    time.appendChild(timeText);
+
+    const status = document.createElement('div');
+    status.className = `anomaly-status ${anomaly.resolved ? 'resolved' : 'unresolved'}`;
+    status.textContent = anomaly.resolved ? 'Resolved' : 'Active';
+    time.appendChild(status);
+
+    card.appendChild(time);
+
+    return card;
+  }
+
+  // Update anomaly alerts display
+  function updateAnomalyAlerts(anomalies: AnomalyData[]): void {
+    const loading = document.getElementById('anomaly-loading');
+    const empty = document.getElementById('anomaly-empty');
+    const cards = document.getElementById('anomaly-cards');
+
+    if (!loading || !empty || !cards) return;
+
+    loading.style.display = 'none';
+
+    if (!anomalies || anomalies.length === 0) {
+      empty.style.display = 'flex';
+      cards.style.display = 'none';
+      return;
+    }
+
+    empty.style.display = 'none';
+    cards.style.display = 'flex';
+
+    // Clear existing cards
+    cards.replaceChildren();
+
+    // Create new cards using safe DOM methods
+    for (const anomaly of anomalies) {
+      const card = createAnomalyCard(anomaly);
+      cards.appendChild(card);
+    }
+  }
+
+  // Fetch anomalies from API
+  async function fetchAnomalies(): Promise<void> {
+    const loading = document.getElementById('anomaly-loading');
+    const daysSelect = document.getElementById('anomaly-days') as HTMLSelectElement | null;
+    const resolvedSelect = document.getElementById('anomaly-resolved') as HTMLSelectElement | null;
+    const refreshBtn = document.getElementById('anomaly-refresh') as HTMLButtonElement | null;
+
+    if (loading) loading.style.display = 'flex';
+    if (refreshBtn) refreshBtn.disabled = true;
+
+    const days = daysSelect?.value ?? '7';
+    const resolved = resolvedSelect?.value ?? 'all';
+
+    try {
+      const response = await fetch(
+        `/api/usage/anomalies?days=${days}&resolved=${resolved}&limit=50`,
+        { credentials: 'include' }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      if (data.success && data.anomalies) {
+        updateAnomalyAlerts(data.anomalies);
+      } else {
+        updateAnomalyAlerts([]);
+      }
+    } catch (error) {
+      console.error('[AnomalyAlerts] Fetch error:', error);
+      updateAnomalyAlerts([]);
+    } finally {
+      if (refreshBtn) refreshBtn.disabled = false;
+    }
+  }
+
+  // Initialize component
+  function init(): void {
+    // Export global functions
+    window.updateAnomalyAlerts = updateAnomalyAlerts;
+    window.refreshAnomalyAlerts = fetchAnomalies;
+
+    // Add event listeners for filters
+    const daysSelect = document.getElementById('anomaly-days');
+    const resolvedSelect = document.getElementById('anomaly-resolved');
+    const refreshBtn = document.getElementById('anomaly-refresh');
+
+    daysSelect?.addEventListener('change', fetchAnomalies);
+    resolvedSelect?.addEventListener('change', fetchAnomalies);
+    refreshBtn?.addEventListener('click', fetchAnomalies);
+
+    // Fetch initial data when Alerts tab is shown
+    const alertsTab = document.querySelector('[data-tab="alerts"]');
+    if (alertsTab) {
+      alertsTab.addEventListener('click', () => {
+        // Only fetch if we haven't loaded yet (loading state is visible)
+        const loading = document.getElementById('anomaly-loading');
+        if (loading && loading.style.display !== 'none') {
+          fetchAnomalies();
+        }
+      });
+    }
+  }
+
+  // Run on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+</script>