Skip to content

Commit

Permalink
Clean-up JS code in UI templates (#14019)
Browse files Browse the repository at this point in the history 
- Use template literals instead of '+' for forming strings, when applicable
- remove unused variables (gantt.html)
- remove unused function arguments, when applicable
  • Loading branch information
@XD-DENG
XD-DENG authored Feb 3, 2021
1 parent b59e416 commit 14805cc
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 45 deletions.
16 changes: 8 additions & 8 deletions airflow/www/templates/airflow/dag.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,13 +375,13 @@ <h4 class="modal-title" id="dagModalLabel">
{{ super() }}
<script>
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
var re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i');
var separator = uri.indexOf('?') !== -1 ? '&' : '?';
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
return uri.replace(re, `$1${key}=${value}$2`);
}
else {
return uri + separator + key + '=' + value;
return `${uri}${separator}${key}=${value}`;
}
}

Expand Down Expand Up @@ -415,7 +415,7 @@ <h4 class="modal-title" id="dagModalLabel">
});

function updateButtonUrl(elm, params) {
elm.setAttribute('href', elm.dataset.baseUrl + '?' + $.param(params));
elm.setAttribute('href', `${elm.dataset.baseUrl}?${$.param(params)}`);
}

function updateModalUrls() {
Expand Down Expand Up @@ -475,7 +475,7 @@ <h4 class="modal-title" id="dagModalLabel">
$('#div_btn_subdag').hide();
else {
$('#div_btn_subdag').show();
subdag_id = '{{ dag.dag_id }}.' + t;
subdag_id = `{{ dag.dag_id }}.${t}`;
}

$('#dag_dl_logs').hide();
Expand All @@ -502,7 +502,7 @@ <h4 class="modal-title" id="dagModalLabel">

var showLabel = index;
if (index != 0) {
url += '&try_number=' + index;
url += `&try_number=${index}`;
} else {
showLabel = 'All';
}
Expand Down Expand Up @@ -542,7 +542,7 @@ <h4 class="modal-title" id="dagModalLabel">
$.ajax(
{url: url,
cache: false,
success: function (data, textStatus, jqXHR) {
success: function (data) {
external_link.attr('href', data['url']);
external_link.removeClass('disabled');
link_tooltip.tooltip('disable');
Expand Down Expand Up @@ -597,7 +597,7 @@ <h4 class="modal-title" id="dagModalLabel">
})

// DAG Modal actions
$('form button[data-action]').click(function (e) {
$('form button[data-action]').click(function () {
var form = $(this).closest('form').get(0);
form.execution_date.value = execution_date;
form.origin.value = window.location;
Expand Down
8 changes: 4 additions & 4 deletions airflow/www/templates/airflow/dags.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,14 +428,14 @@ <h2>DAGs</h2>
.attr('fill', '#fff')
.attr('r', diameter/2)
.attr('title', function(d) {return d.state})
.on('mouseover', function(d, i) {
.on('mouseover', function(d) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill', '#e2e2e2')
.style('stroke-width', stroke_width_hover);
}
})
.on('mouseout', function(d, i) {
.on('mouseout', function(d) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill', '#fff')
Expand Down Expand Up @@ -502,14 +502,14 @@ <h2>DAGs</h2>
.attr('fill', '#fff')
.attr('r', diameter/2)
.attr('title', function(d) {return d.state || 'none'})
.on('mouseover', function(d, i) {
.on('mouseover', function(d) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill', '#e2e2e2')
.style('stroke-width', stroke_width_hover);
}
})
.on('mouseout', function(d, i) {
.on('mouseout', function(d) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill', '#fff')
Expand Down
5 changes: 1 addition & 4 deletions airflow/www/templates/airflow/gantt.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,17 +80,14 @@
<script src="{{ url_for_asset('taskInstances.js') }}"></script>
<script>
$( document ).ready(function() {
var dag_id = '{{ dag.dag_id }}';
var task_id = '';
var execution_date = '';
data = {{ data |tojson }};
var gantt = d3.gantt()
.taskTypes(data.taskNames)
.height(data.height)
.selector('.gantt')
.tickFormat("%H:%M:%S");
gantt(data.tasks);
$('body').on('airflow.timezone-change', (e) => {
$('body').on('airflow.timezone-change', () => {
gantt.redraw(data.tasks);
});
});
Expand Down
9 changes: 4 additions & 5 deletions airflow/www/templates/airflow/graph.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,8 +254,7 @@
function setUpZoomSupport() {
// Set up zoom support for Graph
zoom = d3.behavior.zoom().on("zoom", function() {
innerSvg.attr("transform", "translate(" + d3.event.translate + ")" +
"scale(" + d3.event.scale + ")");
innerSvg.attr("transform", `translate(${d3.event.translate})scale(${d3.event.scale})`);
});
svg.call(zoom);

Expand Down Expand Up @@ -423,10 +422,10 @@
d3.selectAll("g.node")
.transition(duration)
.style("opacity", 0.2);
d3.selectAll("g.node."+state)
d3.selectAll(`g.node.${state}`)
.transition(duration)
.style("opacity", 1);
d3.selectAll("g.node." + state + " rect")
d3.selectAll(`g.node.${state} rect`)
.transition(duration)
.style("stroke-width", highlightStrokeWidth)
.style("opacity", 1);
Expand Down Expand Up @@ -551,7 +550,7 @@
for(const node_id of g.nodes())
{
elem = g.node(node_id).elem;
elem.setAttribute("class", "node enter " + get_node_state(node_id, tis));
elem.setAttribute("class", `node enter ${get_node_state(node_id, tis)}`);
elem.setAttribute("data-toggle", "tooltip");

const task_id = node_id;
Expand Down
48 changes: 24 additions & 24 deletions airflow/www/templates/airflow/tree.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@
//.attr("width", width + margin.left + margin.right)
.append("g")
.attr("class", "level")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
.attr("transform", `translate(${margin.left},${margin.top})`);

data.x0 = 0;
data.y0 = 0;
Expand All @@ -207,7 +207,7 @@
var base_node = nodes[1];

var num_square = base_node.instances.length;
var extent = d3.extent(base_node.instances, function(d,i) {
var extent = d3.extent(base_node.instances, function(d) {
return new Date(d.execution_date);
});
var xScale = d3.time.scale()
Expand All @@ -220,7 +220,7 @@
d3.select("#tree-svg")
.insert("g")
.attr("transform",
"translate("+ (square_x + margin.left) +", " + axisHeight + ")")
`translate(${square_x + margin.left}, ${axisHeight})`)
.attr("class", "axis").call(
d3.svg.axis()
.scale(xScale)
Expand Down Expand Up @@ -261,7 +261,7 @@

d3.select(self.frameElement).transition()
.duration(duration)
.style("height", height + "px");
.style("height", `${height}px`);

// Compute the "layout".
nodes.forEach(function(n, i) {
Expand All @@ -274,8 +274,8 @@

var nodeEnter = node.enter().append("g")
.attr("class", node_class)
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
.attr("transform", function() {
return `translate(${source.y0},${source.x0})`;
})
.style("opacity", 1e-6);

Expand All @@ -287,28 +287,28 @@
var tt = "";
if (d.operator != undefined) {
if (d.operator != undefined) {
tt += "operator: " + escapeHtml(d.operator) + "<br>";
tt += `operator: ${escapeHtml(d.operator)}<br>`;
}

tt += "depends_on_past: " + escapeHtml(d.depends_on_past) + "<br>";
tt += "upstream: " + escapeHtml(d.num_dep) + "<br>";
tt += "retries: " + escapeHtml(d.retries) + "<br>";
tt += "owner: " + escapeHtml(d.owner) + "<br>";
tt += "start_date: " + escapeHtml(d.start_date) + "<br>";
tt += "end_date: " + escapeHtml(d.end_date) + "<br>";
tt += `depends_on_past: ${escapeHtml(d.depends_on_past)}<br>`;
tt += `upstream: ${escapeHtml(d.num_dep)}<br>`;
tt += `retries: ${escapeHtml(d.retries)}<br>`;
tt += `owner: ${escapeHtml(d.owner)}<br>`;
tt += `start_date: ${escapeHtml(d.start_date)}<br>`;
tt += `end_date: ${escapeHtml(d.end_date)}<br>`;
}
taskTip.direction('e')
taskTip.show(tt, this)
d3.select(this).transition()
.style('stroke-width', 3)
})
.on('mouseout', function(d, i) {
.on('mouseout', function(d) {
taskTip.hide(d)
d3.select(this).transition()
.style("stroke-width", function(d) {return is_dag_run(d)? "2": "1"})
})
.attr("height", barHeight)
.attr("width", function(d, i) {return barWidth - d.y;})
.attr("width", function(d) {return barWidth - d.y;})
.style("fill", function(d) {return d.ui_color;})
.attr("task_id", function(d){return d.name})
.on("click", toggles);
Expand All @@ -324,7 +324,7 @@
nodeEnter.append('g')
.attr("class", "stateboxes")
.attr("transform",
function(d, i) { return "translate(" + (square_x-d.y) + ",0)"; })
function(d) { return `translate(${square_x - d.y},0)`; })
.selectAll("rect").data(function(d) { return d.instances; })
.enter()
.append('rect')
Expand All @@ -337,7 +337,7 @@
else
call_modal(d.task_id, d.execution_date, nodeobj[d.task_id].extra_links, d.try_number, undefined);
})
.attr("class", function(d) {return "state " + d.state})
.attr("class", function(d) {return `state ${d.state}`})
.attr("data-toggle", "tooltip")
.attr("rx", function(d) {return is_dag_run(d)? "5": "1"})
.attr("ry", function(d) {return is_dag_run(d)? "5": "1"})
Expand All @@ -351,7 +351,7 @@
d3.select(this).transition()
.style('stroke-width', 3)
})
.on('mouseout', function(d,i) {
.on('mouseout', function(d) {
taskTip.hide(d)
d3.select(this).transition()
.style("stroke-width", function(d) {return is_dag_run(d)? "2": "1"})
Expand All @@ -365,19 +365,19 @@
// Transition nodes to their new position.
nodeEnter.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.attr("transform", function(d) { return `translate(${d.y},${d.x})`; })
.style("opacity", 1);

node.transition()
.duration(duration)
.attr("class", node_class)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.attr("transform", function(d) { return `translate(${d.y},${d.x})`; })
.style("opacity", 1);

// Transition exiting nodes to the parent's new position.
node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.attr("transform", function() { return `translate(${source.y},${source.x})`; })
.style("opacity", 1e-6)
.remove();

Expand All @@ -388,7 +388,7 @@
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
.attr("d", function() {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
Expand All @@ -404,7 +404,7 @@
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
.attr("d", function() {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
Expand All @@ -421,7 +421,7 @@

function toggles(clicked_d) {
// Collapse nodes with the same task id
d3.selectAll("[task_id='" + clicked_d.name + "']").each(function(d){
d3.selectAll(`[task_id='${clicked_d.name}']`).each(function(d){
if(clicked_d != d && d.children) {
d._children = d.children;
d.children = null;
Expand Down

0 comments on commit 14805cc

Please sign in to comment.