You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by bb...@apache.org on 2022/04/18 22:10:12 UTC
[airflow] branch improve-graph-mapped-task-info updated: Rearrange task action IA
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
The following commit(s) were added to refs/heads/improve-graph-mapped-task-info by this push:
new 19be750b24 Rearrange task action IA
19be750b24 is described below
commit 19be750b24c84bf925fd47ea42ecf246a1420962
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Mon Apr 18 18:08:45 2022 -0400
Rearrange task action IA
---
airflow/www/static/js/dag.js | 110 ++++++++++++---------------------
airflow/www/templates/airflow/dag.html | 29 ++++-----
2 files changed, 51 insertions(+), 88 deletions(-)
diff --git a/airflow/www/static/js/dag.js b/airflow/www/static/js/dag.js
index 3e3e4ab091..a8d71ac893 100644
--- a/airflow/www/static/js/dag.js
+++ b/airflow/www/static/js/dag.js
@@ -54,7 +54,6 @@ let executionDate = '';
let subdagId = '';
let dagRunId = '';
let mapIndex;
-let showBack = false;
let mapStates = [];
const showExternalLogRedirect = getMetaValue('show_external_log_redirect') === 'True';
@@ -107,17 +106,10 @@ function updateModalUrls() {
updateButtonUrl(buttons.ti, {
_flt_3_dag_id: dagId,
_flt_3_task_id: taskId,
- _flt_3_map_index: mapIndex,
+ _flt_0_map_index: mapIndex,
_oc_TaskInstanceModelView: 'dag_run.execution_date',
});
- updateButtonUrl(buttons.mapped, {
- _flt_3_dag_id: dagId,
- _flt_3_task_id: taskId,
- _flt_3_run_id: dagRunId,
- _oc_TaskInstanceModelView: 'map_index',
- });
-
updateButtonUrl(buttons.log, {
dag_id: dagId,
task_id: taskId,
@@ -162,11 +154,6 @@ export function callModal({
if (isMapped) {
mapStates = mappedStates;
}
- if (showBack) {
- $('#btn_back').show();
- } else {
- $('#btn_back').hide();
- }
$('#dag_run_id').text(drID);
$('#task_id').text(t);
$('#execution_date').text(formatDateTime(d));
@@ -175,15 +162,11 @@ export function callModal({
$('#extra_links').prev('hr').hide();
$('#extra_links').empty().hide();
if (mi >= 0) {
- $('#modal_map_index').show();
- $('#modal_map_index .value').text(mi);
// Marking state and clear are not yet supported for mapped instances
$('#success_action').hide();
$('#failed_action').hide();
$('#clear_action').hide();
} else {
- $('#modal_map_index').hide();
- $('#modal_map_index .value').text('');
$('#success_action').show();
$('#failed_action').show();
$('#clear_action').show();
@@ -196,29 +179,42 @@ export function callModal({
subdagId = undefined;
}
- if (isMapped || mapIndex >= 0) {
- $('#mapped_instances').show();
- } else {
- $('#mapped_instances').hide();
- }
+ // Show a span or dropdown for mapIndex
+ if (mi >= 0 && !mapStates.length) {
+ $('#modal_map_index').show();
+ $('#modal_map_index .value').text(mi);
+ $('#mapped_dropdown').hide();
+ } else if (mi >= 0 || isMapped) {
+ $('#modal_map_index').show();
+ $('#modal_map_index .value').text('');
+ $('#mapped_dropdown').show();
- if (isMapped) {
- $('#mapped_dropdown #dropdown-label').text(`Mapped Instances [${mappedStates.length}]`);
+ const dropdownText = mapIndex > -1 ? mapIndex : `All ${mapStates.length} Mapped Instances`;
+ $('#mapped_dropdown #dropdown-label').text(dropdownText);
$('#mapped_dropdown .dropdown-menu').empty();
- mappedStates.forEach((state, i) => {
+ $('#mapped_dropdown .dropdown-menu').append(`<li><a href="#" class="map_index_item" data-mapIndex="all">All ${mapStates.length} Mapped Instances</a></li>`);
+ mapStates.forEach((state, i) => {
$('#mapped_dropdown .dropdown-menu').append(`<li><a href="#" class="map_index_item" data-mapIndex="${i}">${i} - ${state}</a></li>`);
});
+ } else {
+ $('#modal_map_index').hide();
+ $('#modal_map_index .value').text('');
+ $('#mapped_dropdown').hide();
+ }
+
+ if (isMapped) {
+ $('#task_actions').text(`Task Actions for all ${mappedStates.length} instances`);
$('#btn_mapped').show();
$('#mapped_dropdown').css('display', 'inline-block');
$('#btn_rendered').hide();
$('#btn_xcom').hide();
$('#btn_log').hide();
} else {
+ $('#task_actions').text('Task Actions');
$('#btn_rendered').show();
$('#btn_xcom').show();
$('#btn_log').show();
$('#btn_mapped').hide();
- $('#mapped_dropdown').hide();
}
$('#dag_dl_logs').hide();
@@ -309,26 +305,23 @@ export function callModal({
// Switch the modal from a mapped task summary to a specific mapped task instance
$(document).on('click', '.map_index_item', function mapItem() {
const mi = $(this).attr('data-mapIndex');
- showBack = true;
- callModal({
- taskId,
- executionDate,
- dagRunId,
- mapIndex: mi,
- });
-});
-
-// Switch from a mapped task instance back to a mapped task summary
-$(document).on('click', '#btn_back', () => {
- showBack = false;
- callModal({
- taskId,
- executionDate,
- dagRunId,
- mapIndex: -1,
- isMapped: true,
- mappedStates: mapStates,
- });
+ if (mi === 'all') {
+ callModal({
+ taskId,
+ executionDate,
+ dagRunId,
+ mapIndex: -1,
+ isMapped: true,
+ mappedStates: mapStates,
+ });
+ } else {
+ callModal({
+ taskId,
+ executionDate,
+ dagRunId,
+ mapIndex: mi,
+ });
+ }
});
// Task Instance Modal actions
@@ -355,29 +348,6 @@ $('form[data-action]').on('submit', function submit(e) {
}
});
-// DAG Modal actions
-$('form button[data-action]').on('click', function onClick() {
- const form = $(this).closest('form').get(0);
- // Somehow submit is fired twice. Only once is the executionDate/dagRunId valid
- if (dagRunId || executionDate) {
- if (form.dag_run_id) {
- form.dag_run_id.value = dagRunId;
- }
- if (form.execution_date) {
- form.execution_date.value = executionDate;
- }
- form.origin.value = window.location;
- if (form.task_id) {
- form.task_id.value = taskId;
- }
- if (form.map_index) {
- form.map_index.value = mapIndex === undefined ? '' : mapIndex;
- }
- form.action = $(this).data('action');
- form.submit();
- }
-});
-
$('#pause_resume').on('change', function onChange() {
const $input = $(this);
const id = $input.data('dag-id');
diff --git a/airflow/www/templates/airflow/dag.html b/airflow/www/templates/airflow/dag.html
index d946875bd6..ee2ca25943 100644
--- a/airflow/www/templates/airflow/dag.html
+++ b/airflow/www/templates/airflow/dag.html
@@ -209,8 +209,17 @@
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="taskInstanceModalLabel">
<span class="text-muted">Task Instance:</span> <span id="task_id"></span>
- <span id="modal_map_index"><br><span class="text-muted">Map Index:</span> <span class="value"></span></span>
<br><span class="text-muted">at:</span> <span id="execution_date"></span>
+ <span id="modal_map_index"><br><span class="text-muted">Map Index:</span>
+ <span class="value"></span>
+ <div class="dropdown" id="mapped_dropdown">
+ <button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
+ <span id="dropdown-label" title="Select Mapped Instance"></span>
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu menu-scroll"></ul>
+ </div>
+ </span>
</h4>
</div>
<div class="modal-body">
@@ -250,22 +259,6 @@
</ul>
<hr>
</div>
- <div id="mapped_instances">
- <button id="btn_back" style="display: none;" type="button" class="btn btn-sm" title="Go back to the mapped task summary page">
- Back to Mapped Summary
- </button>
- <a id="btn_mapped" style="display: none;" class="btn btn-sm" data-base-url="{{ url_for('TaskInstanceModelView.list') }}" title="Show the mapped instances for this DAG run">
- Mapped Instances
- </a>
- <div class="dropdown" id="mapped_dropdown">
- <button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
- <span id="dropdown-label" title="Select Mapped Instance"></span>
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu menu-scroll"></ul>
- </div>
- <hr style="margin-bottom: 8px;">
- </div>
{% if external_log_name is defined %}
<div id="dag_redir_logs">
<label style="display:inline"> View Logs in {{ external_log_name }} (by attempts):</label>
@@ -275,7 +268,7 @@
<hr>
</div>
{% endif %}
- <h4>Task Actions</h4>
+ <h4 id="task_actions">Task Actions</h4>
<form method="POST" data-action="{{ url_for('Airflow.run') }}" id="run_action">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<input type="hidden" name="dag_id" value="{{ dag.dag_id }}">