blob: 045a393061a4b4ac3189ec9aa5fbc6d2826a1461 [file] [log] [blame]
Matteo Scandolo219b1a72016-02-09 11:19:22 -08001(function () {
2 'use strict';
3
4 angular.module('xos.serviceTopology')
5 .service('ServiceTopologyHelper', function($window, $log, lodash, ServiceRelation, serviceTopologyConfig){
6
7 const drawLegend = (svg) => {
8 const legendContainer = svg.append('g')
9 .attr({
10 class: 'legend'
11 });
12
13 legendContainer.append('rect')
14 .attr({
15 transform: d => `translate(10, 80)`,
16 width: 100,
17 height: 100
18 });
19
20 // service
21 const service = legendContainer.append('g')
22 .attr({
23 class: 'node service'
24 });
25
26 service.append('circle')
27 .attr({
28 r: serviceTopologyConfig.circle.radius,
29 transform: d => `translate(30, 100)`
30 });
31
32 service.append('text')
33 .attr({
34 transform: d => `translate(45, 100)`,
35 dy: '.35em'
36 })
37 .text('Service')
38 .style('fill-opacity', 1);
39
40 // slice
41 const slice = legendContainer.append('g')
42 .attr({
43 class: 'node slice'
44 });
45
46 slice.append('rect')
47 .attr({
48 width: 20,
49 height: 20,
50 x: -10,
51 y: -10,
52 transform: d => `translate(30, 130)`
53 });
54
55 slice.append('text')
56 .attr({
57 transform: d => `translate(45, 130)`,
58 dy: '.35em'
59 })
60 .text('Slices')
61 .style('fill-opacity', 1);
62
63 // instance
64 const instance = legendContainer.append('g')
65 .attr({
66 class: 'node instance'
67 });
68
69 instance.append('rect')
70 .attr({
71 width: 20,
72 height: 20,
73 x: -10,
74 y: -10,
75 transform: d => `translate(30, 160)`
76 });
77
78 instance.append('text')
79 .attr({
80 transform: d => `translate(45, 160)`,
81 dy: '.35em'
82 })
83 .text('Instances')
84 .style('fill-opacity', 1);
85 };
86
87 var _svg, _layout, _source;
88
89 var i = 0;
90
91 // given a canvas, a layout and a data source, draw a tree layout
92 const updateTree = (svg, layout, source) => {
93
94 //cache data
95 _svg = svg;
96 _layout = layout;
97 _source = source;
98
99 const maxDepth = ServiceRelation.depthOf(source);
100
101 const diagonal = d3.svg.diagonal()
102 .projection(d => [d.y, d.x]);
103
104 // Compute the new tree layout.
105 var nodes = layout.nodes(source).reverse(),
106 links = layout.links(nodes);
107
108 // Normalize for fixed-depth.
109 nodes.forEach(function(d) {
110 // position the child node horizontally
111 const step = (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
112 d.y = d.depth * step;
113 });
114
115 // Update the nodes…
116 var node = svg.selectAll('g.node')
117 .data(nodes, function(d) { return d.id || (d.id = ++i); });
118
119 // Enter any new nodes at the parent's previous position.
120 var nodeEnter = node.enter().append('g')
121 .attr({
122 class: d => `node ${d.type}`,
123 transform: `translate(${source.y0}, ${source.x0})`
124 });
125
126 const subscriberNodes = nodeEnter.filter('.subscriber');
Matteo Scandolo9fe01af2016-02-09 16:01:49 -0800127 const internetNodes = nodeEnter.filter('.router');
Matteo Scandolo219b1a72016-02-09 11:19:22 -0800128 const serviceNodes = nodeEnter.filter('.service');
129 const instanceNodes = nodeEnter.filter('.instance');
130 const sliceNodes = nodeEnter.filter('.slice');
131
132 subscriberNodes.append('rect')
133 .attr(serviceTopologyConfig.square);
134
135 internetNodes.append('rect')
136 .attr(serviceTopologyConfig.square);
137
138 serviceNodes.append('circle')
139 .attr('r', 1e-6)
140 .style('fill', d => d._children ? 'lightsteelblue' : '#fff')
141 .on('click', serviceClick);
142
143 sliceNodes.append('rect')
144 .attr({
145 width: 20,
146 height: 20,
147 x: -10,
148 y: -10
149 });
150
151 instanceNodes.append('rect')
152 .attr({
153 width: 20,
154 height: 20,
155 x: -10,
156 y: -10,
157 class: d => d.active ?'' : 'active'
158 });
159
160 nodeEnter.append('text')
161 .attr({
162 x: d => d.children ? -serviceTopologyConfig.circle.selectedRadius -3 : serviceTopologyConfig.circle.selectedRadius + 3,
163 dy: '.35em',
164 transform: d => {
165 if (d.children && d.parent){
166 if(d.parent.x < d.x){
167 return 'rotate(-30)';
168 }
169 return 'rotate(30)';
170 }
171 },
172 'text-anchor': d => d.children ? 'end' : 'start'
173 })
174 .text(d => d.name)
175 .style('fill-opacity', 1e-6);
176
177 // Transition nodes to their new position.
178 var nodeUpdate = node.transition()
179 .duration(serviceTopologyConfig.duration)
180 .attr({
181 'transform': d => `translate(${d.y},${d.x})`
182 });
183
184 nodeUpdate.select('circle')
185 .attr('r', d => d.selected ? serviceTopologyConfig.circle.selectedRadius : serviceTopologyConfig.circle.radius)
186 .style('fill', d => d.selected ? 'lightsteelblue' : '#fff');
187
188 nodeUpdate.select('text')
189 .style('fill-opacity', 1);
190
191 // Transition exiting nodes to the parent's new position.
192 var nodeExit = node.exit().transition()
193 .duration(serviceTopologyConfig.duration)
194 .remove();
195
196 nodeExit.select('circle')
197 .attr('r', 1e-6);
198
199 nodeExit.select('text')
200 .style('fill-opacity', 1e-6);
201
202 // Update the links…
203 var link = svg.selectAll('path.link')
204 .data(links, function(d) { return d.target.id; });
205
206 // Enter any new links at the parent's previous position.
207 link.enter().insert('path', 'g')
208 .attr('class', d => `link ${d.target.type} ${d.target.active ? '' : 'active'}`)
209 .attr('d', function(d) {
210 var o = {x: source.x0, y: source.y0};
211 return diagonal({source: o, target: o});
212 });
213
214 // Transition links to their new position.
215 link.transition()
216 .duration(serviceTopologyConfig.duration)
217 .attr('d', diagonal);
218
219 // Transition exiting nodes to the parent's new position.
220 link.exit().transition()
221 .duration(serviceTopologyConfig.duration)
222 .attr('d', function(d) {
223 var o = {x: source.x, y: source.y};
224 return diagonal({source: o, target: o});
225 })
226 .remove();
227
228 // Stash the old positions for transition.
229 nodes.forEach(function(d) {
230 d.x0 = d.x;
231 d.y0 = d.y;
232 });
233 };
234
235 const serviceClick = function(d) {
236
237 $log.info('TODO emit an event to highlight VMs');
238
239 if(!d.service){
240 return;
241 }
242
243 // toggling selected status
244 d.selected = !d.selected;
245
246 var selectedNode = d3.select(this);
247
248 selectedNode
249 .transition()
250 .duration(serviceTopologyConfig.duration)
251 .attr('r', serviceTopologyConfig.circle.selectedRadius);
252 };
253
254 this.updateTree = updateTree;
255 this.drawLegend = drawLegend;
256 });
257
258}());