Drawing tree chart from real data
diff --git a/gui/ngXosViews/serviceTopology/bower.json b/gui/ngXosViews/serviceTopology/bower.json
index e945bd7..3d01c48 100644
--- a/gui/ngXosViews/serviceTopology/bower.json
+++ b/gui/ngXosViews/serviceTopology/bower.json
@@ -15,7 +15,8 @@
"tests"
],
"dependencies": {
- "d3": "~3.5.13"
+ "d3": "~3.5.13",
+ "lodash": "~4.0.0"
},
"devDependencies": {
"jquery": "~2.1.4",
diff --git a/gui/ngXosViews/serviceTopology/src/index.html b/gui/ngXosViews/serviceTopology/src/index.html
index 1627e38..c2a289e 100644
--- a/gui/ngXosViews/serviceTopology/src/index.html
+++ b/gui/ngXosViews/serviceTopology/src/index.html
@@ -21,6 +21,7 @@
<script src="vendor/angular-resource/angular-resource.js"></script>
<script src="vendor/ng-lodash/build/ng-lodash.js"></script>
<script src="vendor/bootstrap-css/js/bootstrap.js"></script>
+<script src="vendor/lodash/lodash.js"></script>
<!-- endbower --><!-- endjs -->
<!-- inject:js -->
<script src="/xosHelpers/src/xosHelpers.module.js"></script>
diff --git a/gui/ngXosViews/serviceTopology/src/js/main.js b/gui/ngXosViews/serviceTopology/src/js/main.js
index 1d86d86..3a46d61 100644
--- a/gui/ngXosViews/serviceTopology/src/js/main.js
+++ b/gui/ngXosViews/serviceTopology/src/js/main.js
@@ -17,22 +17,6 @@
.config(function($httpProvider){
$httpProvider.interceptors.push('NoHyperlinks');
})
-.directive('usersList', function(){
- return {
- restrict: 'E',
- scope: {},
- bindToController: true,
- controllerAs: 'vm',
- templateUrl: 'templates/users-list.tpl.html',
- controller: function(Services){
- // retrieving user list
- Services.query().$promise
- .then((res) => {
- console.log(res);
- })
- .catch((e) => {
- throw new Error(e);
- });
- }
- };
+.factory('_', function($window){
+ return window._;
});
\ 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 93a1edb..640182d 100644
--- a/gui/ngXosViews/serviceTopology/src/js/services.js
+++ b/gui/ngXosViews/serviceTopology/src/js/services.js
@@ -3,7 +3,89 @@
angular.module('xos.serviceTopology')
.service('Services', function($resource){
- return $resource('/xos/services');
+ return $resource('/xos/services/:id', {id: '@id'});
+ })
+ .service('Tenant', function($resource){
+ return $resource('/xos/tenants');
+ })
+ .service('ServiceRelation', function($q, _, lodash, Services, Tenant){
+
+ // find all the relation defined for a given root
+ const findLevelRelation = (tenants, rootId) => {
+ return lodash.filter(tenants, service => {
+ return service.subscriber_service === rootId;
+ });
+ };
+
+ // find all the service defined by a given array of relations
+ const findLevelServices = (relations, services) => {
+ const levelServices = [];
+ lodash.forEach(relations, (tenant) => {
+ var service = lodash.find(services, {id: tenant.provider_service});
+ levelServices.push(service);
+ });
+ return levelServices;
+ };
+
+ const buildLevel = (tenants, services, rootService, parentName = null) => {
+
+ const tree = {
+ name: rootService.humanReadableName,
+ parent: parentName,
+ children: []
+ };
+
+ // build an array of unlinked services
+ // these are the services that should still placed in the tree
+ var unlinkedServices = lodash.difference(services, [rootService]);
+
+ // find all relations relative to this rootElement
+ const levelRelation = findLevelRelation(tenants, rootService.id);
+
+ // find all items related to rootElement
+ const levelServices = findLevelServices(levelRelation, services);
+
+ // remove this item from the list (performance
+ unlinkedServices = lodash.difference(unlinkedServices, levelServices);
+
+ lodash.forEach(levelServices, (service) => {
+ tree.children.push(buildLevel(tenants, unlinkedServices, service, rootService.humanReadableName));
+ });
+
+ return tree;
+ };
+
+ const buildServiceTree = (services, tenants) => {
+
+ // find the root service
+ // it is the one attached to subsriber_root
+ // as now we have only one root so this can work
+ const rootServiceId = lodash.find(tenants, {subscriber_root: 1}).provider_service;
+ const rootService = lodash.find(services, {id: rootServiceId});
+
+ const serviceTree = buildLevel(tenants, services, rootService);
+
+ return serviceTree;
+ };
+
+ this.get = () => {
+ var deferred = $q.defer();
+ var services, tenants;
+ Services.query().$promise
+ .then((res) => {
+ services = res;
+ return Tenant.query().$promise;
+ })
+ .then((res) => {
+ tenants = res;
+ deferred.resolve(buildServiceTree(services, tenants));
+ })
+ .catch((e) => {
+ throw new Error(e);
+ });
+
+ return deferred.promise;
+ }
});
}());
\ 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 88d1388..8206194 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){
+ controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation){
// count the mas depth of an object
const depthOf = (obj) => {
@@ -25,6 +25,11 @@
return 1 + depth
};
+ ServiceRelation.get()
+ .then(res => {
+ //console.log(res);
+ });
+
const treeData = [
{
'name': 'Top Level',
@@ -68,14 +73,13 @@
.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`)
- };
-
+ //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();
@@ -85,15 +89,17 @@
// resizeCanvas();
// update(root);
// });
-
- var root = treeData[0];
- root.x0 = $window.innerHeight / 2;
- root.y0 = 0;
-
+ var root;
var i = 0;
var duration = 750;
- update(root);
+ const draw = (tree) => {
+ root = tree;
+ root.x0 = $window.innerHeight / 2;
+ root.y0 = 0;
+
+ update(root);
+ };
function update(source) {
@@ -194,6 +200,13 @@
d.y0 = d.y;
});
}
+
+ ServiceRelation.get()
+ .then((tree) => {
+ console.log(tree);
+ draw(tree);
+ });
+ //draw(treeData[0]);
}
}
});