@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

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

@@ -0,0 +1,659 @@
+---
+/**
+ * WorkersBreakdownTable Component
+ *
+ * Shows Workers usage breakdown by project with individual worker details.
+ * Part of Enhancement #1: Per-project operational breakdown.
+ *
+ * Features:
+ * - Group workers by project
+ * - Show total requests per project
+ * - Expand/collapse to see individual workers
+ * - Sort by project or requests
+ */
+
+export interface WorkerData {
+  scriptName: string;
+  requests: number;
+  errors: number;
+  cpuTime: number;
+}
+
+export interface ProjectBreakdown {
+  project: string;
+  totalRequests: number;
+  totalErrors: number;
+  workerCount: number;
+  workers: WorkerData[];
+}
+
+interface Props {
+  /** Pre-grouped breakdown data (if provided by server) */
+  breakdown?: ProjectBreakdown[];
+}
+
+const { breakdown = [] } = Astro.props;
+
+// Format large numbers for display
+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();
+}
+
+// Calculate error rate percentage
+function calcErrorRate(errors: number, requests: number): string {
+  if (requests === 0) return '0%';
+  const rate = (errors / requests) * 100;
+  return rate < 0.01 ? '<0.01%' : `${rate.toFixed(2)}%`;
+}
+---
+
+<section class="workers-breakdown-section" data-component="workers-breakdown">
+  <div class="section-header">
+    <h3 class="section-title">
+      <span class="title-icon">⚡</span>
+      Workers by Project
+    </h3>
+    <p class="section-description">
+      Request breakdown showing which projects consume the most Workers resources
+    </p>
+  </div>
+
+  <div class="breakdown-table-container" id="workers-breakdown-container">
+    <!-- Loading state -->
+    <div class="loading-state" id="workers-breakdown-loading">
+      <div class="loading-spinner"></div>
+      <span>Loading Workers breakdown...</span>
+    </div>
+
+    <!-- Empty state -->
+    <div class="empty-state" id="workers-breakdown-empty" style="display: none;">
+      <span class="empty-icon">📊</span>
+      <span class="empty-text">No Workers data available</span>
+    </div>
+
+    <!-- Data table (populated by JavaScript) -->
+    <table class="breakdown-table" id="workers-breakdown-table" role="grid" style="display: none;">
+      <thead>
+        <tr>
+          <th scope="col" class="col-expand" aria-label="Expand"></th>
+          <th scope="col" class="col-project">Project</th>
+          <th scope="col" class="col-workers">Workers</th>
+          <th scope="col" class="col-requests">Requests</th>
+          <th scope="col" class="col-errors">Error Rate</th>
+          <th scope="col" class="col-pct">% of Total</th>
+        </tr>
+      </thead>
+      <tbody id="workers-breakdown-tbody">
+        <!-- Rows populated by JavaScript -->
+      </tbody>
+      <tfoot>
+        <tr class="totals-row">
+          <td></td>
+          <td class="totals-label">Total</td>
+          <td id="total-workers">-</td>
+          <td id="total-requests">-</td>
+          <td id="total-error-rate">-</td>
+          <td>100%</td>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</section>
+
+<style>
+  .workers-breakdown-section {
+    margin-top: 1.5rem;
+    padding: 1.5rem;
+    background: var(--usage-bg-secondary, #ffffff);
+    border: 1px solid var(--usage-border-default, #e5e7eb);
+    border-radius: var(--usage-radius-xl, 12px);
+  }
+
+  .section-header {
+    margin-bottom: 1rem;
+  }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--usage-text-primary, #111827);
+    margin: 0 0 0.25rem 0;
+  }
+
+  .title-icon {
+    font-size: 1.125rem;
+  }
+
+  .section-description {
+    font-size: 0.8125rem;
+    color: var(--usage-text-secondary, #6b7280);
+    margin: 0;
+  }
+
+  .breakdown-table-container {
+    position: relative;
+    min-height: 100px;
+  }
+
+  /* Loading state */
+  .loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    color: var(--usage-text-secondary, #6b7280);
+    gap: 0.75rem;
+  }
+
+  .loading-spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--usage-border-default, #e5e7eb);
+    border-top-color: var(--usage-accent-blue, #3b82f6);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Empty state */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    color: var(--usage-text-tertiary, #9ca3af);
+  }
+
+  .empty-icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+
+  /* Table styles */
+  .breakdown-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+
+  .breakdown-table th {
+    text-align: left;
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    color: var(--usage-text-secondary, #6b7280);
+    border-bottom: 1px solid var(--usage-border-default, #e5e7eb);
+    background: var(--usage-bg-tertiary, #f9fafb);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  .breakdown-table td {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--usage-border-light, #f3f4f6);
+    color: var(--usage-text-primary, #111827);
+  }
+
+  .col-expand {
+    width: 40px;
+    text-align: center;
+  }
+
+  .col-project {
+    min-width: 140px;
+  }
+
+  .col-workers,
+  .col-requests,
+  .col-errors,
+  .col-pct {
+    text-align: right;
+    width: 100px;
+  }
+
+  /* Project row */
+  :global(.project-row) {
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  :global(.project-row:hover) {
+    background: var(--usage-bg-hover, #f9fafb);
+  }
+
+  :global(.project-row.expanded) {
+    background: var(--usage-bg-tertiary, #f9fafb);
+  }
+
+  :global(.expand-btn) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--usage-text-tertiary, #9ca3af);
+    transition: all 0.15s ease;
+    border-radius: 4px;
+  }
+
+  :global(.expand-btn:hover) {
+    background: var(--usage-bg-hover, #e5e7eb);
+    color: var(--usage-text-primary, #111827);
+  }
+
+  :global(.expand-btn.expanded) {
+    transform: rotate(90deg);
+  }
+
+  :global(.project-name) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
+  }
+
+  :global(.project-badge) {
+    display: inline-block;
+    padding: 0.125rem 0.375rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    border-radius: 4px;
+    background: var(--usage-accent-blue-light, #dbeafe);
+    color: var(--usage-accent-blue, #2563eb);
+  }
+
+  :global(.project-badge.other) {
+    background: var(--usage-bg-tertiary, #f3f4f6);
+    color: var(--usage-text-tertiary, #6b7280);
+  }
+
+  /* Worker sub-row */
+  :global(.worker-row) {
+    background: var(--usage-bg-tertiary, #f9fafb);
+  }
+
+  :global(.worker-row td) {
+    padding: 0.5rem 1rem;
+    font-size: 0.8125rem;
+    color: var(--usage-text-secondary, #6b7280);
+  }
+
+  :global(.worker-row td:first-child) {
+    padding-left: 2.5rem;
+  }
+
+  :global(.worker-name) {
+    font-family: ui-monospace, monospace;
+    font-size: 0.75rem;
+  }
+
+  /* Numeric values */
+  :global(.requests-value) {
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+  }
+
+  :global(.error-rate) {
+    font-variant-numeric: tabular-nums;
+  }
+
+  :global(.error-rate.high) {
+    color: var(--usage-status-red, #ef4444);
+    font-weight: 500;
+  }
+
+  :global(.error-rate.warning) {
+    color: var(--usage-status-yellow, #f59e0b);
+  }
+
+  :global(.pct-value) {
+    font-variant-numeric: tabular-nums;
+    color: var(--usage-text-tertiary, #9ca3af);
+  }
+
+  /* Totals row */
+  .totals-row {
+    font-weight: 600;
+    background: var(--usage-bg-tertiary, #f9fafb);
+  }
+
+  .totals-row td {
+    border-top: 2px solid var(--usage-border-default, #e5e7eb);
+    border-bottom: none;
+  }
+
+  .totals-label {
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.025em;
+    color: var(--usage-text-secondary, #6b7280);
+  }
+
+  /* Responsive */
+  @media (max-width: 640px) {
+    .breakdown-table {
+      font-size: 0.8125rem;
+    }
+
+    .breakdown-table th,
+    .breakdown-table td {
+      padding: 0.5rem 0.75rem;
+    }
+
+    .col-errors,
+    .col-pct {
+      display: none;
+    }
+  }
+
+  /* Dark mode support */
+  :global(.dark) .workers-breakdown-section {
+    background: var(--usage-bg-secondary-dark, #1f2937);
+    border-color: var(--usage-border-default-dark, #374151);
+  }
+
+  :global(.dark) .section-title {
+    color: var(--usage-text-primary-dark, #f9fafb);
+  }
+
+  :global(.dark) .breakdown-table th {
+    background: var(--usage-bg-tertiary-dark, #111827);
+    border-color: var(--usage-border-default-dark, #374151);
+    color: var(--usage-text-secondary-dark, #9ca3af);
+  }
+
+  :global(.dark) .breakdown-table td {
+    color: var(--usage-text-primary-dark, #f9fafb);
+    border-color: var(--usage-border-light-dark, #1f2937);
+  }
+
+  :global(.dark .project-row:hover),
+  :global(.dark .project-row.expanded) {
+    background: var(--usage-bg-hover-dark, #111827);
+  }
+
+  :global(.dark .worker-row) {
+    background: var(--usage-bg-tertiary-dark, #111827);
+  }
+
+  :global(.dark) .totals-row {
+    background: var(--usage-bg-tertiary-dark, #111827);
+  }
+</style>
+
+<script>
+  /**
+   * WorkersBreakdownTable JavaScript
+   *
+   * Handles data population and expand/collapse functionality.
+   * Uses safe DOM methods (createElement, textContent) instead of innerHTML.
+   */
+
+  interface WorkerData {
+    scriptName: string;
+    requests: number;
+    errors: number;
+    cpuTime: number;
+  }
+
+  interface ProjectBreakdown {
+    project: string;
+    totalRequests: number;
+    totalErrors: number;
+    workerCount: number;
+    workers: WorkerData[];
+  }
+
+  // State
+  let breakdownData: ProjectBreakdown[] = [];
+  let expandedProjects: Set<string> = new Set();
+
+  // 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();
+  }
+
+  // Calculate error rate
+  function calcErrorRate(errors: number, requests: number): string {
+    if (requests === 0) return '0%';
+    const rate = (errors / requests) * 100;
+    return rate < 0.01 ? '<0.01%' : `${rate.toFixed(2)}%`;
+  }
+
+  // Get error rate class
+  function getErrorRateClass(errors: number, requests: number): string {
+    if (requests === 0) return '';
+    const rate = (errors / requests) * 100;
+    if (rate >= 5) return 'high';
+    if (rate >= 1) return 'warning';
+    return '';
+  }
+
+  // Create a table row element
+  function createProjectRow(
+    project: ProjectBreakdown,
+    totalRequests: number,
+    isExpanded: boolean
+  ): HTMLTableRowElement {
+    const row = document.createElement('tr');
+    row.className = `project-row${isExpanded ? ' expanded' : ''}`;
+    row.dataset.project = project.project;
+
+    const pctOfTotal =
+      totalRequests > 0 ? ((project.totalRequests / totalRequests) * 100).toFixed(1) : '0';
+    const isOther = project.project === 'other' || project.project === 'Other';
+
+    // Expand button cell
+    const expandCell = document.createElement('td');
+    expandCell.className = 'col-expand';
+    const expandBtn = document.createElement('button');
+    expandBtn.className = `expand-btn${isExpanded ? ' expanded' : ''}`;
+    expandBtn.setAttribute('aria-expanded', String(isExpanded));
+    expandBtn.setAttribute('aria-label', `Expand ${project.project} workers`);
+    expandBtn.textContent = '▶';
+    expandCell.appendChild(expandBtn);
+    row.appendChild(expandCell);
+
+    // Project name cell
+    const projectCell = document.createElement('td');
+    projectCell.className = 'col-project';
+    const projectName = document.createElement('span');
+    projectName.className = 'project-name';
+    const badge = document.createElement('span');
+    badge.className = `project-badge${isOther ? ' other' : ''}`;
+    badge.textContent = project.project;
+    projectName.appendChild(badge);
+    projectCell.appendChild(projectName);
+    row.appendChild(projectCell);
+
+    // Workers count cell
+    const workersCell = document.createElement('td');
+    workersCell.className = 'col-workers';
+    workersCell.textContent = String(project.workerCount);
+    row.appendChild(workersCell);
+
+    // Requests cell
+    const requestsCell = document.createElement('td');
+    requestsCell.className = 'col-requests';
+    const requestsValue = document.createElement('span');
+    requestsValue.className = 'requests-value';
+    requestsValue.textContent = formatNumber(project.totalRequests);
+    requestsCell.appendChild(requestsValue);
+    row.appendChild(requestsCell);
+
+    // Error rate cell
+    const errorCell = document.createElement('td');
+    errorCell.className = 'col-errors';
+    const errorRate = document.createElement('span');
+    errorRate.className = `error-rate ${getErrorRateClass(project.totalErrors, project.totalRequests)}`;
+    errorRate.textContent = calcErrorRate(project.totalErrors, project.totalRequests);
+    errorCell.appendChild(errorRate);
+    row.appendChild(errorCell);
+
+    // Percentage cell
+    const pctCell = document.createElement('td');
+    pctCell.className = 'col-pct';
+    const pctValue = document.createElement('span');
+    pctValue.className = 'pct-value';
+    pctValue.textContent = `${pctOfTotal}%`;
+    pctCell.appendChild(pctValue);
+    row.appendChild(pctCell);
+
+    return row;
+  }
+
+  // Create a worker sub-row element
+  function createWorkerRow(worker: WorkerData, projectTotalRequests: number): HTMLTableRowElement {
+    const row = document.createElement('tr');
+    row.className = 'worker-row';
+
+    const workerPct =
+      projectTotalRequests > 0 ? ((worker.requests / projectTotalRequests) * 100).toFixed(1) : '0';
+
+    // Empty expand cell
+    const emptyCell1 = document.createElement('td');
+    row.appendChild(emptyCell1);
+
+    // Worker name cell
+    const nameCell = document.createElement('td');
+    nameCell.className = 'worker-name';
+    nameCell.textContent = worker.scriptName;
+    row.appendChild(nameCell);
+
+    // Empty workers count cell
+    const emptyCell2 = document.createElement('td');
+    row.appendChild(emptyCell2);
+
+    // Requests cell
+    const requestsCell = document.createElement('td');
+    requestsCell.className = 'col-requests';
+    const requestsValue = document.createElement('span');
+    requestsValue.className = 'requests-value';
+    requestsValue.textContent = formatNumber(worker.requests);
+    requestsCell.appendChild(requestsValue);
+    row.appendChild(requestsCell);
+
+    // Error rate cell
+    const errorCell = document.createElement('td');
+    errorCell.className = 'col-errors';
+    const errorRate = document.createElement('span');
+    errorRate.className = `error-rate ${getErrorRateClass(worker.errors, worker.requests)}`;
+    errorRate.textContent = calcErrorRate(worker.errors, worker.requests);
+    errorCell.appendChild(errorRate);
+    row.appendChild(errorCell);
+
+    // Percentage cell
+    const pctCell = document.createElement('td');
+    pctCell.className = 'col-pct';
+    const pctValue = document.createElement('span');
+    pctValue.className = 'pct-value';
+    pctValue.textContent = `${workerPct}%`;
+    pctCell.appendChild(pctValue);
+    row.appendChild(pctCell);
+
+    return row;
+  }
+
+  // Render table
+  function renderTable() {
+    const tbody = document.getElementById('workers-breakdown-tbody');
+    const table = document.getElementById('workers-breakdown-table');
+    const loading = document.getElementById('workers-breakdown-loading');
+    const empty = document.getElementById('workers-breakdown-empty');
+
+    if (!tbody || !table || !loading || !empty) return;
+
+    // Hide loading
+    loading.style.display = 'none';
+
+    // Check for empty data
+    if (breakdownData.length === 0) {
+      table.style.display = 'none';
+      empty.style.display = 'flex';
+      return;
+    }
+
+    // Show table
+    empty.style.display = 'none';
+    table.style.display = 'table';
+
+    // Calculate totals
+    const totalRequests = breakdownData.reduce((sum, p) => sum + p.totalRequests, 0);
+    const totalErrors = breakdownData.reduce((sum, p) => sum + p.totalErrors, 0);
+    const totalWorkers = breakdownData.reduce((sum, p) => sum + p.workerCount, 0);
+
+    // Clear tbody and rebuild using DOM methods
+    tbody.replaceChildren();
+
+    for (const project of breakdownData) {
+      const isExpanded = expandedProjects.has(project.project);
+
+      // Add project row
+      const projectRow = createProjectRow(project, totalRequests, isExpanded);
+      projectRow.addEventListener('click', () => {
+        if (expandedProjects.has(project.project)) {
+          expandedProjects.delete(project.project);
+        } else {
+          expandedProjects.add(project.project);
+        }
+        renderTable();
+      });
+      tbody.appendChild(projectRow);
+
+      // Add worker sub-rows if expanded
+      if (isExpanded) {
+        for (const worker of project.workers) {
+          const workerRow = createWorkerRow(worker, project.totalRequests);
+          tbody.appendChild(workerRow);
+        }
+      }
+    }
+
+    // Update totals using textContent (safe)
+    const totalWorkersEl = document.getElementById('total-workers');
+    const totalRequestsEl = document.getElementById('total-requests');
+    const totalErrorRateEl = document.getElementById('total-error-rate');
+
+    if (totalWorkersEl) totalWorkersEl.textContent = totalWorkers.toString();
+    if (totalRequestsEl) totalRequestsEl.textContent = formatNumber(totalRequests);
+    if (totalErrorRateEl) totalErrorRateEl.textContent = calcErrorRate(totalErrors, totalRequests);
+  }
+
+  // Public method to update data
+  window.updateWorkersBreakdown = function (data: ProjectBreakdown[]) {
+    breakdownData = data.sort((a, b) => b.totalRequests - a.totalRequests);
+    renderTable();
+  };
+
+  // Type declarations
+  declare global {
+    interface Window {
+      updateWorkersBreakdown: (data: ProjectBreakdown[]) => void;
+    }
+  }
+
+  // Initialize on load
+  document.addEventListener('DOMContentLoaded', () => {
+    // Initial render (will show loading state)
+    renderTable();
+  });
+</script>