verdan · verdan · Aug 6, 2018 · Aug 6, 2018 · Aug 6, 2018 · Aug 7, 2018
diff --git a/airflow/www_rbac/static/js/dag-modal.js b/airflow/www_rbac/static/js/dag-modal.js
@@ -0,0 +1,60 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const initModalButtons = (dagID, execDate) => {
+  $("#btn_dagrun_clear").click(function () {
+    window.location = $(this).data('url') +
+      "&dag_id=" + encodeURIComponent(dagID) +
+      "&execution_date=" + encodeURIComponent(execDate) +
+      "&origin=" + encodeURIComponent(window.location);
+  });
+
+
+  $('#btn_dagrun_failed').click(function () {
+    window.location = $(this).data('url') +
+      "?dag_id=" + encodeURIComponent(dagID) +
+      "&execution_date=" + encodeURIComponent(execDate) +
+      "&origin=" + encodeURIComponent(window.location);
+  });
+
+
+  $('#btn_dagrun_success').click(function () {
+    window.location = $(this).data('url') +
+      "?dag_id=" + encodeURIComponent(dagID) +
+      "&execution_date=" + encodeURIComponent(execDate) +
+      "&origin=" + encodeURIComponent(window.location);
+  });
+
+
+  $('#btn_edit_dagrun').click(function () {
+    window.location = $(this).data('url') + dagID;
+  });
+};
+
+
+export const callDagModal = (dag) => {
+  const dagID = dag && dag.dag_id;
+  const execDate = dag && dag.execution_date;
+  $('#dag_id').html(dagID);
+  $('#dagModal').modal({});
+  $("#dagModal").css("margin-top", "0px");
+
+  initModalButtons(dagID, execDate)
+};
+
diff --git a/airflow/www_rbac/static/js/dag.js b/airflow/www_rbac/static/js/dag.js
@@ -0,0 +1,55 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+require('bootstrap-toggle');
+
+const highlightPills = (pathName) => {
+  $(`a[href*="${pathName}"]`).parent().addClass('active');
+  $('.never_active').removeClass('active');
+};
+
+const confirmDeleteDag = (dagID) => {
+  $("#btn_delete_dag").click(function () {
+    return confirm(`
+    Are you sure you want to delete '${dagID}' now?
+    This option will delete ALL metadata, DAG runs, etc.
+    This cannot be undone.`);
+  });
+};
+
+
+const initPauseResume = (dagID) => {
+  $("#pause_resume").change(function () {
+    const isPaused = $(this).prop('checked') ? 'true' : 'false';
+    $.post($(this).data('url') + '?is_paused=' + isPaused + '&dag_id=' + encodeURIComponent(dagID));
+  });
+};
+
+
+$(document).ready(function () {
+  const dagID = $('#dag-id').data('dag-id');
+
+  // Highlight active pill
+  highlightPills(this.location.pathname);
+
+  confirmDeleteDag(dagID);
+
+  initPauseResume(dagID)
+
+});
diff --git a/airflow/www_rbac/static/js/datetime-utils.js b/airflow/www_rbac/static/js/datetime-utils.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export const moment = require('moment-timezone');
+const moment = require('moment-timezone');
 export const defaultFormat = 'YYYY-MM-DD, HH:mm:ss';
 export const defaultFormatWithTZ = 'YYYY-MM-DD, HH:mm:ss z';
 

diff --git a/airflow/www_rbac/static/js/graph.js b/airflow/www_rbac/static/js/graph.js
@@ -18,10 +18,11 @@
  */
 
 import { generateTooltipDateTime, converAndFormatUTC, secondsToString } from './datetime-utils';
+import {callTaskInstanceModal} from './ti-modal';
 
 // Assigning css classes based on state to nodes
 // Initiating the tooltips
