Add JobHistory component and display on Job Page

Display last 25 job runs of that description.

Signed-off-by: Vallari Agrawal <[email protected]>

src/components/JobHistory/index.jsx

@@ -0,0 +1,23 @@
+import JobList from "../JobList";
+import { useJobHistory } from "../../lib/paddles";
+import { Button, Typography, Box } from "@mui/material";
+
+
+const pageSize = 25;
+
+export default function JobHistory({description}) {
+  if (!description) {
+    return null;
+  }
+
+  const jobHistoryQuery = useJobHistory(description, pageSize);
+
+  return (
+    <Box sx={{ padding: '0px 8px' }}>
+      <Typography variant="body1" margin={"10px 0px"}> 
+        Past {pageSize} jobs with same description:
+      </Typography>
+      <JobList query={jobHistoryQuery} sortMode="time" />
+    </Box>
+  );
+}

src/components/JobList/index.tsx

@@ -14,7 +14,7 @@ import { type Theme } from "@mui/material/styles";
 import { formatDate, formatDuration } from "../../lib/utils";
 import IconLink from "../../components/IconLink";
 import Link from "../../components/Link";
-import type { Job, NodeJobs, Run } from "../../lib/paddles.d";
+import type { Job, JobList, Run } from "../../lib/paddles.d";
 import { dirName } from "../../lib/utils";
 import useDefaultTableOptions from "../../lib/table";
 
@@ -220,7 +220,7 @@ function JobDetailPanel(props: JobDetailPanelProps): ReactNode {
 };
 
 type JobListProps = {
-  query: UseQueryResult<Run> | UseQueryResult<NodeJobs>;
+  query: UseQueryResult<Run> | UseQueryResult<JobList>;
   sortMode?: "time" | "id";
 }
 

src/lib/paddles.d.ts

@@ -95,7 +95,7 @@ export type Node = {
   machine_type: string;
 };
 
-export type NodeJobs = {
+export type JobList = {
   jobs?: Job[];
 }
 

src/lib/paddles.ts

@@ -4,7 +4,7 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import type { 
   GetURLParams, 
   Run, Job, 
-  Node, NodeJobs,
+  Node, JobList,
   StatsLocksResponse,
   StatsJobsResponse,
 } from "./paddles.d";
@@ -40,6 +40,8 @@ function getURL(endpoint: string, params?: GetURLParams) {
         uri += "queued/";
         delete params_[key];
         break;
+      case "description":
+          break;
       case "machine_type":
         break;
       default:
@@ -106,7 +108,24 @@ function useMachineTypes() {
   });
 }
 
-function useNodeJobs(name: string, params: GetURLParams): UseQueryResult<NodeJobs> {
+function useJobHistory(description: string, pageSize: number): UseQueryResult<JobList> {
+  const url = getURL(`/jobs/`, { 'description': description, "pageSize": pageSize });
+  const query = useQuery(["job-history", { url }], {
+    select: (data: Job[]) => {
+      data.forEach((item) => {
+        item.id = item.job_id + "";
+      });
+      const resp: JobList = { 'jobs': data }
+      return resp;
+    },
+    cacheTime: 60 * 60,
+    staleTime: 60 * 60,
+    retry: 1,
+  });
+  return query;
+}
+
+function useNodeJobs(name: string, params: GetURLParams): UseQueryResult<JobList> {
   // 'page' and 'count' are mandatory query params for this paddles endpoint
   params = { "page": params?.page || 0, "pageSize": params?.pageSize || 25 }  
   const url = getURL(`/nodes/${name}/jobs/`, params);
@@ -115,7 +134,7 @@ function useNodeJobs(name: string, params: GetURLParams): UseQueryResult<NodeJob
       data.forEach((item) => {
         item.id = item.job_id + "";
       });
-      const resp: NodeJobs = { 'jobs': data }
+      const resp: JobList = { 'jobs': data }
       return resp;
     },
   });
@@ -235,4 +254,5 @@ export {
   useNodes,
   useStatsNodeLocks,
   useStatsNodeJobs,
+  useJobHistory,
 };

src/pages/Job/index.jsx

@@ -5,6 +5,7 @@ import Typography from "@mui/material/Typography";
 import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
+import Button from "@mui/material/Button";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ScheduleIcon from "@mui/icons-material/Schedule";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
@@ -21,6 +22,8 @@ import Link from "../../components/Link";
 import CodeBlock from "../../components/CodeBlock";
 import { useJob } from "../../lib/paddles";
 import { getDuration, dirName } from "../../lib/utils";
+import JobHistory from "../../components/JobHistory";
+import { useState } from "react";
 
 function StatusIcon({ status }) {
   const theme = useTheme();
@@ -155,6 +158,7 @@ function JobDetails({ query }) {
 export default function Job() {
   const { name, job_id } = useParams();
   const query = useJob(name, job_id);
+  const [showJobHistory, toggleShowJobHistory] = useState(false);
   return (
     <Grid container spacing={2}>
       <Helmet>
@@ -173,6 +177,15 @@ export default function Job() {
             <JobDetails query={query} />
           </AccordionDetails>
         </Accordion>
+        <Button variant={"text"} sx={{"marginTop": "10px"}}
+                onClick={() => toggleShowJobHistory(!showJobHistory)}>
+          {showJobHistory ? "Hide": "Show"} history
+        </Button>
+        { showJobHistory ?
+            (query.data?.description ? <JobHistory description={query.data.description} /> : null)
+            :null
+        }
+
       </Grid>
     </Grid>
   );