Add Jobs page

src/App.tsx

@@ -8,6 +8,7 @@ import Drawer from "./components/Drawer";
 import Runs from "./pages/Runs";
 import Run from "./pages/Run";
 import Job from "./pages/Job";
+import Jobs from "./pages/Jobs";
 import Queue from "./pages/Queue";
 import Nodes from "./pages/Nodes";
 import Node from "./pages/Node";
@@ -44,6 +45,7 @@ function App(props: AppProps) {
             <Route path="/" element={<Runs />} />
             <Route path="/nodes" element={<Nodes />} />
             <Route path="/nodes/:name" element={<Node />} />
+            <Route path="/jobs" element={<Jobs />} />
             <Route path="/stats/nodes/jobs" element={<StatsNodesJobs />} />
             <Route path="/stats/nodes/lock" element={<StatsNodesLock />} />
             <Route path="/runs" element={<Runs />} />

src/components/Drawer/index.jsx

@@ -77,6 +77,9 @@ export default function Drawer(props) {
       <RouterLink to="/runs" className={classes.drawerLink}>
         Runs
       </RouterLink>
+      <RouterLink to="/jobs" className={classes.drawerLink}>
+        Jobs
+      </RouterLink>
       <Divider />
       <RouterLink to="/nodes?machine_type=smithi" className={classes.drawerLink}>
         Nodes

src/components/JobHistory/index.jsx

@@ -5,19 +5,78 @@ import { Button, Typography, Box } from "@mui/material";
 
 const pageSize = 25;
 
-export default function JobHistory({description}) {
-  if (!description) {
-    return null;
-  }
+export default function JobHistory({params}) {
 
-  const jobHistoryQuery = useJobHistory(description, pageSize);
+
+  const jobHistoryQuery = useJobHistory(params, pageSize);
 
   return (
-    <Box sx={{ padding: '0px 8px' }}>
-      <Typography variant="body1" margin={"10px 0px"}> 
-        Past {pageSize} jobs with same description:
-      </Typography>
+    <Box sx={{ padding: '0px 8px' }}> 
       <JobList query={jobHistoryQuery} sortMode="time" />
     </Box>
   );
 }
+
+
+
+
+// type FilterMenuProps = {
+//   isOpen: boolean; 
+//   table: MRT_TableInstance<Run>;
+// };
+
+
+const FILTER_SECTIONS = ["run", "build", "result"]
+const FILTER_SECTIONS_COLUMNS = [
+  ["scheduled", "suite", "machine_type", "user"],
+  ["branch", "sha1"],
+  ["status"],
+]
+
+// function FilterMenu({ isOpen, table}: FilterMenuProps) {
+function FilterMenu({ isOpen, table}) {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        padding: '1em',
+        margin: '0px 0.5em',
+        border: '2px dashed grey',
+        borderRadius: '8px',
+      }}
+    >
+      {FILTER_SECTIONS_COLUMNS.map((_, sectionIndex) => (
+        <Box
+          key={`section-${sectionIndex}`}
+          sx={{
+            marginBottom: '1em',
+            marginLeft: '0.5em',
+          }}
+        >
+          <Typography variant="body2" gutterBottom color="gray">
+            Filter by {FILTER_SECTIONS[sectionIndex]} details...
+          </Typography>
+          <Grid container spacing={1} alignItems="center">
+            {table.getLeafHeaders().map((header) => {
+              if (FILTER_SECTIONS_COLUMNS[sectionIndex].includes(header.id)) {
+                return (
+                  <Grid item xs={2} key={header.id}  marginLeft={"1.2em"}>
+                    <MRT_TableHeadCellFilterContainer
+                      header={header}
+                      table={table}
+                      style={{ backgroundColor: 'transparent', width: '100%' }}
+                    />
+                  </Grid>
+                );
+              }
+              return null;
+            })}
+          </Grid>
+        </Box>
+      ))}
+    </Box>
+  ) 
+}