Displaying slices and instances
diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index b241361..4bb0b99 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -4,6 +4,14 @@
display: block;
}
+service-canvas select.subscriber-select{
+ z-index: 1000;
+ position: absolute;
+ width: 200px;
+ top: 10px;
+ left: 10px;
+}
+
service-canvas svg {
position: absolute;
top: 0;
@@ -48,6 +56,11 @@
stroke-width: 2px;
}
+.link.slice,
+.link.instance {
+ stroke: rgba(157, 4, 183, 0.29);
+}
+
.service-details{
width: 200px;
position: absolute;
diff --git a/gui/ngXosViews/serviceTopology/src/js/d3.js b/gui/ngXosViews/serviceTopology/src/js/d3.js
index 9452e5f..00684ee 100644
--- a/gui/ngXosViews/serviceTopology/src/js/d3.js
+++ b/gui/ngXosViews/serviceTopology/src/js/d3.js
@@ -31,10 +31,12 @@
// Normalize for fixed-depth.
nodes.forEach(function(d) {
// position the child node horizontally
- d.y = d.depth * (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
- console.log(d.id);
- if(d.type == 'slice'){
- console.info('slice found!', d);
+ const step = (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
+ 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);
}
});
@@ -49,6 +51,7 @@
transform: d => `translate(${source.y0},${source.x0})` // this is the starting position
});
+ // TODO append different shapes base on type
nodeEnter.append('circle')
.attr('r', 1e-6)
.style('fill', d => d._children ? 'lightsteelblue' : '#fff')
@@ -98,7 +101,7 @@
// Enter any new links at the parent's previous position.
link.enter().insert('path', 'g')
- .attr('class', 'link')
+ .attr('class', d => `link ${d.target.type}`)
.attr('d', function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
@@ -127,9 +130,8 @@
const serviceClick = function(d) {
- // empty panel
- //_this.slices = [];
- //_this.instances = [];
+ // toggling selected status
+ d.selected = !d.selected;
// reset all the nodes to default radius
var nodes = d3.selectAll('circle')
@@ -154,61 +156,18 @@
return;
}
- //_this.selectedService = {
- // id: d.id,
- // name: d.name
- //};
-
ServiceRelation.getServiceInterfaces(d.service.id)
.then(interfaceTree => {
const isDetailed = lodash.find(d.children, {type: 'slice'});
if(isDetailed){
- d.selected = false;
lodash.remove(d.children, {type: 'slice'});
}
else {
- d.selected = true;
-
d.children = d.children.concat(interfaceTree);
}
updateTree(_svg, _layout, _source);
- // draw a rect with slice names
- //const parentNode = d3.select(this.parentNode);
- //parentNode
- // .append('rect')
- // .style('opacity', 0)
- // .attr({
- // width: 150,
- // height: 50,
- // y: 35,
- // x: -75,
- // class: 'slice-detail'
- // })
- // .transition()
- // .duration(serviceTopologyConfig.duration)
- // .style('opacity', 1);
- // TODO attach a click listener to draw instances and networks
-
- //parentNode
- // .append('text')
- // .style('opacity', 0)
- // .attr({
- // y: 65,
- // x: -60,
- // class: 'slice-name'
- // })
- // .text(() => {
- // if(slices[0]){
- // return slices[0].humanReadableName;
- // }
- //
- // return '';
- // })
- // .transition()
- // .duration(serviceTopologyConfig.duration)
- // .style('opacity', 1);
});
};
diff --git a/gui/ngXosViews/serviceTopology/src/js/services.js b/gui/ngXosViews/serviceTopology/src/js/services.js
index 55eac9c..88a1b17 100644
--- a/gui/ngXosViews/serviceTopology/src/js/services.js
+++ b/gui/ngXosViews/serviceTopology/src/js/services.js
@@ -141,6 +141,10 @@
return promises;
}, []);
+ // TODO add networks
+ // decide how, they should be manually drawn
+ // as they connect more instances without parent dependencies
+
return $q.all(promisesArr);
})
.then((instances) => {
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index b53d29f..600e301 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -11,6 +11,8 @@
templateUrl: 'templates/topology_canvas.tpl.html',
controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, TreeLayout){
+ // TODO draw legend
+
this.instances = [];
this.slices = [];
diff --git a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
index 35857a3..4c992b1 100644
--- a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
@@ -1,4 +1,4 @@
-<select class="form-control" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber" ng-change="vm.getServiceChain(vm.selectedSubscriber)">
+<select class="form-control subscriber-select" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber" ng-change="vm.getServiceChain(vm.selectedSubscriber)">
<option value="">Select a subscriber...</option>
</select>
<!--<div class="service-details">-->