-function update_nodes_states(task_instances) {
+function updateNodesStates(task_instances) {
   $.each(task_instances, function (task_id, ti) {
     $('tspan').filter(function (index) {
       return $(this).text() === task_id;
@@ -30,17 +31,17 @@ function update_nodes_states(task_instances) {
       .attr("class", "node enter " + ti.state)
       .attr("data-toggle", "tooltip")
       .attr("data-original-title", function (d) {
+        const dagTZ = $('#dag-tz').data('dag-tz');
         // Tooltip
-        const task = tasks[task_id];
-        let tt = "Task_id: " + ti.task_id + "<br>";
+        let tt = "Task ID: " + ti.task_id + "<br>";
         tt += "Run: " + converAndFormatUTC(ti.execution_date) + "<br>";
         if (ti.run_id != undefined) {
           tt += "run_id: <nobr>" + ti.run_id + "</nobr><br>";
         }
-        tt += "Operator: " + task.task_type + "<br>";
+        tt += "Operator: " + ti.operator + "<br>";
         tt += "Duration: " + secondsToString(ti.duration) + "<br>";
         tt += "State: " + ti.state + "<br>";
-        tt += generateTooltipDateTime(ti.start_date, ti.end_date, dagTZ); // dagTZ has been defined in dag.html
+        tt += generateTooltipDateTime(ti.start_date, ti.end_date, dagTZ);
         return tt;
       });
   });
@@ -70,5 +71,20 @@ function initRefreshButton() {
   );
 }
 
+
+function initTaskInstanceModal() {
+  d3.selectAll("g.node").on("click", function (ti) {
+    const task = tasks[ti];
+    if (task.task_type === "SubDagOperator")
+      callTaskInstanceModal(task.dag_id, ti, execution_date, true);
+    else
+      callTaskInstanceModal(task.dag_id, ti, execution_date);
+  });
+}
+
+
 initRefreshButton();
-update_nodes_states(task_instances);
+updateNodesStates(task_instances);
+initTaskInstanceModal();
+
+
diff --git a/airflow/www_rbac/static/js/base.js → airflow/www_rbac/static/js/layout.js b/airflow/www_rbac/static/js/base.js → airflow/www_rbac/static/js/layout.js
@@ -17,27 +17,38 @@
  * under the License.
  */
 
-import {defaultFormatWithTZ, moment} from './datetime-utils';
+import {defaultFormatWithTZ} from './datetime-utils';
+const moment = require('moment-timezone');
 
-function displayTime() {
+const displayTime = () => {
   let utcTime = moment().utc().format(defaultFormatWithTZ);
   $('#clock')
-    .attr("data-original-title", function() {
-      return hostName
+    .attr("data-original-title", function () {
+      return $('#hostname').data('hostname');
     })
     .html(utcTime);
 
   setTimeout(displayTime, 1000);
-}
+};
 
-$(document).ready(function () {
-  displayTime();
-  $('span').tooltip();
+
+const ajaxSetup = () => {
   $.ajaxSetup({
-    beforeSend: function(xhr, settings) {
+    beforeSend: function (xhr, settings) {
       if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
-        xhr.setRequestHeader("X-CSRFToken", csrfToken);
+        xhr.setRequestHeader("X-CSRFToken", $('#csrf').data('csrf-token'));
       }
     }
   });
+};
+
+$(document).ready(function () {
+  // Live Clock in top navbar
+  displayTime();
+
+  // Set CSRF token for ajax calls
+  ajaxSetup();
+
+  // Initiate Tooltip for whole application
+  $('span').tooltip();
 });
diff --git a/airflow/www_rbac/static/js/ti-modal.js b/airflow/www_rbac/static/js/ti-modal.js
@@ -0,0 +1,146 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const updateQueryStringParameter = (ti) => {
+  const uri = String(window.location);
+  const re = new RegExp("([?&])root=.*?(&|$)", "i");
+  const separator = uri.indexOf('?') !== -1 ? "&" : "?";
+  if (uri.match(re)) {
+    return uri.replace(re, '$1' + "root=" + ti + '$2');
+  }
+  else {
+    return uri + separator + "root=" + ti;
+  }
+};
+
+
+const initModalButtons = (dagID, taskID, execDate, subDagID) => {
+  $("#btn_rendered").click(function () {
+    window.location = $(this).data('url') +
+      "?task_id=" + taskID +
+      "&dag_id=" + dagID +
+      "&execution_date=" + execDate;
+  });
+
+
+  $("#btn_subdag").click(function () {
+    window.location = $(this).data('url') +
+      "?dag_id=" + subDagID +
+      "&execution_date=" + execDate;
+  });
+
+
+  $("#btn_log").click(function () {
+    window.location = $(this).data('url') +
+      "?task_id=" + taskID +
+      "&dag_id=" + dagID +
+      "&execution_date=" + execDate;
+  });
+
+
+  $("#btn_task").click(function () {
+    window.location = $(this).data('url') +
+      "?task_id=" + taskID +
+      "&dag_id=" + dagID +
+      "&execution_date=" + execDate;
+  });
+
+
+  $("#btn_ti").click(function () {
+    window.location = $(this).data('url') +
+      "?flt1_dag_id_equals=" + dagID +
+      "&_flt_3_task_id=" + taskID +
+      "&_oc_TaskInstanceModelView=" + execDate;
+  });
+
+
+  $("#btn_run").click(function () {
+    window.location = $(this).data('url') +
+      "?task_id=" + taskID +
+      "&dag_id=" + dagID +
+      "&ignore_all_deps=" + $('#btn_ignore_all_deps').hasClass('active') +
+      "&ignore_task_deps=" + $('#btn_ignore_task_deps').hasClass('active') +
+      "&ignore_ti_state=" + $('#btn_ignore_ti_state').hasClass('active') +
+      "&execution_date=" + execDate +
+      "&origin=" + encodeURIComponent(window.location);
+  });
+
+
+  $("#btn_clear").click(function () {
+    window.location = $(this).data('url') +
+      "?task_id=" + taskID +
+      "&dag_id=" + dagID +
+      "&future=" + $('#btn_future').hasClass('active') +
+      "&past=" + $('#btn_past').hasClass('active') +
+      "&upstream=" + $('#btn_upstream').hasClass('active') +
+      "&downstream=" + $('#btn_downstream').hasClass('active') +
+      "&recursive=" + $('#btn_recursive').hasClass('active') +
+      "&execution_date=" + execDate +
+      "&origin=" + encodeURIComponent(window.location);
+  });
+
+
+  $("#btn_failed").click(function () {
+    window.location = $(this).data('url') +
+      "?task_id=" + taskID +
+      "&dag_id=" + dagID +
+      "&upstream=" + $('#btn_failed_upstream').hasClass('active') +
+      "&downstream=" + $('#btn_failed_downstream').hasClass('active') +
+      "&future=" + $('#btn_failed_future').hasClass('active') +
+      "&past=" + $('#btn_failed_past').hasClass('active') +
+      "&execution_date=" + execDate +
+      "&origin=" + encodeURIComponent(window.location);
+  });
+
+
+  $("#btn_success").click(function () {
+    window.location = $(this).data('url') +
+      "?task_id=" + taskID +
+      "&dag_id=" + dagID +
+      "&upstream=" + $('#btn_success_upstream').hasClass('active') +
+      "&downstream=" + $('#btn_success_downstream').hasClass('active') +
+      "&future=" + $('#btn_success_future').hasClass('active') +
+      "&past=" + $('#btn_success_past').hasClass('active') +
+      "&execution_date=" + execDate +
+      "&origin=" + encodeURIComponent(window.location);
+  });
+};
+
+export const callTaskInstanceModal = (dID, ti, exDate, subD) => {
+  let subDagID = '';
+
+  $("#btn_filter").on("click", function () {
+    window.location = updateQueryStringParameter(ti);
+  });
+  $('#task_id').html(ti);
+  $('#execution_date').html(exDate);
+  $('#myModal').modal({});
+  $("#myModal").css("margin-top", "0px");
+  if (subD === undefined)
+    $("#div_btn_subdag").hide();
+  else {
+    $("#div_btn_subdag").show();
+    subDagID = encodeURIComponent(`${dID}.${ti}`);
+  }
+  const dagID = encodeURIComponent(dID);
+  const taskID = encodeURIComponent(ti);
+  const execDate = encodeURIComponent(exDate);
+
+  initModalButtons(dagID, taskID, execDate, subDagID)
+};