blob: 832e6faadd3fdff10a5cdc80e33feffc566b0d42 [file] [log] [blame]
Matteo Scandolofcdbed32016-02-08 16:55:44 -08001(function () {
2 'use strict';
3
Matteo Scandolo04564952016-02-24 11:22:48 -08004 angular.module('xos.diagnostic')
Matteo Scandolofcdbed32016-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 Scandolo219b1a72016-02-09 11:19:22 -080014 controller: function($element, $window, $scope, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, ServiceTopologyHelper){
Matteo Scandolofcdbed32016-02-08 16:55:44 -080015
16 const el = $element[0];
17
Matteo Scandolo7547f042016-02-09 09:13:30 -080018 d3.select(window)
Matteo Scandolo79108192016-03-08 09:33:26 -080019 .on('resize.service', () => {
Matteo Scandolo7547f042016-02-09 09:13:30 -080020 draw(this.serviceChain);
21 });
Matteo Scandolofcdbed32016-02-08 16:55:44 -080022
Matteo Scandolo7547f042016-02-09 09:13:30 -080023 var root, svg;
Matteo Scandolofcdbed32016-02-08 16:55:44 -080024
25 const draw = (tree) => {
Matteo Scandolo7547f042016-02-09 09:13:30 -080026
Matteo Scandolo70ac2162016-02-24 15:40:22 -080027 if(!tree){
28 console.error('Tree is missing');
29 return;
30 }
31
Matteo Scandolo219b1a72016-02-09 11:19:22 -080032 // TODO update instead clear and redraw
33
Matteo Scandolo7547f042016-02-09 09:13:30 -080034 // clean
35 d3.select($element[0]).select('svg').remove();
36
Matteo Scandolo574c73f2016-03-01 17:08:45 -080037
Matteo Scandolo7547f042016-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')
Matteo Scandolo79108192016-03-08 09:33:26 -080050 .attr('transform', `translate(${serviceTopologyConfig.widthMargin * 2},${serviceTopologyConfig.heightMargin})`);
Matteo Scandolo7547f042016-02-09 09:13:30 -080051
Matteo Scandolofcdbed32016-02-08 16:55:44 -080052 root = tree;
53 root.x0 = height / 2;
54 root.y0 = width / 2;
55
Matteo Scandoloaf286372016-02-09 14:46:14 -080056 // ServiceTopologyHelper.drawLegend(svg);
Matteo Scandolo574c73f2016-03-01 17:08:45 -080057 ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root, el);
Matteo Scandolofcdbed32016-02-08 16:55:44 -080058 };
Matteo Scandolofcdbed32016-02-08 16:55:44 -080059
60 $scope.$watch(() => this.serviceChain, (chain) => {
Matteo Scandolo70ac2162016-02-24 15:40:22 -080061 if(angular.isDefined(chain)){
Matteo Scandolofcdbed32016-02-08 16:55:44 -080062 draw(chain);
63 }
64 });
65 }
66 }
67 });
68
69}());