@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,604 @@
+---
+/**
+ * ServiceUtilizationList - Service metrics table with utilization bars
+ *
+ * Displays a list of services with:
+ * - Service name and icon
+ * - Current usage vs limit
+ * - Utilisation bar with percentage
+ * - Cost estimate
+ * - Overage details (if applicable)
+ */
+import type { UtilizationStatus } from './types';
+import UtilizationBar from './UtilizationBar.astro';
+import { formatLargeNumber, formatCurrency } from './types';
+
+interface ResourceMetric {
+  id: string;
+  label: string;
+  provider: 'cloudflare' | 'github';
+  current: number;
+  limit: number | null;
+  unit: string;
+  percentage: number;
+  costEstimate: number;
+  status: UtilizationStatus;
+  overage: number;
+  overageCost: number;
+}
+
+interface Props {
+  /** Title for the section */
+  title: string;
+  /** Provider type */
+  provider: 'cloudflare' | 'github';
+  /** Array of service metrics */
+  services?: ResourceMetric[];
+  /** Show overage column */
+  showOverage?: boolean;
+}
+
+const { title, provider, services = [], showOverage = true } = Astro.props;
+
+const providerIcons: Record<string, Record<string, string>> = {
+  cloudflare: {
+    'cf-workers': '⚡',
+    'cf-d1': '🗄️',
+    'cf-kv': '🔑',
+    'cf-r2': '📦',
+    'cf-do': '🔗',
+    'cf-vectorize': '🧮',
+    'cf-workers-ai': '🤖',
+    'cf-queues': '📬',
+    'cf-ai-gateway': '🌐',
+  },
+  github: {
+    'gh-actions-minutes': '⏱️',
+    'gh-actions-storage': '💾',
+    'gh-ghas-code': '🔍',
+    'gh-ghas-secrets': '🔐',
+    'gh-ghec': '👥',
+  },
+};
+
+const getIcon = (id: string, prov: string): string => {
+  return providerIcons[prov]?.[id] ?? '📊';
+};
+---
+
+<div class="service-list-section" id={`service-list-${provider}`} data-provider={provider}>
+  <h3 class="section-title">{title}</h3>
+
+  {/* Empty state - shown when no services, hidden by JS when populated */}
+  <div
+    class="empty-state"
+    id={`service-list-empty-${provider}`}
+    style={services.length > 0 ? 'display: none;' : ''}
+  >
+    <span class="empty-icon">📭</span>
+    <p>No services with usage data</p>
+  </div>
+
+  {/* Table structure - always rendered but hidden when empty */}
+  <div
+    class="service-table"
+    id={`service-list-table-${provider}`}
+    style={services.length === 0 ? 'display: none;' : ''}
+  >
+    <div class="table-header">
+      <span class="col-service">Service</span>
+      <span class="col-usage">Usage</span>
+      <span class="col-utilization">Utilisation</span>
+      <span class="col-cost">Cost</span>
+      {showOverage && <span class="col-overage">Overage</span>}
+    </div>
+
+    <div class="table-body" id={`service-list-body-${provider}`}>
+      {
+        services.map((service) => (
+          <div class="service-row" data-id={service.id} data-status={service.status}>
+            <div class="col-service">
+              <span class="service-icon">{getIcon(service.id, provider)}</span>
+              <span class="service-name">{service.label}</span>
+            </div>
+
+            <div class="col-usage">
+              <span class="usage-current">{formatLargeNumber(service.current)}</span>
+              {service.limit !== null ? (
+                <span class="usage-limit">
+                  / {formatLargeNumber(service.limit)} {service.unit}
+                </span>
+              ) : (
+                <span class="usage-limit">{service.unit}</span>
+              )}
+            </div>
+
+            <div class="col-utilization">
+              {service.limit !== null ? (
+                <UtilizationBar
+                  percentage={service.percentage}
+                  status={service.status}
+                  height={6}
+                  showLabel
+                />
+              ) : (
+                <span class="subscription-badge">Subscription</span>
+              )}
+            </div>
+
+            <div class="col-cost">
+              <span class="cost-value">{formatCurrency(service.costEstimate)}</span>
+            </div>
+
+            {showOverage && (
+              <div class="col-overage">
+                {service.overage > 0 ? (
+                  <span class="overage-value overage-active">
+                    +{formatLargeNumber(service.overage)}
+                    <span class="overage-cost">({formatCurrency(service.overageCost)})</span>
+                  </span>
+                ) : (
+                  <span class="overage-value overage-none">—</span>
+                )}
+              </div>
+            )}
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</div>
+
+<style>
+  .service-list-section {
+    background: var(--color-surface, #ffffff);
+    border: 1px solid var(--color-border, #e5e7eb);
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+
+  :global(.dark) .service-list-section {
+    background: var(--color-surface-dark, #1f2937);
+    border-color: var(--color-border-dark, #374151);
+  }
+
+  .section-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text, #111827);
+    margin: 0 0 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  :global(.dark) .section-title {
+    color: var(--color-text-dark, #f9fafb);
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px;
+    color: var(--color-text-secondary, #6b7280);
+    gap: 8px;
+  }
+
+  .empty-icon {
+    font-size: 24px;
+  }
+
+  .service-table {
+    width: 100%;
+  }
+
+  .table-header {
+    display: grid;
+    grid-template-columns: 2fr 1.5fr 2fr 1fr 1fr;
+    gap: 12px;
+    padding: 8px 12px;
+    background: var(--color-surface-secondary, #f9fafb);
+    border-radius: 8px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--color-text-secondary, #6b7280);
+  }
+
+  :global(.dark) .table-header {
+    background: var(--color-surface-secondary-dark, #111827);
+    color: var(--color-text-secondary-dark, #9ca3af);
+  }
+
+  .table-body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-top: 8px;
+  }
+
+  .service-row {
+    display: grid;
+    grid-template-columns: 2fr 1.5fr 2fr 1fr 1fr;
+    gap: 12px;
+    padding: 10px 12px;
+    border-radius: 6px;
+    align-items: center;
+    transition: background 0.15s ease;
+  }
+
+  .service-row:hover {
+    background: var(--color-surface-secondary, #f9fafb);
+  }
+
+  :global(.dark) .service-row:hover {
+    background: var(--color-surface-secondary-dark, #111827);
+  }
+
+  .service-row[data-status='warning'] {
+    background: rgba(234, 179, 8, 0.05);
+  }
+
+  .service-row[data-status='critical'],
+  .service-row[data-status='overage'] {
+    background: rgba(239, 68, 68, 0.05);
+  }
+
+  .col-service {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .service-icon {
+    font-size: 16px;
+  }
+
+  .service-name {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text, #111827);
+  }
+
+  :global(.dark) .service-name {
+    color: var(--color-text-dark, #f9fafb);
+  }
+
+  .col-usage {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    font-size: 13px;
+  }
+
+  .usage-current {
+    font-weight: 600;
+    color: var(--color-text, #111827);
+  }
+
+  :global(.dark) .usage-current {
+    color: var(--color-text-dark, #f9fafb);
+  }
+
+  .usage-limit {
+    font-size: 11px;
+    color: var(--color-text-secondary, #6b7280);
+  }
+
+  :global(.dark) .usage-limit {
+    color: var(--color-text-secondary-dark, #9ca3af);
+  }
+
+  .col-utilization {
+    min-width: 0;
+  }
+
+  .subscription-badge {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    background: var(--color-primary-bg, #dbeafe);
+    color: var(--color-primary, #2563eb);
+    border-radius: 9999px;
+  }
+
+  :global(.dark) .subscription-badge {
+    background: rgba(37, 99, 235, 0.2);
+    color: #93c5fd;
+  }
+
+  .col-cost,
+  .col-overage {
+    text-align: right;
+  }
+
+  .cost-value {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text, #111827);
+  }
+
+  :global(.dark) .cost-value {
+    color: var(--color-text-dark, #f9fafb);
+  }
+
+  .overage-value {
+    font-size: 12px;
+  }
+
+  .overage-active {
+    color: var(--color-critical, #ef4444);
+    font-weight: 500;
+  }
+
+  .overage-cost {
+    font-size: 11px;
+    margin-left: 2px;
+    opacity: 0.8;
+  }
+
+  .overage-none {
+    color: var(--color-text-secondary, #6b7280);
+  }
+
+  /* Responsive: stack columns on mobile */
+  @media (max-width: 768px) {
+    .table-header {
+      display: none;
+    }
+
+    .service-row {
+      grid-template-columns: 1fr;
+      gap: 8px;
+      padding: 12px;
+      border-bottom: 1px solid var(--color-border, #e5e7eb);
+    }
+
+    :global(.dark) .service-row {
+      border-color: var(--color-border-dark, #374151);
+    }
+
+    .col-service {
+      justify-content: flex-start;
+    }
+
+    .col-usage,
+    .col-cost,
+    .col-overage {
+      text-align: left;
+      font-size: 12px;
+    }
+
+    .col-overage {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .col-overage::before {
+      content: 'Overage: ';
+      color: var(--color-text-secondary, #6b7280);
+    }
+  }
+</style>
+
+<script>
+  /**
+   * Update service utilization list with new data
+   * Uses safe DOM methods instead of innerHTML
+   */
+  interface ResourceMetric {
+    id: string;
+    label: string;
+    provider: 'cloudflare' | 'github';
+    current: number;
+    limit: number | null;
+    unit: string;
+    percentage: number;
+    costEstimate: number;
+    status: 'ok' | 'warning' | 'critical' | 'overage';
+    overage: number;
+    overageCost: number;
+  }
+
+  const formatLargeNumber = (num: number): string => {
+    if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)}B`;
+    if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`;
+    if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+    return num.toFixed(0);
+  };
+
+  const formatCurrency = (amount: number): string => {
+    if (amount === 0) return '$0.00';
+    if (amount < 0.01) return '< $0.01';
+    return `$${amount.toFixed(2)}`;
+  };
+
+  const getStatusColor = (status: string): string => {
+    const colors: Record<string, string> = {
+      ok: '#22c55e',
+      warning: '#eab308',
+      critical: '#ef4444',
+      overage: '#dc2626',
+    };
+    return colors[status] ?? colors.ok;
+  };
+
+  const getIcon = (id: string, provider: string): string => {
+    const icons: Record<string, Record<string, string>> = {
+      cloudflare: {
+        'cf-workers': '⚡',
+        'cf-d1': '🗄️',
+        'cf-kv': '🔑',
+        'cf-r2': '📦',
+        'cf-do': '🔗',
+        'cf-vectorize': '🧮',
+        'cf-workers-ai': '🤖',
+        'cf-queues': '📬',
+        'cf-ai-gateway': '🌐',
+      },
+      github: {
+        'gh-actions-minutes': '⏱️',
+        'gh-actions-storage': '💾',
+        'gh-ghas-code': '🔍',
+        'gh-ghas-secrets': '🔐',
+        'gh-ghec': '👥',
+      },
+    };
+    return icons[provider]?.[id] ?? '📊';
+  };
+
+  /**
+   * Create a service row element using safe DOM methods
+   */
+  function createServiceRow(service: ResourceMetric, provider: string): HTMLElement {
+    const row = document.createElement('div');
+    row.className = 'service-row';
+    row.dataset.id = service.id;
+    row.dataset.status = service.status;
+
+    // Service column
+    const colService = document.createElement('div');
+    colService.className = 'col-service';
+
+    const iconSpan = document.createElement('span');
+    iconSpan.className = 'service-icon';
+    iconSpan.textContent = getIcon(service.id, provider);
+
+    const nameSpan = document.createElement('span');
+    nameSpan.className = 'service-name';
+    nameSpan.textContent = service.label;
+
+    colService.appendChild(iconSpan);
+    colService.appendChild(nameSpan);
+
+    // Usage column
+    const colUsage = document.createElement('div');
+    colUsage.className = 'col-usage';
+
+    const currentSpan = document.createElement('span');
+    currentSpan.className = 'usage-current';
+    currentSpan.textContent = formatLargeNumber(service.current);
+
+    const limitSpan = document.createElement('span');
+    limitSpan.className = 'usage-limit';
+    if (service.limit !== null) {
+      limitSpan.textContent = `/ ${formatLargeNumber(service.limit)} ${service.unit}`;
+    } else {
+      limitSpan.textContent = service.unit;
+    }
+
+    colUsage.appendChild(currentSpan);
+    colUsage.appendChild(limitSpan);
+
+    // Utilization column
+    const colUtil = document.createElement('div');
+    colUtil.className = 'col-utilization';
+
+    if (service.limit !== null) {
+      const barContainer = document.createElement('div');
+      barContainer.className = 'utilization-bar-container';
+      barContainer.dataset.percentage = String(service.percentage);
+      barContainer.dataset.status = service.status;
+
+      const track = document.createElement('div');
+      track.className = 'utilization-bar-track';
+      track.style.height = '6px';
+
+      const fill = document.createElement('div');
+      fill.className = 'utilization-bar-fill';
+      fill.style.width = `${Math.min(service.percentage, 100)}%`;
+      fill.style.backgroundColor = getStatusColor(service.status);
+
+      track.appendChild(fill);
+
+      const label = document.createElement('span');
+      label.className = `utilization-bar-label status-${service.status}`;
+      label.textContent = `${service.percentage.toFixed(0)}%`;
+
+      barContainer.appendChild(track);
+      barContainer.appendChild(label);
+      colUtil.appendChild(barContainer);
+    } else {
+      const badge = document.createElement('span');
+      badge.className = 'subscription-badge';
+      badge.textContent = 'Subscription';
+      colUtil.appendChild(badge);
+    }
+
+    // Cost column
+    const colCost = document.createElement('div');
+    colCost.className = 'col-cost';
+    const costSpan = document.createElement('span');
+    costSpan.className = 'cost-value';
+    costSpan.textContent = formatCurrency(service.costEstimate);
+    colCost.appendChild(costSpan);
+
+    // Overage column
+    const colOverage = document.createElement('div');
+    colOverage.className = 'col-overage';
+
+    const overageSpan = document.createElement('span');
+    if (service.overage > 0) {
+      overageSpan.className = 'overage-value overage-active';
+      overageSpan.textContent = `+${formatLargeNumber(service.overage)}`;
+
+      const costSpanOv = document.createElement('span');
+      costSpanOv.className = 'overage-cost';
+      costSpanOv.textContent = `(${formatCurrency(service.overageCost)})`;
+      overageSpan.appendChild(costSpanOv);
+    } else {
+      overageSpan.className = 'overage-value overage-none';
+      overageSpan.textContent = '—';
+    }
+    colOverage.appendChild(overageSpan);
+
+    // Assemble row
+    row.appendChild(colService);
+    row.appendChild(colUsage);
+    row.appendChild(colUtil);
+    row.appendChild(colCost);
+    row.appendChild(colOverage);
+
+    return row;
+  }
+
+  type UpdateServiceListFn = (
+    provider: 'cloudflare' | 'github',
+    services: ResourceMetric[]
+  ) => void;
+
+  (window as unknown as { updateServiceList: UpdateServiceListFn }).updateServiceList = (
+    provider: 'cloudflare' | 'github',
+    services: ResourceMetric[]
+  ) => {
+    const bodyEl = document.getElementById(`service-list-body-${provider}`);
+    const tableEl = document.getElementById(`service-list-table-${provider}`);
+    const emptyEl = document.getElementById(`service-list-empty-${provider}`);
+    if (!bodyEl) return;
+
+    // Clear existing rows
+    while (bodyEl.firstChild) {
+      bodyEl.removeChild(bodyEl.firstChild);
+    }
+
+    // Toggle empty state vs table visibility
+    if (services.length > 0) {
+      if (emptyEl) emptyEl.style.display = 'none';
+      if (tableEl) tableEl.style.display = '';
+
+      // Add new rows using safe DOM methods
+      for (const service of services) {
+        const row = createServiceRow(service, provider);
+        bodyEl.appendChild(row);
+      }
+    } else {
+      if (emptyEl) emptyEl.style.display = '';
+      if (tableEl) tableEl.style.display = 'none';
+    }
+  };
+</script>