feat: pie chart for Job Monitor

docs/user/web/monitor_jobs.md

@@ -17,6 +17,7 @@
 
 
 ## Use the table
+By default, the jobs are displayed in a table. If you are viewing them in another chart, you can click the table button next to the search bar to switch back to the table view.
 The table displays the jobs that match the criteria specified in the search bar. Each row represents a job, and the columns show various attributes of the job, such as its ID, status, type, and submission date.
 
 ### Actions on the table
@@ -32,3 +33,5 @@ You can select one or more jobs by clicking on the checkboxes next to each job.
 - **Kill**: This button will kill the selected jobs.
 - **Delete**: This button will delete the selected jobs.
 
+## Use the Pie Chart
+You can change the visualization to use a pie chart with the button next to the search bar. The pie chart provides a hierarchical view of the jobs based on their attributes. The `Columns to plot` component lets you choose your criteria for visualizing the jobs. The chart can display two levels, and you can then click on a section of the chart to zoom into that category and see more details.

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

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

packages/diracx-web-components/.storybook/preview.tsx

@@ -1,5 +1,4 @@
 import type { Preview } from "@storybook/react";
-import React from "react";
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider } from "../src/contexts/ThemeProvider";
 

packages/diracx-web-components/babel.config.cjs → packages/diracx-web-components/babel.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   presets: [
     "@babel/preset-env",
     ["@babel/preset-react", { runtime: "automatic" }],

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

@@ -13,7 +13,20 @@ 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.ts",
+    "^./jobDataService$": "<rootDir>/stories/mocks/jobDataService.mock.tsx",
+    "\\.css$": "<rootDir>/stories/mocks/style.mock.ts",
+  },
+
+  // To support ESM modules in Jest
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-[^/]+|internmap|delaunator|robust-predicates)",
+  ],
+
+  // Tell Jest how to transform files
+  // Use ts-jest for TypeScript files and babel-jest for JavaScript files
+  transform: {
+    "^.+\\.(ts|tsx)$": "ts-jest",
+    "^.+\\.(js|jsx)$": "babel-jest",
   },
 };
 

packages/diracx-web-components/package.json

@@ -31,17 +31,21 @@
     "@mui/utils": "^6.1.6",
     "@mui/x-date-pickers": "^7.28.3",
     "@tanstack/react-table": "^8.20.5",
+    "@types/d3": "^7.4.3",
     "@types/node": "^20.17.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "d3": "^7.9.0",
+    "d3-hierarchy": "^3.1.2",
     "dayjs": "^1.11.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-virtuoso": "^4.12.3",
     "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.26.9",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@chromatic-com/storybook": "^3.2.4",

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

@@ -32,7 +32,6 @@ import {
   deleteJobs,
   getJobHistory,
   killJobs,
-  refreshJobs,
   rescheduleJobs,
   useJobs,
 } from "./jobDataService";
@@ -109,21 +108,22 @@ export function JobDataTable({
   // State for job history
   const [isHistoryDialogOpen, setIsHistoryDialogOpen] = useState(false);
   const [jobHistoryData, setJobHistoryData] = useState<JobHistory[]>([]);
-
   /**
    * Fetches the jobs from the /api/jobs/search endpoint
    */
-  const { data, error, isLoading, isValidating } = useJobs(
+  const {
+    data: results,
+    headers: dataHeader,
+    error: dataError,
+    isLoading,
+  } = useJobs(
     diracxUrl,
     accessToken,
     searchBody,
     pagination.pageIndex,
     pagination.pageSize,
   );
 
-  const dataHeader = data?.headers;
-  const results = useMemo(() => data?.data || [], [data?.data]);
-
   // Parse the headers to get the first item, last item and number of items
   const contentRange = dataHeader?.get("content-range");
   let totalJobs = 0;
@@ -148,13 +148,10 @@ export function JobDataTable({
       const selectedIds = Object.keys(rowSelection).map(Number);
       await deleteJobs(diracxUrl, selectedIds, accessToken, accessTokenPayload);
       setBackdropOpen(false);
-      refreshJobs(
-        diracxUrl,
-        accessToken,
-        searchBody,
-        pagination.pageIndex,
-        pagination.pageSize,
-      );
+      // Refresh the data manually
+      setSearchBody((prev) => {
+        return { ...prev };
+      });
       clearSelected();
       setSnackbarInfo({
         open: true,
@@ -206,13 +203,12 @@ export function JobDataTable({
       );
 
       setBackdropOpen(false);
-      refreshJobs(
-        diracxUrl,
-        accessToken,
-        searchBody,
-        pagination.pageIndex,
-        pagination.pageSize,
-      );
+
+      // Refresh the data manually
+      setSearchBody((prev) => {
+        return { ...prev };
+      });
+
       clearSelected();
       // Handle Snackbar Messaging
       if (successfulJobs.length > 0 && failedJobs.length > 0) {
@@ -278,13 +274,10 @@ export function JobDataTable({
       );
 
       setBackdropOpen(false);
-      refreshJobs(
-        diracxUrl,
-        accessToken,
-        searchBody,
-        pagination.pageIndex,
-        pagination.pageSize,
-      );
+      // Refresh the data manually
+      setSearchBody((prev) => {
+        return { ...prev };
+      });
       clearSelected();
       // Handle Snackbar Messaging
       if (successfulJobs.length > 0 && failedJobs.length > 0) {
@@ -412,7 +405,7 @@ export function JobDataTable({
    * Table instance
    */
   const table = useReactTable({
-    data: results,
+    data: useMemo(() => results || [], [results]),
     columns,
     state: {
       columnVisibility,
@@ -450,9 +443,8 @@ export function JobDataTable({
         totalRows={totalJobs}
         searchBody={searchBody}
         setSearchBody={setSearchBody}
-        error={error}
+        error={dataError}
         isLoading={isLoading}
-        isValidating={isValidating}
         toolbarComponents={toolbarComponents}
         menuItems={menuItems}
       />