feat: allows DatePicker, improve performance and review suggestions

Author: TheauW

packages/diracx-web-components/.storybook/main.ts

@@ -42,8 +42,8 @@ const config: StorybookConfig = {
       "../../hooks/metadata": require.resolve(
         "../stories/mocks/metadata.mock.tsx",
       ),
-      "./JobDataService": require.resolve(
-        "../stories/mocks/JobDataService.mock.tsx",
+      "./jobDataService": require.resolve(
+        "../stories/mocks/jobDataService.mock.ts",
       ),
     };
     return config;

packages/diracx-web-components/eslint.config.js

@@ -64,6 +64,15 @@ export default [
       "react/prop-types": "off",
       "react/react-in-jsx-scope": "off",
       "react/destructuring-assignment": ["error", "always"],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
       "no-restricted-properties": [
         "error",
         {

packages/diracx-web-components/jest.config.js

@@ -13,7 +13,7 @@ const config = {
   moduleNameMapper: {
     "^@axa-fr/react-oidc$": "<rootDir>/stories/mocks/react-oidc.mock.tsx",
     "^../../hooks/metadata$": "<rootDir>/stories/mocks/metadata.mock.tsx",
-    "^./JobDataService$": "<rootDir>/stories/mocks/JobDataService.mock.tsx",
+    "^./jobDataService$": "<rootDir>/stories/mocks/jobDataService.mock.ts",
   },
 };
 

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

@@ -35,7 +35,7 @@ import {
   refreshJobs,
   rescheduleJobs,
   useJobs,
-} from "./JobDataService";
+} from "./jobDataService";
 
 /**
  * Job Data Table props

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

@@ -20,6 +20,7 @@ import {
   RowSelectionState,
   VisibilityState,
   PaginationState,
+  ColumnDef,
 } from "@tanstack/react-table";
 
 import { useApplicationId } from "../../hooks/application";
@@ -126,7 +127,7 @@ export default function JobMonitor() {
     setSearchBody((prev) => ({
       ...prev,
       search: filters.map(({ parameter, operator, value, values }) => ({
-        parameter: fromHumanReadableText(parameter),
+        parameter: fromHumanReadableText(parameter, columns),
         operator,
         value,
         values,
@@ -202,7 +203,7 @@ export default function JobMonitor() {
         id: "Status",
         header: "Status",
         cell: (info) => renderStatusCell(info.getValue()),
-        meta: { type: "category", values: Object.keys(statusColors).sort() },
+        meta: { type: "string", values: Object.keys(statusColors).sort() },
       }),
       columnHelper.accessor("MinorStatus", {
         id: "MinorStatus",
@@ -270,6 +271,11 @@ export default function JobMonitor() {
         header: "User Priority",
         meta: { type: "number" },
       }),
+      columnHelper.accessor("RescheduleCounter", {
+        id: "RescheduleCounter",
+        header: "Reschedule Counter",
+        meta: { type: "number" },
+      }),
     ],
     [columnHelper, renderStatusCell, statusColors],
   );
@@ -288,6 +294,7 @@ export default function JobMonitor() {
         setFilters={setFilters}
         searchBody={searchBody}
         handleApplyFilters={handleApplyFilters}
+        columns={columns}
       />
       <JobDataTable
         searchBody={searchBody}
@@ -358,35 +365,14 @@ export function validateAndConvertState(state: string): [string, boolean] {
  * @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
+export function fromHumanReadableText(
+  name: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: ColumnDef<Job, any>[],
+): string {
+  const index = columns.findIndex((column) => column.header === name);
+  if (index !== -1) {
+    return columns[index].id || name; // Return the id if it exists, otherwise
   }
+  return name;
 }

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

@@ -1,24 +1,22 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-
+import { ColumnDef } from "@tanstack/react-table";
 import { useOidcAccessToken } from "@axa-fr/react-oidc";
 import { useOIDCContext } from "../../hooks/oidcConfiguration";
 import { useDiracxUrl } from "../../hooks/utils";
-
 import { SearchBar } from "../shared/SearchBar/SearchBar";
-
 import {
   InternalFilter,
   JobSummary,
   SearchBarSuggestions,
   SearchBarToken,
   SearchBarTokenEquation,
   SearchBody,
+  Job,
+  Operators,
 } from "../../types";
-
-import { getJobSummary } from "./JobDataService";
-
+import { getJobSummary } from "./jobDataService";
 import { fromHumanReadableText } from "./JobMonitor";
 
 interface JobSearchBarProps {
@@ -30,13 +28,17 @@ interface JobSearchBarProps {
   searchBody: SearchBody;
   /** The function to apply the filters */
   handleApplyFilters: () => void;
+  /** The columns to display in the job monitor */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: ColumnDef<Job, any>[];
 }
 
 export function JobSearchBar({
   filters,
   searchBody,
   setFilters,
   handleApplyFilters,
+  columns,
 }: JobSearchBarProps) {
   const { configuration } = useOIDCContext();
   const { accessToken } = useOidcAccessToken(configuration?.scope);
@@ -59,13 +61,16 @@ export function JobSearchBar({
       createSuggestions={(
         previousToken: SearchBarToken | undefined,
         previousEquation: SearchBarTokenEquation | undefined,
+        equationIndex?: number,
       ) =>
         createSuggestions(
           diracxUrl,
           accessToken,
           previousToken,
           previousEquation,
+          columns,
           searchBody,
+          equationIndex,
         )
       }
       allowKeyWordSearch={false} // Disable keyword search for job monitor
@@ -77,32 +82,46 @@ export function JobSearchBar({
  * Creates suggestions for the search bar based on the current tokens
  * If necessary, it fetches job summaries from the server to get personalized suggestions
  *
+ * @param diracxUrl The URL of the DiracX server.
+ * @param accessToken The access token for authentication, which can be undefined if not authenticated.
  * @param previousToken The previous token, which can be undefined if no token is focused.
  * @param previousEquation The previous equation, which can be undefined if no equation is focused.
- * @param data The data to be used for suggestions.
+ * @param columns The columns to be used for suggestions, which are used to determine the categories and types.
+ * @param searchBody The search body to be sent along with the request (optional).
+ * @param searchBodyIndex The index of the search body, which is used to determine the current search context (optional).
  * @returns A list of suggestions based on the current tokens and data.
  */
 async function createSuggestions(
   diracxUrl: string | null,
   accessToken: string | undefined,
   previousToken: SearchBarToken | undefined,
   previousEquation: SearchBarTokenEquation | undefined,
-  searchBody?: SearchBody,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: ColumnDef<Job, any>[],
+  searchBody: SearchBody,
+  searchBodyIndex?: number,
 ): Promise<SearchBarSuggestions> {
   let data: JobSummary[] = [];
 
+  const search = [...(searchBody?.search || [])];
+
+  const newSearchBody = {
+    ...searchBody,
+    search: search.slice(0, searchBodyIndex),
+  };
+
   const fetchJobSummary = async (category: string) => {
     if (diracxUrl && accessToken) {
       try {
         const result = await getJobSummary(
           diracxUrl,
           [category],
           accessToken,
-          searchBody,
+          newSearchBody,
         );
         data = result.data || [];
       } catch {
-        console.error("Failed to fetch job summary");
+        throw new Error("Failed to fetch job summary");
       }
     }
   };
@@ -114,48 +133,14 @@ async function createSuggestions(
     previousToken.type.startsWith("custom") ||
     previousToken.type === "value"
   ) {
-    // The categories to filter by and their types
+    const items = columns.map((column) => column.header as string);
+    const types = columns.map(
+      (column) => `category_${column.meta?.type || "string"}`,
+    );
+
     return {
-      items: [
-        "Status",
-        "Minor Status",
-        "Application Status",
-        "Site",
-        "Type",
-        "Job Group",
-        "Owner",
-        "Owner Group",
-        "VO",
-        "User Priority",
-        "Reschedule Counter",
-        "ID",
-        "Submission Time",
-        "Last Update Time",
-        "Start Execution Time",
-        "Last Sign of Life",
-        "End Execution Time",
-        "Name",
-      ],
-      type: [
-        "category_string",
-        "category_string",
-        "category_string",
-        "category_string",
-        "category_string",
-        "category_string",
-        "category_string",
-        "category_string",
-        "category_string",
-        "category_number",
-        "category_number",
-        "category_number",
-        "category_date",
-        "category_date",
-        "category_date",
-        "category_date",
-        "category_date",
-        "category_string",
-      ],
+      items: items,
+      type: types,
     };
   }
 
@@ -164,6 +149,7 @@ async function createSuggestions(
     // Load the suggestions for the selected category
     const category = fromHumanReadableText(
       previousEquation.items[0].label as string,
+      columns,
     );
     await fetchJobSummary(category);
     const items = data.map(
@@ -188,47 +174,44 @@ async function createSuggestions(
   }
 
   // else
-  let suggestions: { items: string[]; type: string[] } = {
-    items: [],
-    type: [],
-  };
+  let items: string[] = [];
   switch (previousToken.type) {
     case "category_string":
-      suggestions = {
-        items: ["=", "!=", "like", "is in", "is not in"],
-        type: Array(5).fill("operator_string"),
+      items = Operators.getStringOperators().map((op) => op.getDisplay());
+      return {
+        items: items,
+        type: Array(items.length).fill("operator_string"),
       };
-      break;
     case "category_number":
-      suggestions = {
-        items: ["=", "!=", "<", ">", "is in", "is not in", "like"],
-        type: Array(7).fill("operator_number"),
+      items = Operators.getNumberOperators().map((op) => op.getDisplay());
+      return {
+        items: items,
+        type: Array(items.length).fill("operator_number"),
       };
-      break;
     case "category_boolean":
-      suggestions = {
-        items: ["=", "!="],
-        type: Array(2).fill("operator_bool"),
+      items = Operators.getBooleanOperators().map((op) => op.getDisplay());
+      return {
+        items: items,
+        type: Array(items.length).fill("operator_bool"),
       };
-      break;
     case "category_date":
-      suggestions = {
-        items: ["<", ">", "in the last"],
-        type: Array(3).fill("operator_date"),
+      items = Operators.getDateOperators().map((op) => op.getDisplay());
+      return {
+        items: items,
+        type: Array(items.length).fill("operator_date"),
       };
-      break;
     case "category":
-      suggestions = {
-        items: ["=", "!=", ">", "<", "like"],
-        type: Array(5).fill("operator"),
+      items = Operators.getDefaultOperators().map((op) => op.getDisplay());
+      return {
+        items: items,
+        type: Array(items.length).fill("operator"),
       };
-      break;
+
     // We don't want suggestions for the number and in case of a custom token
     default:
-      suggestions = {
+      return {
         items: [],
         type: [],
       };
   }
-  return suggestions;
 }

…/components/JobMonitor/JobDataService.ts …/components/JobMonitor/jobDataService.tspackages/diracx-web-components/src/components/JobMonitor/JobDataService.ts renamed to packages/diracx-web-components/src/components/JobMonitor/jobDataService.ts packages/diracx-web-components/src/components/JobMonitor/JobDataService.ts renamed to packages/diracx-web-components/src/components/JobMonitor/jobDataService.ts

@@ -236,7 +236,7 @@ export async function getJobSummary(
   searchBody?: SearchBody,
 ): Promise<{ data: JobSummary[] }> {
   if (!diracxUrl) {
-    throw new Error("Invalid URL generated for fetching job history.");
+    throw new Error("Invalid URL generated for fetching job summary.");
   }
 
   if (searchBody) processSearchBody(searchBody);