Started refactoring
diff --git a/gui/ngXosViews/serviceTopology/env/srikanth.js b/gui/ngXosViews/serviceTopology/env/srikanth.js
index 4ef1095..1cef3bd 100644
--- a/gui/ngXosViews/serviceTopology/env/srikanth.js
+++ b/gui/ngXosViews/serviceTopology/env/srikanth.js
@@ -8,6 +8,6 @@
module.exports = {
host: 'http://130.127.133.41:9999',
- xoscsrftoken: 't2CRWsHu6ZgrhtLruizJlaJBLf84ZA2z',
- xossessionid: 'kaohrwaypzq60n769e45bdmdyjxjpxrn'
+ xoscsrftoken: 'RfURkVJbCMk6xQPPlNrtPwfD3PXADExp',
+ xossessionid: 'dkar580x0b0z14vz9j198s1ns0m6g3cb'
};
diff --git a/gui/ngXosViews/serviceTopology/spec/sample.test.js b/gui/ngXosViews/serviceTopology/spec/sample.test.js
index 8b490e7..b30543a 100644
--- a/gui/ngXosViews/serviceTopology/spec/sample.test.js
+++ b/gui/ngXosViews/serviceTopology/spec/sample.test.js
@@ -117,8 +117,31 @@
expect(tree.children[0].children[0].name).toBe('service-2');
expect(tree.children[0].children[0].children[0].name).toBe('service-3');
+ expect(tree.children[0].children[0].children[0].children[0].name).toBe('Internet');
expect(tree.children[0].children[1].name).toBe('service-4');
+ expect(tree.children[0].children[1].children[0].name).toBe('Internet');
+ });
+ });
+
+ describe('given an object', () => {
+
+ const sample = {
+ name: '1',
+ children: [
+ {
+ name: '2',
+ children: [
+ {
+ name: '3'
+ }
+ ]
+ }
+ ]
+ };
+
+ it('should return the depth', () => {
+ expect(Service.depthOf(sample)).toBe(3);
});
});
diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index 220d2ab..2afcf08 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -14,6 +14,11 @@
stroke-width: 3px;
}
+.node.subscriber circle,
+.node.internet circle {
+ stroke: #ffdb07;
+}
+
.node rect.slice-detail{
fill: #fff;
stroke: steelblue;
diff --git a/gui/ngXosViews/serviceTopology/src/js/d3.js b/gui/ngXosViews/serviceTopology/src/js/d3.js
index d87ecda..52127a4 100644
--- a/gui/ngXosViews/serviceTopology/src/js/d3.js
+++ b/gui/ngXosViews/serviceTopology/src/js/d3.js
@@ -5,5 +5,10 @@
.factory('d3', function($window){
return $window.d3;
})
+ .service('TreeLayout', function(){
+ this.updateTree = (source) => {
+
+ }
+ });
}());
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/js/services.js b/gui/ngXosViews/serviceTopology/src/js/services.js
index d6d2fa8..e7c6e3f 100644
--- a/gui/ngXosViews/serviceTopology/src/js/services.js
+++ b/gui/ngXosViews/serviceTopology/src/js/services.js
@@ -19,6 +19,20 @@
})
.service('ServiceRelation', function($q, _, lodash, Services, Tenant){
+ // count the mas depth of an object
+ const depthOf = (obj) => {
+ var depth = 0;
+ if (obj.children) {
+ obj.children.forEach(function (d) {
+ var tmpDepth = depthOf(d);
+ if (tmpDepth > depth) {
+ depth = tmpDepth
+ }
+ })
+ }
+ return 1 + depth
+ };
+
// find all the relation defined for a given root
const findLevelRelation = (tenants, rootId) => {
return lodash.filter(tenants, service => {
@@ -41,6 +55,7 @@
const tree = {
name: rootService.humanReadableName,
parent: parentName,
+ type: 'service',
service: rootService,
children: []
};
@@ -62,6 +77,15 @@
tree.children.push(buildLevel(tenants, unlinkedServices, service, rootService.humanReadableName));
});
+ // if it is the last element append internet
+ if(tree.children.length === 0){
+ tree.children.push({
+ name: 'Internet',
+ type: 'internet',
+ children: []
+ });
+ }
+
return tree;
};
@@ -78,6 +102,7 @@
return {
name: subscriber.name,
parent: null,
+ type: 'subscriber',
children: [serviceTree]
};
@@ -101,13 +126,15 @@
});
return deferred.promise;
- }
+ };
+ // export APIs
this.get = get;
this.buildLevel = buildLevel;
this.buildServiceTree = buildServiceTree;
this.findLevelRelation = findLevelRelation;
this.findLevelServices = findLevelServices;
+ this.depthOf = depthOf;
});
}());
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index dab5c3f..008eaa3 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -14,20 +14,6 @@
this.instances = [];
this.slices = [];
- // count the mas depth of an object
- const depthOf = (obj) => {
- var depth = 0;
- if (obj.children) {
- obj.children.forEach(function (d) {
- var tmpDepth = depthOf(d);
- if (tmpDepth > depth) {
- depth = tmpDepth
- }
- })
- }
- return 1 + depth
- };
-
const width = $window.innerWidth - serviceTopologyConfig.widthMargin;
const height = $window.innerHeight - serviceTopologyConfig.heightMargin;
@@ -42,7 +28,7 @@
.style('width', `${$window.innerWidth}px`)
.style('height', `${$window.innerHeight}px`)
.append('g')
- .attr("transform", "translate(" + serviceTopologyConfig.widthMargin+ "," + serviceTopologyConfig.heightMargin + ")");;
+ .attr('transform', 'translate(' + serviceTopologyConfig.widthMargin+ '','' + serviceTopologyConfig.heightMargin + '')'');;
//const resizeCanvas = () => {
// var targetSize = svg.node().getBoundingClientRect();
@@ -92,7 +78,9 @@
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append('g')
- .attr('class', 'node')
+ .attr({
+ class: d => `node ${d.type}`
+ })
.attr('transform', function(d) {
// this is the starting position
return 'translate(' + source.y0 + ',' + source.x0 + ')';
@@ -109,7 +97,6 @@
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'; })
@@ -198,7 +185,7 @@
selectedNode
.transition()
.duration(duration)
- .attr('r', 30);
+ .attr('r', 15);
if(!d.service){
return;
@@ -214,6 +201,7 @@
_this.slices = slices;
if(slices.length > 0){
+ // TODO slice can be more than 1 create a for loop
const parentNode = d3.select(this.parentNode);
parentNode
@@ -229,6 +217,7 @@
.transition()
.duration(duration)
.style('opacity', 1);
+ // TODO attach a click listener to draw instances and networks
parentNode
.append('text')
@@ -248,13 +237,17 @@
.transition()
.duration(duration)
.style('opacity', 1);
- }
+ }
})
};
Subscribers.query().$promise
.then((subscribers) => {
this.subscribers = subscribers;
+ if(subscribers.length === 1){
+ this.selectedSubscriber = subscribers[0];
+ this.getServiceChain(this.selectedSubscriber);
+ }
});
this.getInstances = (slice) => {
diff --git a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
index e05ee17..5336ddc 100644
--- a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
@@ -1,4 +1,6 @@
-<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>
+<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)">
+ <option value="">Select a subscriber...</option>
+</select>
<div class="service-details">
<div class="service-slices animate" ng-hide="vm.slices.length == 0">
<div class="panel panel-info">