Add most flaky jobs section to insights

Author: dsherret

deno.json

@@ -4,14 +4,22 @@
     "check": "deno fmt --check . && deno lint . && deno check",
     "dev": "vite",
     "build": "vite build",
-    "start": "deno serve -A _fresh/server.js",
+    // todo(https://github.com/denoland/deno/pull/31718): remove this --allow-net
+    "start": "deno serve -P --allow-net _fresh/server.js",
     "update": "deno run -A -r jsr:@fresh/update ."
   },
   "test": {
     "permissions": {
       "env": true
     }
   },
+  "permissions": {
+    "default": {
+      "env": true,
+      "read": ["_fresh"],
+      "net": ["*.github.com", "*.windows.net"]
+    }
+  },
   "lint": {
     "rules": {
       "tags": [

routes/insights.test.tsx

@@ -523,3 +523,104 @@ Deno.test("returns empty lists when no issues found", async () => {
   assertEquals(result.data.failedTests.length, 0);
   assertEquals(result.data.totalRunsAnalyzed, 1);
 });
+
+Deno.test("tracks flaky job counts", async () => {
+  const mockGithub = new MockGitHubApiClient();
+  const mockDownloader = new MockTestResultsDownloader();
+
+  const runs = [
+    createMockRun(1, "CI", "completed", "main"),
+    createMockRun(2, "CI", "completed", "main"),
+  ];
+
+  mockGithub.mockRuns({ totalCount: 2, runs });
+
+  mockDownloader.mockResults(1, [
+    {
+      name: "linux-x64",
+      tests: [
+        {
+          name: "test1",
+          path: "file1.test.ts",
+          flakyCount: 2,
+          subTests: [],
+        },
+        {
+          name: "test2",
+          path: "file2.test.ts",
+          flakyCount: 3,
+          subTests: [],
+        },
+      ],
+    },
+    {
+      name: "windows-x64",
+      tests: [
+        {
+          name: "test1",
+          path: "file1.test.ts",
+          flakyCount: 1,
+          subTests: [],
+        },
+      ],
+    },
+    {
+      name: "macos-arm64",
+      tests: [
+        {
+          name: "test3",
+          path: "file3.test.ts",
+          flakyCount: 4,
+          subTests: [],
+        },
+      ],
+    },
+  ]);
+
+  mockDownloader.mockResults(2, [
+    {
+      name: "linux-x64",
+      tests: [
+        {
+          name: "test1",
+          path: "file1.test.ts",
+          flakyCount: 1,
+          subTests: [],
+        },
+      ],
+    },
+    {
+      name: "windows-x64",
+      tests: [
+        {
+          name: "test2",
+          path: "file2.test.ts",
+          flakyCount: 2,
+          subTests: [],
+        },
+      ],
+    },
+  ]);
+
+  const controller = new InsightsPageController(
+    new NullLogger(),
+    mockGithub,
+    mockDownloader,
+  );
+  const result = await controller.get();
+
+  // Verify flakyJobs is returned and sorted by count descending
+  assertEquals(result.data.flakyJobs.length, 3);
+
+  // linux-x64: 2 + 3 + 1 = 6 total flakes
+  assertEquals(result.data.flakyJobs[0].name, "linux-x64");
+  assertEquals(result.data.flakyJobs[0].count, 6);
+
+  // macos-arm64: 4 total flakes
+  assertEquals(result.data.flakyJobs[1].name, "macos-arm64");
+  assertEquals(result.data.flakyJobs[1].count, 4);
+
+  // windows-x64: 1 + 2 = 3 total flakes
+  assertEquals(result.data.flakyJobs[2].name, "windows-x64");
+  assertEquals(result.data.flakyJobs[2].count, 3);
+});

routes/insights.tsx

@@ -80,6 +80,9 @@ export class InsightsPageController {
       }
     >();
 
+    // Track flaky test counts per job
+    const jobFlakyCountsMap = new Map<string, number>();
+
     function processTest(
       test: RecordedTestResult,
       runId: number,
@@ -113,6 +116,12 @@ export class InsightsPageController {
             jobCounts: new Map([[jobName, test.flakyCount]]),
           });
         }
+
+        // Track flaky counts per job
+        jobFlakyCountsMap.set(
+          jobName,
+          (jobFlakyCountsMap.get(jobName) || 0) + test.flakyCount,
+        );
       }
 
       // Track failed tests
@@ -166,10 +175,16 @@ export class InsightsPageController {
       (a, b) => b.failureCount - a.failureCount,
     );
 
+    // Convert job flaky counts to array and sort
+    const flakyJobs = Array.from(jobFlakyCountsMap.entries())
+      .map(([name, count]) => ({ name, count }))
+      .sort((a, b) => b.count - a.count);
+
     return {
       data: {
         flakyTests,
         failedTests,
+        flakyJobs,
         totalRunsAnalyzed: mainBranchRuns.length,
         oldestRun: mainBranchRuns[mainBranchRuns.length - 1],
         newestRun: mainBranchRuns[0],
@@ -179,8 +194,14 @@ export class InsightsPageController {
 }
 
 export default define.page<typeof handler>(function InsightsPage({ data }) {
-  const { flakyTests, failedTests, totalRunsAnalyzed, oldestRun, newestRun } =
-    data;
+  const {
+    flakyTests,
+    failedTests,
+    flakyJobs,
+    totalRunsAnalyzed,
+    oldestRun,
+    newestRun,
+  } = data;
 
   return (
     <div class="container mx-auto px-4 py-8 max-w-7xl">
@@ -270,7 +291,7 @@ export default define.page<typeof handler>(function InsightsPage({ data }) {
           )}
       </div>
 
-      <div class="bg-white rounded-lg shadow">
+      <div class="bg-white rounded-lg shadow mb-6">
         <div class="bg-yellow-100 px-4 py-3 rounded-t-lg border-b border-yellow-300">
           <div class="flex items-center justify-between">
             <h2 class="font-semibold text-xl">
@@ -354,6 +375,52 @@ export default define.page<typeof handler>(function InsightsPage({ data }) {
             </div>
           )}
       </div>
+
+      <div class="bg-white rounded-lg shadow">
+        <div class="bg-purple-100 px-4 py-3 rounded-t-lg border-b border-purple-300">
+          <div class="flex items-center justify-between">
+            <h2 class="font-semibold text-xl">
+              🔧 Most Flaky Jobs ({flakyJobs.length})
+            </h2>
+          </div>
+        </div>
+        {flakyJobs.length === 0
+          ? (
+            <div class="p-8 text-center">
+              <div class="text-6xl mb-4">🎉</div>
+              <h3 class="text-xl font-bold mb-2">No Flaky Jobs!</h3>
+              <p class="text-gray-600">
+                No jobs had flaky tests across the analyzed runs.
+              </p>
+            </div>
+          )
+          : (
+            <div class="divide-y divide-gray-200">
+              {flakyJobs.map((job, idx) => (
+                <div
+                  key={idx}
+                  class="px-4 py-3 hover:bg-gray-50 transition-colors"
+                >
+                  <div class="flex items-center justify-between gap-4">
+                    <div class="flex-1 min-w-0">
+                      <div class="font-mono text-sm font-semibold text-gray-900">
+                        {job.name}
+                      </div>
+                    </div>
+                    <div class="flex-shrink-0">
+                      <div class="bg-purple-100 text-purple-800 px-3 py-2 rounded text-center">
+                        <div class="text-2xl font-bold">
+                          {job.count}
+                        </div>
+                        <div class="text-xs">flaky tests</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+      </div>
     </div>
   );
 });