External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-17 20:51:21 -03:30
Code Issues Packages Projects Releases Wiki Activity

Added tooltips to workflow nodes with long resource names

Browse Source
This commit is contained in:
Michael Abashian 2017-03-09 13:20:04 -05:00
parent 3a95c34a04
commit cc65ad3828
2 changed files with 46 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
View File

@ -114,3 +114,23 @@
padding: 1px 3px;
border-radius: 4px;
}
.WorkflowChart-nameText {
font-size: 10px;
}
.WorkflowChart-tooltipContents {
padding: 10px;
background-color: #707070;
color: #FFFFFF;
border-radius: 4px;
word-wrap: break-word;
max-width: 325px;
}
.WorkflowChart-tooltipArrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #707070;
margin: auto;
}

33
awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
View File

@ -23,12 +23,13 @@ export default [ '$state','moment', '$timeout', '$window',
let margin = {top: 20, right: 20, bottom: 20, left: 20},
i = 0,
nodeW = 120,
nodeW = 180,
nodeH = 60,
rootW = 60,
rootH = 40,
startNodeOffsetY = scope.mode === 'details' ? 17 : 10,
verticalSpaceBetweenNodes = 20,
maxNodeTextLength = 27,
windowHeight,
windowWidth,
tree,
@ -125,11 +126,8 @@ export default [ '$state','moment', '$timeout', '$window',
// TODO: this function is hacky and we need to come up with a better solution
// see: http://stackoverflow.com/questions/15975440/add-ellipses-to-overflowing-text-in-svg#answer-27723752
function wrap(text) {
let maxLength = scope.mode === 'details' ? 14 : 15;
if(text && text.length > maxLength) {
return text.substring(0,maxLength) + '...';
if(text && text.length > maxNodeTextLength) {
return text.substring(0,maxNodeTextLength) + '...';
}
else {
return text;
@ -216,7 +214,7 @@ export default [ '$state','moment', '$timeout', '$window',
links = tree.links(nodes);
let node = svgGroup.selectAll("g.node")
.data(nodes, function(d) {
d.y = d.depth * 180;
d.y = d.depth * 240;
return d.id || (d.id = ++i);
});
@ -347,11 +345,32 @@ export default [ '$state','moment', '$timeout', '$window',
.call(edit_node)
.on("mouseover", function(d) {
if(!d.isStartNode) {
let resourceName = (d.unifiedJobTemplate && d.unifiedJobTemplate.name) ? d.unifiedJobTemplate.name : "";
if(resourceName && resourceName.length > maxNodeTextLength) {
// Render the tooltip quickly in the dom and then remove. This lets us know how big the tooltip is so that we can place
// it properly on the workflow
let tooltipDimensionChecker = $("<div style='visibility:hidden;font-size:12px;position:absolute;' class='WorkflowChart-tooltipContents'><span>" + resourceName + "</span></div>");
$('body').append(tooltipDimensionChecker);
let tipWidth = $(tooltipDimensionChecker).outerWidth();
let tipHeight = $(tooltipDimensionChecker).outerHeight();
$(tooltipDimensionChecker).remove();
thisNode.append("foreignObject")
.attr("x", (nodeW / 2) - (tipWidth / 2))
.attr("y", (tipHeight + 15) * -1)
.attr("width", tipWidth)
.attr("height", tipHeight+20)
.attr("class", "WorkflowChart-tooltip")
.html(function(){
return "<div class='WorkflowChart-tooltipContents'><span>" + resourceName + "</span></div><div class='WorkflowChart-tooltipArrow'></div>";
});
}
d3.select("#node-" + d.id)
.classed("hovering", true);
}
})
.on("mouseout", function(d){
$('.WorkflowChart-tooltip').remove();
if(!d.isStartNode) {
d3.select("#node-" + d.id)
.classed("hovering", false);