[CRCR] Add PR/Nightly tabs to metrics page (#8538)

## Summary

- Add Pull Requests / Nightly tabs to the CRCR metrics page
(`/crcr/metrics`), matching the tab pattern on the CRCR summary page
- Consolidate `crcr_success_rate` query with an `{event_type: String}`
parameter instead of duplicating it — PR tab uses `event_type =
'pull_request'`, Nightly tab uses `event_type = 'nightly'`
- Both datasets are fetched in parallel via `useSWR`; only the active
tab's charts render
- Chart components (`PassRateChart`, `FailuresChart`, `TotalRunsChart`)
are shared via a `MetricsCharts` wrapper
- Repo chips in "Repos in view" link to the correct event view per tab
(`?event=nightly` on the Nightly tab)

## Mockup

https://subinz1.github.io/CRCR/mockups/crcr-metrics-tabs-mockup.html

## Test plan

- [ ] Verify the PR tab shows the same data as before (no regression)
- [ ] Verify the Nightly tab shows nightly success rate, failures, and
total runs
- [ ] Verify switching tabs does not cause re-fetching (both are
prefetched)
- [ ] Verify the time range dropdown applies to both tabs
- [ ] Verify the "Repos in view" list updates per tab and links to
correct event view
- [ ] Verify the "Back to CRCR Summary" link works from both tabs

Author: subinz1

torchci/clickhouse_queries/crcr_success_rate/params.json

@@ -1,10 +1,16 @@
 {
   "params": {
-    "days": "UInt64"
+    "days": "UInt64",
+    "event_type": "String"
   },
   "tests": [
     {
-      "days": "30"
+      "days": "30",
+      "event_type": "pull_request"
+    },
+    {
+      "days": "7",
+      "event_type": "nightly"
     }
   ]
 }

torchci/clickhouse_queries/crcr_success_rate/query.sql

@@ -35,7 +35,7 @@ FROM
 WHERE
     started_at > now() - INTERVAL {days: UInt64} DAY
     AND status = 'completed'
-    AND pr_number > 0
+    AND event_type = {event_type: String}
 GROUP BY
     day, repo
 ORDER BY

torchci/pages/crcr/metrics.tsx

@@ -8,6 +8,8 @@ import {
   SelectChangeEvent,
   Skeleton,
   Stack,
+  Tab,
+  Tabs,
   Typography,
 } from "@mui/material";
 import {
@@ -23,6 +25,8 @@ import { useMemo, useState } from "react";
 import useSWR from "swr";
 dayjs.extend(utc);
 
+type MetricsTab = "pr" | "nightly";
+
 interface SuccessRateRow {
   day: string;
   repo: string;
@@ -153,23 +157,103 @@ function TotalRunsChart({
   );
 }
 
-export default function CrcrMetricsPage() {
-  const [days, setDays] = useState(30);
-
-  const url = `/api/clickhouse/crcr_success_rate?parameters=${encodeURIComponent(
-    JSON.stringify({ days: String(days) })
-  )}`;
-  const { data, error } = useSWR<SuccessRateRow[]>(url, fetcherHandleError, {
-    refreshInterval: 5 * 60_000,
-  });
-
+function MetricsCharts({
+  data,
+  days,
+  error,
+  eventSuffix,
+}: {
+  data: SuccessRateRow[] | undefined;
+  days: number;
+  error: Error | undefined;
+  eventSuffix: string;
+}) {
   const repos = useMemo(() => {
     if (!data) return [];
     return [...new Set(data.map((r) => r.repo))].sort();
   }, [data]);
 
   const isLoading = !data && !error;
 
+  return (
+    <>
+      {error && (
+        <Typography color="error">
+          {error.message || "Failed to load metrics data"}
+        </Typography>
+      )}
+
+      {isLoading && (
+        <Stack spacing={2}>
+          <Skeleton variant="rectangular" height={420} />
+          <Skeleton variant="rectangular" height={420} />
+        </Stack>
+      )}
+
+      {data && (
+        <Stack spacing={3}>
+          <PassRateChart data={data} days={days} />
+          <FailuresChart data={data} days={days} />
+          <TotalRunsChart data={data} days={days} />
+        </Stack>
+      )}
+
+      {data && repos.length > 0 && (
+        <Box>
+          <Typography variant="subtitle2" color="text.secondary" gutterBottom>
+            Repos in view ({repos.length}):
+          </Typography>
+          <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
+            {repos.map((repo) => (
+              <NextLink
+                key={repo}
+                href={`/crcr/${repo}${eventSuffix}`}
+                passHref
+                legacyBehavior
+              >
+                <Link
+                  underline="hover"
+                  sx={{
+                    fontSize: "0.85rem",
+                    px: 1,
+                    py: 0.25,
+                    bgcolor: "action.hover",
+                    borderRadius: 1,
+                  }}
+                >
+                  {repo}
+                </Link>
+              </NextLink>
+            ))}
+          </Box>
+        </Box>
+      )}
+    </>
+  );
+}
+
+export default function CrcrMetricsPage() {
+  const [days, setDays] = useState(30);
+  const [activeTab, setActiveTab] = useState<MetricsTab>("pr");
+
+  const prUrl = `/api/clickhouse/crcr_success_rate?parameters=${encodeURIComponent(
+    JSON.stringify({ days: String(days), event_type: "pull_request" })
+  )}`;
+  const { data: prData, error: prError } = useSWR<SuccessRateRow[]>(
+    prUrl,
+    fetcherHandleError,
+    { refreshInterval: 5 * 60_000 }
+  );
+
+  const nightlyUrl = `/api/clickhouse/crcr_success_rate?parameters=${encodeURIComponent(
+    JSON.stringify({ days: String(days), event_type: "nightly" })
+  )}`;
+  const { data: nightlyData, error: nightlyError } = useSWR<SuccessRateRow[]>(
+    nightlyUrl,
+    fetcherHandleError,
+    { refreshInterval: 5 * 60_000 }
+  );
+
   return (
     <>
       <Head>
@@ -203,56 +287,31 @@ export default function CrcrMetricsPage() {
           </NextLink>
         </Typography>
 
-        {error && (
-          <Typography color="error">
-            {error.message || "Failed to load metrics data"}
-          </Typography>
-        )}
-
-        {isLoading && (
-          <Stack spacing={2}>
-            <Skeleton variant="rectangular" height={420} />
-            <Skeleton variant="rectangular" height={420} />
-          </Stack>
-        )}
+        <Tabs
+          value={activeTab}
+          onChange={(_, v: MetricsTab) => setActiveTab(v)}
+          sx={{ borderBottom: 1, borderColor: "divider" }}
+        >
+          <Tab label="Pull Requests" value="pr" />
+          <Tab label="Nightly" value="nightly" />
+        </Tabs>
 
-        {data && (
-          <Stack spacing={3}>
-            <PassRateChart data={data} days={days} />
-            <FailuresChart data={data} days={days} />
-            <TotalRunsChart data={data} days={days} />
-          </Stack>
+        {activeTab === "pr" && (
+          <MetricsCharts
+            data={prData}
+            days={days}
+            error={prError}
+            eventSuffix=""
+          />
         )}
 
-        {data && repos.length > 0 && (
-          <Box>
-            <Typography variant="subtitle2" color="text.secondary" gutterBottom>
-              Repos in view ({repos.length}):
-            </Typography>
-            <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
-              {repos.map((repo) => (
-                <NextLink
-                  key={repo}
-                  href={`/crcr/${repo}`}
-                  passHref
-                  legacyBehavior
-                >
-                  <Link
-                    underline="hover"
-                    sx={{
-                      fontSize: "0.85rem",
-                      px: 1,
-                      py: 0.25,
-                      bgcolor: "action.hover",
-                      borderRadius: 1,
-                    }}
-                  >
-                    {repo}
-                  </Link>
-                </NextLink>
-              ))}
-            </Box>
-          </Box>
+        {activeTab === "nightly" && (
+          <MetricsCharts
+            data={nightlyData}
+            days={days}
+            error={nightlyError}
+            eventSuffix="?event=nightly"
+          />
         )}
       </Stack>
     </>