feat: add input/output sandbox download support

aldbr · aldbr · commit 27a6b8d1920c · 2026-03-18T15:31:35.000+01:00
diff --git a/packages/diracx-web-components/src/components/JobMonitor/JobDataTable.tsx b/packages/diracx-web-components/src/components/JobMonitor/JobDataTable.tsx
@@ -31,6 +31,8 @@ import { JobHistoryDialog } from "./JobHistoryDialog";
 import {
   deleteJobs,
   getJobHistory,
+  getJobSandbox,
+  getJobSandboxUrl,
   killJobs,
   rescheduleJobs,
   useJobs,
@@ -182,7 +184,6 @@ export function JobDataTable({
     diracxUrl,
     rowSelection,
     clearSelected,
-    setSearchBody,
     mutateJobs,
   ]);
 
@@ -251,7 +252,6 @@ export function JobDataTable({
     diracxUrl,
     rowSelection,
     clearSelected,
-    setSearchBody,
     mutateJobs,
   ]);
 
@@ -311,29 +311,19 @@ export function JobDataTable({
     } finally {
       setBackdropOpen(false);
     }
-  }, [
-    accessToken,
-    diracxUrl,
-    rowSelection,
-    clearSelected,
-    setSearchBody,
-    mutateJobs,
-  ]);
+  }, [accessToken, diracxUrl, rowSelection, clearSelected, mutateJobs]);
 
   /**
    * Handle the history of the selected job
    */
   const handleHistory = useCallback(
-    async (selectedId: number | null) => {
+    async (selectedId: string | null) => {
       if (!selectedId) return;
+      const jobId = Number(selectedId);
       setBackdropOpen(true);
-      setSelectedJobId(selectedId);
+      setSelectedJobId(jobId);
       try {
-        const { data } = await getJobHistory(
-          diracxUrl,
-          selectedId,
-          accessToken,
-        );
+        const { data } = await getJobHistory(diracxUrl, jobId, accessToken);
         setBackdropOpen(false);
         // Show the history
         setJobHistoryData(data);
@@ -360,6 +350,61 @@ export function JobDataTable({
     setIsHistoryDialogOpen(false);
   };
 
+  const handleSandboxDownload = useCallback(
+    async (selectedId: string | null, sbType: "input" | "output") => {
+      if (!selectedId) return;
+      const jobId = Number(selectedId);
+      setBackdropOpen(true);
+      try {
+        const { data: sandboxData } = await getJobSandbox(
+          diracxUrl,
+          jobId,
+          sbType,
+          accessToken,
+        );
+        if (sandboxData.length === 0)
+          throw new Error(`No ${sbType} sandbox found`);
+        const pfn = sandboxData[0];
+        if (pfn) {
+          const { data: urlData } = await getJobSandboxUrl(
+            diracxUrl,
+            pfn,
+            accessToken,
+          );
+          if (urlData?.url) {
+            const link = document.createElement("a");
+            link.href = urlData.url;
+            link.download = `${sbType}-sandbox-${jobId}.tar.gz`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            setSnackbarInfo({
+              open: true,
+              message: `Downloading ${sbType} sandbox of ${jobId}...`,
+              severity: "info",
+            });
+          } else
+            throw new Error(
+              "Could not retrieve a download URL for the sandbox",
+            );
+        } else throw new Error(`No ${sbType} sandbox found`);
+      } catch (error: unknown) {
+        let errorMessage = "An unknown error occurred";
+        if (error instanceof Error) {
+          errorMessage = error.message;
+        }
+        setSnackbarInfo({
+          open: true,
+          message: `Fetching sandbox of ${jobId} failed: ` + errorMessage,
+          severity: "error",
+        });
+      } finally {
+        setBackdropOpen(false);
+      }
+    },
+    [accessToken, diracxUrl],
+  );
+
   /**
    * The toolbar components for the data grid
    */
@@ -405,10 +450,21 @@ export function JobDataTable({
     () => [
       {
         label: "Get history",
-        onClick: (id: string | null) => handleHistory(Number(id)),
+        onClick: (id: string | null) => handleHistory(id),
+        dataTestId: "get-history-button",
+      },
+      {
+        label: "Download input sandbox",
+        onClick: (id: string | null) => handleSandboxDownload(id, "input"),
+        dataTestId: "download-input-sandbox-button",
+      },
+      {
+        label: "Download output sandbox",
+        onClick: (id: string | null) => handleSandboxDownload(id, "output"),
+        dataTestId: "download-output-sandbox-button",
       },
     ],
-    [handleHistory],
+    [handleHistory, handleSandboxDownload],
   );
 
   /**
diff --git a/packages/diracx-web-components/src/components/JobMonitor/jobDataService.ts b/packages/diracx-web-components/src/components/JobMonitor/jobDataService.ts
@@ -5,8 +5,15 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 
 import { fetcher } from "../../hooks/utils";
-import { Filter, SearchBody, Job, JobHistory } from "../../types";
 import type { JobSummary } from "../../types";
+import {
+  Filter,
+  SearchBody,
+  Job,
+  JobHistory,
+  JobSandboxPFNResponse,
+  SandboxUrlResponse,
+} from "../../types";
 
 type TimeUnit = "minute" | "hour" | "day" | "month" | "year";
 
@@ -194,6 +201,38 @@ export async function getJobHistory(
   return { data: data[0].LoggingInfo };
 }
 
+/**
+ * Retrieves the sandbox information for a given job ID and sandbox type.
+ * @param jobId - The ID of the job.
+ * @param sbType - The type of the sandbox (input or output).
+ * @param accessToken - The authentication token.
+ * @returns A Promise that resolves to an object containing the headers and data of the sandboxes.
+ */
+export function getJobSandbox(
+  diracxUrl: string | null,
+  jobId: number,
+  sbType: "input" | "output",
+  accessToken: string,
+): Promise<{ headers: Headers; data: JobSandboxPFNResponse }> {
+  const url = `${diracxUrl}/api/jobs/${jobId}/sandbox/${sbType}`;
+  return fetcher([url, accessToken]);
+}
+
+/**
+ * Retrieves the sandbox URL for a given PFN.
+ * @param pfn - The PFN of the job.
+ * @param accessToken - The authentication token.
+ * @returns A Promise that resolves to an object containing the headers and data of the sandbox URL.
+ */
+export function getJobSandboxUrl(
+  diracxUrl: string | null,
+  pfn: string,
+  accessToken: string,
+): Promise<{ headers: Headers; data: SandboxUrlResponse }> {
+  const url = `${diracxUrl}/api/jobs/sandbox?pfn=${encodeURIComponent(pfn)}`;
+  return fetcher([url, accessToken]);
+}
+
 /**
  * Retrieves the job summary for a given grouping.
  *
diff --git a/packages/diracx-web-components/src/components/shared/DataTable.tsx b/packages/diracx-web-components/src/components/shared/DataTable.tsx
@@ -45,6 +45,7 @@ import { SearchBody } from "../../types";
 export interface MenuItem {
   label: string;
   onClick: (id: string | null) => void;
+  dataTestId?: string;
 }
 
 /**
@@ -655,6 +656,7 @@ export function DataTable<T extends Record<string, unknown>>({
           {menuItems.map((menuItem, index: number) => (
             <MenuItem
               key={index}
+              data-testid={menuItem.dataTestId}
               onClick={() => {
                 handleCloseContextMenu();
                 menuItem.onClick(contextMenu.id);
diff --git a/packages/diracx-web-components/src/types/Sandbox.ts b/packages/diracx-web-components/src/types/Sandbox.ts
@@ -0,0 +1,10 @@
+// Types for sandbox-related API responses
+
+// Response for /api/jobs/<jobId>/sandbox/<sbType>
+export type JobSandboxPFNResponse = (string | null)[];
+
+// Response for /api/jobs/sandbox?pfn=...
+export interface SandboxUrlResponse {
+  url: string;
+  expires_in: number;
+}
diff --git a/packages/diracx-web-components/src/types/index.ts b/packages/diracx-web-components/src/types/index.ts
@@ -15,3 +15,4 @@ export * from "./EquationStatus";
 export * from "./operators";
 export * from "./SearchBarTokenNature";
 export * from "./CategoryType";
+export * from "./Sandbox";
diff --git a/packages/diracx-web-components/stories/mocks/jobDataService.mock.tsx b/packages/diracx-web-components/stories/mocks/jobDataService.mock.tsx
@@ -1,5 +1,12 @@
 /* eslint-disable */
-import { Job, JobHistory, SearchBody, JobSummary } from "../../src/types";
+import {
+  Job,
+  JobHistory,
+  SearchBody,
+  JobSummary,
+  JobSandboxPFNResponse,
+  SandboxUrlResponse,
+} from "../../src/types";
 
 import { useJobMockContext } from "./contexts.mock";
 
@@ -67,7 +74,7 @@ export function useJobs(
   };
 }
 
-// Mock implementation of `getJobHistory`
+// Mock implementation of getJobHistory
 export const getJobHistory = async (
   _diracxUrl: string | null,
   _jobId: number,
@@ -79,6 +86,31 @@ export const getJobHistory = async (
   return { data: mockJobHistoryResponse.jobHistory || [] };
 };
 
+// Mock implementation of getJobSandbox
+export function getJobSandbox(
+  diracxUrl: string | null,
+  jobId: number,
+  sbType: "input" | "output",
+  accessToken: string,
+): Promise<{ headers: Headers; data: JobSandboxPFNResponse }> {
+  return Promise.resolve({
+    headers: new Headers(),
+    data: [],
+  });
+}
+
+// Mock implementation of getJobSandboxUrl
+export function getJobSandboxUrl(
+  diracxUrl: string | null,
+  pfn: string,
+  accessToken: string,
+): Promise<{ headers: Headers; data: SandboxUrlResponse }> {
+  return Promise.resolve({
+    headers: new Headers(),
+    data: { url: "", expires_in: 0 },
+  });
+}
+
 // Mock implementation of refreshJobs
 export const refreshJobs = (
   _diracxUrl: string | null,
diff --git a/packages/diracx-web-components/test/JobMonitor.test.tsx b/packages/diracx-web-components/test/JobMonitor.test.tsx
@@ -74,11 +74,63 @@ describe("JobDataTable", () => {
       expect(getByText("Job accepted")).toBeInTheDocument();
     });
   });
+
+  it("displays the snackbar: no input sandbox", async () => {
+    const { getByText, getByTestId } = render(
+      <VirtuosoMockContext.Provider
+        value={{ viewportHeight: 300, itemHeight: 100 }}
+      >
+        <Default />
+      </VirtuosoMockContext.Provider>,
+    );
+
+    await act(async () => {
+      fireEvent.contextMenu(getByText("Job 1"));
+    });
+
+    // Now wait for the context menu to appear and click Download input sandbox
+    await act(async () => {
+      fireEvent.click(getByTestId("download-input-sandbox-button"));
+      // Allow time for state updates to complete
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    // Now check for the dialog
+    await waitFor(() => {
+      expect(screen.getByText(/No input sandbox found/)).toBeInTheDocument();
+    });
+  });
+
+  it("displays the snackbar: no output sandbox", async () => {
+    const { getByText, getByTestId } = render(
+      <VirtuosoMockContext.Provider
+        value={{ viewportHeight: 300, itemHeight: 100 }}
+      >
+        <Default />
+      </VirtuosoMockContext.Provider>,
+    );
+
+    await act(async () => {
+      fireEvent.contextMenu(getByText("Job 1"));
+    });
+
+    // Now wait for the context menu to appear and click Download output sandbox
+    await act(async () => {
+      fireEvent.click(getByTestId("download-output-sandbox-button"));
+      // Allow time for state updates to complete
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    // Now check for the dialog
+    await waitFor(() => {
+      expect(screen.getByText(/No output sandbox found/)).toBeInTheDocument();
+    });
+  });
 });
 
 describe("JobHistoryDialog", () => {
   it("renders the dialog with correct data", async () => {
-    const { getByText } = render(
+    const { getByText, getByTestId } = render(
       <VirtuosoMockContext.Provider
         value={{ viewportHeight: 300, itemHeight: 100 }}
       >
@@ -92,7 +144,7 @@ describe("JobHistoryDialog", () => {
 
     // Now wait for the context menu to appear and click Get history
     await act(async () => {
-      fireEvent.click(getByText("Get history"));
+      fireEvent.click(getByTestId("get-history-button"));
       // Allow time for state updates to complete
       await new Promise((resolve) => setTimeout(resolve, 0));
     });
diff --git a/packages/diracx-web/test/e2e/jobMonitor.sandbox.cy.ts b/packages/diracx-web/test/e2e/jobMonitor.sandbox.cy.ts
diff --git a/packages/diracx-web/test/e2e/support/jobMonitorUtils.ts b/packages/diracx-web/test/e2e/support/jobMonitorUtils.ts
