Skip to content

Commit

Permalink
Fix task and dag stats on home page (apache#8865)
Browse files Browse the repository at this point in the history 
d.dag_id is not a valid attribute. in order to use dag_id variable
in a closure callback, it needs to be passed in as a fuction so the
right value can be captured for each for loop.
  • Loading branch information
QP Hou authored May 19, 2020
1 parent 841d816 commit dd57ec9
Showing 1 changed file with 146 additions and 138 deletions.
284 changes: 146 additions & 138 deletions airflow/www/templates/airflow/dags.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,155 +379,163 @@ <h2>DAGs</h2>
d3.selectAll(".loading-last-run").remove();
}

function drawDagStatsForDag(dag_id, stats) {
g = d3.select('svg#dag-run-' + dag_id.replace(/\./g, '__dot__'))
.attr('height', diameter + (stroke_width_hover * 2))
.attr('width', '110px')
.selectAll("g")
.data(states)
.enter()
.append('g')
.attr('transform', function(d, i) {
x = (i * (diameter + circle_margin)) + (diameter/2 + circle_margin);
y = (diameter/2) + stroke_width_hover;
return 'translate(' + x + ',' + y + ')';
});

g.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'middle')
.attr('vertical-align', 'middle')
.attr('font-size', 8)
.attr('y', 3)
.text(function(d){ return d.count > 0 ? d.count : ''; });

g.append('circle')
.attr('id', function(d) {return 'run-' + dag_id.replace(/\./g, '_') + d.state || 'none'})
.attr('class', 'has-svg-tooltip')
.attr('stroke-width', function(d) {
if (d.count > 0)
return stroke_width;
else {
return 1;
}
})
.attr('stroke', function(d) {
if (d.count > 0)
return STATE_COLOR[d.state];
else {
return 'gainsboro';
}
})
.attr('fill-opacity', 0)
.attr('r', diameter/2)
.attr('title', function(d) {return d.state})
.attr('style', function(d) {
if (d.count > 0)
return"cursor:pointer;"
})
.on('click', function(d, i) {
if (d.count > 0)
window.location = "{{ url_for('DagRunModelView.list') }}?_flt_3_dag_id=" + dag_id + "&_flt_3_state=" + d.state;
})
.on('mouseover', function(d, i) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill-opacity', 0.3)
.style("stroke-width", stroke_width_hover);
}
})
.on('mouseout', function(d, i) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill-opacity', 0)
.style("stroke-width", stroke_width);
}
})
.style("opacity", 0)
.transition()
.duration(500)
.delay(function(d, i){return i*50;})
.style("opacity", 1);
d3.select(".loading-dag-stats").remove();
}

function dagStatsHandler(error, json) {
for(var dag_id in json) {
states = json[dag_id];
g = d3.select('svg#dag-run-' + dag_id.replace(/\./g, '__dot__'))
.attr('height', diameter + (stroke_width_hover * 2))
.attr('width', '110px')
.selectAll("g")
.data(states)
.enter()
.append('g')
.attr('transform', function(d, i) {
x = (i * (diameter + circle_margin)) + (diameter/2 + circle_margin);
y = (diameter/2) + stroke_width_hover;
return 'translate(' + x + ',' + y + ')';
});

g.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'middle')
.attr('vertical-align', 'middle')
.attr('font-size', 8)
.attr('y', 3)
.text(function(d){ return d.count > 0 ? d.count : ''; });

g.append('circle')
.attr('id', function(d) {return 'run-' + dag_id.replace(/\./g, '_') + d.state || 'none'})
.attr('class', 'has-svg-tooltip')
.attr('stroke-width', function(d) {
if (d.count > 0)
return stroke_width;
else {
return 1;
}
})
.attr('stroke', function(d) {
if (d.count > 0)
return STATE_COLOR[d.state];
else {
return 'gainsboro';
}
})
.attr('fill-opacity', 0)
.attr('r', diameter/2)
.attr('title', function(d) {return d.state})
.attr('style', function(d) {
if (d.count > 0)
return"cursor:pointer;"
})
.on('click', function(d, i) {
if (d.count > 0)
window.location = "{{ url_for('DagRunModelView.list') }}?_flt_3_dag_id=" + d.dag_id + "&_flt_3_state=" + d.state;
})
.on('mouseover', function(d, i) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill-opacity', 0.3)
.style("stroke-width", stroke_width_hover);
}
})
.on('mouseout', function(d, i) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill-opacity', 0)
.style("stroke-width", stroke_width);
}
})
.style("opacity", 0)
.transition()
.duration(500)
.delay(function(d, i){return i*50;})
.style("opacity", 1);
d3.select(".loading-dag-stats").remove();
drawDagStatsForDag(dag_id, states);
}
$("#pause_header").tooltip();
$("#statuses_info").tooltip();
}

