@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,537 @@
+---
+/**
+ * GitHubUsageCard Component
+ *
+ * Displays GitHub usage metrics including Actions minutes, storage, and GHAS.
+ * Data is fetched from the /api/usage/utilization endpoint's `github` field.
+ * This component renders a placeholder initially and is populated via JavaScript.
+ */
+---
+
+<div class="github-usage-card" id="github-usage-card" role="region" aria-label="GitHub Usage">
+  <div class="card-header">
+    <span class="card-icon">
+      <!-- GitHub Octicon -->
+      <svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor" aria-hidden="true">
+        <path
+          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+        ></path>
+      </svg>
+    </span>
+    <span class="card-label">GitHub</span>
+    <span class="plan-badge" id="github-plan-badge">-</span>
+  </div>
+
+  <!-- Loading state -->
+  <div id="github-loading" class="github-loading">
+    <div class="loading-text">Loading GitHub data...</div>
+  </div>
+
+  <!-- No data state -->
+  <div id="github-no-data" class="github-no-data" style="display: none;">
+    <div class="no-data-text">No GitHub data collected yet</div>
+    <div class="no-data-hint">Data is collected daily at midnight UTC</div>
+  </div>
+
+  <!-- Data content (hidden until populated) -->
+  <div id="github-content" class="github-content" style="display: none;">
+    <!-- Stale warning -->
+    <div id="github-stale-warning" class="stale-warning" style="display: none;">
+      ⚠️ Data may be stale (>24h old)
+    </div>
+
+    <!-- Actions Minutes Progress -->
+    <div class="metric-section">
+      <div class="metric-header">
+        <span class="metric-label">Actions Minutes</span>
+        <span class="metric-value" id="github-actions-pct">0%</span>
+      </div>
+      <div class="progress-bar">
+        <div class="progress-fill" id="github-actions-progress" style="width: 0%;"></div>
+      </div>
+      <div class="metric-detail">
+        <span id="github-actions-used">0</span>
+        <span class="metric-separator">/</span>
+        <span id="github-actions-included">50,000</span>
+        <span class="metric-unit">mins</span>
+      </div>
+    </div>
+
+    <!-- Storage Usage -->
+    <div class="metric-section">
+      <div class="metric-header">
+        <span class="metric-label">Actions Storage</span>
+      </div>
+      <div class="metric-detail storage-detail">
+        <span id="github-storage-used">0</span>
+        <span class="metric-unit">GB-hours</span>
+        <span class="metric-separator">of</span>
+        <span id="github-storage-included">50</span>
+        <span class="metric-unit">GB included</span>
+      </div>
+    </div>
+
+    <!-- GHAS (if any) -->
+    <div id="github-ghas-section" class="metric-section ghas-section" style="display: none;">
+      <div class="metric-header">
+        <span class="metric-label">Advanced Security</span>
+      </div>
+      <div class="ghas-details">
+        <div class="ghas-item">
+          <span class="ghas-label">Code Security:</span>
+          <span id="github-ghas-code" class="ghas-value">0</span>
+          <span class="ghas-unit">seats</span>
+        </div>
+        <div class="ghas-item">
+          <span class="ghas-label">Secret Protection:</span>
+          <span id="github-ghas-secret" class="ghas-value">0</span>
+          <span class="ghas-unit">seats</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Total Cost -->
+    <div class="cost-section">
+      <div class="cost-header">
+        <span class="cost-label">MTD Cost</span>
+        <span class="cost-value" id="github-total-cost">$0.00</span>
+      </div>
+    </div>
+
+    <!-- Last Updated -->
+    <div class="last-updated">
+      <span class="last-updated-label">Last updated:</span>
+      <span id="github-last-updated" class="last-updated-value">-</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .github-usage-card {
+    background-color: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    padding: 1.25rem;
+    transition: all 0.15s ease;
+  }
+
+  .github-usage-card:hover {
+    border-color: #d1d5db;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .card-icon {
+    color: #24292f;
+    display: flex;
+    align-items: center;
+  }
+
+  .card-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #374151;
+  }
+
+  .plan-badge {
+    margin-left: auto;
+    font-size: 0.65rem;
+    font-weight: 500;
+    padding: 0.125rem 0.375rem;
+    border-radius: 9999px;
+    background-color: #dbeafe;
+    color: #1e40af;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  .github-loading,
+  .github-no-data {
+    padding: 1rem 0;
+    text-align: center;
+  }
+
+  .loading-text {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+
+  .no-data-text {
+    font-size: 0.875rem;
+    color: #6b7280;
+    margin-bottom: 0.25rem;
+  }
+
+  .no-data-hint {
+    font-size: 0.75rem;
+    color: #9ca3af;
+  }
+
+  .stale-warning {
+    background-color: #fef3c7;
+    border: 1px solid #f59e0b;
+    color: #92400e;
+    font-size: 0.75rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: 0.25rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .metric-section {
+    margin-bottom: 1rem;
+  }
+
+  .metric-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.375rem;
+  }
+
+  .metric-label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  .metric-value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #374151;
+  }
+
+  .progress-bar {
+    width: 100%;
+    height: 0.5rem;
+    background-color: #e5e7eb;
+    border-radius: 9999px;
+    overflow: hidden;
+    margin-bottom: 0.375rem;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background-color: #10b981;
+    border-radius: 9999px;
+    transition: width 0.3s ease;
+  }
+
+  .progress-fill.warning {
+    background-color: #f59e0b;
+  }
+
+  .progress-fill.danger {
+    background-color: #ef4444;
+  }
+
+  .metric-detail {
+    font-size: 0.75rem;
+    color: #6b7280;
+  }
+
+  .metric-separator {
+    margin: 0 0.125rem;
+    color: #9ca3af;
+  }
+
+  .metric-unit {
+    color: #9ca3af;
+    margin-left: 0.125rem;
+  }
+
+  .storage-detail {
+    margin-top: 0.25rem;
+  }
+
+  .ghas-section {
+    padding-top: 0.75rem;
+    border-top: 1px solid #f3f4f6;
+  }
+
+  .ghas-details {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .ghas-item {
+    font-size: 0.75rem;
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+  }
+
+  .ghas-label {
+    color: #6b7280;
+  }
+
+  .ghas-value {
+    font-weight: 600;
+    color: #374151;
+  }
+
+  .ghas-unit {
+    color: #9ca3af;
+  }
+
+  .cost-section {
+    padding-top: 0.75rem;
+    border-top: 1px solid #f3f4f6;
+    margin-top: 0.75rem;
+  }
+
+  .cost-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .cost-label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  .cost-value {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #1f2937;
+  }
+
+  .last-updated {
+    margin-top: 0.75rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid #f3f4f6;
+    font-size: 0.65rem;
+    color: #9ca3af;
+  }
+
+  .last-updated-label {
+    margin-right: 0.25rem;
+  }
+
+  .last-updated-value {
+    color: #6b7280;
+  }
+
+  @media (max-width: 640px) {
+    .github-usage-card {
+      padding: 1rem;
+    }
+
+    .cost-value {
+      font-size: 1rem;
+    }
+  }
+
+  /* Dark mode support */
+  @media (prefers-color-scheme: dark) {
+    .github-usage-card {
+      background-color: #1f2937;
+      border-color: #374151;
+    }
+
+    .github-usage-card:hover {
+      border-color: #4b5563;
+    }
+
+    .card-icon {
+      color: #f9fafb;
+    }
+
+    .card-label {
+      color: #e5e7eb;
+    }
+
+    .plan-badge {
+      background-color: #1e3a5f;
+      color: #93c5fd;
+    }
+
+    .loading-text,
+    .no-data-text,
+    .metric-label,
+    .cost-label {
+      color: #9ca3af;
+    }
+
+    .metric-value,
+    .cost-value {
+      color: #f9fafb;
+    }
+
+    .progress-bar {
+      background-color: #374151;
+    }
+
+    .metric-detail,
+    .ghas-label {
+      color: #9ca3af;
+    }
+
+    .ghas-value {
+      color: #e5e7eb;
+    }
+
+    .last-updated {
+      border-color: #374151;
+    }
+
+    .cost-section,
+    .ghas-section {
+      border-color: #374151;
+    }
+  }
+</style>
+
+<script>
+  /**
+   * Update the GitHub Usage Card with data from the utilization API.
+   * This function is called from the page's fetchUtilizationData.
+   */
+  interface GitHubData {
+    mtdUsage: {
+      actionsMinutes: number;
+      actionsMinutesIncluded: number;
+      actionsMinutesUsagePct: number;
+      actionsStorageGbHours: number;
+      actionsStorageGbIncluded: number;
+      ghecUserMonths: number;
+      ghasCodeSecuritySeats: number;
+      ghasSecretProtectionSeats: number;
+      totalCost: number;
+    };
+    plan: {
+      name: string;
+      filledSeats: number;
+      totalSeats: number;
+    };
+    lastUpdated: string | null;
+    isStale: boolean;
+  }
+
+  function formatNumber(num: number): string {
+    return num.toLocaleString();
+  }
+
+  function formatCurrency(amount: number): string {
+    return `$${amount.toFixed(2)}`;
+  }
+
+  function formatRelativeTime(isoString: string): string {
+    const date = new Date(isoString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+
+    if (diffHours < 1) {
+      return 'Just now';
+    } else if (diffHours < 24) {
+      return `${diffHours}h ago`;
+    } else {
+      const diffDays = Math.floor(diffHours / 24);
+      return `${diffDays}d ago`;
+    }
+  }
+
+  function updateGitHubCard(data: GitHubData | null): void {
+    const loadingEl = document.getElementById('github-loading');
+    const noDataEl = document.getElementById('github-no-data');
+    const contentEl = document.getElementById('github-content');
+
+    if (!data) {
+      // Show no data state
+      if (loadingEl) loadingEl.style.display = 'none';
+      if (noDataEl) noDataEl.style.display = 'block';
+      if (contentEl) contentEl.style.display = 'none';
+      return;
+    }
+
+    // Show content
+    if (loadingEl) loadingEl.style.display = 'none';
+    if (noDataEl) noDataEl.style.display = 'none';
+    if (contentEl) contentEl.style.display = 'block';
+
+    const { mtdUsage, plan, lastUpdated, isStale } = data;
+
+    // Update plan badge
+    const planBadge = document.getElementById('github-plan-badge');
+    if (planBadge) {
+      planBadge.textContent = plan.name;
+    }
+
+    // Stale warning
+    const staleWarning = document.getElementById('github-stale-warning');
+    if (staleWarning) {
+      staleWarning.style.display = isStale ? 'block' : 'none';
+    }
+
+    // Actions minutes
+    const actionsPct = document.getElementById('github-actions-pct');
+    const actionsProgress = document.getElementById('github-actions-progress');
+    const actionsUsed = document.getElementById('github-actions-used');
+    const actionsIncluded = document.getElementById('github-actions-included');
+
+    if (actionsPct) actionsPct.textContent = `${mtdUsage.actionsMinutesUsagePct.toFixed(1)}%`;
+    if (actionsProgress) {
+      const pct = Math.min(mtdUsage.actionsMinutesUsagePct, 100);
+      actionsProgress.style.width = `${pct}%`;
+      // Color based on usage
+      actionsProgress.classList.remove('warning', 'danger');
+      if (mtdUsage.actionsMinutesUsagePct >= 90) {
+        actionsProgress.classList.add('danger');
+      } else if (mtdUsage.actionsMinutesUsagePct >= 70) {
+        actionsProgress.classList.add('warning');
+      }
+    }
+    if (actionsUsed) actionsUsed.textContent = formatNumber(mtdUsage.actionsMinutes);
+    if (actionsIncluded)
+      actionsIncluded.textContent = formatNumber(mtdUsage.actionsMinutesIncluded);
+
+    // Storage
+    const storageUsed = document.getElementById('github-storage-used');
+    const storageIncluded = document.getElementById('github-storage-included');
+    if (storageUsed) storageUsed.textContent = mtdUsage.actionsStorageGbHours.toFixed(2);
+    if (storageIncluded) storageIncluded.textContent = String(mtdUsage.actionsStorageGbIncluded);
+
+    // GHAS (show only if there's usage)
+    const ghasSection = document.getElementById('github-ghas-section');
+    const ghasCode = document.getElementById('github-ghas-code');
+    const ghasSecret = document.getElementById('github-ghas-secret');
+
+    const hasGhas = mtdUsage.ghasCodeSecuritySeats > 0 || mtdUsage.ghasSecretProtectionSeats > 0;
+    if (ghasSection) {
+      ghasSection.style.display = hasGhas ? 'block' : 'none';
+    }
+    if (ghasCode) ghasCode.textContent = String(mtdUsage.ghasCodeSecuritySeats);
+    if (ghasSecret) ghasSecret.textContent = String(mtdUsage.ghasSecretProtectionSeats);
+
+    // Total cost
+    const totalCost = document.getElementById('github-total-cost');
+    if (totalCost) totalCost.textContent = formatCurrency(mtdUsage.totalCost);
+
+    // Last updated
+    const lastUpdatedEl = document.getElementById('github-last-updated');
+    if (lastUpdatedEl) {
+      lastUpdatedEl.textContent = lastUpdated ? formatRelativeTime(lastUpdated) : 'Unknown';
+    }
+  }
+
+  // Expose to global scope for the page to call
+  declare global {
+    interface Window {
+      updateGitHubUsageCard: typeof updateGitHubCard;
+    }
+  }
+  window.updateGitHubUsageCard = updateGitHubCard;
+</script>