openstack/vitrage-dashboard
Code Issues Proposed changes

Merge "Add unselect node in Entity Graph"

Browse Source
This commit is contained in:
Zuul 2020-01-05 07:14:04 +00:00 committed by Gerrit Code Review
commit 2af9d8d923
2 changed files with 58 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
vitrage_dashboard/dashboard/static/dashboard/project/entities/entities.controller.js
View File

@ -49,6 +49,12 @@
}
});
$scope.$on('unselectNode', function(event) {
_this.selectedItem = undefined;
_this.model.selected = {};
$scope.$digest();
});
$scope.$on('graphItemClicked', function (event, data) {
data.timezone = timezone;
data.dateFormat = dateFormat;

67
vitrage_dashboard/dashboard/static/dashboard/project/entities/graph/entities-graph.directive.js
View File

@ -34,7 +34,9 @@ function hzEntitiesGraph() {
node,
link,
linksMap,
content;
content,
mouseDownX,
mouseDownY;
(function() {
var p = $('.panel.panel-primary');
@ -65,8 +67,6 @@ function hzEntitiesGraph() {
.filter(function(d, i){ return this.classList.contains("node"); })
.selectAll("circle");
//console.log('all nodes: ', allNodes.length);
allNodes
.transition()
.duration(200)
@ -133,6 +133,20 @@ function hzEntitiesGraph() {
svg.call(zoom);
svg.on('mousedown', function() {
mouseDownX = d3.event.clientX;
mouseDownY = d3.event.clientY;
});
svg.on('mouseup', function() {
var x = d3.event.clientX,
y = d3.event.clientY;
if (x === mouseDownX && y === mouseDownY) {
// means click rather than drag
svgClick();
}
});
var svg_g = svg.append('g')
.attr('width', '100%')
.attr('height', '100%')
@ -534,6 +548,40 @@ function hzEntitiesGraph() {
force.start();
}
function setAllNodesHighlight() {
svg_g.selectAll('.node')
.classed('selected', function(d) {
return d.high;
})
.select('circle')
.style('stroke-width', function(d) {
return d.high ? (Math.max(d.highDepth + 1, 1) * 2) : null;
})
svg_g.selectAll('.link').classed('selected', function(d) {
return d.source.high && d.target.high;
});
}
function svgClick() {
scope.selected = undefined;
svg_g.selectAll('.node')
.classed('selected', false);
_.each(scope.data.nodes, function(node) {
node.high = false;
node.highDepth = 0;
});
_.each(scope.data.links, function(link) {
link.high = false;
})
setAllNodesHighlight();
scope.$emit('unselectNode');
}
function nodeClick(d) {
scope.selected = d;
//scope.itemSelected(scope.selected);
@ -568,18 +616,7 @@ function hzEntitiesGraph() {
link.high = false;
})
svg_g.selectAll('.node')
.classed('selected', function(d) {
return d.high;
})
.select('circle')
.style('stroke-width', function(d) {
return d.high ? (Math.max(d.highDepth + 1, 1) * 2) : null;
})
svg_g.selectAll('.link').classed('selected', function(d) {
return d.source.high && d.target.high;
});
setAllNodesHighlight();
}
function selectNone(d) {