Refactored topology to fit diagnostic
diff --git a/views/ngXosViews/serviceTopology/.bowerrc b/views/ngXosViews/diagnostic/.bowerrc
similarity index 100%
rename from views/ngXosViews/serviceTopology/.bowerrc
rename to views/ngXosViews/diagnostic/.bowerrc
diff --git a/views/ngXosViews/serviceTopology/.eslintrc b/views/ngXosViews/diagnostic/.eslintrc
similarity index 100%
rename from views/ngXosViews/serviceTopology/.eslintrc
rename to views/ngXosViews/diagnostic/.eslintrc
diff --git a/views/ngXosViews/serviceTopology/.gitignore b/views/ngXosViews/diagnostic/.gitignore
similarity index 100%
rename from views/ngXosViews/serviceTopology/.gitignore
rename to views/ngXosViews/diagnostic/.gitignore
diff --git a/views/ngXosViews/serviceTopology/bower.json b/views/ngXosViews/diagnostic/bower.json
similarity index 100%
rename from views/ngXosViews/serviceTopology/bower.json
rename to views/ngXosViews/diagnostic/bower.json
diff --git a/views/ngXosViews/serviceTopology/env/apt.js b/views/ngXosViews/diagnostic/env/apt.js
similarity index 100%
rename from views/ngXosViews/serviceTopology/env/apt.js
rename to views/ngXosViews/diagnostic/env/apt.js
diff --git a/views/ngXosViews/serviceTopology/env/default.js b/views/ngXosViews/diagnostic/env/default.js
similarity index 74%
rename from views/ngXosViews/serviceTopology/env/default.js
rename to views/ngXosViews/diagnostic/env/default.js
index 9d8f108..94f3385 100644
--- a/views/ngXosViews/serviceTopology/env/default.js
+++ b/views/ngXosViews/diagnostic/env/default.js
@@ -7,7 +7,7 @@
// (works only for local environment as both application are served on the same domain)
module.exports = {
- host: 'http://clnode078.clemson.cloudlab.us:9999/',
- xoscsrftoken: 'kJlAS4O3AJOpLq2fMkhor2QKLaWvxSAd',
- xossessionid: 'f7z75zly6omm9ftlswsujfe87hfaomn2'
+ host: 'http://clnode067.clemson.cloudlab.us:9999/',
+ xoscsrftoken: 'IZ52y2rmIxizNDeRfaHdmcRNQsSd9mDV',
+ xossessionid: 'tmsqxdnf8og252ydu94sbfr1u63lht50'
};
diff --git a/views/ngXosViews/serviceTopology/env/srikanth.js b/views/ngXosViews/diagnostic/env/srikanth.js
similarity index 100%
rename from views/ngXosViews/serviceTopology/env/srikanth.js
rename to views/ngXosViews/diagnostic/env/srikanth.js
diff --git a/views/ngXosViews/serviceTopology/gulp/build.js b/views/ngXosViews/diagnostic/gulp/build.js
similarity index 100%
rename from views/ngXosViews/serviceTopology/gulp/build.js
rename to views/ngXosViews/diagnostic/gulp/build.js
diff --git a/views/ngXosViews/serviceTopology/gulp/server.js b/views/ngXosViews/diagnostic/gulp/server.js
similarity index 100%
rename from views/ngXosViews/serviceTopology/gulp/server.js
rename to views/ngXosViews/diagnostic/gulp/server.js
diff --git a/views/ngXosViews/serviceTopology/gulpfile.js b/views/ngXosViews/diagnostic/gulpfile.js
similarity index 100%
rename from views/ngXosViews/serviceTopology/gulpfile.js
rename to views/ngXosViews/diagnostic/gulpfile.js
diff --git a/views/ngXosViews/serviceTopology/karma.conf.js b/views/ngXosViews/diagnostic/karma.conf.js
similarity index 100%
rename from views/ngXosViews/serviceTopology/karma.conf.js
rename to views/ngXosViews/diagnostic/karma.conf.js
diff --git a/views/ngXosViews/serviceTopology/package.json b/views/ngXosViews/diagnostic/package.json
similarity index 100%
rename from views/ngXosViews/serviceTopology/package.json
rename to views/ngXosViews/diagnostic/package.json
diff --git a/views/ngXosViews/serviceTopology/spec/sample.test.js b/views/ngXosViews/diagnostic/spec/sample.test.js
similarity index 75%
rename from views/ngXosViews/serviceTopology/spec/sample.test.js
rename to views/ngXosViews/diagnostic/spec/sample.test.js
index 56f7c8b..e3d2052 100644
--- a/views/ngXosViews/serviceTopology/spec/sample.test.js
+++ b/views/ngXosViews/diagnostic/spec/sample.test.js
@@ -154,55 +154,4 @@
});
});
- describe('given slices and instances', () => {
- const slices = [
- {
- id: 12,
- name: 'First'
- },
- {
- id: 13,
- name: 'Second'
- }
- ];
-
- const instances = [
- [
- {
- humanReadableName: 'first-slice-instance-1',
- id: 1
- },
- {
- humanReadableName: 'first-slice-instance-2',
- id: 2
- }
- ],
- [
- {
- humanReadableName: 'second-slice-instance',
- id: 3
- }
- ]
- ];
-
- const service = {
- service_specific_attribute: {
- instance_id: 1
- }
- };
-
- it('should create a tree grouping instances', () => {
- const res = Service.buildServiceInterfacesTree(service, slices, instances);
-
- expect(res[0].name).toBe('First');
- expect(res[0].children[0].name).toBe('first-slice-instance-1');
- expect(res[0].children[0].active).toBeTruthy();
- expect(res[0].children[1].name).toBe('first-slice-instance-2');
-
- expect(res[1].name).toBe('Second');
- expect(res[1].children[0].name).toBe('second-slice-instance');
- });
- });
-
-
});
\ No newline at end of file
diff --git a/views/ngXosViews/serviceTopology/src/css/dev.css b/views/ngXosViews/diagnostic/src/css/dev.css
similarity index 100%
rename from views/ngXosViews/serviceTopology/src/css/dev.css
rename to views/ngXosViews/diagnostic/src/css/dev.css
diff --git a/views/ngXosViews/serviceTopology/src/css/serviceTopology.css b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
similarity index 90%
rename from views/ngXosViews/serviceTopology/src/css/serviceTopology.css
rename to views/ngXosViews/diagnostic/src/css/serviceTopology.css
index 283967c..54beba3 100644
--- a/views/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
@@ -1,22 +1,15 @@
-service-canvas {
+/* CONTAINER */
+diagnostic .half-height {
+ position: relative;
+ height: 50%;
+}
+
+service-topology {
height: 100%;
width: 100%;
display: block;
}
-service-canvas .subscriber-select{
- z-index: 1000;
- position: absolute;
- width: 200px;
- top: 10px;
- left: 10px;
-}
-
-service-canvas svg {
- position: absolute;
- top: 0;
-}
-
/* LEGEND */
.legend {
@@ -38,7 +31,7 @@
.node rect{
fill: #fff;
stroke: steelblue;
- stroke-width: 3px;
+ stroke-width: 1px;
}
.node.subscriber circle,
diff --git a/views/ngXosViews/serviceTopology/src/index.html b/views/ngXosViews/diagnostic/src/index.html
similarity index 94%
rename from views/ngXosViews/serviceTopology/src/index.html
rename to views/ngXosViews/diagnostic/src/index.html
index d2f95db..f7282b9 100644
--- a/views/ngXosViews/serviceTopology/src/index.html
+++ b/views/ngXosViews/diagnostic/src/index.html
@@ -33,8 +33,9 @@
<script src="/api/ng-xos.js"></script>
<script src="/api/ng-hpcapi.js"></script>
<script src="/.tmp/main.js"></script>
-<script src="/.tmp/topologyCanvas.js"></script>
<script src="/.tmp/services.js"></script>
+<script src="/.tmp/serviceTopology.js"></script>
+<script src="/.tmp/diagnostic.js"></script>
<script src="/.tmp/d3.js"></script>
<script src="/.tmp/config.js"></script>
<!-- endinject -->
diff --git a/views/ngXosViews/serviceTopology/src/js/config.js b/views/ngXosViews/diagnostic/src/js/config.js
similarity index 68%
rename from views/ngXosViews/serviceTopology/src/js/config.js
rename to views/ngXosViews/diagnostic/src/js/config.js
index 347feb9..91ea0c2 100644
--- a/views/ngXosViews/serviceTopology/src/js/config.js
+++ b/views/ngXosViews/diagnostic/src/js/config.js
@@ -3,12 +3,18 @@
angular.module('xos.serviceTopology')
.constant('serviceTopologyConfig', {
- widthMargin: 100,
+ widthMargin: 20,
heightMargin: 30,
duration: 750,
circle: {
radius: 10,
selectedRadius: 15
+ },
+ square: {
+ width: 20,
+ height: 20,
+ x: -10,
+ y: -10
}
})
diff --git a/views/ngXosViews/serviceTopology/src/js/d3.js b/views/ngXosViews/diagnostic/src/js/d3.js
similarity index 73%
rename from views/ngXosViews/serviceTopology/src/js/d3.js
rename to views/ngXosViews/diagnostic/src/js/d3.js
index 4672325..027f08d 100644
--- a/views/ngXosViews/serviceTopology/src/js/d3.js
+++ b/views/ngXosViews/diagnostic/src/js/d3.js
@@ -5,7 +5,7 @@
.factory('d3', function($window){
return $window.d3;
})
- .service('TreeLayout', function($window, lodash, ServiceRelation, serviceTopologyConfig, Slice, Instances){
+ .service('TreeLayout', function($window, $log, lodash, ServiceRelation, serviceTopologyConfig){
const drawLegend = (svg) => {
const legendContainer = svg.append('g')
@@ -91,19 +91,6 @@
var i = 0;
- const getInitialNodePosition = (node, source, direction = 'enter') => {
- // this is the starting position
- // TODO if enter use y0 and x0 else x and y
- // TODO start from the node that has been clicked
- if(node.parent){
- if(direction === 'enter' && node.parent.y0 && node.parent.x0){
- return `translate(${node.parent.y0},${node.parent.x0})`;
- }
- return `translate(${node.parent.y},${node.parent.x})`;
- }
- return `translate(${source.y0},${source.x0})`;
- };
-
// given a canvas, a layout and a data source, draw a tree layout
const updateTree = (svg, layout, source) => {
@@ -126,9 +113,6 @@
// position the child node horizontally
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);
- }
});
// Update the nodes…
@@ -139,7 +123,7 @@
var nodeEnter = node.enter().append('g')
.attr({
class: d => `node ${d.type}`,
- transform: d => getInitialNodePosition(d, source)
+ transform: `translate(${source.y0}, ${source.x0})`
});
const subscriberNodes = nodeEnter.filter('.subscriber');
@@ -148,20 +132,11 @@
const instanceNodes = nodeEnter.filter('.instance');
const sliceNodes = nodeEnter.filter('.slice');
- subscriberNodes.append('path')
- .attr({
- d: 'M20.771,12.364c0,0,0.849-3.51,0-4.699c-0.85-1.189-1.189-1.981-3.058-2.548s-1.188-0.454-2.547-0.396c-1.359,0.057-2.492,0.792-2.492,1.188c0,0-0.849,0.057-1.188,0.397c-0.34,0.34-0.906,1.924-0.906,2.321s0.283,3.058,0.566,3.624l-0.337,0.113c-0.283,3.283,1.132,3.68,1.132,3.68c0.509,3.058,1.019,1.756,1.019,2.548s-0.51,0.51-0.51,0.51s-0.452,1.245-1.584,1.698c-1.132,0.452-7.416,2.886-7.927,3.396c-0.511,0.511-0.453,2.888-0.453,2.888h26.947c0,0,0.059-2.377-0.452-2.888c-0.512-0.511-6.796-2.944-7.928-3.396c-1.132-0.453-1.584-1.698-1.584-1.698s-0.51,0.282-0.51-0.51s0.51,0.51,1.02-2.548c0,0,1.414-0.397,1.132-3.68H20.771z',
- transform: 'translate(-20, -20)'
- });
+ subscriberNodes.append('rect')
+ .attr(serviceTopologyConfig.square);
- internetNodes.append('path')
- .attr({
- d: 'M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382',
- stroke: '#000',
- 'stroke-width': '20px',
- fill: 'none',
- transform: 'translate(-10, -10), scale(0.05)'
- });
+ internetNodes.append('rect')
+ .attr(serviceTopologyConfig.square);
serviceNodes.append('circle')
.attr('r', 1e-6)
@@ -219,9 +194,6 @@
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(serviceTopologyConfig.duration)
- .attr({
- 'transform': d => getInitialNodePosition(d, source, 'exit')
- })
.remove();
nodeExit.select('circle')
@@ -265,6 +237,8 @@
const serviceClick = function(d) {
+ $log.info('TODO emit an event to highlight VMs');
+
if(!d.service){
return;
}
@@ -278,20 +252,6 @@
.transition()
.duration(serviceTopologyConfig.duration)
.attr('r', serviceTopologyConfig.circle.selectedRadius);
-
- ServiceRelation.getServiceInterfaces(d.service)
- .then(interfaceTree => {
-
- const isDetailed = lodash.find(d.children, {type: 'slice'});
- if(isDetailed){
- lodash.remove(d.children, {type: 'slice'});
- }
- else {
- d.children = d.children.concat(interfaceTree);
- }
-
- updateTree(_svg, _layout, _source);
- });
};
this.updateTree = updateTree;
diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
new file mode 100644
index 0000000..7f433f6
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/js/diagnostic.js
@@ -0,0 +1,23 @@
+(function () {
+ 'use strict';
+
+ angular.module('xos.serviceTopology')
+ .directive('diagnostic', function(){
+ return {
+ restrict: 'E',
+ templateUrl: 'templates/diagnostic.tpl.html',
+ controllerAs: 'vm',
+ controller: function(Subscribers, ServiceRelation){
+ Subscribers.query().$promise
+ .then((subscribers) => {
+ this.subscribers = subscribers;
+ this.selectedSubscriber = subscribers[0];
+ return ServiceRelation.get(this.selectedSubscriber);
+ })
+ .then((serviceChain) => {
+ this.serviceChain = serviceChain;
+ });
+ }
+ }
+ });
+})();
\ No newline at end of file
diff --git a/views/ngXosViews/serviceTopology/src/js/main.js b/views/ngXosViews/diagnostic/src/js/main.js
similarity index 80%
rename from views/ngXosViews/serviceTopology/src/js/main.js
rename to views/ngXosViews/diagnostic/src/js/main.js
index 4e6239a..a6e79c5 100644
--- a/views/ngXosViews/serviceTopology/src/js/main.js
+++ b/views/ngXosViews/diagnostic/src/js/main.js
@@ -10,9 +10,9 @@
])
.config(($stateProvider) => {
$stateProvider
- .state('user-list', {
+ .state('home', {
url: '/',
- template: '<service-canvas></service-canvas>'
+ template: '<diagnostic></diagnostic>'
});
})
.config(function($httpProvider){
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
new file mode 100644
index 0000000..d30122c
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -0,0 +1,64 @@
+(function () {
+ 'use strict';
+
+ angular.module('xos.serviceTopology')
+ .directive('serviceTopology', function(){
+ return {
+ restrict: 'E',
+ scope: {
+ serviceChain: '='
+ },
+ bindToController: true,
+ controllerAs: 'vm',
+ template: '',
+ controller: function($element, $window, $scope, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, TreeLayout){
+
+ const el = $element[0];
+
+ this.instances = [];
+ this.slices = [];
+
+ const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
+ const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
+
+ const treeLayout = d3.layout.tree()
+ .size([height, width]);
+
+ const svg = d3.select($element[0])
+ .append('svg')
+ .style('width', `${el.clientWidth}px`)
+ .style('height', `${el.clientHeight}px`)
+
+ const treeContainer = svg.append('g')
+ .attr('transform', `translate(${serviceTopologyConfig.widthMargin * 4},${serviceTopologyConfig.heightMargin})`);
+
+ var root;
+
+ const draw = (tree) => {
+ root = tree;
+ root.x0 = height / 2;
+ root.y0 = width / 2;
+
+ TreeLayout.updateTree(treeContainer, treeLayout, root);
+ };
+
+ TreeLayout.drawLegend(svg);
+
+ this.getInstances = (slice) => {
+ Instances.query({slice: slice.id}).$promise
+ .then((instances) => {
+ this.selectedSlice = slice;
+ this.instances = instances;
+ })
+ };
+
+ $scope.$watch(() => this.serviceChain, (chain) => {
+ if(chain){
+ draw(chain);
+ }
+ });
+ }
+ }
+ });
+
+}());
\ No newline at end of file
diff --git a/views/ngXosViews/serviceTopology/src/js/services.js b/views/ngXosViews/diagnostic/src/js/services.js
similarity index 73%
rename from views/ngXosViews/serviceTopology/src/js/services.js
rename to views/ngXosViews/diagnostic/src/js/services.js
index 12dedaf..60a20d2 100644
--- a/views/ngXosViews/serviceTopology/src/js/services.js
+++ b/views/ngXosViews/diagnostic/src/js/services.js
@@ -145,64 +145,6 @@
return deferred.promise;
};
- const buildServiceInterfacesTree = (service, slices, instances) => {
-
- const isActive = (service, instance) => {
- if(service.service_specific_attribute){
- return service.service_specific_attribute.instance_id === instance.id;
- }
- return false;
- }
-
- var interfaceTree = [];
- lodash.forEach(slices, (slice, i) => {
- let current = {
- name: slice.name,
- slice: slice,
- type: 'slice',
- children: instances[i].map((instance) => {
-
- return {
- name: instance.humanReadableName,
- children: [],
- type: 'instance',
- instance: instance,
- active: isActive(service, instance)
- };
-
- })
- };
- interfaceTree.push(current);
- });
- return interfaceTree;
- };
-
- const getServiceInterfaces = (service) => {
- var deferred = $q.defer();
-
- var _slices;
-
- Slice.query({service: service.id}).$promise
- .then((slices) => {
- _slices = slices;
- const promisesArr = slices.reduce((promises, slice) => {
- promises.push(Instances.query({slice: slice.id}).$promise);
- 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) => {
- deferred.resolve(buildServiceInterfacesTree(service, _slices, instances));
- });
-
- return deferred.promise;
- };
-
// export APIs
return {
get: get,
@@ -211,8 +153,6 @@
findLevelRelation: findLevelRelation,
findLevelServices: findLevelServices,
depthOf: depthOf,
- getServiceInterfaces: getServiceInterfaces,
- buildServiceInterfacesTree: buildServiceInterfacesTree,
findSpecificInformation: findSpecificInformation
}
});
diff --git a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
new file mode 100644
index 0000000..a8b2d3a
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
@@ -0,0 +1,3 @@
+<div class="half-height">
+ <service-topology service-chain="vm.serviceChain"></service-topology>
+</div>
diff --git a/views/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/views/ngXosViews/serviceTopology/src/js/topologyCanvas.js
deleted file mode 100644
index 8fce43d..0000000
--- a/views/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ /dev/null
@@ -1,91 +0,0 @@
-(function () {
- 'use strict';
-
- angular.module('xos.serviceTopology')
- .directive('serviceCanvas', function(){
- return {
- restrict: 'E',
- scope: {},
- bindToController: true,
- controllerAs: 'vm',
- templateUrl: 'templates/topology_canvas.tpl.html',
- controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, TreeLayout){
-
- // NOTE $window is not the right reference, we should refer to container size
-
- this.instances = [];
- this.slices = [];
-
- const width = $window.innerWidth - serviceTopologyConfig.widthMargin;
- const height = $window.innerHeight - serviceTopologyConfig.heightMargin;
-
- const treeLayout = d3.layout.tree()
- .size([height, width]);
-
- const svg = d3.select($element[0])
- .append('svg')
- .style('width', `${$window.innerWidth}px`)
- .style('height', `${$window.innerHeight}px`)
-
- const treeContainer = svg.append('g')
- .attr('transform', 'translate(' + serviceTopologyConfig.widthMargin+ ',' + serviceTopologyConfig.heightMargin + ')');
-
- //const resizeCanvas = () => {
- // var targetSize = svg.node().getBoundingClientRect();
- //
- // d3.select(self.frameElement)
- // .attr('width', `${targetSize.width}px`)
- // .attr('height', `${targetSize.height}px`)
- //};
- //d3.select(window)
- // .on('load', () => {
- // resizeCanvas();
- // });
- //d3.select(window)
- // .on('resize', () => {
- // resizeCanvas();
- // update(root);
- // });
- var root;
-
- const draw = (tree) => {
- root = tree;
- root.x0 = $window.innerHeight / 2;
- root.y0 = 0;
-
- TreeLayout.updateTree(treeContainer, treeLayout, root);
- };
-
- TreeLayout.drawLegend(svg);
-
- var _this = this;
-
- Subscribers.query().$promise
- .then((subscribers) => {
- this.subscribers = subscribers;
- if(subscribers.length === 1){
- this.selectedSubscriber = subscribers[0];
- this.getServiceChain(this.selectedSubscriber);
- }
- });
-
- this.getInstances = (slice) => {
- Instances.query({slice: slice.id}).$promise
- .then((instances) => {
- this.selectedSlice = slice;
- this.instances = instances;
- })
- };
-
- // redraw when subrsbiber change
- this.getServiceChain = (subscriber) => {
- ServiceRelation.get(subscriber)
- .then((tree) => {
- draw(tree);
- });
- };
- }
- }
- });
-
-}());
\ No newline at end of file
diff --git a/views/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/views/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
deleted file mode 100644
index aef5014..0000000
--- a/views/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="subscriber-select">
- Select a subscriber:
- <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>
\ No newline at end of file