[HUD] Select jobs to show on failures page (#5221)

Adds a filter/way to select which jobs to show on the failures page

Tiny thing since the keyboard interrupt page is mostly arc jobs but I
want to see the ones that aren't arc jobs


https://torchci-git-csl-selectjobsfailurepage-fbopensource.vercel.app//failure?name=periodic%20%2F%20linux-focal-cuda11.8-py3.9-gcc9%20%2F%20test%20(multigpu%2C%201%2C%201%2C%20linux.g5.12xlarge.nvidia.gpu)&jobName=undefined&failureCaptures=%5B%22!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!%20KeyboardInterrupt%20!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!%22%5D

Note the change in the bar graph too
<img width="1006" alt="image"
src="https://github.com/pytorch/test-infra/assets/44682903/2222ef85-9dbb-4f47-913a-6e6dc32df70a">
<img width="1134" alt="image"
src="https://github.com/pytorch/test-infra/assets/44682903/89db1332-84ff-4e55-95bd-5cecbea15e18">

Author: clee2000

torchci/pages/failure.tsx

@@ -2,6 +2,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 dayjs.extend(utc);
 
+import { CSSProperties, useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { BarChart, Bar, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts";
@@ -14,7 +15,6 @@ import { usePreference } from "lib/useGroupingPreference";
 import { ParamSelector } from "lib/ParamSelector";
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
-import { CSSProperties } from "react";
 
 function FuzzySearchCheckBox({
   useFuzzySearch,
@@ -51,6 +51,11 @@ function FailureInfo({
   jobCount: { [jobName: string]: number };
   samples: JobData[];
 }) {
+  const [jobsToShow, setJobsToShow] = useState(new Set<string>());
+  const samplesToShow = samples.filter((sample) => {
+    return jobsToShow.size == 0 || (sample.name && jobsToShow.has(sample.name));
+  });
+
   // Populate the last 14 days
   const dayBuckets: Map<
     string,
@@ -69,7 +74,7 @@ function FailureInfo({
   highlighted.add("main");
 
   const branchNames = new Set<string>(highlighted);
-  samples.forEach((job, i) => {
+  samplesToShow.forEach((job, i) => {
     const time = dayjs(job.time!).local().format("MM/D");
     if (!dayBuckets.has(time)) {
       return;
@@ -208,7 +213,26 @@ function FailureInfo({
                 return jobAName.localeCompare(jobBName);
               })
               .map(([job, count]) => (
-                <tr key={job}>
+                <tr
+                  key={job}
+                  onClick={() => {
+                    if (jobsToShow.has(job)) {
+                      const newSet = new Set(jobsToShow);
+                      newSet.delete(job);
+                      setJobsToShow(newSet);
+                    } else {
+                      setJobsToShow(new Set(jobsToShow).add(job));
+                    }
+                  }}
+                >
+                  <td>
+                    <input
+                      type="checkbox"
+                      name={`show-${job}`}
+                      checked={jobsToShow.has(job)}
+                      onChange={() => {}}
+                    ></input>
+                  </td>
                   <td>{job}</td>
                   <td>{count as number}</td>
                 </tr>
@@ -218,7 +242,7 @@ function FailureInfo({
       </div>
       <h3>Failures ({totalCount} total)</h3>
       <ul>
-        {samples
+        {samplesToShow
           // Keep the most recent samples on top
           .sort(function (sampleA: JobData, sampleB: JobData) {
             if (sampleA.time == sampleB.time) {