[CRCR] Add nightly health card to CI summary page (#8525)

## Summary

- Adds a "CRCR Relay Health - Nightly" card to Row 1 of the
Cross-Repository CI Summary page
- Moves "Probe Failures" from Row 1 to Row 2
- Nightly health is determined by the last 5 nightly SHAs from
pytorch/crcr-test — if all jobs passed, it shows "Healthy"
- Handles x-prefixed probe jobs (xfail, xcancel, xtimeout) as expected
outcomes, consistent with #8376
- Clicking the card links to the crcr-test nightly view

## Layout

**Row 1:** CRCR Relay Health (PR) | CRCR Relay Health - Nightly | Total
Probe Runs

**Row 2:** Probe Failures | Registered Backends | Timed Out

## Dependencies

- pytorch/crcr-test#21 should be merged first (adds nightly health probe
workflow with x-prefixed jobs)

## Test plan

- [ ] Verify nightly health card renders correctly on
https://hud.pytorch.org/crcr
- [ ] Confirm card shows "Healthy" when last 5 nightly SHAs all pass
(including x-prefixed expected outcomes)
- [ ] Clicking card navigates to
https://hud.pytorch.org/crcr/pytorch/crcr-test?event=nightly

Author: subinz1

torchci/pages/crcr/index.tsx

@@ -489,6 +489,172 @@ function CrcrTestHealthCard({
   );
 }
 
