Small code refactor
diff --git a/gui/ngXosViews/serviceTopology/src/js/config.js b/gui/ngXosViews/serviceTopology/src/js/config.js
index 3ef8748..347feb9 100644
--- a/gui/ngXosViews/serviceTopology/src/js/config.js
+++ b/gui/ngXosViews/serviceTopology/src/js/config.js
@@ -5,7 +5,11 @@
.constant('serviceTopologyConfig', {
widthMargin: 100,
heightMargin: 30,
- duration: 750
+ duration: 750,
+ circle: {
+ radius: 10,
+ selectedRadius: 15
+ }
})
}());
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/js/d3.js b/gui/ngXosViews/serviceTopology/src/js/d3.js
index 00684ee..f12ce5b 100644
--- a/gui/ngXosViews/serviceTopology/src/js/d3.js
+++ b/gui/ngXosViews/serviceTopology/src/js/d3.js
@@ -35,8 +35,6 @@
d.y = d.depth * step;
if(d.type === 'slice' || d.type === 'instance'){
d.y = d.depth * step - (step / 2);
- //d.x = d.parent.x + (step / 2);
- //console.log(d.parent);
}
});
@@ -58,27 +56,32 @@
.on('click', serviceClick);
nodeEnter.append('text')
- .attr('x', function(d) { return d.children || d._children ? -13 : 13; })
- .attr('transform', function(d) {
- if((d.children || d._children) && d.parent || d._parent){
- return 'rotate(30)';
- }
+ .attr({
+ x: d => d.children ? -serviceTopologyConfig.circle.selectedRadius -3 : serviceTopologyConfig.circle.selectedRadius + 3,
+ dy: '.35em',
+ transform: d => {
+ if (d.children && d.parent){
+ if(d.parent.x < d.x){
+ return 'rotate(-30)';
+ }
+ return 'rotate(30)';
+ }
+ },
+ 'text-anchor': d => d.children ? 'end' : 'start'
})
- .attr('dy', '.35em')
- .attr('text-anchor', function(d) { return d.children || d._children ? 'end' : 'start'; })
- .text(function(d) { return d.name; })
+ .text(d => d.name)
.style('fill-opacity', 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(serviceTopologyConfig.duration)
- .attr('transform', function(d) {
- return 'translate(' + d.y + ',' + d.x + ')';
+ .attr({
+ 'transform': d => `translate(${d.y},${d.x})`
});
nodeUpdate.select('circle')
- .attr('r', d => d.selected ? 15 : 10)
- .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });
+ .attr('r', d => d.selected ? serviceTopologyConfig.circle.selectedRadius : serviceTopologyConfig.circle.radius)
+ .style('fill', d => d.selected ? 'lightsteelblue' : '#fff');
nodeUpdate.select('text')
.style('fill-opacity', 1);
@@ -86,7 +89,9 @@
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(serviceTopologyConfig.duration)
- .attr('transform', function(d) { return 'translate(' + source.y + ',' + source.x + ')'; })
+ .attr({
+ 'transform': d => `translate(${source.y},${source.x})`
+ })
.remove();
nodeExit.select('circle')
@@ -130,31 +135,19 @@
const serviceClick = function(d) {
+ if(!d.service){
+ return;
+ }
+
// toggling selected status
d.selected = !d.selected;
- // reset all the nodes to default radius
- var nodes = d3.selectAll('circle')
- .transition()
- .duration(serviceTopologyConfig.duration)
- .attr('r', 10);
-
- // remove slices details
- d3.selectAll('rect.slice-detail')
- .remove();
- d3.selectAll('text.slice-name')
- .remove();
-
var selectedNode = d3.select(this);
selectedNode
.transition()
.duration(serviceTopologyConfig.duration)
- .attr('r', 15);
-
- if(!d.service){
- return;
- }
+ .attr('r', serviceTopologyConfig.circle.selectedRadius);
ServiceRelation.getServiceInterfaces(d.service.id)
.then(interfaceTree => {
diff --git a/gui/ngXosViews/serviceTopology/src/js/services.js b/gui/ngXosViews/serviceTopology/src/js/services.js
index 88a1b17..6d8b4df 100644
--- a/gui/ngXosViews/serviceTopology/src/js/services.js
+++ b/gui/ngXosViews/serviceTopology/src/js/services.js
@@ -89,7 +89,7 @@
return tree;
};
- const buildServiceTree = (services, tenants, subscriber = {id:1, name: 'fakeSubs'}) => {
+ const buildServiceTree = (services, tenants, subscriber = {id: 1, name: 'fakeSubs'}) => {
// find the root service
// it is the one attached to subsriber_root
@@ -106,7 +106,6 @@
children: [serviceTree]
};
- //return serviceTree;
};
const get = (subscriber) => {