feat: pie chart for Job Monitor

Author: TheauW

package-lock.json

@@ -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/main.ts

@@ -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/.storybook/preview.tsx

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

…s/diracx-web-components/babel.config.cjs …es/diracx-web-components/babel.config.jspackages/diracx-web-components/babel.config.cjs renamed to packages/diracx-web-components/babel.config.js packages/diracx-web-components/babel.config.cjs renamed to packages/diracx-web-components/babel.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/jest.config.js

@@ -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/package.json

@@ -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: 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}
       />