Skip to content

Commit 9f14724

Browse files
authored
Js linting and inline migration for simple scripts (#14215)
* Js linting and inline migration for simple scripts - Linting for all the relatively simple JS in our html templates - Replaced jQuery .click() and .ready() functions - changed all js files to snake_case instead of kebab-case for consistency * add function to get metadata * fix meta_head and clean up js * remove extra <head> tag * snake case task instances file
1 parent a68f073 commit 9f14724

21 files changed

Lines changed: 329 additions & 189 deletions

‎airflow/www/.eslintignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
**/*{.,-}min.js
22
**/*.sh
33
**/*.py
4-
gantt-chart-d3v2.js
4+
gantt_chart_d3v2.js
55
jqClock.min.js
66
coverage/**
77
static/dist/*

‎airflow/www/static/js/circles.js‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
/*!
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import d3 from 'd3';
20+
21+
const height = 700;
22+
const width = document.getElementById('div_svg').offsetWidth;
23+
const points = 20;
24+
const matrix = [];
25+
const duration = 2000;
26+
let i = 0;
27+
let flip = 0;
28+
const colors = [
29+
'#FF5A5F', '#007A87', '#7B0051', '#00D1C1', '#8CE071', '#FFB400',
30+
'#FFAA91', '#B4A76C', '#9CA299', '#565A5C',
31+
];
32+
33+
function choose(choices) {
34+
const index = Math.floor(Math.random() * choices.length);
35+
return choices[index];
36+
}
37+
// Making a matrix
38+
for (let x = 0; x < points; x += 1) {
39+
for (let y = 0; y < points; y += 1) {
40+
matrix[i] = {
41+
x,
42+
y,
43+
};
44+
i += 1;
45+
}
46+
}
47+
const sclx = d3.scale.linear().domain([-1, points]).range([0, width]);
48+
const scly = d3.scale.linear().domain([-1, points]).range([0, height]);
49+
50+
const circles = d3.select('#circles-svg')
51+
.attr('width', '100%')
52+
53+
.attr('height', height)
54+
.selectAll('circle')
55+
.data(matrix)
56+
.enter()
57+
.append('circle')
58+
.attr('stroke', 'black')
59+
.attr('fill', 'none')
60+
.attr('cx', (d) => sclx(d.x))
61+
.attr('cy', (d) => scly(d.y))
62+
.attr('r', () => 0);
63+
64+
function toggle() {
65+
const size = 50 + (200 * Math.random());
66+
let yDelay = 0;
67+
let randomDelay = 0;
68+
if (Math.random() > 0.7) {
69+
yDelay = 50 + (Math.random() * 50);
70+
}
71+
let xDelay = 0;
72+
if (Math.random() > 0.7) {
73+
xDelay = 50 + (Math.random() * 50);
74+
}
75+
if (Math.random() > 0.7) {
76+
randomDelay = 1;
77+
}
78+
79+
const randomX = Math.random() * width;
80+
const randomY = Math.random() * height;
81+
let col;
82+
if (Math.random() > 0.5) {
83+
col = choose(colors);
84+
} else {
85+
col = 'black';
86+
}
87+
if (Math.random() > 0.8) {
88+
col = choose(colors);
89+
}
90+
91+
if (flip === 0) {
92+
flip = 1;
93+
94+
circles.transition()
95+
.duration(duration)
96+
.attr('cx', (d) => sclx(d.x))
97+
.attr('cy', (d) => scly(d.y))
98+
.attr('stroke', col)
99+
.delay((d) => (randomDelay * Math.random() * 1000) + (d.x * xDelay) + (d.y * yDelay))
100+
.attr('r', () => size);
101+
} else {
102+
flip = 0;
103+
104+
if (Math.random() > 0.6) {
105+
circles.transition()
106+
.duration(duration)
107+
.attr('r', () => 0)
108+
.attr('cx', () => randomX)
109+
.attr('stroke', col)
110+
.delay((d, j) => (j / 2) * Math.random() * 5)
111+
.attr('cy', () => randomY);
112+
} else {
113+
circles.transition()
114+
.duration(duration)
115+
.attr('cx', (d) => sclx(d.x))
116+
.attr('cy', (d) => scly(d.y))
117+
.attr('stroke', col)
118+
.delay((d) => (randomDelay * Math.random() * 1000) + (d.x * xDelay) + (d.y * yDelay))
119+
.attr('r', () => 0);
120+
}
121+
}
122+
}
123+
124+
document.addEventListener('DOMContentLoaded', () => {
125+
setInterval(toggle, duration * 3);
126+
toggle();
127+
});

‎airflow/www/static/js/dag_code.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*!
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import getMetaValue from './meta_value';
21+
22+
const isDemoMode = getMetaValue('demo_mode');
23+
const isWrapped = getMetaValue('wrapped');
24+
25+
document.addEventListener('DOMContentLoaded', () => {
26+
// We blur task_ids in demo mode
27+
if (isDemoMode) {
28+
$('pre span.s').css({
29+
'text-shadow': '0 0 10px red',
30+
color: 'transparent',
31+
});
32+
}
33+
});
34+
35+
// pygments generates the HTML so set wrap toggle via js
36+
if (isWrapped) {
37+
$('.code pre').toggleClass('wrap');
38+
}
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*!
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
function handleCheck() {
21+
if ($('#isCumulative').is(':checked')) {
22+
$('#dur_chart').hide();
23+
$('#cum_dur_chart').show();
24+
} else {
25+
$('#dur_chart').show();
26+
$('#cum_dur_chart').hide();
27+
}
28+
}
29+
$(document).on('chartload', handleCheck);
30+
31+
$('#isCumulative').on('click', handleCheck);

‎airflow/www/static/js/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
formatTimezone,
2424
isoDateToTimeEl,
2525
setDisplayedTimezone,
26-
} from './datetime-utils';
26+
} from './datetime_utils';
2727

2828
window.isoDateToTimeEl = isoDateToTimeEl;
2929

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*!
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
export default function getMetaValue(name) {
21+
const elem = document.querySelector(`meta[name="${name}"]`);
22+
if (!elem) {
23+
return null;
24+
}
25+
return elem.getAttribute('content');
26+
}
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*!
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
document.addEventListener('DOMContentLoaded', () => {
21+
function dateChange() {
22+
// We don't want to navigate away if the datetimepicker is still visible
23+
if ($('.datetimepicker bootstrap-datetimepicker-widget :visible').length > 0) {
24+
return;
25+
}
26+
27+
$('input#execution_date').parents('form').submit();
28+
}
29+
$('input#execution_date').parents('.datetimepicker').on('dp.change', dateChange);
30+
$('input#execution_date').parents('.datetimepicker').on('dp.hide', dateChange);
31+
});
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
// We don't re-import moment again, otherwise webpack will include it twice in the bundle!
2323
import { escapeHtml } from './main';
24-
import { defaultFormat, formatDateTime } from './datetime-utils';
24+
import { defaultFormat, formatDateTime } from './datetime_utils';
2525

2626
function makeDateTimeHTML(start, end) {
2727
// check task ended or not

0 commit comments

Comments
 (0)