Matteo Scandolo | 9fe01af | 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 | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 8 | var computeNodeId = 0; |
| 9 | var instanceId = 0; |
| 10 | |
Matteo Scandolo | 0456495 | 2016-02-24 11:22:48 -0800 | [diff] [blame] | 11 | angular.module('xos.diagnostic') |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 12 | .service('NodeDrawer', function(d3, serviceTopologyConfig, RackHelper, lodash){ |
Matteo Scandolo | 5103148 | 2016-02-17 13:54:11 -0800 | [diff] [blame] | 13 | |
| 14 | var _this = this; |
| 15 | |
Matteo Scandolo | 9fe01af | 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({ |
Matteo Scandolo | 19acf7c | 2016-03-07 16:07:13 -0800 | [diff] [blame] | 26 | 'text-anchor': 'middle', |
| 27 | y: -5, |
| 28 | x: 5, |
Matteo Scandolo | 9fe01af | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 29 | }) |
| 30 | .text(d => d.name) |
Matteo Scandolo | 45fba73 | 2016-02-22 14:53:44 -0800 | [diff] [blame] | 31 | |
Matteo Scandolo | 19acf7c | 2016-03-07 16:07:13 -0800 | [diff] [blame] | 32 | nodes.append('text') |
| 33 | .attr({ |
| 34 | 'text-anchor': 'middle', |
| 35 | y: 8, |
| 36 | x: 5, |
| 37 | class: 'small' |
| 38 | }) |
| 39 | .text(d => d.subtitle) |
| 40 | |
Matteo Scandolo | 45fba73 | 2016-02-22 14:53:44 -0800 | [diff] [blame] | 41 | nodes.each(function(n){ |
| 42 | let currentNode = d3.select(this); |
| 43 | // cicle trouch node to add Tags and Public IP |
Matteo Scandolo | 7910819 | 2016-03-08 09:33:26 -0800 | [diff] [blame] | 44 | if(n.name === 'LAN-Side' && angular.isDefined(n.subscriberTag)){ |
Matteo Scandolo | 45fba73 | 2016-02-22 14:53:44 -0800 | [diff] [blame] | 45 | currentNode.append('text') |
| 46 | .attr({ |
| 47 | 'text-anchor': 'middle', |
| 48 | y: 40 |
| 49 | }) |
| 50 | .text(() => `C-Tag: ${n.subscriberTag.cTag}`); |
| 51 | |
| 52 | currentNode.append('text') |
| 53 | .attr({ |
| 54 | 'text-anchor': 'middle', |
| 55 | y: 60 |
| 56 | }) |
| 57 | .text(() => `S-Tag: ${n.subscriberTag.sTag}`); |
| 58 | } |
Matteo Scandolo | 012dddb | 2016-02-22 16:53:22 -0800 | [diff] [blame] | 59 | |
Matteo Scandolo | 7910819 | 2016-03-08 09:33:26 -0800 | [diff] [blame] | 60 | if(n.name === 'WAN-Side' && angular.isDefined(n.subscriberIP)){ |
Matteo Scandolo | 012dddb | 2016-02-22 16:53:22 -0800 | [diff] [blame] | 61 | currentNode.append('text') |
| 62 | .attr({ |
| 63 | 'text-anchor': 'middle', |
| 64 | y: 40 |
| 65 | }) |
| 66 | .text(() => `Public IP: ${n.subscriberIP}`); |
| 67 | } |
Matteo Scandolo | 45fba73 | 2016-02-22 14:53:44 -0800 | [diff] [blame] | 68 | }); |
Matteo Scandolo | 9fe01af | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 69 | } |
| 70 | |
| 71 | this.addRack = (nodes) => { |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 72 | |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 73 | // loop because of D3 |
| 74 | // rack will be only one |
| 75 | nodes.each(d => { |
| 76 | let [w, h] = RackHelper.getRackSize(d.computeNodes); |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 77 | |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 78 | // TODO update instead of delete and redraw |
| 79 | nodes.select('g').remove(); |
| 80 | |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 81 | let rack = nodes |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 82 | .append('g'); |
| 83 | |
| 84 | rack |
| 85 | .attr({ |
| 86 | transform: `translate(0,0)` |
| 87 | }) |
| 88 | .transition() |
| 89 | .duration(serviceTopologyConfig.duration) |
| 90 | .attr({ |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 91 | transform: () => `translate(${- (w / 2)}, ${- (h / 2)})` |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 92 | }); |
| 93 | |
| 94 | rack |
| 95 | .append('rect') |
| 96 | .attr({ |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 97 | width: 0, |
| 98 | height: 0 |
| 99 | }) |
| 100 | .transition() |
| 101 | .duration(serviceTopologyConfig.duration) |
| 102 | .attr({ |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 103 | width: w, |
| 104 | height: h |
| 105 | }); |
| 106 | |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 107 | rack.append('text') |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 108 | .attr({ |
| 109 | 'text-anchor': 'middle', |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 110 | y: - 10, |
| 111 | x: w / 2, |
| 112 | opacity: 0 |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 113 | }) |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 114 | .text(d => d.name) |
| 115 | .transition() |
| 116 | .duration(serviceTopologyConfig.duration) |
| 117 | .attr({ |
| 118 | opacity: 1 |
| 119 | }) |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 120 | |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 121 | this.drawComputeNodes(rack, d.computeNodes); |
| 122 | |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 123 | }); |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 124 | |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 125 | }; |
| 126 | |
| 127 | this.drawComputeNodes = (container, nodes) => { |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 128 | |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 129 | let elements = container.selectAll('.compute-nodes') |
| 130 | .data(nodes, d => { |
| 131 | if(!angular.isString(d.d3Id)){ |
| 132 | d.d3Id = `compute-node-${++computeNodeId}`; |
| 133 | } |
| 134 | return d.d3Id; |
| 135 | }); |
| 136 | |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 137 | let {width, height} = container.node().getBoundingClientRect(); |
| 138 | |
| 139 | var nodeContainer = elements.enter().append('g'); |
| 140 | |
| 141 | nodeContainer |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 142 | .attr({ |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 143 | transform: `translate(${width / 2}, ${ height / 2})`, |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 144 | class: 'compute-node', |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 145 | }) |
| 146 | .transition() |
| 147 | .duration(serviceTopologyConfig.duration) |
| 148 | .attr({ |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 149 | transform: (d) => `translate(${RackHelper.getComputeNodePosition(nodes, d.d3Id.replace('compute-node-', '') - 1)})` |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 150 | }); |
| 151 | |
| 152 | nodeContainer.append('rect') |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 153 | .attr({ |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 154 | width: 0, |
| 155 | height: 0 |
| 156 | }) |
| 157 | .transition() |
| 158 | .duration(serviceTopologyConfig.duration) |
| 159 | .attr({ |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 160 | width: d => RackHelper.getComputeNodeSize(d.instances)[0], |
| 161 | height: d => RackHelper.getComputeNodeSize(d.instances)[1], |
| 162 | }); |
| 163 | |
| 164 | nodeContainer.append('text') |
| 165 | .attr({ |
| 166 | 'text-anchor': 'start', |
| 167 | y: 15, //FIXME |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 168 | x: 10, //FIXME |
| 169 | opacity: 0 |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 170 | }) |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 171 | .text(d => d.humanReadableName.split('.')[0]) |
| 172 | .transition() |
| 173 | .duration(serviceTopologyConfig.duration) |
| 174 | .attr({ |
| 175 | opacity: 1 |
| 176 | }) |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 177 | |
| 178 | // if there are Compute Nodes |
| 179 | if(nodeContainer.length > 0){ |
Matteo Scandolo | 5103148 | 2016-02-17 13:54:11 -0800 | [diff] [blame] | 180 | // draw instances for each compute node |
| 181 | nodeContainer.each(function(a){ |
| 182 | _this.drawInstances(d3.select(this), a.instances); |
| 183 | }) |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 184 | } |
| 185 | |
| 186 | }; |
| 187 | |
Matteo Scandolo | 7030ceb | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 188 | // NOTE Stripping unuseful names to shorten labels. |
| 189 | // This is not elegant |
| 190 | const formatInstanceName = (name) => { |
| 191 | return name |
| 192 | .replace('app_', '') |
| 193 | .replace('service_', '') |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 194 | // .replace('ovs_', '') |
Matteo Scandolo | 7030ceb | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 195 | .replace('mysite_', '') |
| 196 | .replace('_instance', ''); |
| 197 | }; |
| 198 | |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 199 | const getInstanceStatusColor = (instance) => { |
| 200 | function startWith(val, string){ |
| 201 | return string.substring(0, val.length) === val; |
| 202 | } |
| 203 | |
| 204 | if(startWith('0 - ', instance.backend_status)){ |
| 205 | return 'provisioning'; |
| 206 | } |
| 207 | if(startWith('1 - ', instance.backend_status)){ |
| 208 | return 'good'; |
| 209 | } |
| 210 | if(startWith('2 - ', instance.backend_status)){ |
| 211 | return 'bad'; |
| 212 | } |
| 213 | else { |
| 214 | return ''; |
| 215 | } |
| 216 | }; |
| 217 | |
Matteo Scandolo | f0d6e69 | 2016-02-24 11:14:01 -0800 | [diff] [blame] | 218 | const drawContainer = (container, docker) => { |
| 219 | |
| 220 | const containerBox = container.append('g') |
| 221 | .attr({ |
| 222 | class: 'container', |
| 223 | transform: `translate(${serviceTopologyConfig.instance.margin}, 115)` |
| 224 | }); |
| 225 | |
| 226 | containerBox.append('rect') |
| 227 | .attr({ |
| 228 | width: 250 - (serviceTopologyConfig.container.margin * 2), |
| 229 | height: serviceTopologyConfig.container.height, |
| 230 | }); |
| 231 | |
| 232 | containerBox.append('text') |
| 233 | .attr({ |
| 234 | y: 20, |
| 235 | x: serviceTopologyConfig.instance.margin, |
| 236 | class: 'name' |
| 237 | }) |
| 238 | .text(docker.name) |
| 239 | |
| 240 | // add stats |
| 241 | const interestingMeters = ['memory', 'memory.usage', 'cpu_util']; |
| 242 | |
| 243 | interestingMeters.forEach((m, i) => { |
| 244 | const meter = lodash.find(docker.stats, {meter: m}); |
| 245 | // if there is no meter stats skip rendering |
| 246 | if(!angular.isDefined(meter)){ |
| 247 | return; |
| 248 | } |
| 249 | containerBox.append('text') |
| 250 | .attr({ |
| 251 | y: 40 + (i * 15), |
| 252 | x: serviceTopologyConfig.instance.margin, |
| 253 | opacity: 0 |
| 254 | }) |
| 255 | .text(`${meter.description}: ${Math.round(meter.value)} ${meter.unit}`) |
| 256 | .transition() |
| 257 | .duration(serviceTopologyConfig.duration) |
| 258 | .attr({ |
| 259 | opacity: 1 |
| 260 | }); |
| 261 | }); |
| 262 | |
| 263 | // add port stats |
| 264 | const ports = ['eth0', 'eth1']; |
| 265 | const interestingPortMeters = [ |
| 266 | { |
| 267 | meter: 'network.incoming.bytes.rate', |
| 268 | label: 'Incoming' |
| 269 | }, |
| 270 | { |
| 271 | meter: 'network.outgoing.bytes.rate', |
| 272 | label: 'Outgoing' |
| 273 | } |
| 274 | ]; |
| 275 | |
| 276 | ports.forEach((p, j) => { |
| 277 | |
| 278 | // if there are no port stats skip rendering |
| 279 | if(docker.port[p].length === 0){ |
| 280 | return; |
| 281 | } |
| 282 | |
| 283 | containerBox.append('text') |
| 284 | .attr({ |
| 285 | y: 90, |
| 286 | x: serviceTopologyConfig.instance.margin + (120 * j), |
| 287 | class: 'name' |
| 288 | }) |
| 289 | .text(`${docker.name}-${p}`) |
| 290 | |
| 291 | interestingPortMeters.forEach((m, i) => { |
| 292 | |
| 293 | const meter = lodash.find(docker.port[p], {meter: m.meter}); |
| 294 | // if there is no meter stats skip rendering |
| 295 | if(!angular.isDefined(meter)){ |
| 296 | return; |
| 297 | } |
| 298 | containerBox.append('text') |
| 299 | .attr({ |
| 300 | y: 105 + (i * 15), |
| 301 | x: serviceTopologyConfig.instance.margin + (120 * j), |
| 302 | opacity: 0 |
| 303 | }) |
| 304 | .text(`${m.label}: ${Math.round(meter.value)} ${meter.unit}`) |
| 305 | .transition() |
| 306 | .duration(serviceTopologyConfig.duration) |
| 307 | .attr({ |
| 308 | opacity: 1 |
| 309 | }); |
| 310 | }); |
| 311 | }); |
| 312 | } |
| 313 | |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 314 | const showInstanceStats = (container, instance) => { |
| 315 | |
| 316 | // NOTE this should be dinamically positioned |
| 317 | // base on the number of element present |
Matteo Scandolo | 963efd7 | 2016-03-10 08:59:27 -0800 | [diff] [blame] | 318 | |
| 319 | // fake the position |
| 320 | let translation = { |
| 321 | 'mysite_vsg-1': '200, -120', |
| 322 | 'mysite_vsg-2': '-300, 30', |
| 323 | 'mysite_vsg-3': '-300, -250', |
| 324 | }; |
| 325 | |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 326 | const statsContainer = container.append('g') |
| 327 | .attr({ |
Matteo Scandolo | 963efd7 | 2016-03-10 08:59:27 -0800 | [diff] [blame] | 328 | transform: `translate(${translation[instance.humanReadableName]})`, |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 329 | class: 'stats-container' |
Matteo Scandolo | 963efd7 | 2016-03-10 08:59:27 -0800 | [diff] [blame] | 330 | }) |
| 331 | .on('click', function(d) { |
| 332 | // toggling visisbility |
| 333 | d.fade = !d.fade; |
| 334 | let opacity; |
| 335 | if(d.fade){ |
| 336 | opacity = 0.1; |
| 337 | } |
| 338 | else{ |
| 339 | opacity = 1; |
| 340 | } |
| 341 | |
| 342 | d3.select(this) |
| 343 | .transition() |
| 344 | .duration(serviceTopologyConfig.duration) |
| 345 | .attr({ |
| 346 | opacity: opacity |
| 347 | }) |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 348 | }); |
| 349 | |
Matteo Scandolo | 963efd7 | 2016-03-10 08:59:27 -0800 | [diff] [blame] | 350 | let lines = { |
| 351 | 'mysite_vsg-1': { |
Matteo Scandolo | f0d6e69 | 2016-02-24 11:14:01 -0800 | [diff] [blame] | 352 | x1: -160, |
| 353 | y1: 120, |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 354 | x2: 0, |
| 355 | y2: 50, |
Matteo Scandolo | 963efd7 | 2016-03-10 08:59:27 -0800 | [diff] [blame] | 356 | }, |
| 357 | 'mysite_vsg-2': { |
| 358 | x1: 250, |
| 359 | y1: 50, |
| 360 | x2: 300, |
| 361 | y2: -10 |
| 362 | }, |
| 363 | 'mysite_vsg-3': { |
| 364 | x1: 250, |
| 365 | y1: 50, |
| 366 | x2: 300, |
| 367 | y2: 270 |
| 368 | } |
| 369 | } |
| 370 | |
| 371 | statsContainer.append('line') |
| 372 | .attr({ |
| 373 | x1: d => lines[d.humanReadableName].x1, |
| 374 | y1: d => lines[d.humanReadableName].y1, |
| 375 | x2: d => lines[d.humanReadableName].x2, |
| 376 | y2: d => lines[d.humanReadableName].y2, |
Matteo Scandolo | 6aa165f | 2016-02-23 14:03:03 -0800 | [diff] [blame] | 377 | stroke: 'black', |
| 378 | opacity: 0 |
| 379 | }) |
| 380 | .transition() |
| 381 | .duration(serviceTopologyConfig.duration) |
| 382 | .attr({ |
| 383 | opacity: 1 |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 384 | }) |
| 385 | |
| 386 | // NOTE rect should be dinamically sized base on the presence of a container |
| 387 | let statsHeight = 110; |
Matteo Scandolo | f0d6e69 | 2016-02-24 11:14:01 -0800 | [diff] [blame] | 388 | let statsWidth = 250; |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 389 | |
| 390 | if (instance.container){ |
| 391 | statsHeight += serviceTopologyConfig.container.height + (serviceTopologyConfig.container.margin * 2) |
| 392 | } |
| 393 | |
Matteo Scandolo | 963efd7 | 2016-03-10 08:59:27 -0800 | [diff] [blame] | 394 | const statsVignette = statsContainer.append('rect') |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 395 | .attr({ |
| 396 | width: statsWidth, |
Matteo Scandolo | 6aa165f | 2016-02-23 14:03:03 -0800 | [diff] [blame] | 397 | height: statsHeight, |
| 398 | opacity: 0 |
| 399 | }) |
| 400 | .transition() |
| 401 | .duration(serviceTopologyConfig.duration) |
| 402 | .attr({ |
| 403 | opacity: 1 |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 404 | }); |
| 405 | |
Matteo Scandolo | 963efd7 | 2016-03-10 08:59:27 -0800 | [diff] [blame] | 406 | |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 407 | // add instance info |
| 408 | statsContainer.append('text') |
| 409 | .attr({ |
| 410 | y: 15, |
| 411 | x: serviceTopologyConfig.instance.margin, |
Matteo Scandolo | 6aa165f | 2016-02-23 14:03:03 -0800 | [diff] [blame] | 412 | class: 'name', |
| 413 | opacity: 0 |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 414 | }) |
| 415 | .text(instance.humanReadableName) |
Matteo Scandolo | 6aa165f | 2016-02-23 14:03:03 -0800 | [diff] [blame] | 416 | .transition() |
| 417 | .duration(serviceTopologyConfig.duration) |
| 418 | .attr({ |
| 419 | opacity: 1 |
| 420 | }) |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 421 | |
| 422 | statsContainer.append('text') |
| 423 | .attr({ |
| 424 | y: 30, |
| 425 | x: serviceTopologyConfig.instance.margin, |
Matteo Scandolo | 6aa165f | 2016-02-23 14:03:03 -0800 | [diff] [blame] | 426 | class: 'ip', |
| 427 | opacity: 0 |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 428 | }) |
| 429 | .text(instance.ip) |
Matteo Scandolo | 6aa165f | 2016-02-23 14:03:03 -0800 | [diff] [blame] | 430 | .transition() |
| 431 | .duration(serviceTopologyConfig.duration) |
| 432 | .attr({ |
| 433 | opacity: 1 |
| 434 | }) |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 435 | |
| 436 | // add stats |
Matteo Scandolo | 963efd7 | 2016-03-10 08:59:27 -0800 | [diff] [blame] | 437 | const interestingMeters = ['memory', 'memory.usage', 'cpu', 'cpu_util']; |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 438 | |
| 439 | interestingMeters.forEach((m, i) => { |
| 440 | const meter = lodash.find(instance.stats, {meter: m}); |
Matteo Scandolo | 963efd7 | 2016-03-10 08:59:27 -0800 | [diff] [blame] | 441 | |
| 442 | if(meter){ |
| 443 | |
| 444 | statsContainer.append('text') |
| 445 | .attr({ |
| 446 | y: 55 + (i * 15), |
| 447 | x: serviceTopologyConfig.instance.margin, |
| 448 | opacity: 0 |
| 449 | }) |
| 450 | .text(`${meter.description}: ${Math.round(meter.value)} ${meter.unit}`) |
| 451 | .transition() |
| 452 | .duration(serviceTopologyConfig.duration) |
| 453 | .attr({ |
| 454 | opacity: 1 |
| 455 | }); |
| 456 | } |
| 457 | |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 458 | }); |
| 459 | |
| 460 | if(instance.container){ |
| 461 | // draw container |
Matteo Scandolo | f0d6e69 | 2016-02-24 11:14:01 -0800 | [diff] [blame] | 462 | drawContainer(statsContainer, instance.container); |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 463 | } |
| 464 | |
| 465 | }; |
| 466 | |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 467 | this.drawInstances = (container, instances) => { |
Matteo Scandolo | 5103148 | 2016-02-17 13:54:11 -0800 | [diff] [blame] | 468 | |
Matteo Scandolo | c49ff70 | 2016-02-17 15:11:33 -0800 | [diff] [blame] | 469 | // TODO check for stats field in instance and draw popup |
| 470 | |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 471 | let {width, height} = container.node().getBoundingClientRect(); |
| 472 | |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 473 | let elements = container.selectAll('.instances') |
| 474 | .data(instances, d => angular.isString(d.d3Id) ? d.d3Id : d.d3Id = `instance-${++instanceId}`) |
| 475 | |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 476 | var instanceContainer = elements.enter().append('g'); |
| 477 | |
| 478 | instanceContainer |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 479 | .attr({ |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 480 | transform: `translate(${width / 2}, ${ height / 2})`, |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 481 | class: d => `instance ${d.selected ? 'active' : ''} ${getInstanceStatusColor(d)}`, |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 482 | }) |
| 483 | .transition() |
| 484 | .duration(serviceTopologyConfig.duration) |
| 485 | .attr({ |
Matteo Scandolo | 5103148 | 2016-02-17 13:54:11 -0800 | [diff] [blame] | 486 | transform: (d, i) => `translate(${RackHelper.getInstancePosition(i)})` |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 487 | }); |
| 488 | |
| 489 | instanceContainer.append('rect') |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 490 | .attr({ |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 491 | width: 0, |
| 492 | height: 0 |
| 493 | }) |
| 494 | .transition() |
| 495 | .duration(serviceTopologyConfig.duration) |
| 496 | .attr({ |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 497 | width: serviceTopologyConfig.instance.width, |
| 498 | height: serviceTopologyConfig.instance.height |
| 499 | }); |
| 500 | |
| 501 | instanceContainer.append('text') |
| 502 | .attr({ |
Matteo Scandolo | 7030ceb | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 503 | 'text-anchor': 'middle', |
| 504 | y: 23, //FIXME |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 505 | x: 40, //FIXME |
| 506 | opacity: 0 |
Matteo Scandolo | ad5b228 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 507 | }) |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 508 | .text(d => formatInstanceName(d.humanReadableName)) |
Matteo Scandolo | 35d53c8 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 509 | .transition() |
| 510 | .duration(serviceTopologyConfig.duration) |
| 511 | .attr({ |
| 512 | opacity: 1 |
| 513 | }); |
Matteo Scandolo | 7030ceb | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 514 | |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 515 | // if stats are attached and instance is active, |
| 516 | // draw stats |
Matteo Scandolo | 6aa165f | 2016-02-23 14:03:03 -0800 | [diff] [blame] | 517 | instanceContainer.each(function(instance, i){ |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 518 | |
| 519 | const container = d3.select(this); |
| 520 | |
| 521 | if(angular.isDefined(instance.stats) && instance.selected){ |
Matteo Scandolo | 6aa165f | 2016-02-23 14:03:03 -0800 | [diff] [blame] | 522 | showInstanceStats(container, instance, i); |
Matteo Scandolo | 26d17e1 | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 523 | } |
| 524 | }); |
| 525 | |
Matteo Scandolo | 963efd7 | 2016-03-10 08:59:27 -0800 | [diff] [blame] | 526 | // instanceContainer |
| 527 | // .on('click', function(d){ |
| 528 | // console.log(`Draw vignette with stats for instance: ${d.name}`); |
| 529 | // }); |
Matteo Scandolo | 170d3be | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 530 | }; |
Matteo Scandolo | 9fe01af | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 531 | |
| 532 | this.addPhisical = (nodes) => { |
Matteo Scandolo | 3a176a2 | 2016-03-07 16:42:03 -0800 | [diff] [blame] | 533 | |
| 534 | nodes.select('rect').remove(); |
| 535 | nodes.select('text').remove(); |
| 536 | |
Matteo Scandolo | 9fe01af | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 537 | nodes.append('rect') |
| 538 | .attr(serviceTopologyConfig.square); |
| 539 | |
| 540 | nodes.append('text') |
| 541 | .attr({ |
| 542 | 'text-anchor': 'middle', |
| 543 | y: serviceTopologyConfig.square.y - 10 |
| 544 | }) |
Matteo Scandolo | d4ea877 | 2016-03-01 15:20:29 -0800 | [diff] [blame] | 545 | .text(d => { |
| 546 | return d.name || d.humanReadableName |
| 547 | }); |
Matteo Scandolo | 9fe01af | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 548 | } |
| 549 | |
| 550 | this.addDevice = (nodes) => { |
| 551 | nodes.append('circle') |
| 552 | .attr(serviceTopologyConfig.circle); |
| 553 | |
| 554 | nodes.append('text') |
| 555 | .attr({ |
| 556 | 'text-anchor': 'end', |
| 557 | x: - serviceTopologyConfig.circle.r - 10, |
| 558 | y: serviceTopologyConfig.circle.r / 2 |
| 559 | }) |
Matteo Scandolo | 50eeec6 | 2016-02-23 10:04:36 -0800 | [diff] [blame] | 560 | .text(d => d.name || d.mac); |
Matteo Scandolo | 9fe01af | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 561 | } |
| 562 | }); |
| 563 | })(); |