feat(datatable): adapt input fields for filter values

packages/diracx-web-components/components/JobMonitor/JobDataService.ts

@@ -1,5 +1,22 @@
 import useSWR, { mutate } from "swr";
 import { fetcher } from "@/hooks/utils";
+import dayjs from "dayjs";
+
+function processSearchBody(searchBody: any) {
+  searchBody.search = searchBody.search?.map((filter: any) => {
+    if (filter.operator == "last") {
+      return {
+        parameter: filter.parameter,
+        operator: "gt",
+        value: dayjs()
+          .subtract(1, filter.value as "hour" | "day" | "month" | "year")
+          .toISOString(),
+        values: filter.values,
+      };
+    }
+    return filter;
+  });
+}
 
 /**
  * Custom hook for fetching jobs data.
@@ -16,6 +33,7 @@ export const useJobs = (
   page: number,
   rowsPerPage: number,
 ) => {
+  processSearchBody(searchBody);
   const urlGetJobs = `/api/jobs/search?page=${page + 1}&per_page=${rowsPerPage}`;
   return useSWR([urlGetJobs, accessToken, "POST", searchBody], fetcher);
 };
@@ -34,6 +52,7 @@ export const refreshJobs = (
   page: number,
   rowsPerPage: number,
 ) => {
+  processSearchBody(searchBody);
   const urlGetJobs = `/api/jobs/search?page=${page + 1}&per_page=${rowsPerPage}`;
   mutate([urlGetJobs, accessToken, "POST", searchBody]);
 };

packages/diracx-web-components/components/JobMonitor/JobDataTable.tsx

@@ -40,28 +40,28 @@ import {
   useJobs,
 } from "./JobDataService";
 
+const statusColors: { [key: string]: string } = {
+  Submitting: purple[500],
+  Received: blueGrey[500],
+  Checking: teal[500],
+  Staging: lightBlue[500],
+  Waiting: amber[600],
+  Matched: blue[300],
+  Running: blue[900],
+  Rescheduled: lime[700],
+  Completing: orange[500],
+  Completed: green[300],
+  Done: green[500],
+  Failed: red[500],
+  Stalled: amber[900],
+  Killed: red[900],
+  Deleted: grey[500],
+};
+
 /**
  * Renders the status cell with colors
  */
 const renderStatusCell = (status: string) => {
-  const statusColors: { [key: string]: string } = {
-    Submitting: purple[500],
-    Received: blueGrey[500],
-    Checking: teal[500],
-    Staging: lightBlue[500],
-    Waiting: amber[600],
-    Matched: blue[300],
-    Running: blue[900],
-    Rescheduled: lime[700],
-    Completing: orange[500],
-    Completed: green[300],
-    Done: green[500],
-    Failed: red[500],
-    Stalled: amber[900],
-    Killed: red[900],
-    Deleted: grey[500],
-  };
-
   return (
     <Box
       sx={{
@@ -82,17 +82,23 @@ const renderStatusCell = (status: string) => {
  * The head cells for the data grid (desktop version)
  */
 const headCells: Column[] = [
-  { id: "JobID", label: "Job ID" },
+  { id: "JobID", label: "Job ID", type: "number" },
   { id: "JobName", label: "Job Name" },
   { id: "Site", label: "Site" },
-  { id: "Status", label: "Status", render: renderStatusCell },
+  {
+    id: "Status",
+    label: "Status",
+    render: renderStatusCell,
+    type: Object.keys(statusColors).sort(),
+  },
   {
     id: "MinorStatus",
     label: "Minor Status",
   },
   {
     id: "SubmissionTime",
     label: "Submission Time",
+    type: "DateTime",
   },
 ];
 

packages/diracx-web-components/components/shared/DataTable.tsx

@@ -363,6 +363,7 @@ export function DataTable(props: DataTableProps) {
       parameter: filter.column,
       operator: filter.operator,
       value: filter.value,
+      values: filter.values,
     }));
     setSearchBody({ search: jsonFilters });
     setPage(0);
@@ -386,18 +387,12 @@ export function DataTable(props: DataTableProps) {
     if (SectionItem?.data?.filters) {
       setFilters(SectionItem.data.filters);
       setAppliedFilters(SectionItem.data.filters);
-      const jsonFilters = SectionItem.data.filters.map(
-        (filter: {
-          id: number;
-          column: string;
-          operator: string;
-          value: string;
-        }) => ({
-          parameter: filter.column,
-          operator: filter.operator,
-          value: filter.value,
-        }),
-      );
+      const jsonFilters = SectionItem.data.filters.map((filter: Filter) => ({
+        parameter: filter.column,
+        operator: filter.operator,
+        value: filter.value,
+        values: filter.values,
+      }));
       setSearchBody({ search: jsonFilters });
     } else {
       setFilters([]);