feat: new Search Bar for the Job Monitor

Author: TheauW

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

@@ -7,18 +7,43 @@ import utc from "dayjs/plugin/utc";
 dayjs.extend(utc);
 import { fetcher } from "../../hooks/utils";
 import { Filter, SearchBody, Job, JobHistory } from "../../types";
+import type { JobSummary } from "../../types";
 
 function processSearchBody(searchBody: SearchBody) {
   searchBody.search = searchBody.search?.map((filter: Filter) => {
     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,
-      };
+      const valueStr = filter.value as string;
+      const match = valueStr.match(/^(\d+)\s*(minute|hour|day|month|year)s?$/i);
+
+      if (match) {
+        const amount = parseInt(match[1], 10);
+        const unit = match[2].toLowerCase() as
+          | "minute"
+          | "hour"
+          | "day"
+          | "month"
+          | "year";
+
+        return {
+          parameter: filter.parameter,
+          operator: "gt",
+          value: dayjs().subtract(amount, unit).toISOString(),
+          values: filter.values,
+        };
+      } else {
+        // Fallback pour l'ancienne logique si le format n'est pas reconnu
+        return {
+          parameter: filter.parameter,
+          operator: "gt",
+          value: dayjs()
+            .subtract(
+              1,
+              filter.value as "minute" | "hour" | "day" | "month" | "year",
+            )
+            .toISOString(),
+          values: filter.values,
+        };
+      }
     }
     return filter;
   });
@@ -203,3 +228,31 @@ export async function getJobHistory(
 
   return { data: data[0].LoggingInfo };
 }
+
+export async function getJobSummary(
+  diracxUrl: string | null,
+  grouping: string[],
+  accessToken: string,
+  searchBody?: SearchBody,
+): Promise<{ data: JobSummary[] }> {
+  if (!diracxUrl) {
+    throw new Error("Invalid URL generated for fetching job history.");
+  }
+
+  if (searchBody) processSearchBody(searchBody);
+
+  const summaryUrl = `${diracxUrl}/api/jobs/summary`;
+  const body = {
+    grouping: grouping,
+    search: searchBody?.search || [],
+  };
+  // Expect the response to be an array of objects with all the grouping fields
+  const { data } = await fetcher<Array<JobSummary>>([
+    summaryUrl,
+    accessToken,
+    "POST",
+    body,
+  ]);
+
+  return { data };
+}

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

@@ -23,10 +23,10 @@ import {
 } from "@tanstack/react-table";
 
 import { useApplicationId } from "../../hooks/application";
-import { FilterToolbar } from "../shared/FilterToolbar";
 import { InternalFilter } from "../../types/Filter";
 import { Job, SearchBody } from "../../types";
 import { JobDataTable } from "./JobDataTable";
+import { JobSearchBar } from "./JobSearchBar";
 
 /**
  * Build the Job Monitor application
@@ -98,7 +98,7 @@ export default function JobMonitor() {
   // Save the state of the app in local storage
   useEffect(() => {
     const state = {
-      filters: [...filters.filter((filter) => filter.isApplied)],
+      filters: [...filters],
       columnVisibility: { ...columnVisibility },
       columnPinning: {
         left: [...(columnPinning.left || [])],
@@ -123,15 +123,10 @@ export default function JobMonitor() {
 
   // Handle the application of filters
   const handleApplyFilters = () => {
-    // Switch the applied state of the filters
-    setFilters((filters) =>
-      filters.map((filter) => ({ ...filter, isApplied: true })),
-    );
-
     setSearchBody((prev) => ({
       ...prev,
       search: filters.map(({ parameter, operator, value, values }) => ({
-        parameter,
+        parameter: fromHumanReadableText(parameter),
         operator,
         value,
         values,
@@ -143,18 +138,6 @@ export default function JobMonitor() {
     }));
   };
 
-  const handleRemoveAllFilters = useCallback(() => {
-    setSearchBody((prevState) => ({
-      ...prevState,
-      search: [],
-    }));
-    setPagination((prevState) => ({
-      ...prevState,
-      pageIndex: 0,
-    }));
-    setFilters([]);
-  }, [setFilters]);
-
   // Status colors
   const statusColors: Record<string, string> = useMemo(
     () => ({
@@ -300,12 +283,11 @@ export default function JobMonitor() {
         overflow: "hidden",
       }}
     >
-      <FilterToolbar
-        columns={columns}
+      <JobSearchBar
         filters={filters}
         setFilters={setFilters}
+        searchBody={searchBody}
         handleApplyFilters={handleApplyFilters}
-        handleClearFilters={handleRemoveAllFilters}
       />
       <JobDataTable
         searchBody={searchBody}
@@ -370,3 +352,41 @@ export function validateAndConvertState(state: string): [string, boolean] {
 
   return [JSON.stringify(newState), true];
 }
+
+/**
+ * Converts a human-readable job attribute name to its internal name.
+ * @param name - The human-readable name of the job attribute
+ * @returns The corresponding internal name of the job attribute
+ */
+export function fromHumanReadableText(name: string): string {
+  switch (name) {
+    case "ID":
+      return "JobID";
+    case "Minor Status":
+      return "MinorStatus";
+    case "Application Status":
+      return "ApplicationStatus";
+    case "Name":
+      return "JobName";
+    case "Job Group":
+      return "JobGroup";
+    case "Type":
+      return "JobType";
+    case "Last Update Time":
+      return "LastUpdateTime";
+    case "Last Sign of Life":
+      return "HeartBeatTime";
+    case "Submission Time":
+      return "SubmissionTime";
+    case "Owner Group":
+      return "OwnerGroup";
+    case "Start Execution Time":
+      return "StartExecTime";
+    case "End Execution Time":
+      return "EndExecTime";
+    case "User Priority":
+      return "UserPriority";
+    default:
+      return name; // Return the original name if no match found
+  }
+}