Js linting and inline migration for simple scripts

airflow/www/.eslintignore

@@ -1,7 +1,7 @@
 **/*{.,-}min.js
 **/*.sh
 **/*.py
-gantt-chart-d3v2.js
+gantt_chart_d3v2.js
 jqClock.min.js
 coverage/**
 static/dist/*

airflow/www/static/js/circles.js

@@ -0,0 +1,125 @@
+/*!
+ * 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.
+ */
+import d3 from 'd3';
+
+const height = 700;
+const width = document.getElementById('div_svg').offsetWidth;
+const points = 20;
+const matrix = [];
+const duration = 2000;
+let i = 0;
+let flip = 0;
+const colors = [
+  '#FF5A5F', '#007A87', '#7B0051', '#00D1C1', '#8CE071', '#FFB400',
+  '#FFAA91', '#B4A76C', '#9CA299', '#565A5C',
+];
+
+function choose(choices) {
+  const index = Math.floor(Math.random() * choices.length);
+  return choices[index];
+}
+// Making a matrix
+for (let x = 0; x < points; x += 1) {
+  for (let y = 0; y < points; y += 1) {
+    matrix[i] = {
+      x,
+      y,
+    };
+    i += 1;
+  }
+}
+const sclx = d3.scale.linear().domain([-1, points]).range([0, width]);
+const scly = d3.scale.linear().domain([-1, points]).range([0, height]);
+
+const circles = d3.select('#circles-svg')
+  .attr('width', '100%')
+
+  .attr('height', height)
+  .selectAll('circle')
+  .data(matrix)
+  .enter()
+  .append('circle')
+  .attr('stroke', 'black')
+  .attr('fill', 'none')
+  .attr('cx', (d) => sclx(d.x))
+  .attr('cy', (d) => scly(d.y))
+  .attr('r', () => 0);
+
+function toggle() {
+  const size = 50 + (200 * Math.random());
+  let yDelay = 0;
+  let randomDelay = 0;
+  if (Math.random() > 0.7) {
+    yDelay = 50 + (Math.random() * 50);
+  }
+  let xDelay = 0;
+  if (Math.random() > 0.7) {
+    xDelay = 50 + (Math.random() * 50);
+  }
+  if (Math.random() > 0.7) {
+    randomDelay = 1;
+  }
+
+  const randomX = Math.random() * width;
+  const randomY = Math.random() * height;
+  let col;
+  if (Math.random() > 0.5) {
+    col = choose(colors);
+  } else {
+    col = 'black';
+  }
+  if (Math.random() > 0.8) {
+    col = choose(colors);
+  }
+
+  if (flip === 0) {
+    flip = 1;
+
+    circles.transition()
+      .duration(duration)
+      .attr('cx', (d) => sclx(d.x))
+      .attr('cy', (d) => scly(d.y))
+      .attr('stroke', col)
+      .delay((d) => (randomDelay * Math.random() * 1000) + (d.x * xDelay) + (d.y * yDelay))
+      .attr('r', () => size);
+  } else {
+    flip = 0;
+
+    if (Math.random() > 0.6) {
+      circles.transition()
+        .duration(duration)
+        .attr('r', () => 0)
+        .attr('cx', () => randomX)
+        .attr('stroke', col)
+        .delay((d, j) => (j / 2) * Math.random() * 5)
+        .attr('cy', () => randomY);
+    } else {
+      circles.transition()
+        .duration(duration)
+        .attr('cx', (d) => sclx(d.x))
+        .attr('cy', (d) => scly(d.y))
+        .attr('stroke', col)
+        .delay((d) => (randomDelay * Math.random() * 1000) + (d.x * xDelay) + (d.y * yDelay))
+        .attr('r', () => 0);
+    }
+  }
+}
+
+setInterval(toggle, duration * 3);
+toggle();

airflow/www/static/js/dag_code.js

@@ -0,0 +1,33 @@
+/*!
+ * 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.
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  // We blur task_ids in demo mode
+  if (isDemoMode) {
+    $('pre span.s').css({
+      'text-shadow': '0 0 10px red',
+      color: 'transparent',
+    });
+  }
+});
+
+// pygments generates the HTML so set wrap toggle via js
+if (isWrapped) {
+  $('.code pre').toggleClass('wrap');
+}

airflow/www/static/js/duration_chart.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-undef */
+/*!
+ * 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.
+ */
+
+function handleCheck() {
+  if ($('#isCumulative').is(':checked')) {
+    $('#dur_chart').hide();
+    $('#cum_dur_chart').show();
+  } else {
+    $('#dur_chart').show();
+    $('#cum_dur_chart').hide();
+  }
+}
+$(document).on('chartload', () => {
+  handleCheck();
+});
+
+$('#isCumulative').on('click', () => {
+  handleCheck();
+});

airflow/www/static/js/main.js

@@ -23,7 +23,7 @@ import {
   formatTimezone,
   isoDateToTimeEl,
   setDisplayedTimezone,
-} from './datetime-utils';
+} from './datetime_utils';
 
 window.isoDateToTimeEl = isoDateToTimeEl;
 

airflow/www/static/js/task-instances.js

@@ -21,7 +21,7 @@
 
 // We don't re-import moment again, otherwise webpack will include it twice in the bundle!
 import { escapeHtml } from './main';
-import { defaultFormat, formatDateTime } from './datetime-utils';
+import { defaultFormat, formatDateTime } from './datetime_utils';
 
 function makeDateTimeHTML(start, end) {
   // check task ended or not

airflow/www/static/js/task_instance.js

@@ -0,0 +1,31 @@
+/*!
+ * 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.
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  function dateChange() {
+    // We don't want to navigate away if the datetimepicker is still visible
+    if ($('.datetimepicker bootstrap-datetimepicker-widget :visible').length > 0) {
+      return;
+    }
+
+    $('input#execution_date').parents('form').submit();
+  }
+  $('input#execution_date').parents('.datetimepicker').on('dp.change', dateChange);
+  $('input#execution_date').parents('.datetimepicker').on('dp.hide', dateChange);
+});

airflow/www/static/js/trigger.js

@@ -0,0 +1,27 @@
+/*!
+ * 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 textArea = document.getElementById('json');
+
+CodeMirror.fromTextArea(textArea, {
+  lineNumbers: true,
+  mode: { name: 'javascript', json: true },
+  gutters: ['CodeMirror-lint-markers'],
+  lint: true,
+});

airflow/www/static/js/variable_edit.js

@@ -0,0 +1,22 @@
+/*!
+ * 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 val = document.getElementById('val');
+const height = Math.min(window.innerHeight * 0.5, val.scrollHeight);
+val.style.height = `${height}px`;