function drawTaskStatsForDag(dag_id, states) {
g = d3.select('svg#task-run-' + dag_id.replace(/\./g, '__dot__'))
.attr('height', diameter + (stroke_width_hover * 2))
.attr('width', '300px')
.selectAll("g")
.data(states)
.enter()
.append('g')
.attr('transform', function(d, i) {
x = (i * (diameter + circle_margin)) + (diameter/2 + circle_margin);
y = (diameter/2) + stroke_width_hover;
return 'translate(' + x + ',' + y + ')';
});

g.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'middle')
.attr('vertical-align', 'middle')
.attr('font-size', 8)
.attr('y', 3)
.text(function(d){ return d.count > 0 ? d.count : ''; });

g.append('circle')
.attr('id', function(d) {return 'task-' + dag_id.replace(/\./g, '_') + d.state || 'none'})
.attr('class', 'has-svg-tooltip')
.attr('stroke-width', function(d) {
if (d.count > 0)
return stroke_width;
else {
return 1;
}
})
.attr('stroke', function(d) {
if (d.count > 0)
return STATE_COLOR[d.state];
else {
return 'gainsboro';
}
})
.attr('fill-opacity', 0)
.attr('r', diameter/2)
.attr('title', function(d) {return d.state || 'none'})
.attr('style', function(d) {
if (d.count > 0)
return"cursor:pointer;"
})
.on('click', function(d, i) {
if (d.count > 0)
window.location = "{{ url_for('TaskInstanceModelView.list') }}?_flt_3_dag_id=" + dag_id + "&_flt_3_state=" + d.state;
})
.on('mouseover', function(d, i) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill-opacity', 0.3)
.style("stroke-width", stroke_width_hover);
}
})
.on('mouseout', function(d, i) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill-opacity', 0)
.style("stroke-width", stroke_width);
}
})
.style("opacity", 0)
.transition()
.duration(500)
.delay(function(d, i){return i*50;})
.style("opacity", 1);
d3.select(".loading-task-stats").remove();
}

function taskStatsHandler(error, json) {
for(var dag_id in json) {
states = json[dag_id];
g = d3.select('svg#task-run-' + dag_id.replace(/\./g, '__dot__'))
.attr('height', diameter + (stroke_width_hover * 2))
.attr('width', '300px')
.selectAll("g")
.data(states)
.enter()
.append('g')
.attr('transform', function(d, i) {
x = (i * (diameter + circle_margin)) + (diameter/2 + circle_margin);
y = (diameter/2) + stroke_width_hover;
return 'translate(' + x + ',' + y + ')';
});

g.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'middle')
.attr('vertical-align', 'middle')
.attr('font-size', 8)
.attr('y', 3)
.text(function(d){ return d.count > 0 ? d.count : ''; });

g.append('circle')
.attr('id', function(d) {return 'task-' + dag_id.replace(/\./g, '_') + d.state || 'none'})
.attr('class', 'has-svg-tooltip')
.attr('stroke-width', function(d) {
if (d.count > 0)
return stroke_width;
else {
return 1;
}
})
.attr('stroke', function(d) {
if (d.count > 0)
return STATE_COLOR[d.state];
else {
return 'gainsboro';
}
})
.attr('fill-opacity', 0)
.attr('r', diameter/2)
.attr('title', function(d) {return d.state || 'none'})
.attr('style', function(d) {
if (d.count > 0)
return"cursor:pointer;"
})
.on('click', function(d, i) {
if (d.count > 0)
window.location = "{{ url_for('TaskInstanceModelView.list') }}?_flt_3_dag_id=" + d.dag_id + "&_flt_3_state=" + d.state;
})
.on('mouseover', function(d, i) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill-opacity', 0.3)
.style("stroke-width", stroke_width_hover);
}
})
.on('mouseout', function(d, i) {
if (d.count > 0) {
d3.select(this).transition().duration(400)
.attr('fill-opacity', 0)
.style("stroke-width", stroke_width);
}
})
.style("opacity", 0)
.transition()
.duration(500)
.delay(function(d, i){return i*50;})
.style("opacity", 1);
d3.select(".loading-task-stats").remove();
drawTaskStatsForDag(dag_id, states);
}
$("#pause_header").tooltip();
$("#statuses_info").tooltip();
Expand Down

0 comments on commit dd57ec9

Please sign in to comment.