Matteo Scandolo | be9b13d | 2016-01-21 11:21:03 -0800 | [diff] [blame] | 1 | (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 Scandolo | 4889f5a | 2016-01-25 12:00:42 -0800 | [diff] [blame^] | 12 | controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, TreeLayout){ |
Matteo Scandolo | be9b13d | 2016-01-21 11:21:03 -0800 | [diff] [blame] | 13 | |
Matteo Scandolo | 793e1dd | 2016-01-22 09:33:26 -0800 | [diff] [blame] | 14 | this.instances = []; |
| 15 | this.slices = []; |
| 16 | |
Matteo Scandolo | be9b13d | 2016-01-21 11:21:03 -0800 | [diff] [blame] | 17 | const width = $window.innerWidth - serviceTopologyConfig.widthMargin; |
| 18 | const height = $window.innerHeight - serviceTopologyConfig.heightMargin; |
| 19 | |
Matteo Scandolo | 4889f5a | 2016-01-25 12:00:42 -0800 | [diff] [blame^] | 20 | const treeLayout = d3.layout.tree() |
Matteo Scandolo | be9b13d | 2016-01-21 11:21:03 -0800 | [diff] [blame] | 21 | .size([height, width]); |
| 22 | |
Matteo Scandolo | be9b13d | 2016-01-21 11:21:03 -0800 | [diff] [blame] | 23 | const svg = d3.select($element[0]) |
| 24 | .append('svg') |
| 25 | .style('width', `${$window.innerWidth}px`) |
| 26 | .style('height', `${$window.innerHeight}px`) |
| 27 | .append('g') |
Matteo Scandolo | 4889f5a | 2016-01-25 12:00:42 -0800 | [diff] [blame^] | 28 | .attr('transform', 'translate(' + serviceTopologyConfig.widthMargin+ ',' + serviceTopologyConfig.heightMargin + ')'); |
Matteo Scandolo | be9b13d | 2016-01-21 11:21:03 -0800 | [diff] [blame] | 29 | |
Matteo Scandolo | 85aad31 | 2016-01-21 14:23:28 -0800 | [diff] [blame] | 30 | //const resizeCanvas = () => { |
| 31 | // var targetSize = svg.node().getBoundingClientRect(); |
| 32 | // |
| 33 | // d3.select(self.frameElement) |
| 34 | // .attr('width', `${targetSize.width}px`) |
| 35 | // .attr('height', `${targetSize.height}px`) |
| 36 | //}; |
Matteo Scandolo | be9b13d | 2016-01-21 11:21:03 -0800 | [diff] [blame] | 37 | //d3.select(window) |
| 38 | // .on('load', () => { |
| 39 | // resizeCanvas(); |
| 40 | // }); |
| 41 | //d3.select(window) |
| 42 | // .on('resize', () => { |
| 43 | // resizeCanvas(); |
| 44 | // update(root); |
| 45 | // }); |
Matteo Scandolo | 85aad31 | 2016-01-21 14:23:28 -0800 | [diff] [blame] | 46 | var root; |
Matteo Scandolo | be9b13d | 2016-01-21 11:21:03 -0800 | [diff] [blame] | 47 | |
Matteo Scandolo | 85aad31 | 2016-01-21 14:23:28 -0800 | [diff] [blame] | 48 | const draw = (tree) => { |
| 49 | root = tree; |
| 50 | root.x0 = $window.innerHeight / 2; |
| 51 | root.y0 = 0; |
| 52 | |
Matteo Scandolo | 4889f5a | 2016-01-25 12:00:42 -0800 | [diff] [blame^] | 53 | TreeLayout.updateTree(svg, treeLayout, root); |
Matteo Scandolo | 85aad31 | 2016-01-21 14:23:28 -0800 | [diff] [blame] | 54 | }; |
Matteo Scandolo | be9b13d | 2016-01-21 11:21:03 -0800 | [diff] [blame] | 55 | |
Matteo Scandolo | 53a0226 | 2016-01-21 16:02:57 -0800 | [diff] [blame] | 56 | var _this = this; |
Matteo Scandolo | 6823626 | 2016-01-21 15:38:06 -0800 | [diff] [blame] | 57 | |
Matteo Scandolo | 8927639 | 2016-01-22 16:36:34 -0800 | [diff] [blame] | 58 | Subscribers.query().$promise |
| 59 | .then((subscribers) => { |
| 60 | this.subscribers = subscribers; |
Matteo Scandolo | fb46f5b | 2016-01-25 10:10:38 -0800 | [diff] [blame] | 61 | if(subscribers.length === 1){ |
| 62 | this.selectedSubscriber = subscribers[0]; |
| 63 | this.getServiceChain(this.selectedSubscriber); |
| 64 | } |
Matteo Scandolo | 85aad31 | 2016-01-21 14:23:28 -0800 | [diff] [blame] | 65 | }); |
Matteo Scandolo | 6823626 | 2016-01-21 15:38:06 -0800 | [diff] [blame] | 66 | |
| 67 | this.getInstances = (slice) => { |
| 68 | Instances.query({slice: slice.id}).$promise |
| 69 | .then((instances) => { |
| 70 | this.selectedSlice = slice; |
| 71 | this.instances = instances; |
| 72 | }) |
| 73 | }; |
Matteo Scandolo | 5f52554 | 2016-01-22 16:48:54 -0800 | [diff] [blame] | 74 | |
Matteo Scandolo | 4889f5a | 2016-01-25 12:00:42 -0800 | [diff] [blame^] | 75 | // redraw when subrsbiber change |
Matteo Scandolo | 5f52554 | 2016-01-22 16:48:54 -0800 | [diff] [blame] | 76 | this.getServiceChain = (subscriber) => { |
| 77 | ServiceRelation.get(subscriber) |
| 78 | .then((tree) => { |
| 79 | draw(tree); |
| 80 | }); |
| 81 | }; |
Matteo Scandolo | be9b13d | 2016-01-21 11:21:03 -0800 | [diff] [blame] | 82 | } |
| 83 | } |
| 84 | }); |
| 85 | |
| 86 | }()); |