[airflow] branch main updated: Use mapIndex to display extra links per mapped task. (#32154)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 98c47f48e1 Use mapIndex to display extra links per mapped task. 
(#32154)
98c47f48e1 is described below

commit 98c47f48e1b292d535d39cc3349660aa736d76cd
Author: Karthikeyan Singaravelan <tir.kar...@gmail.com>
AuthorDate: Wed Jun 28 20:52:09 2023 +0530

    Use mapIndex to display extra links per mapped task. (#32154)
---
 airflow/www/static/js/api/useExtraLinks.ts         | 60 ++++++++++++----------
 .../js/dag/details/taskInstance/ExtraLinks.tsx     | 10 +++-
 .../static/js/dag/details/taskInstance/index.tsx   |  9 ++++
 3 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/airflow/www/static/js/api/useExtraLinks.ts 
b/airflow/www/static/js/api/useExtraLinks.ts
index a76cb2540c..302d58aa53 100644
--- a/airflow/www/static/js/api/useExtraLinks.ts
+++ b/airflow/www/static/js/api/useExtraLinks.ts
@@ -32,38 +32,44 @@ export default function useExtraLinks({
   dagId,
   taskId,
   executionDate,
+  mapIndex,
   extraLinks,
 }: {
   dagId: string;
   taskId: string;
   executionDate: string;
+  mapIndex?: number | undefined;
   extraLinks: string[];
 }) {
-  return useQuery(["extraLinks", dagId, taskId, executionDate], async () => {
-    const data = await Promise.all(
-      extraLinks.map(async (link) => {
-        const url = `${extraLinksUrl}?task_id=${encodeURIComponent(
-          taskId
-        )}&dag_id=${encodeURIComponent(
-          dagId
-        )}&execution_date=${encodeURIComponent(
-          executionDate
-        )}&link_name=${encodeURIComponent(link)}`;
-        try {
-          const datum = await axios.get<AxiosResponse, LinkData>(url);
-          return {
-            name: link,
-            url: datum.url,
-          };
-        } catch (e) {
-          console.error(e);
-          return {
-            name: link,
-            url: "",
-          };
-        }
-      })
-    );
-    return data;
-  });
+  return useQuery(
+    ["extraLinks", dagId, taskId, executionDate, mapIndex],
+    async () => {
+      const data = await Promise.all(
+        extraLinks.map(async (link) => {
+          mapIndex ??= -1;
+          const url = `${extraLinksUrl}?task_id=${encodeURIComponent(
+            taskId
+          )}&dag_id=${encodeURIComponent(
+            dagId
+          )}&execution_date=${encodeURIComponent(
+            executionDate
+          )}&link_name=${encodeURIComponent(link)}&map_index=${mapIndex}`;
+          try {
+            const datum = await axios.get<AxiosResponse, LinkData>(url);
+            return {
+              name: link,
+              url: datum.url,
+            };
+          } catch (e) {
+            console.error(e);
+            return {
+              name: link,
+              url: "",
+            };
+          }
+        })
+      );
+      return data;
+    }
+  );
 }
diff --git a/airflow/www/static/js/dag/details/taskInstance/ExtraLinks.tsx 
b/airflow/www/static/js/dag/details/taskInstance/ExtraLinks.tsx
index a5e2a37539..1121459b4b 100644
--- a/airflow/www/static/js/dag/details/taskInstance/ExtraLinks.tsx
+++ b/airflow/www/static/js/dag/details/taskInstance/ExtraLinks.tsx
@@ -26,14 +26,22 @@ interface Props {
   dagId: string;
   taskId: string;
   executionDate: string;
+  mapIndex?: number | undefined;
   extraLinks: string[];
 }
 
-const ExtraLinks = ({ dagId, taskId, executionDate, extraLinks }: Props) => {
+const ExtraLinks = ({
+  dagId,
+  taskId,
+  executionDate,
+  mapIndex,
+  extraLinks,
+}: Props) => {
   const { data: links } = useExtraLinks({
     dagId,
     taskId,
     executionDate,
+    mapIndex,
     extraLinks,
   });
 
diff --git a/airflow/www/static/js/dag/details/taskInstance/index.tsx 
b/airflow/www/static/js/dag/details/taskInstance/index.tsx
index e22e346610..204e900ea8 100644
--- a/airflow/www/static/js/dag/details/taskInstance/index.tsx
+++ b/airflow/www/static/js/dag/details/taskInstance/index.tsx
@@ -99,6 +99,15 @@ const TaskInstance = ({ taskId, runId, mapIndex }: Props) => 
{
           key={dagId + runId + taskId + instance.mapIndex}
         />
       )}
+      {isMapped && group.extraLinks && isMapIndexDefined && (
+        <ExtraLinks
+          taskId={taskId}
+          dagId={dagId}
+          mapIndex={mapIndex}
+          executionDate={executionDate}
+          extraLinks={group?.extraLinks}
+        />
+      )}
       {!isMapped && group.extraLinks && (
         <ExtraLinks
           taskId={taskId}