[airflow] 01/01: Include state in mapped task dropdown

[bb...@apache.org]

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

bbovenzi pushed a commit to branch improve-graph-mapped-task-info
in repository https://gitbox.apache.org/repos/asf/airflow.git

commit 9976fb7f3dfbd259be3d7c0022676ab3672289cf
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Fri Apr 15 10:41:43 2022 -0400

    Include state in mapped task dropdown
---
 airflow/www/static/js/dag.js   | 14 +++++++-------
 airflow/www/static/js/graph.js |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/airflow/www/static/js/dag.js b/airflow/www/static/js/dag.js
index 145d1f2666..3e3e4ab091 100644
--- a/airflow/www/static/js/dag.js
+++ b/airflow/www/static/js/dag.js
@@ -55,7 +55,7 @@ let subdagId = '';
 let dagRunId = '';
 let mapIndex;
 let showBack = false;
-let mapLength = 0;
+let mapStates = [];
 const showExternalLogRedirect = getMetaValue('show_external_log_redirect') === 'True';
 
 const buttons = Array.from(document.querySelectorAll('a[id^="btn_"][data-base-url]')).reduce((obj, elm) => {
@@ -149,7 +149,7 @@ export function callModal({
   dagRunId: drID,
   mapIndex: mi,
   isMapped = false,
-  mappedLength = 0,
+  mappedStates = [],
 }) {
   taskId = t;
   const location = String(window.location);
@@ -160,7 +160,7 @@ export function callModal({
   dagRunId = drID;
   mapIndex = mi;
   if (isMapped) {
-    mapLength = mappedLength;
+    mapStates = mappedStates;
   }
   if (showBack) {
     $('#btn_back').show();
@@ -203,10 +203,10 @@ export function callModal({
   }
 
   if (isMapped) {
-    $('#mapped_dropdown #dropdown-label').text(`Mapped Instances [${mappedLength}]`);
+    $('#mapped_dropdown #dropdown-label').text(`Mapped Instances [${mappedStates.length}]`);
     $('#mapped_dropdown .dropdown-menu').empty();
-    [...Array(mappedLength)].forEach((_, i) => {
-      $('#mapped_dropdown .dropdown-menu').append(`<li><a href="#" class="map_index_item" data-mapIndex="${i}">${i}</a></li>`);
+    mappedStates.forEach((state, i) => {
+      $('#mapped_dropdown .dropdown-menu').append(`<li><a href="#" class="map_index_item" data-mapIndex="${i}">${i} - ${state}</a></li>`);
     });
     $('#btn_mapped').show();
     $('#mapped_dropdown').css('display', 'inline-block');
@@ -327,7 +327,7 @@ $(document).on('click', '#btn_back', () => {
     dagRunId,
     mapIndex: -1,
     isMapped: true,
-    mappedLength: mapLength,
+    mappedStates: mapStates,
   });
 });
 
diff --git a/airflow/www/static/js/graph.js b/airflow/www/static/js/graph.js
index ecdcb921a9..1bf751dc24 100644
--- a/airflow/www/static/js/graph.js
+++ b/airflow/www/static/js/graph.js
@@ -182,8 +182,8 @@ function draw() {
       // A task node
       const task = tasks[nodeId];
       const tryNumber = taskInstances[nodeId].try_number || 0;
-      let mappedLength = 0;
-      if (task.is_mapped) mappedLength = taskInstances[nodeId].mapped_states.length;
+      let mappedStates = [];
+      if (task.is_mapped) mappedStates = taskInstances[nodeId].mapped_states;
 
       callModal({
         taskId: nodeId,
@@ -194,7 +194,7 @@ function draw() {
         dagRunId,
         mapIndex: task.map_index,
         isMapped: task.is_mapped,
-        mappedLength,
+        mappedStates,
       });
     }
   });