[HUD] Query for artifacts of all workflow ids (#6449)

Query for the artifacts for all workflow ids in the box. Previously we
assumed that only one workflow would show up in the box at a time, but
this might not be true.

Change the api to accept a list of workflows in the form list.join(",")
and get the artifacts for all the workflow ids in that list


https://torchci-git-csl-moreartifacts-fbopensource.vercel.app/pytorch/pytorch/commit/970ac2d907195dc31debe28e9a7ff8f4aa701683


old:
<img width="640" alt="image"
src="https://github.com/user-attachments/assets/5aee2470-ff03-4f6b-a7bc-c7842a34044e"
/>


new:
<img width="620" alt="image"
src="https://github.com/user-attachments/assets/37a54316-f245-4f16-a8b3-53b17989daf3"
/>

Note that the artifacts button shows up for the first job (non rerun or
memory leak one)

Fixes #5298

Author: clee2000

torchci/components/WorkflowBox.tsx

@@ -167,7 +167,7 @@ export default function WorkflowBox({
   const { utilMetadataList } = useUtilMetadata(workflowId);
   const groupUtilMetadataList = groupMetadataByJobId(utilMetadataList);
 
-  const { artifacts, error } = useArtifacts(workflowId);
+  const { artifacts, error } = useArtifacts(jobs.map((job) => job.workflowId));
   const [artifactsToShow, setArtifactsToShow] = useState(new Set<string>());
   const groupedArtifacts = groupArtifacts(jobs, artifacts);
   const [searchString, setSearchString] = useState("");
@@ -313,21 +313,22 @@ function useUtilMetadata(workflowId: string | undefined): {
   return { utilMetadataList: data.metadata_list, metaError: null };
 }
 
-function useArtifacts(workflowId: string | undefined): {
+function useArtifacts(workflowIds: (string | number | undefined)[]): {
   artifacts: Artifact[];
   error: any;
 } {
+  const uniqueWorkflowIds = Array.from(new Set(workflowIds)).filter(
+    (id) => id !== undefined
+  );
+  // Get all artifacts for these ids
   const { data, error } = useSWR<Artifact[]>(
-    `/api/artifacts/s3/${workflowId}`,
+    `/api/artifacts/s3/${uniqueWorkflowIds.join(",")}`,
     fetcher,
     {
       refreshInterval: 60 * 1000,
       refreshWhenHidden: true,
     }
   );
-  if (workflowId === undefined) {
-    return { artifacts: [], error: "No workflow ID" };
-  }
   if (data == null) {
     return { artifacts: [], error: "Loading..." };
   }

torchci/lib/fetchS3Links.ts

@@ -5,34 +5,46 @@ const GHA_ARTIFACTS_LAMBDA =
   "https://np6xty2nm6jifkuuyb6wllx6ha0qtthb.lambda-url.us-east-1.on.aws";
 
 export default async function fetchS3Links(
-  suiteId: string
+  suiteIds: string
 ): Promise<Artifact[]> {
-  const response = await fetch(GHA_ARTIFACTS_LAMBDA, {
-    method: "POST",
-    body: JSON.stringify({
-      workflow_id: suiteId,
-    }),
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
+  const unflattenedList = await Promise.all(
+    _(suiteIds)
+      .split(",")
+      .uniq()
+      .map(async (suiteId) => {
+        suiteId = suiteId.trim();
+        const response = await fetch(GHA_ARTIFACTS_LAMBDA, {
+          method: "POST",
+          body: JSON.stringify({
+            workflow_id: suiteId,
+          }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
 
-  const results = await response.json();
-  const artifacts =
-    _.keys(results).map((url: string) => {
-      const size = results[url];
-      const basename = url.split("/").slice(-1)[0];
-      const name =
-        basename !== "artifacts.zip"
-          ? basename
-          : url.split("/").slice(-2).join("/");
-      return {
-        kind: "s3",
-        name: name ?? "",
-        sizeInBytes: size ?? 0,
-        url: url,
-        expired: false,
-      };
-    }) ?? [];
-  return artifacts.sort((a, b) => a.name.localeCompare(b.name));
+        const results = await response.json();
+        return (
+          _.keys(results).map((url: string) => {
+            const size = results[url];
+            const basename = url.split("/").slice(-1)[0];
+            const name =
+              basename !== "artifacts.zip"
+                ? basename
+                : url.split("/").slice(-2).join("/");
+            return {
+              kind: "s3",
+              name: name ?? "",
+              sizeInBytes: size ?? 0,
+              url: url,
+              expired: false,
+            };
+          }) ?? []
+        );
+      })
+      .value()
+  );
+  return _.flatten(unflattenedList).sort((a, b) => {
+    return a.name.localeCompare(b.name);
+  });
 }