You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by GitBox <gi...@apache.org> on 2021/02/12 21:10:46 UTC

[GitHub] [airflow] bbovenzi opened a new pull request #14215: Js linting and inline migration for simple scripts

bbovenzi opened a new pull request #14215:
URL: https://github.com/apache/airflow/pull/14215


   - Moved simple inline js to its own file with linting as per #14115, other more complicated files will be their own PRs (gantt, graph, tree, dag, dags)
   - Replaced jQuery some deprecated functions
   - changed all js files to snake_case instead of kebab-case for consistency's sake
   
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] ashb commented on a change in pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
ashb commented on a change in pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#discussion_r576232178



##########
File path: airflow/www/templates/airflow/dag_code.html
##########
@@ -21,6 +21,14 @@
 
 {% block page_title %}{{ dag.dag_id }} - Code - Airflow{% endblock %}
 
+{% block head %}
+  {{ super() }}
+  <head>

Review comment:
       This will create duplicate `<head>` tags won't it?




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] ashb commented on a change in pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
ashb commented on a change in pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#discussion_r576233780



##########
File path: airflow/www/static/js/duration_chart.js
##########
@@ -0,0 +1,35 @@
+/*!
+ * 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();
+});

Review comment:
       Couldn't we do this?
   
   ```suggestion
   $(document).on('chartload', handleCheck);
   $('#isCumulative').on('click', handleCheck);
   ```




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] ashb commented on a change in pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
ashb commented on a change in pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#discussion_r576350909



##########
File path: airflow/www/templates/airflow/dag_code.html
##########
@@ -21,6 +21,14 @@
 
 {% block page_title %}{{ dag.dag_id }} - Code - Airflow{% endblock %}
 
+{% block head %}
+  {{ super() }}
+  <head>

Review comment:
       Still need to remove these tags




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] mik-laj commented on a change in pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
mik-laj commented on a change in pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#discussion_r575649112



##########
File path: airflow/www/templates/airflow/dag_code.html
##########
@@ -32,23 +32,8 @@
 {% block tail_js %}
   {{ super() }}
   <script>
-    function toggleWrap() {
-      $('.code pre').toggleClass('wrap')
-    };
-
-    // We blur task_ids in demo mode
-    $(document).ready(function() {
-      if ("{{ demo_mode }}" == "True") {
-        $("pre span.s").css({
-          'text-shadow': '0 0 10px red',
-          'color': 'transparent',
-        });
-      }
-    });
-
-    // pygments generates the HTML so set wrap toggle via js
-    if ("{{ wrapped }}" == "True") {
-      toggleWrap();
-    };
+    const isDemoMode = '{{ demo_mode }}' === 'True';

Review comment:
       Ideally, we should manage to delete all inline scripts. For this purpose, we can pass this data as the page metadata.
   ```javascript
   function getMetaValue(name) {
     const el = document.querySelector('meta[name="' + name + '"]')
     if (!el) {
       return
     }
     return el.getAttribute("content")
   }
   
   global.getMetaValue = getMetaValue
   ```
   ```
   <meta name="dag-timezone" content="{{ dag.timezone.name }}">
   ```
   ```
   var dag_timezone = gettMetaValue("dag-timezone")
   ```




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] ryanahamilton commented on a change in pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
ryanahamilton commented on a change in pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#discussion_r576238270



##########
File path: airflow/www/templates/airflow/dag_code.html
##########
@@ -21,6 +21,14 @@
 
 {% block page_title %}{{ dag.dag_id }} - Code - Airflow{% endblock %}
 
+{% block head %}
+  {{ super() }}
+  <head>
+    <meta name="demo_mode" content="{{ demo_mode }}">
+    <meta name="wrapped" content="{{ wrapped }}">
+  </head>

Review comment:
       I don't _think_ there is a `head` block, but instead `head_meta`, `head_js`, or `head_css`. The `<head></head>` tags will already be provided by the the parent template.
   ```suggestion
   {% block head_meta %}
     {{ super() }}
     <meta name="demo_mode" content="{{ demo_mode }}">
     <meta name="wrapped" content="{{ wrapped }}">
   ```




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] ashb commented on pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
ashb commented on pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#issuecomment-779847179


   Looks good now @bbovenzi -- conflicts to resolve though.


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] ryanahamilton merged pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
ryanahamilton merged pull request #14215:
URL: https://github.com/apache/airflow/pull/14215


   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] ashb commented on a change in pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
ashb commented on a change in pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#discussion_r576243102



##########
File path: airflow/www/templates/airflow/dag_code.html
##########
@@ -21,6 +21,14 @@
 
 {% block page_title %}{{ dag.dag_id }} - Code - Airflow{% endblock %}
 
+{% block head %}
+  {{ super() }}
+  <head>
+    <meta name="demo_mode" content="{{ demo_mode }}">
+    <meta name="wrapped" content="{{ wrapped }}">
+  </head>

Review comment:
       https://github.com/dpgaspar/Flask-AppBuilder/blob/master/flask_appbuilder/templates/appbuilder/init.html is the template that is providing most of the "base" HTML




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] bbovenzi commented on pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
bbovenzi commented on pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#issuecomment-779366394


   @ryanahamilton @ashb Added the requested changes.


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] bbovenzi commented on a change in pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
bbovenzi commented on a change in pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#discussion_r575722900



##########
File path: airflow/www/templates/airflow/dag_code.html
##########
@@ -32,23 +32,8 @@
 {% block tail_js %}
   {{ super() }}
   <script>
-    function toggleWrap() {
-      $('.code pre').toggleClass('wrap')
-    };
-
-    // We blur task_ids in demo mode
-    $(document).ready(function() {
-      if ("{{ demo_mode }}" == "True") {
-        $("pre span.s").css({
-          'text-shadow': '0 0 10px red',
-          'color': 'transparent',
-        });
-      }
-    });
-
-    // pygments generates the HTML so set wrap toggle via js
-    if ("{{ wrapped }}" == "True") {
-      toggleWrap();
-    };
+    const isDemoMode = '{{ demo_mode }}' === 'True';

Review comment:
       Good idea. Updated,




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] bbovenzi commented on a change in pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
bbovenzi commented on a change in pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#discussion_r576360501



##########
File path: airflow/www/templates/airflow/dag_code.html
##########
@@ -21,6 +21,14 @@
 
 {% block page_title %}{{ dag.dag_id }} - Code - Airflow{% endblock %}
 
+{% block head %}
+  {{ super() }}
+  <head>

Review comment:
       of course. my bad. 




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [airflow] ashb commented on a change in pull request #14215: Js linting and inline migration for simple scripts

Posted by GitBox <gi...@apache.org>.
ashb commented on a change in pull request #14215:
URL: https://github.com/apache/airflow/pull/14215#discussion_r576232840



##########
File path: 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();

Review comment:
       Should these be moved in to a DOM onready?




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org