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