Service graph sketch
diff --git a/views/ngXosLib/bower.json b/views/ngXosLib/bower.json
index bc9c23a..228a082 100644
--- a/views/ngXosLib/bower.json
+++ b/views/ngXosLib/bower.json
@@ -21,7 +21,8 @@
"angular-cookies": "1.4.7",
"angular-animate": "1.4.7",
"lodash": "~4.11.1",
- "angular-chart.js": "~0.10.2"
+ "angular-chart.js": "~0.10.2",
+ "d3": "~3.5.17"
},
"devDependencies": {
"angular-mocks": "1.4.7",
diff --git a/views/ngXosLib/xosHelpers/src/services/rest/Services.js b/views/ngXosLib/xosHelpers/src/services/rest/Services.js
index a39098a..eda57e4 100644
--- a/views/ngXosLib/xosHelpers/src/services/rest/Services.js
+++ b/views/ngXosLib/xosHelpers/src/services/rest/Services.js
@@ -4,7 +4,7 @@
angular.module('xos.helpers')
/**
* @ngdoc service
- * @name xos.helpers.Instances
+ * @name xos.helpers.Services
* @description Angular resource to fetch /api/core/services/:id/
**/
.service('Services', function($resource){
diff --git a/views/ngXosLib/xosHelpers/src/services/rest/Tenant.js b/views/ngXosLib/xosHelpers/src/services/rest/Tenant.js
new file mode 100644
index 0000000..8feb102
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/services/rest/Tenant.js
@@ -0,0 +1,15 @@
+(function() {
+ 'use strict';
+
+ angular.module('xos.helpers')
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Tenant
+ * @description Angular resource to fetch /api/core/tenant/:id/
+ **/
+ .service('Tenants', function($resource){
+ return $resource('/api/core/tenants/:id/', { id: '@id' }, {
+ update: { method: 'PUT' }
+ });
+ })
+})();
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/services/service_graph.service.js b/views/ngXosLib/xosHelpers/src/services/service_graph.service.js
new file mode 100644
index 0000000..8a732a2
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/services/service_graph.service.js
@@ -0,0 +1,44 @@
+(function() {
+ 'use strict';
+
+ /**
+ * @ngdoc service
+ * @name xos.helpers.ServiceGraph
+ * @description This factory define a set of helper function to query the service tenancy graph
+ **/
+
+ angular
+ .module('xos.helpers')
+ .service('GraphService', function($q, Tenants, Services) {
+
+ this.loadCoarseData = () => {
+
+ let services;
+
+ let deferred = $q.defer();
+
+ Services.query().$promise
+ .then((res) => {
+ services = res;
+ return Tenants.query({kind: 'coarse'}).$promise;
+ })
+ .then((tenants) => {
+ deferred.resolve({
+ tenants: tenants,
+ services: services
+ });
+ })
+
+ return deferred.promise;
+ }
+
+ this.getCoarseGraph = () => {
+ this.loadCoarseData()
+ .then((res) => {
+ console.log(res);
+ })
+ return 'ciao';
+ };
+
+ })
+})();
diff --git a/views/ngXosViews/serviceGrid/bower.json b/views/ngXosViews/serviceGrid/bower.json
index f99dc98..0cac826 100644
--- a/views/ngXosViews/serviceGrid/bower.json
+++ b/views/ngXosViews/serviceGrid/bower.json
@@ -26,6 +26,7 @@
"angular-resource": "1.4.7",
"lodash": "~4.11.1",
"bootstrap-css": "3.3.6",
- "angular-chart.js": "~0.10.2"
+ "angular-chart.js": "~0.10.2",
+ "d3": "~3.5.13"
}
}
diff --git a/views/ngXosViews/serviceGrid/src/css/main.css b/views/ngXosViews/serviceGrid/src/css/main.css
index e69de29..ae13614 100644
--- a/views/ngXosViews/serviceGrid/src/css/main.css
+++ b/views/ngXosViews/serviceGrid/src/css/main.css
@@ -0,0 +1,15 @@
+#xosServiceGrid service-graph {
+ display: block;
+ width: 100%;
+ height: 600px; }
+
+#xosServiceGrid .node {
+ stroke: #337ab7;
+ fill: white; }
+
+#xosServiceGrid .node.xos {
+ fill: #d9534f; }
+
+#xosServiceGrid .link {
+ stroke: black;
+ stroke-width: 2px; }
diff --git a/views/ngXosViews/serviceGrid/src/index.html b/views/ngXosViews/serviceGrid/src/index.html
index 2e7f92e..d9e7fec 100644
--- a/views/ngXosViews/serviceGrid/src/index.html
+++ b/views/ngXosViews/serviceGrid/src/index.html
@@ -25,6 +25,7 @@
<script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
<script src="vendor/Chart.js/Chart.js"></script>
<script src="vendor/angular-chart.js/dist/angular-chart.js"></script>
+<script src="vendor/d3/d3.js"></script>
<!-- endbower -->
<!-- endjs -->
<!-- inject:js -->
diff --git a/views/ngXosViews/serviceGrid/src/js/service-graph.js b/views/ngXosViews/serviceGrid/src/js/service-graph.js
index a79aae9..51a711a 100644
--- a/views/ngXosViews/serviceGrid/src/js/service-graph.js
+++ b/views/ngXosViews/serviceGrid/src/js/service-graph.js
@@ -9,8 +9,103 @@
bindToController: true,
controllerAs: 'vm',
templateUrl: 'templates/service-graph.tpl.html',
- controller: function(){
+ controller: function($element, GraphService){
+ let svg;
+ let el = $element[0];
+ let node;
+ let link;
+
+ const tick = (e) => {
+ // Push different nodes in different directions for clustering.
+
+ node
+ // .attr('cx', d => d.x)
+ // .attr('cy', d => d.y)
+ .attr({
+ transform: d => `translate(${d.x}, ${d.y})`
+ });
+
+ link.attr('x1', d => d.source.x)
+ .attr('y1', d => d.source.y)
+ .attr('x2', d => d.target.x)
+ .attr('y2', d => d.target.y);
+ }
+
+ GraphService.loadCoarseData()
+ .then((res) => {
+
+ // build links
+ res.tenants = res.tenants.map(t => {
+ return {
+ source: t.provider_service,
+ target: t.subscriber_service
+ }
+ });
+
+ // add xos as a node
+ res.services.push({
+ name: 'XOS',
+ class: 'xos',
+ x: el.clientWidth / 2,
+ y: el.clientHeight / 2,
+ fixed: true
+ })
+
+ handleSvg(el);
+
+ var force = d3.layout.force()
+ .nodes(res.services)
+ .links(res.tenants)
+ .charge(-1060)
+ .gravity(0.1)
+ .linkDistance(200)
+ .size([el.clientWidth, el.clientHeight])
+ .on('tick', tick)
+ .start();
+
+ link = svg.selectAll('.link')
+ .data(res.tenants).enter().insert('line')
+ .attr('class', 'link');
+
+ node = svg.selectAll('.node')
+ .data(res.services)
+ .enter().append('g')
+ .call(force.drag)
+ .on("mousedown", function() { d3.event.stopPropagation(); });
+
+ node.append('circle')
+ .attr({
+ class: d => `node ${d.class || ''}`,
+ r: 10
+ });
+
+ node.append('text')
+ .attr({
+ 'text-anchor': 'middle'
+ })
+ .text(d => d.name)
+
+ node.select('circle')
+ .attr({
+ r: function(d){
+ let parent = d3.select(this).node().parentNode;
+ let sib = d3.select(parent).select('text').node().getBBox()
+ return (sib.width / 2) + 10
+
+ }
+ })
+
+ })
+
+ const handleSvg = (el) => {
+ d3.select(el).select('svg').remove();
+
+ svg = d3.select(el)
+ .append('svg')
+ .style('width', `${el.clientWidth}px`)
+ .style('height', `${el.clientHeight}px`);
+ }
}
};
})
diff --git a/views/ngXosViews/serviceGrid/src/sass/main.scss b/views/ngXosViews/serviceGrid/src/sass/main.scss
index 6f4bfe1..bc8d14a 100644
--- a/views/ngXosViews/serviceGrid/src/sass/main.scss
+++ b/views/ngXosViews/serviceGrid/src/sass/main.scss
@@ -1,5 +1,23 @@
@import '../../../../style/sass/lib/_variables.scss';
#xosServiceGrid {
-
+ service-graph {
+ display: block;
+ width: 100%;
+ height: 600px;
+ }
+
+ .node {
+ stroke: $brand-primary;
+ fill: white;
+ }
+
+ .node.xos {
+ fill: $brand-danger;
+ }
+
+ .link {
+ stroke: black;
+ stroke-width: 2px;
+ }
}
\ No newline at end of file