Added Slice and Instances info in modal popup
diff --git a/gui/ngXosViews/serviceTopology/src/js/services.js b/gui/ngXosViews/serviceTopology/src/js/services.js
index 640182d..21ca9aa 100644
--- a/gui/ngXosViews/serviceTopology/src/js/services.js
+++ b/gui/ngXosViews/serviceTopology/src/js/services.js
@@ -8,6 +8,12 @@
.service('Tenant', function($resource){
return $resource('/xos/tenants');
})
+ .service('Slice', function($resource){
+ return $resource('/xos/slices', {id: '@id'});
+ })
+ .service('Instances', function($resource){
+ return $resource('/xos/instances', {id: '@id'});
+ })
.service('ServiceRelation', function($q, _, lodash, Services, Tenant){
// find all the relation defined for a given root
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index 8206194..d0e86b3 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -9,7 +9,7 @@
bindToController: true,
controllerAs: 'vm',
templateUrl: 'templates/topology_canvas.tpl.html',
- controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation){
+ controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances){
// count the mas depth of an object
const depthOf = (obj) => {
@@ -25,38 +25,6 @@
return 1 + depth
};
- ServiceRelation.get()
- .then(res => {
- //console.log(res);
- });
-
- const treeData = [
- {
- 'name': 'Top Level',
- 'parent': 'null',
- 'children': [
- {
- 'name': 'Level 2: A',
- 'parent': 'Top Level',
- 'children': [
- {
- 'name': 'Son of A',
- 'parent': 'Level 2: A'
- },
- {
- 'name': 'Daughter of A',
- 'parent': 'Level 2: A'
- }
- ]
- },
- {
- 'name': 'Level 2: B',
- 'parent': 'Top Level'
- }
- ]
- }
- ];
-
const width = $window.innerWidth - serviceTopologyConfig.widthMargin;
const height = $window.innerHeight - serviceTopologyConfig.heightMargin;
@@ -128,8 +96,8 @@
.attr('transform', function(d) {
// this is the starting position
return 'translate(' + source.y0 + ',' + source.x0 + ')';
- });
- //.on('click', click);
+ })
+ .on('click', click);
nodeEnter.append('circle')
.attr('r', 1e-6)
@@ -137,6 +105,12 @@
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)';
+ }
+ return;
+ })
.attr('dy', '.35em')
.attr('text-anchor', function(d) { return d.children || d._children ? 'end' : 'start'; })
.text(function(d) { return d.name; })
@@ -201,12 +175,32 @@
});
}
+ const click = (d) => {
+ console.log(d);
+ this.selectedService = {
+ id: d.id,
+ name: d.name
+ };
+ Slice.query({service: d.id}).$promise
+ .then(slices => {
+ this.instances = null;
+ this.slices = slices;
+ })
+ };
+
ServiceRelation.get()
.then((tree) => {
console.log(tree);
draw(tree);
});
- //draw(treeData[0]);
+
+ this.getInstances = (slice) => {
+ Instances.query({slice: slice.id}).$promise
+ .then((instances) => {
+ this.selectedSlice = slice;
+ this.instances = instances;
+ })
+ };
}
}
});