+interface NightlyJobRow {
+  pytorch_head_sha: string;
+  job_name: string;
+  status: string;
+  conclusion: string;
+  started_at: string;
+}
+
+const NIGHTLY_HEALTH_COUNT = 5;
+
+function isExpectedNightlyOutcome(job: NightlyJobRow): boolean {
+  const name = job.job_name ?? "";
+  return (
+    (name.includes("xfail") && job.conclusion === "failure") ||
+    (name.includes("xcancel") && job.conclusion === "cancelled") ||
+    (name.includes("xtimeout") && job.conclusion === "timed_out")
+  );
+}
+
+function isNightlyJobPassing(job: NightlyJobRow): boolean {
+  if (job.status !== "completed") return false;
+  return job.conclusion === "success" || isExpectedNightlyOutcome(job);
+}
+
+function CrcrNightlyHealthCard({
+  nightlyJobs,
+}: {
+  nightlyJobs: NightlyJobRow[] | undefined;
+}) {
+  if (!nightlyJobs || nightlyJobs.length === 0) {
+    const staleColor = "#9e9e9e";
+    return (
+      <NextLink
+        href="/crcr/pytorch/crcr-test?event=nightly"
+        passHref
+        legacyBehavior
+      >
+        <Paper
+          component="a"
+          elevation={2}
+          sx={{
+            p: 2,
+            flex: 1,
+            minWidth: 160,
+            textAlign: "center",
+            borderLeft: `4px solid ${staleColor}`,
+            textDecoration: "none",
+            color: "inherit",
+            cursor: "pointer",
+            "&:hover": { bgcolor: "action.hover" },
+          }}
+        >
+          <Typography variant="caption" color="text.secondary">
+            CRCR Relay Health - Nightly
+          </Typography>
+          <Typography variant="h5" sx={{ fontWeight: 600, color: staleColor }}>
+            No Data
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            no nightly results in last 14 days
+          </Typography>
+        </Paper>
+      </NextLink>
+    );
+  }
+
+  const shaMap = new Map<string, NightlyJobRow[]>();
+  for (const job of nightlyJobs) {
+    if (!job.pytorch_head_sha) continue;
+    const jobs = shaMap.get(job.pytorch_head_sha) ?? [];
+    jobs.push(job);
+    shaMap.set(job.pytorch_head_sha, jobs);
+  }
+
+  const shasByTime = Array.from(shaMap.entries())
+    .map(([sha, jobs]) => ({
+      sha,
+      jobs,
+      latestTime: Math.max(
+        ...jobs.map((j) => new Date(j.started_at).getTime())
+      ),
+    }))
+    .sort((a, b) => b.latestTime - a.latestTime)
+    .slice(0, NIGHTLY_HEALTH_COUNT);
+
+  if (shasByTime.length === 0) {
+    const staleColor = "#9e9e9e";
+    return (
+      <NextLink
+        href="/crcr/pytorch/crcr-test?event=nightly"
+        passHref
+        legacyBehavior
+      >
+        <Paper
+          component="a"
+          elevation={2}
+          sx={{
+            p: 2,
+            flex: 1,
+            minWidth: 160,
+            textAlign: "center",
+            borderLeft: `4px solid ${staleColor}`,
+            textDecoration: "none",
+            color: "inherit",
+            cursor: "pointer",
+            "&:hover": { bgcolor: "action.hover" },
+          }}
+        >
+          <Typography variant="caption" color="text.secondary">
+            CRCR Relay Health - Nightly
+          </Typography>
+          <Typography variant="h5" sx={{ fontWeight: 600, color: staleColor }}>
+            No Data
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            no nightly results in last 14 days
+          </Typography>
+        </Paper>
+      </NextLink>
+    );
+  }
+
+  const allPassed = shasByTime.every((entry) =>
+    entry.jobs.every(isNightlyJobPassing)
+  );
+  const passedCount = shasByTime.filter((entry) =>
+    entry.jobs.every(isNightlyJobPassing)
+  ).length;
+  const borderColor = allPassed ? "#2e7d32" : "#ed6c02";
+  const label = allPassed ? "Healthy" : "Degraded";
+
+  return (
+    <NextLink
+      href="/crcr/pytorch/crcr-test?event=nightly"
+      passHref
+      legacyBehavior
+    >
+      <Paper
+        component="a"
+        elevation={2}
+        sx={{
+          p: 2,
+          flex: 1,
+          minWidth: 160,
+          textAlign: "center",
+          borderLeft: `4px solid ${borderColor}`,
+          textDecoration: "none",
+          color: "inherit",
+          cursor: "pointer",
+          "&:hover": { bgcolor: "action.hover" },
+        }}
+      >
+        <Typography variant="caption" color="text.secondary">
+          CRCR Relay Health - Nightly
+        </Typography>
+        <Typography variant="h5" sx={{ fontWeight: 600, color: borderColor }}>
+          {label}
+        </Typography>
+        <Typography variant="caption" color="text.secondary">
+          {passedCount}/{shasByTime.length} recent nightlies passed
+        </Typography>
+      </Paper>
+    </NextLink>
+  );
+}
+
 export default function CrcrSummaryPage() {
   const [days, setDays] = useState(7);
   const [activeTab, setActiveTab] = useState<EventTab>("pr");
@@ -523,6 +689,17 @@ export default function CrcrSummaryPage() {
     { refreshInterval: 60_000 }
   );
 
+  const nightlyHealthUrl =
+    `/api/clickhouse/crcr_nightly_dashboard?parameters=` +
+    encodeURIComponent(
+      JSON.stringify({ repo: "pytorch/crcr-test", days: "14" })
+    );
+  const { data: nightlyHealthJobs, error: nightlyHealthError } = useSWR<
+    NightlyJobRow[]
+  >(nightlyHealthUrl, fetcherHandleError, {
+    refreshInterval: 60_000,
+  });
+
   const nightlyRepoCount = nightlyData?.length ?? 0;
 
   const metricsMap = useMemo(() => {
@@ -613,7 +790,8 @@ export default function CrcrSummaryPage() {
   }, [ciData, metricsMap, allowlist, days]);
 
   const isLoading = !ciData && !ciError && !allowlist && !alError;
-  const hasError = ciError || alError || nightlyError || healthError;
+  const hasError =
+    ciError || alError || nightlyError || healthError || nightlyHealthError;
 
   return (
     <>
@@ -669,6 +847,7 @@ export default function CrcrSummaryPage() {
               alError?.message ||
               nightlyError?.message ||
               healthError?.message ||
+              nightlyHealthError?.message ||
               "Failed to load data"}
           </Typography>
         )}
@@ -679,18 +858,19 @@ export default function CrcrSummaryPage() {
           <Stack spacing={2}>
             <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
               <CrcrTestHealthCard healthPrs={healthPrs} />
+              <CrcrNightlyHealthCard nightlyJobs={nightlyHealthJobs} />
               <StatCard
                 label="Total Probe Runs"
                 value={stats.totalRuns}
                 sub={stats.runsSub}
               />
+            </Box>
+            <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
               <StatCard
                 label="Probe Failures"
                 value={stats.failures}
                 sub="pytorch/crcr-test failures"
               />
-            </Box>
-            <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
               <StatCard
                 label="Registered Backends"
                 value={stats.totalRepos}