Matteo Scandolo | 38ba331 | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 1 | (function () { |
| 2 | 'use strict'; |
| 3 | |
| 4 | const shapes = { |
| 5 | cloud: ' M 79.72 49.60 C 86.00 37.29 98.57 29.01 111.96 26.42 C 124.27 24.11 137.53 26.15 148.18 32.90 C 158.08 38.78 165.39 48.87 167.65 60.20 C 176.20 57.90 185.14 56.01 194.00 57.73 C 206.08 59.59 217.92 66.01 224.37 76.66 C 227.51 81.54 228.85 87.33 229.23 93.06 C 237.59 93.33 246.22 95.10 253.04 100.19 C 256.69 103.13 259.87 107.67 258.91 112.59 C 257.95 118.43 252.78 122.38 247.78 124.82 C 235.27 130.43 220.23 130.09 207.98 123.93 C 199.33 127.88 189.76 129.43 180.30 128.57 C 173.70 139.92 161.70 147.65 148.86 149.93 C 133.10 153.26 116.06 148.15 104.42 137.08 C 92.98 143.04 78.96 143.87 66.97 139.04 C 57.75 135.41 49.70 128.00 46.60 118.43 C 43.87 109.95 45.81 100.29 51.30 93.32 C 57.38 85.18 67.10 80.44 76.99 78.89 C 74.38 69.20 74.87 58.52 79.72 49.60 Z' |
| 6 | } |
| 7 | |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 8 | var computeNodeId = 0; |
| 9 | var instanceId = 0; |
| 10 | |
Matteo Scandolo | 38ba331 | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 11 | angular.module('xos.serviceTopology') |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame^] | 12 | .service('NodeDrawer', function(d3, serviceTopologyConfig, RackHelper, lodash){ |
Matteo Scandolo | ba2d63d | 2016-02-17 13:54:11 -0800 | [diff] [blame] | 13 | |
| 14 | var _this = this; |
| 15 | |
Matteo Scandolo | 38ba331 | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 16 | this.addNetworks = (nodes) => { |
| 17 | nodes.append('path') |
| 18 | .attr({ |
| 19 | d: shapes.cloud, |
| 20 | transform: 'translate(-63, -52), scale(0.5)', |
| 21 | class: 'cloud' |
| 22 | }); |
| 23 | |
| 24 | nodes.append('text') |
| 25 | .attr({ |
| 26 | 'text-anchor': 'middle' |
| 27 | }) |
| 28 | .text(d => d.name) |
Matteo Scandolo | dffc138 | 2016-02-22 14:53:44 -0800 | [diff] [blame] | 29 | |
| 30 | nodes.each(function(n){ |
| 31 | let currentNode = d3.select(this); |
| 32 | // cicle trouch node to add Tags and Public IP |
| 33 | if(n.name === 'LAN' && angular.isDefined(n.subscriberTag)){ |
| 34 | currentNode.append('text') |
| 35 | .attr({ |
| 36 | 'text-anchor': 'middle', |
| 37 | y: 40 |
| 38 | }) |
| 39 | .text(() => `C-Tag: ${n.subscriberTag.cTag}`); |
| 40 | |
| 41 | currentNode.append('text') |
| 42 | .attr({ |
| 43 | 'text-anchor': 'middle', |
| 44 | y: 60 |
| 45 | }) |
| 46 | .text(() => `S-Tag: ${n.subscriberTag.sTag}`); |
| 47 | } |
Matteo Scandolo | 0344ef3 | 2016-02-22 16:53:22 -0800 | [diff] [blame] | 48 | |
| 49 | if(n.name === 'WAN' && angular.isDefined(n.subscriberIP)){ |
| 50 | currentNode.append('text') |
| 51 | .attr({ |
| 52 | 'text-anchor': 'middle', |
| 53 | y: 40 |
| 54 | }) |
| 55 | .text(() => `Public IP: ${n.subscriberIP}`); |
| 56 | } |
Matteo Scandolo | dffc138 | 2016-02-22 14:53:44 -0800 | [diff] [blame] | 57 | }); |
Matteo Scandolo | 38ba331 | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 58 | } |
| 59 | |
| 60 | this.addRack = (nodes) => { |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 61 | |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 62 | // loop because of D3 |
| 63 | // rack will be only one |
| 64 | nodes.each(d => { |
| 65 | let [w, h] = RackHelper.getRackSize(d.computeNodes); |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 66 | |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame^] | 67 | // TODO update instead of delete and redraw |
| 68 | nodes.select('g').remove(); |
| 69 | |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 70 | let rack = nodes |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 71 | .append('g'); |
| 72 | |
| 73 | rack |
| 74 | .attr({ |
| 75 | transform: `translate(0,0)` |
| 76 | }) |
| 77 | .transition() |
| 78 | .duration(serviceTopologyConfig.duration) |
| 79 | .attr({ |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame^] | 80 | transform: () => `translate(${- (w / 2)}, ${- (h / 2)})` |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 81 | }); |
| 82 | |
| 83 | rack |
| 84 | .append('rect') |
| 85 | .attr({ |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 86 | width: 0, |
| 87 | height: 0 |
| 88 | }) |
| 89 | .transition() |
| 90 | .duration(serviceTopologyConfig.duration) |
| 91 | .attr({ |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 92 | width: w, |
| 93 | height: h |
| 94 | }); |
| 95 | |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 96 | rack.append('text') |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 97 | .attr({ |
| 98 | 'text-anchor': 'middle', |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 99 | y: - 10, |
| 100 | x: w / 2, |
| 101 | opacity: 0 |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 102 | }) |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 103 | .text(d => d.name) |
| 104 | .transition() |
| 105 | .duration(serviceTopologyConfig.duration) |
| 106 | .attr({ |
| 107 | opacity: 1 |
| 108 | }) |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 109 | |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 110 | this.drawComputeNodes(rack, d.computeNodes); |
| 111 | |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 112 | }); |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 113 | |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 114 | }; |
| 115 | |
| 116 | this.drawComputeNodes = (container, nodes) => { |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 117 | |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 118 | let elements = container.selectAll('.compute-nodes') |
| 119 | .data(nodes, d => { |
| 120 | if(!angular.isString(d.d3Id)){ |
| 121 | d.d3Id = `compute-node-${++computeNodeId}`; |
| 122 | } |
| 123 | return d.d3Id; |
| 124 | }); |
| 125 | |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 126 | let {width, height} = container.node().getBoundingClientRect(); |
| 127 | |
| 128 | var nodeContainer = elements.enter().append('g'); |
| 129 | |
| 130 | nodeContainer |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 131 | .attr({ |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 132 | transform: `translate(${width / 2}, ${ height / 2})`, |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 133 | class: 'compute-node', |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 134 | }) |
| 135 | .transition() |
| 136 | .duration(serviceTopologyConfig.duration) |
| 137 | .attr({ |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 138 | transform: (d) => `translate(${RackHelper.getComputeNodePosition(nodes, d.d3Id.replace('compute-node-', '') - 1)})` |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 139 | }); |
| 140 | |
| 141 | nodeContainer.append('rect') |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 142 | .attr({ |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 143 | width: 0, |
| 144 | height: 0 |
| 145 | }) |
| 146 | .transition() |
| 147 | .duration(serviceTopologyConfig.duration) |
| 148 | .attr({ |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 149 | width: d => RackHelper.getComputeNodeSize(d.instances)[0], |
| 150 | height: d => RackHelper.getComputeNodeSize(d.instances)[1], |
| 151 | }); |
| 152 | |
| 153 | nodeContainer.append('text') |
| 154 | .attr({ |
| 155 | 'text-anchor': 'start', |
| 156 | y: 15, //FIXME |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 157 | x: 10, //FIXME |
| 158 | opacity: 0 |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 159 | }) |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 160 | .text(d => d.humanReadableName.split('.')[0]) |
| 161 | .transition() |
| 162 | .duration(serviceTopologyConfig.duration) |
| 163 | .attr({ |
| 164 | opacity: 1 |
| 165 | }) |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 166 | |
| 167 | // if there are Compute Nodes |
| 168 | if(nodeContainer.length > 0){ |
Matteo Scandolo | ba2d63d | 2016-02-17 13:54:11 -0800 | [diff] [blame] | 169 | // draw instances for each compute node |
| 170 | nodeContainer.each(function(a){ |
| 171 | _this.drawInstances(d3.select(this), a.instances); |
| 172 | }) |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 173 | } |
| 174 | |
| 175 | }; |
| 176 | |
Matteo Scandolo | 0cfd5a2 | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 177 | // NOTE Stripping unuseful names to shorten labels. |
| 178 | // This is not elegant |
| 179 | const formatInstanceName = (name) => { |
| 180 | return name |
| 181 | .replace('app_', '') |
| 182 | .replace('service_', '') |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame^] | 183 | // .replace('ovs_', '') |
Matteo Scandolo | 0cfd5a2 | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 184 | .replace('mysite_', '') |
| 185 | .replace('_instance', ''); |
| 186 | }; |
| 187 | |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame^] | 188 | const getInstanceStatusColor = (instance) => { |
| 189 | function startWith(val, string){ |
| 190 | return string.substring(0, val.length) === val; |
| 191 | } |
| 192 | |
| 193 | if(startWith('0 - ', instance.backend_status)){ |
| 194 | return 'provisioning'; |
| 195 | } |
| 196 | if(startWith('1 - ', instance.backend_status)){ |
| 197 | return 'good'; |
| 198 | } |
| 199 | if(startWith('2 - ', instance.backend_status)){ |
| 200 | return 'bad'; |
| 201 | } |
| 202 | else { |
| 203 | return ''; |
| 204 | } |
| 205 | }; |
| 206 | |
| 207 | const showInstanceStats = (container, instance) => { |
| 208 | |
| 209 | // NOTE this should be dinamically positioned |
| 210 | // base on the number of element present |
| 211 | const statsContainer = container.append('g') |
| 212 | .attr({ |
| 213 | transform: `translate(200, -32)`, |
| 214 | class: 'stats-container' |
| 215 | }); |
| 216 | |
| 217 | |
| 218 | statsContainer.append('line') |
| 219 | .attr({ |
| 220 | x1: -120, |
| 221 | y1: 50, |
| 222 | x2: 0, |
| 223 | y2: 50, |
| 224 | stroke: 'black' |
| 225 | }) |
| 226 | |
| 227 | // NOTE rect should be dinamically sized base on the presence of a container |
| 228 | let statsHeight = 110; |
| 229 | let statsWidth = 200; |
| 230 | |
| 231 | if (instance.container){ |
| 232 | statsHeight += serviceTopologyConfig.container.height + (serviceTopologyConfig.container.margin * 2) |
| 233 | } |
| 234 | |
| 235 | statsContainer.append('rect') |
| 236 | .attr({ |
| 237 | width: statsWidth, |
| 238 | height: statsHeight |
| 239 | }); |
| 240 | |
| 241 | // add instance info |
| 242 | statsContainer.append('text') |
| 243 | .attr({ |
| 244 | y: 15, |
| 245 | x: serviceTopologyConfig.instance.margin, |
| 246 | class: 'name' |
| 247 | }) |
| 248 | .text(instance.humanReadableName) |
| 249 | |
| 250 | statsContainer.append('text') |
| 251 | .attr({ |
| 252 | y: 30, |
| 253 | x: serviceTopologyConfig.instance.margin, |
| 254 | class: 'ip' |
| 255 | }) |
| 256 | .text(instance.ip) |
| 257 | |
| 258 | // add stats |
| 259 | const interestingMeters = ['memory', 'memory.usage', 'cpu', 'vcpus']; |
| 260 | |
| 261 | interestingMeters.forEach((m, i) => { |
| 262 | const meter = lodash.find(instance.stats, {meter: m}); |
| 263 | statsContainer.append('text') |
| 264 | .attr({ |
| 265 | y: 55 + (i * 15), |
| 266 | x: serviceTopologyConfig.instance.margin |
| 267 | }) |
| 268 | .text(`${meter.description}: ${meter.value} ${meter.unit}`); |
| 269 | }); |
| 270 | |
| 271 | if(instance.container){ |
| 272 | // draw container |
| 273 | |
| 274 | const containerBox = statsContainer.append('g') |
| 275 | .attr({ |
| 276 | class: 'container', |
| 277 | transform: `translate(${serviceTopologyConfig.instance.margin}, 115)` |
| 278 | }); |
| 279 | |
| 280 | containerBox.append('rect') |
| 281 | .attr({ |
| 282 | width: statsWidth - (serviceTopologyConfig.container.margin * 2), |
| 283 | height: serviceTopologyConfig.container.height, |
| 284 | }); |
| 285 | |
| 286 | containerBox.append('text') |
| 287 | .attr({ |
| 288 | y: 20, |
| 289 | x: (statsWidth - (serviceTopologyConfig.container.margin * 2)) / 2, |
| 290 | 'text-anchor': 'middle' |
| 291 | }) |
| 292 | .text(instance.container.name) |
| 293 | } |
| 294 | |
| 295 | }; |
| 296 | |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 297 | this.drawInstances = (container, instances) => { |
Matteo Scandolo | ba2d63d | 2016-02-17 13:54:11 -0800 | [diff] [blame] | 298 | |
Matteo Scandolo | c303fd0 | 2016-02-17 15:11:33 -0800 | [diff] [blame] | 299 | // TODO check for stats field in instance and draw popup |
| 300 | |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 301 | let {width, height} = container.node().getBoundingClientRect(); |
| 302 | |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 303 | let elements = container.selectAll('.instances') |
| 304 | .data(instances, d => angular.isString(d.d3Id) ? d.d3Id : d.d3Id = `instance-${++instanceId}`) |
| 305 | |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 306 | var instanceContainer = elements.enter().append('g'); |
| 307 | |
| 308 | instanceContainer |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 309 | .attr({ |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 310 | transform: `translate(${width / 2}, ${ height / 2})`, |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame^] | 311 | class: d => `instance ${d.selected ? 'active' : ''} ${getInstanceStatusColor(d)}`, |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 312 | }) |
| 313 | .transition() |
| 314 | .duration(serviceTopologyConfig.duration) |
| 315 | .attr({ |
Matteo Scandolo | ba2d63d | 2016-02-17 13:54:11 -0800 | [diff] [blame] | 316 | transform: (d, i) => `translate(${RackHelper.getInstancePosition(i)})` |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 317 | }); |
| 318 | |
| 319 | instanceContainer.append('rect') |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 320 | .attr({ |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 321 | width: 0, |
| 322 | height: 0 |
| 323 | }) |
| 324 | .transition() |
| 325 | .duration(serviceTopologyConfig.duration) |
| 326 | .attr({ |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 327 | width: serviceTopologyConfig.instance.width, |
| 328 | height: serviceTopologyConfig.instance.height |
| 329 | }); |
| 330 | |
| 331 | instanceContainer.append('text') |
| 332 | .attr({ |
Matteo Scandolo | 0cfd5a2 | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 333 | 'text-anchor': 'middle', |
| 334 | y: 23, //FIXME |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 335 | x: 40, //FIXME |
| 336 | opacity: 0 |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 337 | }) |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame^] | 338 | .text(d => formatInstanceName(d.humanReadableName)) |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 339 | .transition() |
| 340 | .duration(serviceTopologyConfig.duration) |
| 341 | .attr({ |
| 342 | opacity: 1 |
| 343 | }); |
Matteo Scandolo | 0cfd5a2 | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 344 | |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame^] | 345 | // if stats are attached and instance is active, |
| 346 | // draw stats |
| 347 | instanceContainer.each(function(instance){ |
| 348 | |
| 349 | const container = d3.select(this); |
| 350 | |
| 351 | if(angular.isDefined(instance.stats) && instance.selected){ |
| 352 | showInstanceStats(container, instance); |
| 353 | } |
| 354 | }); |
| 355 | |
Matteo Scandolo | 0cfd5a2 | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 356 | instanceContainer |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame^] | 357 | .on('click', function(d){ |
| 358 | console.log(`Draw vignette with stats for instance: ${d.name}`); |
Matteo Scandolo | 0cfd5a2 | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 359 | }); |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 360 | }; |
Matteo Scandolo | 38ba331 | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 361 | |
| 362 | this.addPhisical = (nodes) => { |
| 363 | nodes.append('rect') |
| 364 | .attr(serviceTopologyConfig.square); |
| 365 | |
| 366 | nodes.append('text') |
| 367 | .attr({ |
| 368 | 'text-anchor': 'middle', |
| 369 | y: serviceTopologyConfig.square.y - 10 |
| 370 | }) |
| 371 | .text(d => d.name); |
| 372 | } |
| 373 | |
| 374 | this.addDevice = (nodes) => { |
| 375 | nodes.append('circle') |
| 376 | .attr(serviceTopologyConfig.circle); |
| 377 | |
| 378 | nodes.append('text') |
| 379 | .attr({ |
| 380 | 'text-anchor': 'end', |
| 381 | x: - serviceTopologyConfig.circle.r - 10, |
| 382 | y: serviceTopologyConfig.circle.r / 2 |
| 383 | }) |
Matteo Scandolo | db8a185 | 2016-02-23 10:04:36 -0800 | [diff] [blame] | 384 | .text(d => d.name || d.mac); |
Matteo Scandolo | 38ba331 | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 385 | } |
| 386 | }); |
| 387 | })(); |