Add a page to navigate disabled issues on HUD (#5288)

This page displays the total number of active disabled tests and their
break down by platforms, labels, and their triaged status. By default,
the table is sorted by high priority status and the issue last updated.
Hopefully, this will allow the test owners to better keep track of
active disabled tests assigned to their teams.

The preview is at
https://torchci-git-fork-huydhn-add-break-down-disa-507a79-fbopensource.vercel.app/disabled

torchci/components/NavBar.tsx

@@ -64,6 +64,10 @@ function NavBar() {
       name: "TorchBench",
       href: "/torchbench/userbenchmark",
     },
+    {
+      name: "Disabled Tests",
+      href: "/disabled",
+    },
     // uncomment after some eyeballs are on this
     // {
     //   name: "Testing Overhead",

torchci/components/ValuePicker.tsx

@@ -0,0 +1,44 @@
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from "@mui/material";
+
+export default function ValuePicker({
+  value,
+  setValue,
+  values,
+  label,
+}: {
+  value: string;
+  setValue: any;
+  values: string[];
+  label: string;
+}) {
+  function handleChange(e: SelectChangeEvent<string>) {
+    setValue(e.target.value);
+  }
+
+  return (
+    <>
+      <FormControl>
+        <InputLabel id="value-picker-input-label">{label}</InputLabel>
+        <Select
+          value={value}
+          label={label}
+          labelId={`value-picker-select-label-${label}`}
+          onChange={handleChange}
+          id={`value-picker-select-${label}`}
+        >
+          {values.map((value) => (
+            <MenuItem key={value} value={value}>
+              {value}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </>
+  );
+}