Merge pull request #386 from TheauW/twartel-fix-job-monitor

Use the new API and fix the dataTable component

Author: aldbr

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

@@ -198,9 +198,7 @@ export function JobDataTable({
       const failedJobs = Object.entries(data.failed).map(
         ([jobId, error]) => `Job ${jobId}: ${error.detail}`,
       );
-      const successfulJobs = Object.keys(data.success).map(
-        (jobId) => `Job ${jobId}`,
-      );
+      const areSucceedJobs = Object.keys(data.success).length > 0;
 
       setBackdropOpen(false);
 
@@ -211,22 +209,22 @@ export function JobDataTable({
 
       clearSelected();
       // Handle Snackbar Messaging
-      if (successfulJobs.length > 0 && failedJobs.length > 0) {
+      if (areSucceedJobs && failedJobs.length > 0) {
         setSnackbarInfo({
           open: true,
-          message: `Kill operation summary. Success: ${successfulJobs.join(", ")}. Failed: ${failedJobs.join("; ")}`,
+          message: `Kill operation summary. Failed: ${failedJobs.join("; ")}, Success for the rest`,
           severity: "warning",
         });
-      } else if (successfulJobs.length > 0) {
+      } else if (areSucceedJobs) {
         setSnackbarInfo({
           open: true,
-          message: `Kill operation summary. Success: ${successfulJobs.join(", ")}`,
+          message: `Kill operation summary. Success for all selected jobs.`,
           severity: "success",
         });
       } else {
         setSnackbarInfo({
           open: true,
-          message: `Kill operation summary. Failed: ${failedJobs.join("; ")}`,
+          message: `Kill operation summary. Failure for all selected jobs.`,
           severity: "error",
         });
       }
@@ -269,9 +267,7 @@ export function JobDataTable({
       const failedJobs = Object.entries(data.failed).map(
         ([jobId, error]) => `Job ${jobId}: ${error.detail}`,
       );
-      const successfulJobs = Object.keys(data.success).map(
-        (jobId) => `Job ${jobId}`,
-      );
+      const areSucceedJobs = Object.keys(data.success).length > 0;
 
       setBackdropOpen(false);
       // Refresh the data manually
@@ -280,22 +276,22 @@ export function JobDataTable({
       });
       clearSelected();
       // Handle Snackbar Messaging
-      if (successfulJobs.length > 0 && failedJobs.length > 0) {
+      if (areSucceedJobs && failedJobs.length > 0) {
         setSnackbarInfo({
           open: true,
-          message: `Reschedule operation summary. Success: ${successfulJobs.join(", ")}. Failed: ${failedJobs.join("; ")}`,
+          message: `Reschedule operation summary. Failed: ${failedJobs.join("; ")}, Success for the rest`,
           severity: "warning",
         });
-      } else if (successfulJobs.length > 0) {
+      } else if (areSucceedJobs) {
         setSnackbarInfo({
           open: true,
-          message: `Reschedule operation summary. Success: ${successfulJobs.join(", ")}`,
+          message: `Reschedule operation summary. Success for all selected jobs.`,
           severity: "success",
         });
       } else {
         setSnackbarInfo({
           open: true,
-          message: `Reschedule operation summary. Failed: ${failedJobs.join("; ")}`,
+          message: `Reschedule operation summary. Failure for all selected jobs.`,
           severity: "error",
         });
       }
@@ -395,7 +391,7 @@ export function JobDataTable({
     () => [
       {
         label: "Get history",
-        onClick: (id: number | null) => handleHistory(id),
+        onClick: (id: string | null) => handleHistory(Number(id)),
       },
     ],
     [handleHistory],

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

@@ -12,6 +12,7 @@ import {
   blueGrey,
   lime,
   amber,
+  brown,
 } from "@mui/material/colors";
 
 import { lighten, darken, useTheme, Box } from "@mui/material";
@@ -161,6 +162,7 @@ export default function JobMonitor() {
    */
   const renderStatusCell = useCallback(
     (status: string) => {
+      const defaultColor = brown[500];
       return (
         <Box
           sx={{
@@ -169,8 +171,8 @@ export default function JobMonitor() {
             padding: "3px 10px",
             backgroundColor:
               theme.palette.mode === "light"
-                ? lighten(statusColors[status] ?? "default", 0.1)
-                : darken(statusColors[status] ?? "default", 0.3),
+                ? lighten(statusColors[status] ?? defaultColor, 0.1)
+                : darken(statusColors[status] ?? defaultColor, 0.3),
             color: "white",
             fontWeight: "bold",
           }}

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

@@ -68,10 +68,7 @@ export function deleteJobs(
 
   const deleteUrl = `${diracxUrl}/api/jobs/status`;
 
-  const currentDate = dayjs()
-    .utc()
-    .format("YYYY-MM-DDTHH:mm:ss.SSSSSS[Z]")
-    .toString();
+  const currentDate = dayjs().toISOString();
 
   const body = selectedIds.reduce((acc: StatusBody, jobId) => {
     acc[jobId] = {
@@ -158,9 +155,12 @@ export function rescheduleJobs(
   if (!diracxUrl) {
     throw new Error("Invalid URL generated for rescheduling jobs.");
   }
-  const queryString = selectedIds.map((id) => `job_ids=${id}`).join("&");
-  const rescheduleUrl = `${diracxUrl}/api/jobs/reschedule?${queryString}`;
-  return fetcher([rescheduleUrl, accessToken, "POST"]);
+  const body = {
+    job_ids: selectedIds,
+  };
+
+  const rescheduleUrl = `${diracxUrl}/api/jobs/reschedule`;
+  return fetcher([rescheduleUrl, accessToken, "POST", body]);
 }
 
 /**