[HUD] Better similar failure search UI (#6218)

hud.pytorch.org/failure easier to search by doing some parsing into the expected format and putting a search button so it's clearer that you can search. Search will still work without the [""], which didn't work before. The `more like this` link will get rid of the [""] if possible to reduce confusion I don't know what job name actually does so I didn't touch that functionality so there's probably still more parsing that needs to be done there https://torchci-git-csl-similarfailureeasiersearch-fbopensource.vercel.app//failure?name=pull%20%2F%20linux-focal-cuda12.4-py3.10-gcc9%20%2F%20test%20(default%2C%204%2C%205%2C%20linux.4xlarge.nvidia.gpu)&jobName=undefined&failureCaptures=functorch%2Ftest_ops.py%3A%3ATestOperatorsCUDA%3A%3Atest_jvp_nn_functional_multi_head_attention_forward_cuda_float32 Old: <img width="980" alt="image" src="https://github.com/user-attachments/assets/f919b818-7628-4fde-86fa-2c6b0d3336d8" /> New: <img width="1099" alt="image" src="https://github.com/user-attachments/assets/e1f12391-38a6-4253-b7e1-3267c2bb202a" />
pytorch · Jan 31, 2025 · 55b6416 · 55b6416
1 parent 0ebe30e
commit 55b6416
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 34 deletions.
diff --git a/torchci/components/JobLinks.tsx b/torchci/components/JobLinks.tsx
@@ -49,7 +49,9 @@ export default function JobLinks({
         )}&jobName=${encodeURIComponent(
           job.jobName as string
         )}&failureCaptures=${encodeURIComponent(
-          JSON.stringify(job.failureCaptures)
+          job.failureCaptures.length == 1
+            ? (job.failureCaptures[0] as string)
+            : JSON.stringify(job.failureCaptures)
         )}`}
       >
         more like this

diff --git a/torchci/pages/api/failure.ts b/torchci/pages/api/failure.ts
@@ -15,7 +15,9 @@ export default async function handler(
 ) {
   const name = req.query.name as string;
   const jobName = req.query.jobName as string;
-  const failureCaptures = JSON.parse(req.query.failureCaptures as string);
+  const failureCaptures = JSON.parse(
+    req.query.failureCaptures as string
+  ) as string[];
   const useFuzzySearch = req.query.useFuzzySearch as string;
 
   // The current HUD page shows the last 14 days. Newer results are preferred

diff --git a/torchci/pages/failure.tsx b/torchci/pages/failure.tsx
@@ -1,10 +1,12 @@
+import { Button, TextField } from "@mui/material";
+import { Box, Stack } from "@mui/system";
 import CheckBoxSelector from "components/CheckBoxSelector";
 import JobLinks from "components/JobLinks";
 import JobSummary from "components/JobSummary";
+import LoadingPage from "components/LoadingPage";
 import LogViewer from "components/LogViewer";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import { ParamSelector } from "lib/ParamSelector";
 import { JobData } from "lib/types";
 import { usePreference } from "lib/useGroupingPreference";
 import { useRouter } from "next/router";
@@ -16,6 +18,20 @@ dayjs.extend(utc);
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
+function formatFailureCaptures(failureCaptures: string) {
+  // Format the failure captures to be string[] for the API
+  try {
+    let captures = JSON.parse(failureCaptures);
+    if (captures instanceof Array) {
+      return captures;
+    } else {
+      return [failureCaptures as string];
+    }
+  } catch (e) {
+    return [failureCaptures as string];
+  }
+}
+
 function FuzzySearchCheckBox({
   useFuzzySearch,
   setUseFuzzySearch,
@@ -261,7 +277,7 @@ function FailureInfo({
 }
 
 function getTestInfo(failureCapture: string) {
-  const pytestFailureRe = /.*.py::(.*)::(test_\S*)/;
+  const pytestFailureRe = /.*.py::(.*)::(test_\w*)/;
   const match = failureCapture.match(pytestFailureRe);
   if (match == null) {
     return null;
@@ -273,11 +289,11 @@ function getTestInfo(failureCapture: string) {
 }
 
 function setURL(name: string, jobName: string, failureCaptures: string) {
-  window.location.href = `/failure?name=${encodeURIComponent(
-    name
-  )}&jobName=${encodeURIComponent(
-    jobName
-  )}&failureCaptures=${encodeURIComponent(failureCaptures)}`;
+  window.location.href = `/failure?${encodeParams({
+    name,
+    jobName,
+    failureCaptures,
+  })}`;
 }
 
 export default function Page() {
@@ -295,38 +311,60 @@ export default function Page() {
   // `useSWR` to avoid sending a garbage request to the server.
   const swrKey =
     failureCaptures !== undefined
-      ? `/api/failure?name=${encodeURIComponent(
-          name
-        )}&jobName=${encodeURIComponent(
-          jobName
-        )}&failureCaptures=${encodeURIComponent(
-          failureCaptures
-        )}&useFuzzySearch=${useFuzzySearch}`
+      ? `/api/failure?${encodeParams({
+          name,
+          jobName,
+          failureCaptures: JSON.stringify(
+            formatFailureCaptures(failureCaptures)
+          ),
+          useFuzzySearch: useFuzzySearch.toString(),
+        })}`
       : null;
   const { data } = useSWR(swrKey, fetcher);
 
   useEffect(() => {
-    setTestInfo(
-      getTestInfo(failureCaptures ? JSON.parse(failureCaptures)[0] : "")
-    );
+    if (failureCaptures) {
+      setTestInfo(
+        getTestInfo(formatFailureCaptures(failureCaptures as string)[0])
+      );
+    }
   }, [failureCaptures]);
 
+  if (!router.isReady) {
+    return <LoadingPage />;
+  }
+
   return (
-    <div>
+    <Stack spacing={1}>
       <h1>PyTorch CI Failure Info</h1>
-      <h2>
-        <div>
-          Job:{" "}
-          <ParamSelector
-            value={name}
-            handleSubmit={(e: any) => setURL(e, jobName, failureCaptures)}
-          />
-        </div>
-        <ParamSelector
-          value={failureCaptures}
-          handleSubmit={(e: any) => setURL(name, jobName, e)}
-        />
-      </h2>
+      <p>Search for log classifier results</p>
+      <Box
+        component="form"
+        noValidate
+        autoComplete="off"
+        sx={{
+          "& .MuiTextField-root": { m: 1 },
+          "& .MuiButton-root": { m: 2 },
+        }}
+        onSubmit={(e) => {
+          e.preventDefault();
+          // @ts-ignore
+          setURL(e.target[0].value, jobName, e.target[2].value);
+        }}
+      >
+        <Stack spacing={1}>
+          <TextField label="Job" defaultValue={name} />
+          <TextField label="Failure Captures" defaultValue={failureCaptures} />
+          <Button
+            variant="contained"
+            color="primary"
+            type="submit"
+            style={{ width: "max-content" }}
+          >
+            Search
+          </Button>
+        </Stack>
+      </Box>
       {testInfo && (
         <div>
           <a
@@ -353,6 +391,6 @@ export default function Page() {
           samples={data.samples}
         />
       )}
-    </div>
+    </Stack>
   );
 }