blob: 925e7c00a5c4c5ae8326f55ba92a1ad1a8f1e09d [file] [log] [blame]
Matteo Scandoloda19dff2016-02-08 16:55:44 -08001(function () {
2 'use strict';
3
Matteo Scandolo4b3d8722016-02-24 11:22:48 -08004 angular.module('xos.diagnostic')
Matteo Scandoloda19dff2016-02-08 16:55:44 -08005 .directive('serviceTopology', function(){
6 return {
7 restrict: 'E',
8 scope: {
9 serviceChain: '='
10 },
11 bindToController: true,
12 controllerAs: 'vm',
13 template: '',
Matteo Scandoloeeb9c082016-02-09 11:19:22 -080014 controller: function($element, $window, $scope, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, ServiceTopologyHelper){
Matteo Scandoloda19dff2016-02-08 16:55:44 -080015
16 const el = $element[0];
17
Matteo Scandolo735606c2016-02-09 09:13:30 -080018 d3.select(window)
19 .on('resize', () => {
Matteo Scandolo735606c2016-02-09 09:13:30 -080020 draw(this.serviceChain);
21 });
Matteo Scandoloda19dff2016-02-08 16:55:44 -080022
Matteo Scandolo735606c2016-02-09 09:13:30 -080023 var root, svg;
Matteo Scandoloda19dff2016-02-08 16:55:44 -080024
25 const draw = (tree) => {
Matteo Scandolo735606c2016-02-09 09:13:30 -080026
Matteo Scandolo16763e92016-02-24 15:40:22 -080027 if(!tree){
28 console.error('Tree is missing');
29 return;
30 }
31
Matteo Scandoloeeb9c082016-02-09 11:19:22 -080032 // TODO update instead clear and redraw
33
Matteo Scandolo735606c2016-02-09 09:13:30 -080034 // clean
35 d3.select($element[0]).select('svg').remove();
36
Matteo Scandolo5bb16682016-03-01 17:08:45 -080037
Matteo Scandolo735606c2016-02-09 09:13:30 -080038 const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
39 const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
40
41 const treeLayout = d3.layout.tree()
42 .size([height, width]);
43
44 svg = d3.select($element[0])
45 .append('svg')
46 .style('width', `${el.clientWidth}px`)
47 .style('height', `${el.clientHeight}px`)
48
49 const treeContainer = svg.append('g')
50 .attr('transform', `translate(${serviceTopologyConfig.widthMargin * 4},${serviceTopologyConfig.heightMargin})`);
51
Matteo Scandoloda19dff2016-02-08 16:55:44 -080052 root = tree;
53 root.x0 = height / 2;
54 root.y0 = width / 2;
55
Matteo Scandolo11dc8c42016-02-09 14:46:14 -080056 // ServiceTopologyHelper.drawLegend(svg);
Matteo Scandolo5bb16682016-03-01 17:08:45 -080057 ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root, el);
Matteo Scandoloda19dff2016-02-08 16:55:44 -080058 };
Matteo Scandoloda19dff2016-02-08 16:55:44 -080059
60 $scope.$watch(() => this.serviceChain, (chain) => {
Matteo Scandolo16763e92016-02-24 15:40:22 -080061 if(angular.isDefined(chain)){
Matteo Scandoloda19dff2016-02-08 16:55:44 -080062 draw(chain);
63 }
64 });
65 }
66 }
67 });
68
69}());