blob: 8fce43dc34c65ac250bda021fdd4de2aec70777a [file] [log] [blame]
Matteo Scandolo8a64fa42016-01-21 11:21:03 -08001(function () {
2 'use strict';
3
4 angular.module('xos.serviceTopology')
5 .directive('serviceCanvas', function(){
6 return {
7 restrict: 'E',
8 scope: {},
9 bindToController: true,
10 controllerAs: 'vm',
11 templateUrl: 'templates/topology_canvas.tpl.html',
Matteo Scandolo071ef462016-01-25 12:00:42 -080012 controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, TreeLayout){
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080013
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -080014 // NOTE $window is not the right reference, we should refer to container size
Matteo Scandolo9ef3c842016-01-25 13:55:09 -080015
Matteo Scandolo6e8a75a2016-01-22 09:33:26 -080016 this.instances = [];
17 this.slices = [];
18
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080019 const width = $window.innerWidth - serviceTopologyConfig.widthMargin;
20 const height = $window.innerHeight - serviceTopologyConfig.heightMargin;
21
Matteo Scandolo071ef462016-01-25 12:00:42 -080022 const treeLayout = d3.layout.tree()
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080023 .size([height, width]);
24
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080025 const svg = d3.select($element[0])
26 .append('svg')
27 .style('width', `${$window.innerWidth}px`)
28 .style('height', `${$window.innerHeight}px`)
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -080029
30 const treeContainer = svg.append('g')
Matteo Scandolo071ef462016-01-25 12:00:42 -080031 .attr('transform', 'translate(' + serviceTopologyConfig.widthMargin+ ',' + serviceTopologyConfig.heightMargin + ')');
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080032
Matteo Scandolof16b3792016-01-21 14:23:28 -080033 //const resizeCanvas = () => {
34 // var targetSize = svg.node().getBoundingClientRect();
35 //
36 // d3.select(self.frameElement)
37 // .attr('width', `${targetSize.width}px`)
38 // .attr('height', `${targetSize.height}px`)
39 //};
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080040 //d3.select(window)
41 // .on('load', () => {
42 // resizeCanvas();
43 // });
44 //d3.select(window)
45 // .on('resize', () => {
46 // resizeCanvas();
47 // update(root);
48 // });
Matteo Scandolof16b3792016-01-21 14:23:28 -080049 var root;
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080050
Matteo Scandolof16b3792016-01-21 14:23:28 -080051 const draw = (tree) => {
52 root = tree;
53 root.x0 = $window.innerHeight / 2;
54 root.y0 = 0;
55
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -080056 TreeLayout.updateTree(treeContainer, treeLayout, root);
Matteo Scandolof16b3792016-01-21 14:23:28 -080057 };
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080058
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -080059 TreeLayout.drawLegend(svg);
60
Matteo Scandolo3501ccb2016-01-21 16:02:57 -080061 var _this = this;
Matteo Scandolo06f45d62016-01-21 15:38:06 -080062
Matteo Scandoloff7df762016-01-22 16:36:34 -080063 Subscribers.query().$promise
64 .then((subscribers) => {
65 this.subscribers = subscribers;
Matteo Scandolof2c99012016-01-25 10:10:38 -080066 if(subscribers.length === 1){
67 this.selectedSubscriber = subscribers[0];
68 this.getServiceChain(this.selectedSubscriber);
69 }
Matteo Scandolof16b3792016-01-21 14:23:28 -080070 });
Matteo Scandolo06f45d62016-01-21 15:38:06 -080071
72 this.getInstances = (slice) => {
73 Instances.query({slice: slice.id}).$promise
74 .then((instances) => {
75 this.selectedSlice = slice;
76 this.instances = instances;
77 })
78 };
Matteo Scandolo4d42ddc2016-01-22 16:48:54 -080079
Matteo Scandolo071ef462016-01-25 12:00:42 -080080 // redraw when subrsbiber change
Matteo Scandolo4d42ddc2016-01-22 16:48:54 -080081 this.getServiceChain = (subscriber) => {
82 ServiceRelation.get(subscriber)
83 .then((tree) => {
84 draw(tree);
85 });
86 };
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080087 }
88 }
89 });
90
91}());