feat(datatable): adapt input fields for filter values

DIRACGrid · Sep 3, 2024 · 7b14979 · 7b14979
1 parent aea2f06
commit 7b14979
Show file tree

Hide file tree

Showing 9 changed files with 335 additions and 70 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/diracx-web-components/components/JobMonitor/JobDataService.ts b/packages/diracx-web-components/components/JobMonitor/JobDataService.ts
@@ -1,5 +1,7 @@
 import useSWR, { mutate } from "swr";
 import { fetcher } from "@/hooks/utils";
+import { Filter } from "@/types";
+import dayjs from "dayjs";
 
 /**
  * Custom hook for fetching jobs data.
@@ -16,6 +18,19 @@ export const useJobs = (
   page: number,
   rowsPerPage: number,
 ) => {
+  searchBody.search = searchBody.search?.map((filter: any) => {
+    if (filter.operator == "last") {
+      return {
+        column: filter.column,
+        operator: "gt",
+        value: dayjs()
+          .subtract(1, filter.value as "hour" | "day" | "month" | "year")
+          .toISOString(),
+        values: filter.values,
+      };
+    }
+    return filter;
+  });
   const urlGetJobs = `/api/jobs/search?page=${page + 1}&per_page=${rowsPerPage}`;
   return useSWR([urlGetJobs, accessToken, "POST", searchBody], fetcher);
 };
@@ -34,6 +49,19 @@ export const refreshJobs = (
   page: number,
   rowsPerPage: number,
 ) => {
+  searchBody.search = searchBody.search?.map((filter: any) => {
+    if (filter.operator == "last") {
+      return {
+        column: filter.column,
+        operator: "gt",
+        value: dayjs()
+          .subtract(1, filter.value as "hour" | "day" | "month" | "year")
+          .toISOString(),
+        values: filter.values,
+      };
+    }
+    return filter;
+  });
   const urlGetJobs = `/api/jobs/search?page=${page + 1}&per_page=${rowsPerPage}`;
   mutate([urlGetJobs, accessToken, "POST", searchBody]);
 };

diff --git a/packages/diracx-web-components/components/JobMonitor/JobDataTable.tsx b/packages/diracx-web-components/components/JobMonitor/JobDataTable.tsx
@@ -82,17 +82,39 @@ 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: [
+      "Submitting",
+      "Received",
+      "Checking",
+      "Staging",
+      "Waiting",
+      "Matched",
+      "Running",
+      "Rescheduled",
+      "Completing",
+      "Completed",
+      "Done",
+      "Failed",
+      "Stalled",
+      "Killed",
+      "Deleted",
+    ].sort(),
+  },
   {
     id: "MinorStatus",
     label: "Minor Status",
   },
   {
     id: "SubmissionTime",
     label: "Submission Time",
+    type: "DateTime",
   },
 ];
 

diff --git a/packages/diracx-web-components/components/shared/DataTable.tsx b/packages/diracx-web-components/components/shared/DataTable.tsx
@@ -32,6 +32,7 @@ import { Filter } from "@/types/Filter";
 import { Column } from "@/types/Column";
 import { useSearchParamsUtils } from "@/hooks/searchParamsUtils";
 import { ApplicationsContext } from "@/contexts/ApplicationsProvider";
+import dayjs from "dayjs";
 import { FilterToolbar } from "./FilterToolbar";
 
 /**
@@ -363,6 +364,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 +388,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([]);