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 2f0f02536f separate callModal from dag.js (#28410)
2f0f02536f is described below
commit 2f0f02536f7773dd782bd980ae932091b7badc61
Author: Brent Bovenzi <[email protected]>
AuthorDate: Thu Dec 22 08:19:40 2022 -0500
separate callModal from dag.js (#28410)
---
airflow/www/static/js/{dag.js => callModal.js} | 269 ++++++++------------
airflow/www/static/js/dag.js | 327 +------------------------
airflow/www/static/js/gantt.js | 2 +-
airflow/www/static/js/graph.js | 2 +-
4 files changed, 102 insertions(+), 498 deletions(-)
diff --git a/airflow/www/static/js/dag.js b/airflow/www/static/js/callModal.js
similarity index 58%
copy from airflow/www/static/js/dag.js
copy to airflow/www/static/js/callModal.js
index f2c3ce39ee..4d68d0ba1a 100644
--- a/airflow/www/static/js/dag.js
+++ b/airflow/www/static/js/callModal.js
@@ -17,11 +17,10 @@
* under the License.
*/
-/* global document, window, CustomEvent, $ */
+/* global document, window, $ */
import { getMetaValue } from './utils';
-import { approxTimeFromNow, formatDateTime } from './datetime_utils';
-import { openDatasetModal, getDatasetTooltipInfo } from './datasetUtils';
+import { formatDateTime } from './datetime_utils';
function updateQueryStringParameter(uri, key, value) {
const re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i');
@@ -34,43 +33,10 @@ function updateQueryStringParameter(uri, key, value) {
}
const dagId = getMetaValue('dag_id');
-export const dagTZ = getMetaValue('dag_timezone');
const logsWithMetadataUrl = getMetaValue('logs_with_metadata_url');
const externalLogUrl = getMetaValue('external_log_url');
const extraLinksUrl = getMetaValue('extra_links_url');
-const pausedUrl = getMetaValue('paused_url');
-const datasetsUrl = getMetaValue('datasets_url');
-const nextRun = {
- createAfter: getMetaValue('next_dagrun_create_after'),
- intervalStart: getMetaValue('next_dagrun_data_interval_start'),
- intervalEnd: getMetaValue('next_dagrun_data_interval_end'),
-};
-let taskId = '';
-let executionDate = '';
-let subdagId = '';
-let dagRunId = '';
-let mapIndex;
-let mapStates = [];
-let extraLinks;
const showExternalLogRedirect = getMetaValue('show_external_log_redirect') ===
'True';
-let nextDatasets = [];
-let nextDatasetsError;
-
-const setNextDatasets = (datasets, error) => {
- nextDatasets = datasets;
- nextDatasetsError = error;
-};
-
-// Pills highlighting
-$(window).on('load', function onLoad() {
- $(`a[href*="${this.location.pathname}"]`).parent().addClass('active');
- $('.never_active').removeClass('active');
- const run = $('#next-dataset-tooltip');
- const singleDatasetUri = $(run).data('uri');
- if (!singleDatasetUri) {
- getDatasetTooltipInfo(dagId, run, setNextDatasets);
- }
-});
const buttons =
Array.from(document.querySelectorAll('a[id^="btn_"][data-base-url]')).reduce((obj,
elm) => {
obj[elm.id.replace('btn_', '')] = elm;
@@ -89,9 +55,15 @@ function updateButtonUrl(elm, params) {
elm.setAttribute('href', `${url}?${$.param(params)}`);
}
-function updateModalUrls() {
+function updateModalUrls({
+ executionDate,
+ subDagId,
+ taskId,
+ mapIndex,
+ dagRunId,
+}) {
updateButtonUrl(buttons.subdag, {
- dag_id: subdagId,
+ dag_id: subDagId,
execution_date: executionDate,
});
@@ -149,74 +121,68 @@ function updateModalUrls() {
});
}
-// Update modal urls on toggle
-document.addEventListener('click', (event) => {
- if (event.target.matches('button[data-toggle="button"]')) {
- updateModalUrls();
- }
-});
-
-export function callModal({
- taskId: t,
- executionDate: d,
- extraLinks: e,
+function callModal({
+ taskId,
+ executionDate,
+ extraLinks,
tryNumber,
isSubDag,
- dagRunId: drID,
- mapIndex: mi,
+ dagRunId,
+ mapIndex = -1,
isMapped = false,
mappedStates = [],
}) {
- taskId = t;
+ // Turn off previous event listeners
+ $('.map_index_item').off('click');
+ $('form[data-action]').off('submit');
+
const location = String(window.location);
$('#btn_filter').on('click', () => {
window.location = updateQueryStringParameter(location, 'root', taskId);
});
- executionDate = d;
- dagRunId = drID;
- mapIndex = mi;
- extraLinks = e;
- if (isMapped) {
- mapStates = mappedStates;
- }
- $('#dag_run_id').text(drID);
- $('#task_id').text(t);
- $('#execution_date').text(formatDateTime(d));
+ $('#dag_run_id').text(dagRunId);
+ $('#task_id').text(taskId);
+ $('#execution_date').text(formatDateTime(executionDate));
$('#taskInstanceModal').modal({});
$('#taskInstanceModal').css('margin-top', '0');
$('#extra_links').prev('hr').hide();
$('#extra_links').empty().hide();
- if (mi >= 0) {
+ if (mapIndex >= 0) {
$('#modal_map_index').show();
- $('#modal_map_index .value').text(mi);
+ $('#modal_map_index .value').text(mapIndex);
} else {
$('#modal_map_index').hide();
$('#modal_map_index .value').text('');
}
+
+ let subDagId;
if (isSubDag) {
$('#div_btn_subdag').show();
- subdagId = `${dagId}.${t}`;
+ subDagId = `${dagId}.${taskId}`;
} else {
$('#div_btn_subdag').hide();
- subdagId = undefined;
}
// Show a span or dropdown for mapIndex
- if (mi >= 0 && !mapStates.length) {
+ if (mapIndex >= 0 && !mappedStates.length) {
$('#modal_map_index').show();
- $('#modal_map_index .value').text(mi);
+ $('#modal_map_index .value').text(mapIndex);
$('#mapped_dropdown').hide();
- } else if (mi >= 0 || isMapped) {
+ } else if (mapIndex >= 0 || isMapped) {
$('#modal_map_index').show();
$('#modal_map_index .value').text('');
$('#mapped_dropdown').show();
- const dropdownText = mapIndex > -1 ? mapIndex : `All ${mapStates.length}
Mapped Instances`;
+ const dropdownText = mapIndex > -1
+ ? mapIndex
+ : `All ${mappedStates.length} Mapped Instances`;
$('#mapped_dropdown #dropdown-label').text(dropdownText);
$('#mapped_dropdown .dropdown-menu').empty();
- $('#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>`);
+ $('#mapped_dropdown .dropdown-menu')
+ .append(`<li><a href="#" class="map_index_item" data-mapIndex="all">All
${mappedStates.length} Mapped Instances</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>`);
});
} else {
$('#modal_map_index').hide();
@@ -250,7 +216,13 @@ export function callModal({
}
}
- updateModalUrls();
+ updateModalUrls({
+ executionDate,
+ subDagId,
+ taskId,
+ mapIndex,
+ dagRunId,
+ });
$('#try_index > li').remove();
$('#redir_log_try_index > li').remove();
@@ -262,8 +234,8 @@ export function callModal({
execution_date: executionDate,
metadata: 'null',
});
- if (mi !== undefined) {
- query.set('map_index', mi);
+ if (mapIndex !== undefined) {
+ query.set('map_index', mapIndex);
}
for (let index = startIndex; index < tryNumber; index += 1) {
let showLabel = index;
@@ -324,103 +296,58 @@ export function callModal({
extraLinksSpan.append(markupArr).show();
extraLinksSpan.find('[data-toggle="tooltip"]').tooltip();
}
-}
-// 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');
- if (mi === 'all') {
- callModal({
- taskId,
- executionDate,
- dagRunId,
- extraLinks,
- mapIndex: -1,
- isMapped: true,
- mappedStates: mapStates,
- });
- } else {
- callModal({
- taskId,
- executionDate,
- dagRunId,
- extraLinks,
- mapIndex: mi,
- });
- }
-});
-
-// Task Instance Modal actions
-$('form[data-action]').on('submit', function submit(e) {
- e.preventDefault();
- const form = $(this).get(0);
- 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 && mapIndex >= 0) {
- form.map_index.value = mapIndex;
- } else if (form.map_index) {
- form.map_index.remove();
+ // Switch the modal from a mapped task summary to a specific mapped task
instance
+ function switchMapItem() {
+ const mi = $(this).attr('data-mapIndex');
+ if (mi === 'all') {
+ callModal({
+ taskId,
+ executionDate,
+ dagRunId,
+ extraLinks,
+ mapIndex: -1,
+ isMapped: true,
+ mappedStates,
+ });
+ } else {
+ callModal({
+ taskId,
+ executionDate,
+ dagRunId,
+ extraLinks,
+ mapIndex: mi,
+ });
}
- form.action = $(this).data('action');
- form.submit();
}
-});
-
-$('#pause_resume').on('change', function onChange() {
- const $input = $(this);
- const id = $input.data('dag-id');
- const isPaused = $input.is(':checked');
- const url =
`${pausedUrl}?is_paused=${isPaused}&dag_id=${encodeURIComponent(id)}`;
- // Remove focus on element so the tooltip will go away
- $input.trigger('blur');
- $input.removeClass('switch-input--error');
-
- // dispatch an event that React can listen for
- const event = new CustomEvent('paused', { detail: isPaused });
- document.dispatchEvent(event);
-
- $.post(url).fail(() => {
- setTimeout(() => {
- $input.prop('checked', !isPaused);
- $input.addClass('switch-input--error');
- event.value = !isPaused;
- document.dispatchEvent(event);
- }, 500);
- });
-});
-
-$('#next-run').on('mouseover', () => {
- $('#next-run').attr('data-original-title', () => {
- let newTitle = '';
- if (nextRun.createAfter) {
- newTitle += `<strong>Run After:</strong>
${formatDateTime(nextRun.createAfter)}<br>`;
- newTitle += `Next Run:
${approxTimeFromNow(nextRun.createAfter)}<br><br>`;
- }
- if (nextRun.intervalStart && nextRun.intervalEnd) {
- newTitle += '<strong>Data Interval</strong><br>';
- newTitle += `Start: ${formatDateTime(nextRun.intervalStart)}<br>`;
- newTitle += `End: ${formatDateTime(nextRun.intervalEnd)}`;
+
+ // Task Instance Modal actions
+ function submit(e) {
+ e.preventDefault();
+ const form = $(this).get(0);
+ 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 && mapIndex >= 0) {
+ form.map_index.value = mapIndex;
+ } else if (form.map_index) {
+ form.map_index.remove();
+ }
+ form.action = $(this).data('action');
+ form.submit();
}
- return newTitle;
- });
-});
-
-$('.next-dataset-triggered').on('click', (e) => {
- const run = $('#next-dataset-tooltip');
- const summary = $(e.target).data('summary');
- const singleDatasetUri = $(run).data('uri');
- if (!singleDatasetUri) {
- openDatasetModal(dagId, summary, nextDatasets, nextDatasetsError);
- } else {
- window.location.href =
`${datasetsUrl}?uri=${encodeURIComponent(singleDatasetUri)}`;
}
-});
+
+ $('form[data-action]').on('submit', submit);
+ $('.map_index_item').on('click', switchMapItem);
+}
+
+export default callModal;
diff --git a/airflow/www/static/js/dag.js b/airflow/www/static/js/dag.js
index f2c3ce39ee..e205c1d8c5 100644
--- a/airflow/www/static/js/dag.js
+++ b/airflow/www/static/js/dag.js
@@ -23,36 +23,16 @@ import { getMetaValue } from './utils';
import { approxTimeFromNow, formatDateTime } from './datetime_utils';
import { openDatasetModal, getDatasetTooltipInfo } from './datasetUtils';
-function updateQueryStringParameter(uri, key, value) {
- const re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i');
- const separator = uri.indexOf('?') !== -1 ? '&' : '?';
- if (uri.match(re)) {
- return uri.replace(re, `$1${key}=${value}$2`);
- }
-
- return `${uri}${separator}${key}=${value}`;
-}
-
const dagId = getMetaValue('dag_id');
-export const dagTZ = getMetaValue('dag_timezone');
-const logsWithMetadataUrl = getMetaValue('logs_with_metadata_url');
-const externalLogUrl = getMetaValue('external_log_url');
-const extraLinksUrl = getMetaValue('extra_links_url');
const pausedUrl = getMetaValue('paused_url');
+// eslint-disable-next-line import/prefer-default-export
+export const dagTZ = getMetaValue('dag_timezone');
const datasetsUrl = getMetaValue('datasets_url');
const nextRun = {
createAfter: getMetaValue('next_dagrun_create_after'),
intervalStart: getMetaValue('next_dagrun_data_interval_start'),
intervalEnd: getMetaValue('next_dagrun_data_interval_end'),
};
-let taskId = '';
-let executionDate = '';
-let subdagId = '';
-let dagRunId = '';
-let mapIndex;
-let mapStates = [];
-let extraLinks;
-const showExternalLogRedirect = getMetaValue('show_external_log_redirect') ===
'True';
let nextDatasets = [];
let nextDatasetsError;
@@ -72,309 +52,6 @@ $(window).on('load', function onLoad() {
}
});
-const buttons =
Array.from(document.querySelectorAll('a[id^="btn_"][data-base-url]')).reduce((obj,
elm) => {
- obj[elm.id.replace('btn_', '')] = elm;
- return obj;
-}, {});
-
-function updateButtonUrl(elm, params) {
- let url = elm.dataset.baseUrl;
- if (params.dag_id && elm.dataset.baseUrl.indexOf(dagId) !== -1) {
- url = url.replace(dagId, params.dag_id);
- delete params.dag_id;
- }
- if (Object.prototype.hasOwnProperty.call(params, 'map_index') &&
params.map_index === undefined) {
- delete params.map_index;
- }
- elm.setAttribute('href', `${url}?${$.param(params)}`);
-}
-
-function updateModalUrls() {
- updateButtonUrl(buttons.subdag, {
- dag_id: subdagId,
- execution_date: executionDate,
- });
-
- updateButtonUrl(buttons.task, {
- dag_id: dagId,
- task_id: taskId,
- execution_date: executionDate,
- map_index: mapIndex,
- });
-
- updateButtonUrl(buttons.rendered, {
- dag_id: dagId,
- task_id: taskId,
- execution_date: executionDate,
- map_index: mapIndex,
- });
-
- updateButtonUrl(buttons.mapped, {
- _flt_3_dag_id: dagId,
- _flt_3_task_id: taskId,
- _flt_3_run_id: dagRunId,
- _oc_TaskInstanceModelView: 'map_index',
- });
-
- if (buttons.rendered_k8s) {
- updateButtonUrl(buttons.rendered_k8s, {
- dag_id: dagId,
- task_id: taskId,
- execution_date: executionDate,
- map_index: mapIndex,
- });
- }
-
- const tiButtonParams = {
- _flt_3_dag_id: dagId,
- _flt_3_task_id: taskId,
- _oc_TaskInstanceModelView: 'dag_run.execution_date',
- };
- // eslint-disable-next-line no-underscore-dangle
- if (mapIndex >= 0) tiButtonParams._flt_0_map_index = mapIndex;
- updateButtonUrl(buttons.ti, tiButtonParams);
-
- updateButtonUrl(buttons.log, {
- dag_id: dagId,
- task_id: taskId,
- execution_date: executionDate,
- map_index: mapIndex,
- });
-
- updateButtonUrl(buttons.xcom, {
- dag_id: dagId,
- task_id: taskId,
- execution_date: executionDate,
- map_index: mapIndex,
- });
-}
-
-// Update modal urls on toggle
-document.addEventListener('click', (event) => {
- if (event.target.matches('button[data-toggle="button"]')) {
- updateModalUrls();
- }
-});
-
-export function callModal({
- taskId: t,
- executionDate: d,
- extraLinks: e,
- tryNumber,
- isSubDag,
- dagRunId: drID,
- mapIndex: mi,
- isMapped = false,
- mappedStates = [],
-}) {
- taskId = t;
- const location = String(window.location);
- $('#btn_filter').on('click', () => {
- window.location = updateQueryStringParameter(location, 'root', taskId);
- });
- executionDate = d;
- dagRunId = drID;
- mapIndex = mi;
- extraLinks = e;
- if (isMapped) {
- mapStates = mappedStates;
- }
- $('#dag_run_id').text(drID);
- $('#task_id').text(t);
- $('#execution_date').text(formatDateTime(d));
- $('#taskInstanceModal').modal({});
- $('#taskInstanceModal').css('margin-top', '0');
- $('#extra_links').prev('hr').hide();
- $('#extra_links').empty().hide();
- if (mi >= 0) {
- $('#modal_map_index').show();
- $('#modal_map_index .value').text(mi);
- } else {
- $('#modal_map_index').hide();
- $('#modal_map_index .value').text('');
- }
- if (isSubDag) {
- $('#div_btn_subdag').show();
- subdagId = `${dagId}.${t}`;
- } else {
- $('#div_btn_subdag').hide();
- subdagId = undefined;
- }
-
- // 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();
-
- const dropdownText = mapIndex > -1 ? mapIndex : `All ${mapStates.length}
Mapped Instances`;
- $('#mapped_dropdown #dropdown-label').text(dropdownText);
- $('#mapped_dropdown .dropdown-menu').empty();
- $('#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();
- $('#btn_task').hide();
- } else {
- $('#task_actions').text('Task Actions');
- $('#btn_rendered').show();
- $('#btn_xcom').show();
- $('#btn_log').show();
- $('#btn_mapped').hide();
- $('#btn_task').show();
- }
-
- $('#dag_dl_logs').hide();
- $('#dag_redir_logs').hide();
- if (tryNumber > 0 && !isMapped) {
- $('#dag_dl_logs').show();
- if (showExternalLogRedirect) {
- $('#dag_redir_logs').show();
- }
- }
-
- updateModalUrls();
-
- $('#try_index > li').remove();
- $('#redir_log_try_index > li').remove();
- const startIndex = (tryNumber > 2 ? 0 : 1);
-
- const query = new URLSearchParams({
- dag_id: dagId,
- task_id: taskId,
- execution_date: executionDate,
- metadata: 'null',
- });
- if (mi !== undefined) {
- query.set('map_index', mi);
- }
- for (let index = startIndex; index < tryNumber; index += 1) {
- let showLabel = index;
- if (index !== 0) {
- query.set('try_number', index);
- } else {
- showLabel = 'All';
- }
-
- $('#try_index').append(`<li role="presentation" style="display:inline">
- <a href="${logsWithMetadataUrl}?${query}&format=file"> ${showLabel} </a>
- </li>`);
-
- if (index !== 0 || showExternalLogRedirect) {
- $('#redir_log_try_index').append(`<li role="presentation"
style="display:inline">
- <a href="${externalLogUrl}?${query}"> ${showLabel} </a>
- </li>`);
- }
- }
- query.delete('try_number');
-
- if (!isMapped && extraLinks && extraLinks.length > 0) {
- const markupArr = [];
- extraLinks.sort();
- $.each(extraLinks, (i, link) => {
- query.set('link_name', link);
- const externalLink = $('<a href="#" class="btn btn-primary
disabled"></a>');
- const linkTooltip = $('<span class="tool-tip" data-toggle="tooltip"
style="padding-right: 2px; padding-left: 3px" data-placement="top" '
- + 'title="link not yet available"></span>');
- linkTooltip.append(externalLink);
- externalLink.text(link);
-
- $.ajax(
- {
- url: `${extraLinksUrl}?${query}`,
- cache: false,
- success(data) {
- externalLink.attr('href', data.url);
- // open absolute (external) links in a new tab/window and relative
(local) links
- // directly
- if (/^(?:[a-z]+:)?\/\//.test(data.url)) {
- externalLink.attr('target', '_blank');
- }
- externalLink.removeClass('disabled');
- linkTooltip.tooltip('disable');
- },
- error(data) {
- linkTooltip.tooltip('hide').attr('title',
data.responseJSON.error).tooltip('fixTitle');
- },
- },
- );
-
- markupArr.push(linkTooltip);
- });
-
- const extraLinksSpan = $('#extra_links');
- extraLinksSpan.prev('hr').show();
- extraLinksSpan.append(markupArr).show();
- extraLinksSpan.find('[data-toggle="tooltip"]').tooltip();
- }
-}
-
-// 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');
- if (mi === 'all') {
- callModal({
- taskId,
- executionDate,
- dagRunId,
- extraLinks,
- mapIndex: -1,
- isMapped: true,
- mappedStates: mapStates,
- });
- } else {
- callModal({
- taskId,
- executionDate,
- dagRunId,
- extraLinks,
- mapIndex: mi,
- });
- }
-});
-
-// Task Instance Modal actions
-$('form[data-action]').on('submit', function submit(e) {
- e.preventDefault();
- const form = $(this).get(0);
- 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 && mapIndex >= 0) {
- form.map_index.value = mapIndex;
- } else if (form.map_index) {
- form.map_index.remove();
- }
- 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/static/js/gantt.js b/airflow/www/static/js/gantt.js
index 43704ea081..be87fb8177 100644
--- a/airflow/www/static/js/gantt.js
+++ b/airflow/www/static/js/gantt.js
@@ -33,7 +33,7 @@
/* global d3, document, moment, data $ */
import tiTooltip from './task_instances';
-import { callModal } from './dag';
+import callModal from './callModal';
const replacements = {
a: 'ddd',
diff --git a/airflow/www/static/js/graph.js b/airflow/www/static/js/graph.js
index af9c3dd018..19a7b4ec1f 100644
--- a/airflow/www/static/js/graph.js
+++ b/airflow/www/static/js/graph.js
@@ -27,7 +27,7 @@
import { getMetaValue, finalStatesMap } from './utils';
import { escapeHtml } from './main';
import tiTooltip, { taskNoInstanceTooltip } from './task_instances';
-import { callModal } from './dag';
+import callModal from './callModal';
// dagId comes from dag.html
const dagId = getMetaValue('dag_id');
