@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/full/dashboard/src/pages/tests.astro

@@ -0,0 +1,431 @@
+---
+import DashboardLayout from '../layouts/DashboardLayout.astro';
+
+interface TestRun {
+  id: string;
+  project: string;
+  timestamp: string;
+  duration_ms: number;
+  total_tests: number;
+  passed_tests: number;
+  failed_tests: number;
+  skipped_tests: number;
+  pass_rate: number;
+  branch: string | null;
+  commit_sha: string | null;
+  commit_message: string | null;
+  environment: string;
+  trigger: string;
+  kv_report_key: string | null;
+}
+
+interface FlakyTest {
+  test_name: string;
+  failure_count: number;
+  total_count: number;
+  failure_rate: number;
+  last_failed_at: string | null;
+}
+
+interface Anomaly {
+  run_id: string;
+  project: string;
+  timestamp: string;
+  pass_rate: number;
+  baseline_pass_rate: number;
+  drop_percentage: number;
+}
+
+const runtime = (Astro.locals as App.Locals | undefined)?.runtime;
+const db = runtime?.env?.PLATFORM_DB;
+const kv = runtime?.env?.PLATFORM_CACHE;
+
+let recentRuns: TestRun[] = [];
+let flakyTests: FlakyTest[] = [];
+let anomalies: Anomaly[] = [];
+let totalRuns = 0;
+let avgPassRate = 0;
+let totalTests = 0;
+let flakyTestCount = 0;
+
+if (db && kv) {
+  // Get recent test runs
+  const cachedRuns = await kv.get('tests:recent:runs');
+  if (cachedRuns) {
+    recentRuns = JSON.parse(cachedRuns);
+  } else {
+    const result = await db
+      .prepare(
+        `SELECT
+          id, project, timestamp, duration_ms, total_tests, passed_tests,
+          failed_tests, skipped_tests, pass_rate, branch, commit_sha,
+          commit_message, environment, trigger, kv_report_key
+        FROM runs
+        ORDER BY timestamp DESC
+        LIMIT 20`
+      )
+      .all<TestRun>();
+
+    recentRuns = result.results ?? [];
+
+    // Cache for 5 minutes
+    await kv.put('tests:recent:runs', JSON.stringify(recentRuns), {
+      expirationTtl: 300,
+    });
+  }
+
+  // Get flaky tests (failure rate > 20%)
+  const cachedFlaky = await kv.get('tests:flaky:all');
+  if (cachedFlaky) {
+    flakyTests = JSON.parse(cachedFlaky);
+  } else {
+    const result = await db
+      .prepare(
+        `SELECT
+          test_name,
+          failure_count,
+          total_count,
+          failure_rate,
+          last_failed_at
+        FROM test_flakiness
+        WHERE is_flaky = 1
+        ORDER BY failure_rate DESC
+        LIMIT 20`
+      )
+      .all<FlakyTest>();
+
+    flakyTests = result.results ?? [];
+
+    await kv.put('tests:flaky:all', JSON.stringify(flakyTests), {
+      expirationTtl: 300,
+    });
+  }
+
+  // Calculate anomalies (runs with >10% drop from 7-day baseline)
+  // For each recent run, compare to baseline
+  const anomaliesTemp: Anomaly[] = [];
+
+  for (const run of recentRuns.slice(0, 10)) {
+    const sevenDaysAgo = new Date(run.timestamp);
+    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+
+    const baseline = await db
+      .prepare(
+        `SELECT AVG(pass_rate) as avg_pass_rate
+        FROM runs
+        WHERE project = ?
+          AND timestamp >= ?
+          AND timestamp < ?
+          AND id != ?`
+      )
+      .bind(run.project, sevenDaysAgo.toISOString(), run.timestamp, run.id)
+      .first<{ avg_pass_rate: number | null }>();
+
+    if (baseline && baseline.avg_pass_rate) {
+      const dropPercentage =
+        ((baseline.avg_pass_rate - run.pass_rate) / baseline.avg_pass_rate) * 100;
+
+      if (dropPercentage > 10) {
+        anomaliesTemp.push({
+          run_id: run.id,
+          project: run.project,
+          timestamp: run.timestamp,
+          pass_rate: run.pass_rate,
+          baseline_pass_rate: baseline.avg_pass_rate,
+          drop_percentage: dropPercentage,
+        });
+      }
+    }
+  }
+
+  anomalies = anomaliesTemp;
+
+  // Get summary statistics
+  const stats = await db
+    .prepare(
+      `SELECT
+        COUNT(*) as total_runs,
+        AVG(pass_rate) as avg_pass_rate,
+        SUM(total_tests) as total_tests
+      FROM runs`
+    )
+    .first<{ total_runs: number; avg_pass_rate: number; total_tests: number }>();
+
+  totalRuns = stats?.total_runs ?? 0;
+  avgPassRate = stats?.avg_pass_rate ?? 0;
+  totalTests = stats?.total_tests ?? 0;
+
+  flakyTestCount = flakyTests.length;
+}
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+function getPassRateBadgeColor(passRate: number): string {
+  if (passRate >= 0.95) return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
+  if (passRate >= 0.8)
+    return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300';
+  if (passRate >= 0.6)
+    return 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300';
+  return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
+}
+
+function getEnvironmentBadgeColor(environment: string): string {
+  if (environment === 'ci') return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300';
+  return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
+}
+---
+
+<DashboardLayout title="Tests">
+  <div class="space-y-6">
+    <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Test Results</h2>
+
+    <!-- Summary Cards -->
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-4">
+      <div class="metric-card">
+        <div class="metric-title">Total Runs</div>
+        <div class="metric-value">{totalRuns}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">All time</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-title">Average Pass Rate</div>
+        <div class="metric-value">{(avgPassRate * 100).toFixed(1)}%</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">Across all runs</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-title">Flaky Tests</div>
+        <div class="metric-value">{flakyTestCount}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">&gt;20% failure rate</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-title">Anomalies</div>
+        <div class="metric-value">{anomalies.length}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">Recent drops</div>
+      </div>
+    </div>
+
+    <!-- Anomaly Alerts (if any) -->
+    {
+      anomalies.length > 0 && (
+        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6">
+          <h3 class="text-xl font-semibold text-red-900 dark:text-red-300 mb-4 flex items-center gap-2">
+            <span>🚨</span>
+            <span>Anomalies Detected ({anomalies.length})</span>
+          </h3>
+
+          <div class="space-y-3">
+            {anomalies.map((anomaly) => (
+              <div class="bg-white dark:bg-gray-800 border border-red-300 dark:border-red-700 rounded-lg p-4">
+                <div class="flex items-start justify-between">
+                  <div class="flex-1">
+                    <div class="flex items-center gap-2 mb-2">
+                      <span class="font-mono text-sm text-gray-900 dark:text-white">
+                        {anomaly.project}
+                      </span>
+                      <span class="px-2 py-1 rounded text-xs font-bold bg-red-500 text-white">
+                        -{anomaly.drop_percentage.toFixed(1)}%
+                      </span>
+                    </div>
+
+                    <div class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <div>
+                        Current:{' '}
+                        <span class="font-semibold">{(anomaly.pass_rate * 100).toFixed(1)}%</span> |
+                        Baseline:{' '}
+                        <span class="font-semibold">
+                          {(anomaly.baseline_pass_rate * 100).toFixed(1)}%
+                        </span>
+                      </div>
+                      <div>{formatDate(anomaly.timestamp)}</div>
+                    </div>
+
+                    {recentRuns.find((r) => r.id === anomaly.run_id)?.kv_report_key && (
+                      <div class="mt-2">
+                        <a
+                          href={`/api/test-reports/${anomaly.run_id}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          class="text-sm text-blue-600 dark:text-blue-400 hover:underline"
+                        >
+                          View HTML Report →
+                        </a>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+    }
+
+    <!-- Flaky Tests -->
+    {
+      flakyTests.length > 0 && (
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Flaky Tests ({flakyTests.length})
+          </h3>
+
+          <div class="space-y-3">
+            {flakyTests.map((test) => (
+              <div class="border border-yellow-200 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-4">
+                <div class="flex items-start justify-between">
+                  <div class="flex-1">
+                    <div class="flex items-center gap-2 mb-2">
+                      <span class="px-2 py-1 rounded text-xs font-bold bg-yellow-500 text-white">
+                        {(test.failure_rate * 100).toFixed(1)}% failure rate
+                      </span>
+                    </div>
+
+                    <div class="text-sm font-mono text-gray-900 dark:text-white mb-2">
+                      {test.test_name}
+                    </div>
+
+                    <div class="text-xs text-gray-600 dark:text-gray-400">
+                      <span>{test.failure_count} failures</span>
+                      <span class="mx-2">•</span>
+                      <span>{test.total_count} total runs</span>
+                      {test.last_failed_at && (
+                        <>
+                          <span class="mx-2">•</span>
+                          <span>Last failed: {formatDate(test.last_failed_at)}</span>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+    }
+
+    <!-- Recent Test Runs -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Recent Test Runs</h3>
+
+      {
+        recentRuns.length === 0 ? (
+          <p class="text-gray-600 dark:text-gray-400">No test runs yet.</p>
+        ) : (
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead class="bg-gray-50 dark:bg-gray-900">
+                <tr>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Project
+                  </th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Time
+                  </th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Pass Rate
+                  </th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Tests
+                  </th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Duration
+                  </th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Branch
+                  </th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Env
+                  </th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Report
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {recentRuns.map((run) => (
+                  <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                    <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-gray-900 dark:text-white">
+                      {run.project}
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
+                      {formatDate(run.timestamp)}
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap">
+                      <span
+                        class={`px-2 py-1 rounded text-xs font-medium ${getPassRateBadgeColor(run.pass_rate)}`}
+                      >
+                        {(run.pass_rate * 100).toFixed(1)}%
+                      </span>
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
+                      <span class="text-green-600 dark:text-green-400">{run.passed_tests}</span>
+                      <span class="mx-1">/</span>
+                      <span>{run.total_tests}</span>
+                      {run.failed_tests > 0 && (
+                        <span class="ml-2 text-red-600 dark:text-red-400">
+                          ({run.failed_tests} failed)
+                        </span>
+                      )}
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
+                      {formatDuration(run.duration_ms)}
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-gray-600 dark:text-gray-400">
+                      {run.branch || '-'}
+                      {run.commit_sha && (
+                        <span class="ml-1 text-xs text-gray-500">
+                          ({run.commit_sha.substring(0, 7)})
+                        </span>
+                      )}
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap">
+                      <span
+                        class={`px-2 py-1 rounded text-xs font-medium ${getEnvironmentBadgeColor(run.environment)}`}
+                      >
+                        {run.environment}
+                      </span>
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap text-sm">
+                      {run.kv_report_key ? (
+                        <a
+                          href={`/api/test-reports/${run.id}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          class="text-blue-600 dark:text-blue-400 hover:underline"
+                        >
+                          View
+                        </a>
+                      ) : (
+                        <span class="text-gray-400 dark:text-gray-600">-</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )
+      }
+    </div>
+  </div>
+</DashboardLayout>