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, |
Matteo Scandolo | 7818510 | 2016-02-23 14:03:03 -0800 | [diff] [blame^] | 224 | stroke: 'black', |
| 225 | opacity: 0 |
| 226 | }) |
| 227 | .transition() |
| 228 | .duration(serviceTopologyConfig.duration) |
| 229 | .attr({ |
| 230 | opacity: 1 |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 231 | }) |
| 232 | |
| 233 | // NOTE rect should be dinamically sized base on the presence of a container |
| 234 | let statsHeight = 110; |
| 235 | let statsWidth = 200; |
| 236 | |
| 237 | if (instance.container){ |
| 238 | statsHeight += serviceTopologyConfig.container.height + (serviceTopologyConfig.container.margin * 2) |
| 239 | } |
| 240 | |
| 241 | statsContainer.append('rect') |
| 242 | .attr({ |
| 243 | width: statsWidth, |
Matteo Scandolo | 7818510 | 2016-02-23 14:03:03 -0800 | [diff] [blame^] | 244 | height: statsHeight, |
| 245 | opacity: 0 |
| 246 | }) |
| 247 | .transition() |
| 248 | .duration(serviceTopologyConfig.duration) |
| 249 | .attr({ |
| 250 | opacity: 1 |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 251 | }); |
| 252 | |
| 253 | // add instance info |
| 254 | statsContainer.append('text') |
| 255 | .attr({ |
| 256 | y: 15, |
| 257 | x: serviceTopologyConfig.instance.margin, |
Matteo Scandolo | 7818510 | 2016-02-23 14:03:03 -0800 | [diff] [blame^] | 258 | class: 'name', |
| 259 | opacity: 0 |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 260 | }) |
| 261 | .text(instance.humanReadableName) |
Matteo Scandolo | 7818510 | 2016-02-23 14:03:03 -0800 | [diff] [blame^] | 262 | .transition() |
| 263 | .duration(serviceTopologyConfig.duration) |
| 264 | .attr({ |
| 265 | opacity: 1 |
| 266 | }) |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 267 | |
| 268 | statsContainer.append('text') |
| 269 | .attr({ |
| 270 | y: 30, |
| 271 | x: serviceTopologyConfig.instance.margin, |
Matteo Scandolo | 7818510 | 2016-02-23 14:03:03 -0800 | [diff] [blame^] | 272 | class: 'ip', |
| 273 | opacity: 0 |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 274 | }) |
| 275 | .text(instance.ip) |
Matteo Scandolo | 7818510 | 2016-02-23 14:03:03 -0800 | [diff] [blame^] | 276 | .transition() |
| 277 | .duration(serviceTopologyConfig.duration) |
| 278 | .attr({ |
| 279 | opacity: 1 |
| 280 | }) |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 281 | |
| 282 | // add stats |
| 283 | const interestingMeters = ['memory', 'memory.usage', 'cpu', 'vcpus']; |
| 284 | |
| 285 | interestingMeters.forEach((m, i) => { |
| 286 | const meter = lodash.find(instance.stats, {meter: m}); |
| 287 | statsContainer.append('text') |
| 288 | .attr({ |
| 289 | y: 55 + (i * 15), |
Matteo Scandolo | 7818510 | 2016-02-23 14:03:03 -0800 | [diff] [blame^] | 290 | x: serviceTopologyConfig.instance.margin, |
| 291 | opacity: 0 |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 292 | }) |
Matteo Scandolo | 7818510 | 2016-02-23 14:03:03 -0800 | [diff] [blame^] | 293 | .text(`${meter.description}: ${meter.value} ${meter.unit}`) |
| 294 | .transition() |
| 295 | .duration(serviceTopologyConfig.duration) |
| 296 | .attr({ |
| 297 | opacity: 1 |
| 298 | }); |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 299 | }); |
| 300 | |
| 301 | if(instance.container){ |
| 302 | // draw container |
| 303 | |
| 304 | const containerBox = statsContainer.append('g') |
| 305 | .attr({ |
| 306 | class: 'container', |
| 307 | transform: `translate(${serviceTopologyConfig.instance.margin}, 115)` |
| 308 | }); |
| 309 | |
| 310 | containerBox.append('rect') |
| 311 | .attr({ |
| 312 | width: statsWidth - (serviceTopologyConfig.container.margin * 2), |
| 313 | height: serviceTopologyConfig.container.height, |
| 314 | }); |
| 315 | |
| 316 | containerBox.append('text') |
| 317 | .attr({ |
| 318 | y: 20, |
| 319 | x: (statsWidth - (serviceTopologyConfig.container.margin * 2)) / 2, |
| 320 | 'text-anchor': 'middle' |
| 321 | }) |
| 322 | .text(instance.container.name) |
| 323 | } |
| 324 | |
| 325 | }; |
| 326 | |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 327 | this.drawInstances = (container, instances) => { |
Matteo Scandolo | ba2d63d | 2016-02-17 13:54:11 -0800 | [diff] [blame] | 328 | |
Matteo Scandolo | c303fd0 | 2016-02-17 15:11:33 -0800 | [diff] [blame] | 329 | // TODO check for stats field in instance and draw popup |
| 330 | |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 331 | let {width, height} = container.node().getBoundingClientRect(); |
| 332 | |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 333 | let elements = container.selectAll('.instances') |
| 334 | .data(instances, d => angular.isString(d.d3Id) ? d.d3Id : d.d3Id = `instance-${++instanceId}`) |
| 335 | |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 336 | var instanceContainer = elements.enter().append('g'); |
| 337 | |
| 338 | instanceContainer |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 339 | .attr({ |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 340 | transform: `translate(${width / 2}, ${ height / 2})`, |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 341 | class: d => `instance ${d.selected ? 'active' : ''} ${getInstanceStatusColor(d)}`, |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 342 | }) |
| 343 | .transition() |
| 344 | .duration(serviceTopologyConfig.duration) |
| 345 | .attr({ |
Matteo Scandolo | ba2d63d | 2016-02-17 13:54:11 -0800 | [diff] [blame] | 346 | transform: (d, i) => `translate(${RackHelper.getInstancePosition(i)})` |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 347 | }); |
| 348 | |
| 349 | instanceContainer.append('rect') |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 350 | .attr({ |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 351 | width: 0, |
| 352 | height: 0 |
| 353 | }) |
| 354 | .transition() |
| 355 | .duration(serviceTopologyConfig.duration) |
| 356 | .attr({ |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 357 | width: serviceTopologyConfig.instance.width, |
| 358 | height: serviceTopologyConfig.instance.height |
| 359 | }); |
| 360 | |
| 361 | instanceContainer.append('text') |
| 362 | .attr({ |
Matteo Scandolo | 0cfd5a2 | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 363 | 'text-anchor': 'middle', |
| 364 | y: 23, //FIXME |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 365 | x: 40, //FIXME |
| 366 | opacity: 0 |
Matteo Scandolo | b785b57 | 2016-02-16 11:50:51 -0800 | [diff] [blame] | 367 | }) |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 368 | .text(d => formatInstanceName(d.humanReadableName)) |
Matteo Scandolo | 7fd4d04 | 2016-02-16 14:44:51 -0800 | [diff] [blame] | 369 | .transition() |
| 370 | .duration(serviceTopologyConfig.duration) |
| 371 | .attr({ |
| 372 | opacity: 1 |
| 373 | }); |
Matteo Scandolo | 0cfd5a2 | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 374 | |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 375 | // if stats are attached and instance is active, |
| 376 | // draw stats |
Matteo Scandolo | 7818510 | 2016-02-23 14:03:03 -0800 | [diff] [blame^] | 377 | instanceContainer.each(function(instance, i){ |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 378 | |
| 379 | const container = d3.select(this); |
| 380 | |
| 381 | if(angular.isDefined(instance.stats) && instance.selected){ |
Matteo Scandolo | 7818510 | 2016-02-23 14:03:03 -0800 | [diff] [blame^] | 382 | showInstanceStats(container, instance, i); |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 383 | } |
| 384 | }); |
| 385 | |
Matteo Scandolo | 0cfd5a2 | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 386 | instanceContainer |
Matteo Scandolo | 06afdfe | 2016-02-23 13:47:14 -0800 | [diff] [blame] | 387 | .on('click', function(d){ |
| 388 | console.log(`Draw vignette with stats for instance: ${d.name}`); |
Matteo Scandolo | 0cfd5a2 | 2016-02-16 13:29:26 -0800 | [diff] [blame] | 389 | }); |
Matteo Scandolo | 1418393 | 2016-02-11 08:58:04 -0800 | [diff] [blame] | 390 | }; |
Matteo Scandolo | 38ba331 | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 391 | |
| 392 | this.addPhisical = (nodes) => { |
| 393 | nodes.append('rect') |
| 394 | .attr(serviceTopologyConfig.square); |
| 395 | |
| 396 | nodes.append('text') |
| 397 | .attr({ |
| 398 | 'text-anchor': 'middle', |
| 399 | y: serviceTopologyConfig.square.y - 10 |
| 400 | }) |
| 401 | .text(d => d.name); |
| 402 | } |
| 403 | |
| 404 | this.addDevice = (nodes) => { |
| 405 | nodes.append('circle') |
| 406 | .attr(serviceTopologyConfig.circle); |
| 407 | |
| 408 | nodes.append('text') |
| 409 | .attr({ |
| 410 | 'text-anchor': 'end', |
| 411 | x: - serviceTopologyConfig.circle.r - 10, |
| 412 | y: serviceTopologyConfig.circle.r / 2 |
| 413 | }) |
Matteo Scandolo | db8a185 | 2016-02-23 10:04:36 -0800 | [diff] [blame] | 414 | .text(d => d.name || d.mac); |
Matteo Scandolo | 38ba331 | 2016-02-09 16:01:49 -0800 | [diff] [blame] | 415 | } |
| 416 | }); |
| 417 | })(); |