job cancellation dashboard (#6577)

wdvr · web-flow · commit 75ba52bb703c · 2025-04-25T14:12:45.000-07:00
Adds first Grafana dashboard as iframe in HUD - related to job cancellation counts over time - embeds an iframe pointing to a cloudfront in front of grafana - adds theme based on dark theme setting in HUD See https://torchci-git-wdvr-jobcancellationdashboard-fbopensource.vercel.app/job_cancellation_dashboard
diff --git a/torchci/components/NavBar.tsx b/torchci/components/NavBar.tsx
@@ -96,6 +96,10 @@ function NavBar() {
       name: "Nightly Dashboard",
       href: "/nightlies",
     },
+    {
+      name: "Cancelled Jobs",
+      href: "/job_cancellation_dashboard",
+    },
     {
       name: "Failures Metric",
       href: "/reliability",
diff --git a/torchci/pages/job_cancellation_dashboard.tsx b/torchci/pages/job_cancellation_dashboard.tsx
@@ -0,0 +1,42 @@
+import Head from "next/head";
+import React from "react";
+import { useDarkMode } from "../lib/DarkModeContext";
+
+const JobCancellationDashboard: React.FC = () => {
+  const { themeMode, darkMode } = useDarkMode();
+
+  // Set theme parameter based on dark mode context
+  let theme = "light";
+  if (themeMode === "system") {
+    theme = darkMode ? "dark" : "light";
+  } else {
+    theme = themeMode;
+  }
+
+  const dashboardUrl = `https://disz2yd9jqnwc.cloudfront.net/public-dashboards/c540578db0b741168e1a94e80e21f6f7?theme=${theme}`;
+
+  return (
+    <>
+      <Head>
+        <title>Job Cancellation Dashboard</title>
+      </Head>
+      <div
+        style={{
+          width: "100%",
+          height: "calc(100vh - 60px)",
+          overflow: "hidden",
+        }}
+      >
+        <iframe
+          src={dashboardUrl}
+          width="100%"
+          height="100%"
+          frameBorder="0"
+          allowTransparency={true}
+        />
+      </div>
+    </>
+  );
+};
+
+export default JobCancellationDashboard;
