feat(datatable): adapt input fields for filter values

Loxeris · Sep 2, 2024 · 1367b3e · 1367b3e
1 parent aea2f06
commit 1367b3e
Show file tree

Hide file tree

Showing 9 changed files with 345 additions and 73 deletions.
diff --git a/package-lock.json b/package-lock.json
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";
 
 /**
@@ -359,11 +360,26 @@ export function DataTable(props: DataTableProps) {
   // Handle the application of filters
   const handleApplyFilters = () => {
     // Transform list of filters into a json object
-    const jsonFilters = filters.map((filter) => ({
-      parameter: filter.column,
-      operator: filter.operator,
-      value: filter.value,
-    }));
+    const jsonFilters = filters
+      .map((filter) => {
+        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;
+      })
+      .map((filter) => ({
+        parameter: filter.column,
+        operator: filter.operator,
+        value: filter.value,
+        values: filter.values,
+      }));
     setSearchBody({ search: jsonFilters });
     setPage(0);
     setAppliedFilters(filters);
@@ -386,18 +402,26 @@ 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;
-        }) => ({
+      const jsonFilters = SectionItem.data.filters
+        .map((filter: Filter) => {
+          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;
+        })
+        .map((filter: Filter) => ({
           parameter: filter.column,
           operator: filter.operator,
           value: filter.value,
-        }),
-      );
+          values: filter.values,
+        }));
       setSearchBody({ search: jsonFilters });
     } else {
       setFilters([]);