fix: use the new API and fix the job monitor

Author: TheauW

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

@@ -201,9 +201,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);
       refreshJobs(
@@ -215,22 +213,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",
         });
       }
@@ -273,9 +271,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);
       refreshJobs(
@@ -287,22 +283,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",
         });
       }

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

@@ -119,10 +119,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] = {
@@ -209,9 +206,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]);
 }
 
 /**

packages/diracx-web-components/src/components/shared/DataTable.tsx

@@ -131,7 +131,7 @@ function DataTableToolbar<T extends Record<string, unknown>>({
       )}
       {numSelected > 0 ? (
         <Stack direction="row">
-          <Tooltip title="Get IDs">
+          <Tooltip title={`Get ID${numSelected > 1 ? "s" : ""}`}>
             <IconButton onClick={handleCopyIDs}>
               <FormatListBulleted />
             </IconButton>
@@ -212,7 +212,7 @@ export interface DataTableProps<T extends Record<string, unknown>> {
   totalRows: number;
   /** The search body to send along with the request */
   searchBody: SearchBody;
-  /** The function to call when the search body changes */
+  /** Function to set the search body */
   setSearchBody: React.Dispatch<React.SetStateAction<SearchBody>>;
   /** The error message */
   error: string | null;
@@ -394,8 +394,10 @@ export function DataTable<T extends Record<string, unknown>>({
         <DataTableToolbar
           title={title}
           table={table}
-          numSelected={Object.keys(table.getState().rowSelection).length}
-          selectedIds={Object.keys(table.getState().rowSelection).map(Number)}
+          numSelected={table.getSelectedRowModel().rows.length}
+          selectedIds={table
+            .getSelectedRowModel()
+            .rows.map((row) => Number(row.id))}
           toolbarComponents={toolbarComponents}
         />
         <TableVirtuoso
@@ -422,8 +424,9 @@ export function DataTable<T extends Record<string, unknown>>({
                   >
                     <Checkbox
                       indeterminate={
-                        table.getIsSomeRowsSelected() &&
-                        !table.getIsAllRowsSelected()
+                        table.getSelectedRowModel().rows.length > 0 &&
+                        table.getSelectedRowModel().rows.length <
+                          table.getState().pagination.pageSize
                       }
                       checked={table.getIsAllRowsSelected()}
                       onChange={table.getToggleAllRowsSelectedHandler()}

packages/diracx-web-components/src/hooks/utils.tsx

@@ -40,10 +40,14 @@ export async function fetcher<T>(
     throw new Error(errorMessage);
   }
 
+  if (response.status === 204) {
+    // No content response, return empty data
+    return { headers: response.headers, data: {} as T };
+  }
+
   const data = (await response.json()) as T;
-  const responseHeaders = response.headers;
 
-  return { headers: responseHeaders, data };
+  return { headers: response.headers, data };
 }
 
 /**