Committed by
Gerrit Code Review
Reverting the theme to light for the demo and switching icons set.
Change-Id: Ic3f7b46ce56100aabc1b7df3370218cbfd94db0c
Showing
15 changed files
with
165 additions
and
217 deletions
tools/test/topos/sdn-ip.json
0 → 100644
1 | +{ | ||
2 | + "hosts" : [ | ||
3 | + { "mac": "00:00:00:00:00:01", "vlan": -1, "location": "of:0000000000000001/10", "ip": "0.0.0.0", "annotations": { "type": "bgpSpeaker" } }, | ||
4 | + { "mac": "00:00:00:00:00:02", "vlan": -1, "location": "of:0000000000000002/10", "ip": "0.0.0.0", "annotations": { "type": "bgpSpeaker" } }, | ||
5 | + { "mac": "00:00:00:00:00:03", "vlan": -1, "location": "of:0000000000000003/10", "ip": "0.0.0.0", "annotations": { "type": "bgpSpeaker" } }, | ||
6 | + { "mac": "00:00:00:00:01:01", "vlan": -1, "location": "of:0000000000000005/10", "ip": "0.0.0.0", "annotations": { "type": "router" } }, | ||
7 | + { "mac": "00:00:00:00:01:02", "vlan": -1, "location": "of:0000000000000006/10", "ip": "0.0.0.0", "annotations": { "type": "router" } }, | ||
8 | + { "mac": "00:00:00:00:02:01", "vlan": -1, "location": "of:0000000000000007/10", "ip": "0.0.0.0", "annotations": { "type": "router" } }, | ||
9 | + { "mac": "00:00:00:00:03:01", "vlan": -1, "location": "of:0000000000000008/10", "ip": "0.0.0.0", "annotations": { "type": "router" } }, | ||
10 | + { "mac": "00:00:00:00:04:01", "vlan": -1, "location": "of:0000000000000009/10", "ip": "0.0.0.0", "annotations": { "type": "router" } }, | ||
11 | + { "mac": "00:00:00:00:44:01", "vlan": -1, "location": "of:0000000000000010/10", "ip": "0.0.0.0", "annotations": { "type": "router" } } | ||
12 | + ] | ||
13 | +} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
... | @@ -63,6 +63,7 @@ import java.util.Set; | ... | @@ -63,6 +63,7 @@ import java.util.Set; |
63 | import java.util.concurrent.ConcurrentHashMap; | 63 | import java.util.concurrent.ConcurrentHashMap; |
64 | 64 | ||
65 | import static com.google.common.base.Preconditions.checkNotNull; | 65 | import static com.google.common.base.Preconditions.checkNotNull; |
66 | +import static com.google.common.base.Strings.isNullOrEmpty; | ||
66 | import static org.onlab.onos.cluster.ClusterEvent.Type.INSTANCE_ADDED; | 67 | import static org.onlab.onos.cluster.ClusterEvent.Type.INSTANCE_ADDED; |
67 | import static org.onlab.onos.cluster.ClusterEvent.Type.INSTANCE_REMOVED; | 68 | import static org.onlab.onos.cluster.ClusterEvent.Type.INSTANCE_REMOVED; |
68 | import static org.onlab.onos.cluster.ControllerNode.State.ACTIVE; | 69 | import static org.onlab.onos.cluster.ControllerNode.State.ACTIVE; |
... | @@ -253,8 +254,10 @@ public abstract class TopologyViewMessages { | ... | @@ -253,8 +254,10 @@ public abstract class TopologyViewMessages { |
253 | // Produces a host event message to the client. | 254 | // Produces a host event message to the client. |
254 | protected ObjectNode hostMessage(HostEvent event) { | 255 | protected ObjectNode hostMessage(HostEvent event) { |
255 | Host host = event.subject(); | 256 | Host host = event.subject(); |
257 | + String hostType = host.annotations().value("type"); | ||
256 | ObjectNode payload = mapper.createObjectNode() | 258 | ObjectNode payload = mapper.createObjectNode() |
257 | .put("id", host.id().toString()) | 259 | .put("id", host.id().toString()) |
260 | + .put("type", isNullOrEmpty(hostType) ? "host" : hostType) | ||
258 | .put("ingress", compactLinkString(edgeLink(host, true))) | 261 | .put("ingress", compactLinkString(edgeLink(host, true))) |
259 | .put("egress", compactLinkString(edgeLink(host, false))); | 262 | .put("egress", compactLinkString(edgeLink(host, false))); |
260 | payload.set("cp", hostConnect(mapper, host.location())); | 263 | payload.set("cp", hostConnect(mapper, host.location())); |
... | @@ -358,8 +361,10 @@ public abstract class TopologyViewMessages { | ... | @@ -358,8 +361,10 @@ public abstract class TopologyViewMessages { |
358 | protected ObjectNode hostDetails(HostId hostId, long sid) { | 361 | protected ObjectNode hostDetails(HostId hostId, long sid) { |
359 | Host host = hostService.getHost(hostId); | 362 | Host host = hostService.getHost(hostId); |
360 | Annotations annot = host.annotations(); | 363 | Annotations annot = host.annotations(); |
364 | + String type = annot.value("type"); | ||
361 | return envelope("showDetails", sid, | 365 | return envelope("showDetails", sid, |
362 | - json(hostId.toString(), "host", | 366 | + json(hostId.toString(), isNullOrEmpty(type) ? "host" : type, |
367 | + new Prop("Name", annot.value("name")), | ||
363 | new Prop("MAC", host.mac().toString()), | 368 | new Prop("MAC", host.mac().toString()), |
364 | new Prop("IP", host.ipAddresses().toString()), | 369 | new Prop("IP", host.ipAddresses().toString()), |
365 | new Separator(), | 370 | new Separator(), | ... | ... |
web/gui/src/main/webapp/icons.svg
deleted
100644 → 0
This diff is collapsed. Click to expand it.
9.27 KB
web/gui/src/main/webapp/img/opt.png
deleted
100644 → 0
1.48 KB
web/gui/src/main/webapp/img/pkt.png
deleted
100644 → 0
2.07 KB
28.5 KB
... | @@ -40,14 +40,12 @@ | ... | @@ -40,14 +40,12 @@ |
40 | <!-- Base library and framework stylesheets included here --> | 40 | <!-- Base library and framework stylesheets included here --> |
41 | <link rel="stylesheet" href="base.css"> | 41 | <link rel="stylesheet" href="base.css"> |
42 | <link rel="stylesheet" href="onos2.css"> | 42 | <link rel="stylesheet" href="onos2.css"> |
43 | - <link rel="stylesheet" href="onos_theme.css"> | ||
44 | <link rel="stylesheet" href="mast2.css"> | 43 | <link rel="stylesheet" href="mast2.css"> |
45 | <link rel="stylesheet" href="floatPanel.css"> | 44 | <link rel="stylesheet" href="floatPanel.css"> |
46 | 45 | ||
47 | <!-- This is where contributed stylesheets get INJECTED --> | 46 | <!-- This is where contributed stylesheets get INJECTED --> |
48 | <!-- TODO: replace with template marker and inject refs server-side --> | 47 | <!-- TODO: replace with template marker and inject refs server-side --> |
49 | <link rel="stylesheet" href="topo2.css"> | 48 | <link rel="stylesheet" href="topo2.css"> |
50 | - <link rel="stylesheet" href="topo_theme.css"> | ||
51 | <link rel="stylesheet" href="webSockTrace.css"> | 49 | <link rel="stylesheet" href="webSockTrace.css"> |
52 | 50 | ||
53 | 51 | ||
... | @@ -58,7 +56,7 @@ | ... | @@ -58,7 +56,7 @@ |
58 | <script src="onos2.js"></script> | 56 | <script src="onos2.js"></script> |
59 | 57 | ||
60 | </head> | 58 | </head> |
61 | -<body class='theme_dark'> | 59 | +<body> |
62 | <div id="frame"> | 60 | <div id="frame"> |
63 | <div id="mast"> | 61 | <div id="mast"> |
64 | <!-- NOTE: masthead injected here by mast.js --> | 62 | <!-- NOTE: masthead injected here by mast.js --> | ... | ... |
File mode changed
... | @@ -25,11 +25,14 @@ | ... | @@ -25,11 +25,14 @@ |
25 | } | 25 | } |
26 | 26 | ||
27 | #topo #map { | 27 | #topo #map { |
28 | + stroke-width: 2px; | ||
29 | + stroke: #aaaaaa; | ||
28 | fill: transparent; | 30 | fill: transparent; |
29 | } | 31 | } |
30 | 32 | ||
31 | 33 | ||
32 | #topo svg .glyph { | 34 | #topo svg .glyph { |
35 | + fill: white; | ||
33 | stroke: none; | 36 | stroke: none; |
34 | } | 37 | } |
35 | 38 | ||
... | @@ -65,20 +68,39 @@ | ... | @@ -65,20 +68,39 @@ |
65 | 68 | ||
66 | #topo svg .node.device.fixed rect { | 69 | #topo svg .node.device.fixed rect { |
67 | stroke-width: 1.5; | 70 | stroke-width: 1.5; |
71 | + stroke: #ccc; | ||
72 | +} | ||
73 | + | ||
74 | +/* note: device is offline without the 'online' class */ | ||
75 | +#topo svg .node.device { | ||
76 | + fill: #777; | ||
68 | } | 77 | } |
69 | 78 | ||
70 | -#topo .node text { | 79 | +#topo svg .node.device.switch.online { |
71 | - font-weight: 100; | 80 | + fill: #17f; |
81 | +} | ||
82 | + | ||
83 | +#topo svg .node.device.roadm.online { | ||
84 | + fill: #03c; | ||
72 | } | 85 | } |
73 | 86 | ||
74 | -/* note: device is offline without the 'online' class */ | ||
75 | /* note: device is offline without the 'online' class */ | 87 | /* note: device is offline without the 'online' class */ |
76 | #topo svg .node.device text { | 88 | #topo svg .node.device text { |
89 | + fill: #aaa; | ||
77 | font: 10pt sans-serif; | 90 | font: 10pt sans-serif; |
78 | } | 91 | } |
79 | 92 | ||
93 | +#topo svg .node.device.online text { | ||
94 | + fill: white; | ||
95 | +} | ||
96 | + | ||
97 | + | ||
80 | /* Host Nodes */ | 98 | /* Host Nodes */ |
81 | 99 | ||
100 | +#topo svg .node.host { | ||
101 | + stroke: #000; | ||
102 | +} | ||
103 | + | ||
82 | #topo svg .node.host text { | 104 | #topo svg .node.host text { |
83 | fill: #846; | 105 | fill: #846; |
84 | stroke: none; | 106 | stroke: none; |
... | @@ -86,11 +108,18 @@ | ... | @@ -86,11 +108,18 @@ |
86 | } | 108 | } |
87 | 109 | ||
88 | svg .node.host circle { | 110 | svg .node.host circle { |
89 | - fill: #c96; | 111 | + stroke: #000; |
112 | + fill: #ddd; | ||
90 | } | 113 | } |
91 | 114 | ||
92 | #topo svg .node.host.bgpSpeaker circle { | 115 | #topo svg .node.host.bgpSpeaker circle { |
93 | - fill: #853; | 116 | + stroke: #000; |
117 | + fill: #ddd; | ||
118 | +} | ||
119 | + | ||
120 | +#topo svg .node.host.router circle { | ||
121 | + stroke: #000; | ||
122 | + fill: #ddd; | ||
94 | } | 123 | } |
95 | 124 | ||
96 | /* LINKS */ | 125 | /* LINKS */ |
... | @@ -105,23 +134,29 @@ svg .node.host circle { | ... | @@ -105,23 +134,29 @@ svg .node.host circle { |
105 | } | 134 | } |
106 | 135 | ||
107 | #topo svg .link.primary { | 136 | #topo svg .link.primary { |
137 | + stroke: #f11; | ||
108 | stroke-width: 6px; | 138 | stroke-width: 6px; |
109 | } | 139 | } |
110 | #topo svg .link.secondary { | 140 | #topo svg .link.secondary { |
141 | + stroke: rgba(255,100,100,0.5); | ||
111 | stroke-width: 4px; | 142 | stroke-width: 4px; |
112 | } | 143 | } |
113 | #topo svg .link.animated { | 144 | #topo svg .link.animated { |
145 | + stroke: #f11; | ||
114 | stroke-width: 10px; | 146 | stroke-width: 10px; |
115 | stroke-dasharray: 8 8 | 147 | stroke-dasharray: 8 8 |
116 | } | 148 | } |
117 | 149 | ||
118 | #topo svg .link.primary.optical { | 150 | #topo svg .link.primary.optical { |
151 | + stroke: #74f; | ||
119 | stroke-width: 6px; | 152 | stroke-width: 6px; |
120 | } | 153 | } |
121 | #topo svg .link.secondary.optical { | 154 | #topo svg .link.secondary.optical { |
155 | + stroke: rgba(128,64,255,0.5); | ||
122 | stroke-width: 4px; | 156 | stroke-width: 4px; |
123 | } | 157 | } |
124 | #topo svg .link.animated.optical { | 158 | #topo svg .link.animated.optical { |
159 | + stroke: #74f; | ||
125 | stroke-width: 10px; | 160 | stroke-width: 10px; |
126 | stroke-dasharray: 8 8 | 161 | stroke-dasharray: 8 8 |
127 | } | 162 | } |
... | @@ -177,13 +212,17 @@ svg .node.host circle { | ... | @@ -177,13 +212,17 @@ svg .node.host circle { |
177 | cursor: pointer; | 212 | cursor: pointer; |
178 | width: 50%; | 213 | width: 50%; |
179 | text-align: center; | 214 | text-align: center; |
180 | - border-width: 1px; | 215 | + |
181 | - borer-style: solid; | 216 | + /* theme specific... */ |
217 | + border: 1px solid #ddf; | ||
218 | + color: #99f; | ||
182 | } | 219 | } |
183 | 220 | ||
184 | #topo-detail .actionBtn:hover { | 221 | #topo-detail .actionBtn:hover { |
185 | - border-width: 1px; | 222 | + /* theme specific... */ |
186 | - border-style: solid; | 223 | + border: 1px solid #ddf; |
224 | + background: #eef; | ||
225 | + color: #77d; | ||
187 | } | 226 | } |
188 | 227 | ||
189 | 228 | ||
... | @@ -207,14 +246,29 @@ svg .node.host circle { | ... | @@ -207,14 +246,29 @@ svg .node.host circle { |
207 | height: 80px; | 246 | height: 80px; |
208 | margin: 4px 0; | 247 | margin: 4px 0; |
209 | cursor: pointer; | 248 | cursor: pointer; |
210 | - border-width: 2px; | 249 | + |
211 | - border-style: solid; | 250 | + /* theme-related */ |
251 | + color: #444; | ||
252 | + background-color: #ccc; | ||
253 | + border: 2px solid #aaa; | ||
254 | +} | ||
255 | + | ||
256 | +#topo-oibox .onosInst.online { | ||
257 | + /* theme-related */ | ||
258 | + color: #113; | ||
259 | + background-color: #bbf; | ||
260 | + border: 2px solid #555; | ||
212 | } | 261 | } |
213 | 262 | ||
214 | #topo-oibox .onosInst .onosTitle { | 263 | #topo-oibox .onosInst .onosTitle { |
215 | text-align: center; | 264 | text-align: center; |
216 | font-size: 11pt; | 265 | font-size: 11pt; |
217 | margin-top: 6px; | 266 | margin-top: 6px; |
267 | + color: #888; | ||
268 | +} | ||
269 | + | ||
270 | +#topo-oibox .onosInst.online .onosTitle { | ||
271 | + color: black; | ||
218 | } | 272 | } |
219 | 273 | ||
220 | #topo-oibox .onosInst img { | 274 | #topo-oibox .onosInst img { | ... | ... |
... | @@ -70,17 +70,23 @@ | ... | @@ -70,17 +70,23 @@ |
70 | } | 70 | } |
71 | }, | 71 | }, |
72 | topo: { | 72 | topo: { |
73 | + linkBaseColor: '#666', | ||
73 | linkInColor: '#66f', | 74 | linkInColor: '#66f', |
74 | - linkOutColor: '#f00', | ||
75 | linkInWidth: 14, | 75 | linkInWidth: 14, |
76 | + linkOutColor: '#f00', | ||
76 | linkOutWidth: 30 | 77 | linkOutWidth: 30 |
77 | }, | 78 | }, |
78 | - map: { | ||
79 | - strokeWidth: 1 | ||
80 | - }, | ||
81 | icons: { | 79 | icons: { |
82 | - w: 100, | 80 | + w: 24, |
83 | - h: 100 | 81 | + h: 24, |
82 | + xoff: -10, | ||
83 | + yoff: -6 | ||
84 | + }, | ||
85 | + iconUrl: { | ||
86 | + device: 'img/device.png', | ||
87 | + host: 'img/host.png', | ||
88 | + pkt: 'img/pkt.png', | ||
89 | + opt: 'img/opt.png' | ||
84 | }, | 90 | }, |
85 | force: { | 91 | force: { |
86 | note_for_links: 'link.type is used to differentiate', | 92 | note_for_links: 'link.type is used to differentiate', |
... | @@ -330,6 +336,7 @@ | ... | @@ -330,6 +336,7 @@ |
330 | var layerLookup = { | 336 | var layerLookup = { |
331 | host: { | 337 | host: { |
332 | endstation: 'pkt', // default, if host event does not define type | 338 | endstation: 'pkt', // default, if host event does not define type |
339 | + router: 'pkt', | ||
333 | bgpSpeaker: 'pkt' | 340 | bgpSpeaker: 'pkt' |
334 | }, | 341 | }, |
335 | device: { | 342 | device: { |
... | @@ -526,7 +533,8 @@ | ... | @@ -526,7 +533,8 @@ |
526 | } | 533 | } |
527 | el.transition() | 534 | el.transition() |
528 | .duration(1000) | 535 | .duration(1000) |
529 | - .attr('stroke-width', linkScale(lw)); | 536 | + .attr('stroke-width', linkScale(lw)) |
537 | + .attr('stroke', config.topo.linkBaseColor); | ||
530 | } | 538 | } |
531 | 539 | ||
532 | // ============================== | 540 | // ============================== |
... | @@ -1227,8 +1235,8 @@ | ... | @@ -1227,8 +1235,8 @@ |
1227 | $.extend(node, xy); | 1235 | $.extend(node, xy); |
1228 | } | 1236 | } |
1229 | 1237 | ||
1230 | - function getIconUrl(d) { | 1238 | + function iconUrl(d) { |
1231 | - return 'icons.svg#' + d.type; | 1239 | + return 'img/' + d.type + '.png'; |
1232 | } | 1240 | } |
1233 | 1241 | ||
1234 | // returns the newly computed bounding box of the rectangle | 1242 | // returns the newly computed bounding box of the rectangle |
... | @@ -1270,29 +1278,6 @@ | ... | @@ -1270,29 +1278,6 @@ |
1270 | return (label && label.trim()) ? label : '.'; | 1278 | return (label && label.trim()) ? label : '.'; |
1271 | } | 1279 | } |
1272 | 1280 | ||
1273 | - function updateDeviceIconAppearance(node, box, animate) { | ||
1274 | - var u = node.select('use'); | ||
1275 | - var ubbox = u.node().getBBox(); | ||
1276 | - | ||
1277 | - var xoff = -ubbox.width/2 - box.width/2 - 4; | ||
1278 | - var yoff = -ubbox.height; | ||
1279 | - var iconTransform = 'translate(' + xoff + ',' + yoff + ')'; | ||
1280 | - if (animate) { | ||
1281 | - node.select('use') | ||
1282 | - .transition() | ||
1283 | - .attr('transform', iconTransform); | ||
1284 | - } else { | ||
1285 | - node.select('use') | ||
1286 | - .attr('transform', iconTransform); | ||
1287 | - } | ||
1288 | - | ||
1289 | - var computedStyle = window.getComputedStyle(node.node()); | ||
1290 | - u.attr({ | ||
1291 | - fill: computedStyle.fill, | ||
1292 | - color: computedStyle.color | ||
1293 | - }); | ||
1294 | - } | ||
1295 | - | ||
1296 | function updateDeviceLabel(d) { | 1281 | function updateDeviceLabel(d) { |
1297 | var label = niceLabel(deviceLabel(d)), | 1282 | var label = niceLabel(deviceLabel(d)), |
1298 | node = d.el, | 1283 | node = d.el, |
... | @@ -1310,7 +1295,10 @@ | ... | @@ -1310,7 +1295,10 @@ |
1310 | .transition() | 1295 | .transition() |
1311 | .attr(box); | 1296 | .attr(box); |
1312 | 1297 | ||
1313 | - updateDeviceIconAppearance(node, box, true); | 1298 | + node.select('image') |
1299 | + .transition() | ||
1300 | + .attr('x', box.x + config.icons.xoff) | ||
1301 | + .attr('y', box.y + config.icons.yoff); | ||
1314 | } | 1302 | } |
1315 | 1303 | ||
1316 | function updateHostLabel(d) { | 1304 | function updateHostLabel(d) { |
... | @@ -1352,6 +1340,17 @@ | ... | @@ -1352,6 +1340,17 @@ |
1352 | } | 1340 | } |
1353 | } | 1341 | } |
1354 | 1342 | ||
1343 | + function addHostIcon(node, radius, iconId) { | ||
1344 | + var dim = radius * 1.5, | ||
1345 | + xlate = -dim / 2; | ||
1346 | + | ||
1347 | + node.append('svg:image') | ||
1348 | + .attr('transform', translate(xlate,xlate)) | ||
1349 | + .attr('xlink:href', 'img/' + iconId + '.png') | ||
1350 | + .attr('width', dim) | ||
1351 | + .attr('height', dim); | ||
1352 | + } | ||
1353 | + | ||
1355 | function updateNodes() { | 1354 | function updateNodes() { |
1356 | node = nodeG.selectAll('.node') | 1355 | node = nodeG.selectAll('.node') |
1357 | .data(network.nodes, function (d) { return d.id; }); | 1356 | .data(network.nodes, function (d) { return d.id; }); |
... | @@ -1378,7 +1377,7 @@ | ... | @@ -1378,7 +1377,7 @@ |
1378 | // augment device nodes... | 1377 | // augment device nodes... |
1379 | entering.filter('.device').each(function (d) { | 1378 | entering.filter('.device').each(function (d) { |
1380 | var node = d3.select(this), | 1379 | var node = d3.select(this), |
1381 | - iconUrl = getIconUrl(d), | 1380 | + icon = iconUrl(d), |
1382 | label = niceLabel(deviceLabel(d)), | 1381 | label = niceLabel(deviceLabel(d)), |
1383 | box; | 1382 | box; |
1384 | 1383 | ||
... | @@ -1400,17 +1399,29 @@ | ... | @@ -1400,17 +1399,29 @@ |
1400 | node.select('rect') | 1399 | node.select('rect') |
1401 | .attr(box); | 1400 | .attr(box); |
1402 | 1401 | ||
1403 | - if (iconUrl) { | 1402 | + if (icon) { |
1404 | - node.append('svg:use') | 1403 | + var cfg = config.icons; |
1404 | + node.append('rect') | ||
1405 | + .attr({ | ||
1406 | + x: box.x + config.icons.xoff, | ||
1407 | + y: box.y + config.icons.yoff, | ||
1408 | + width: cfg.w, | ||
1409 | + height: cfg.h, | ||
1410 | + rx: 4 | ||
1411 | + }).style({ | ||
1412 | + stroke: '#000', | ||
1413 | + fill: '#ddd' | ||
1414 | + }); | ||
1415 | + node.append('svg:image') | ||
1405 | .attr({ | 1416 | .attr({ |
1406 | - 'xlink:href': iconUrl, | 1417 | + x: box.x + config.icons.xoff + 2, |
1407 | - width: config.icons.w, | 1418 | + y: box.y + config.icons.yoff + 2, |
1408 | - height: config.icons.h | 1419 | + width: cfg.w - 4, |
1420 | + height: cfg.h - 4, | ||
1421 | + 'xlink:href': icon | ||
1409 | }); | 1422 | }); |
1410 | } | 1423 | } |
1411 | 1424 | ||
1412 | - updateDeviceIconAppearance(node, box, false); | ||
1413 | - | ||
1414 | // debug function to show the modelled x,y coordinates of nodes... | 1425 | // debug function to show the modelled x,y coordinates of nodes... |
1415 | if (debug('showNodeXY')) { | 1426 | if (debug('showNodeXY')) { |
1416 | node.select('rect').attr('fill-opacity', 0.5); | 1427 | node.select('rect').attr('fill-opacity', 0.5); |
... | @@ -1424,43 +1435,41 @@ | ... | @@ -1424,43 +1435,41 @@ |
1424 | } | 1435 | } |
1425 | }); | 1436 | }); |
1426 | 1437 | ||
1438 | + // TODO: better place for this configuration state | ||
1439 | + var defaultHostRadius = 9, | ||
1440 | + hostRadius = { | ||
1441 | + bgpSpeaker: 14, | ||
1442 | + router: 14, | ||
1443 | + host: 14 | ||
1444 | + }, | ||
1445 | + hostIcon = { | ||
1446 | + bgpSpeaker: 'bgpSpeaker', | ||
1447 | + router: 'router', | ||
1448 | + host: 'host' | ||
1449 | + }; | ||
1450 | + | ||
1451 | + | ||
1427 | // augment host nodes... | 1452 | // augment host nodes... |
1428 | entering.filter('.host').each(function (d) { | 1453 | entering.filter('.host').each(function (d) { |
1429 | var node = d3.select(this), | 1454 | var node = d3.select(this), |
1430 | - iconUrl = getIconUrl(d); | 1455 | + r = hostRadius[d.type] || defaultHostRadius, |
1456 | + textDy = r + 10, | ||
1457 | + icon = hostIcon[d.type]; | ||
1431 | 1458 | ||
1432 | // provide ref to element from backing data.... | 1459 | // provide ref to element from backing data.... |
1433 | d.el = node; | 1460 | d.el = node; |
1434 | 1461 | ||
1435 | - // var box = node.append('circle') | 1462 | + node.append('circle') |
1436 | - // .attr('r', r).node().getBBox(); | 1463 | + .attr('r', r); |
1437 | - | ||
1438 | - var textYOff = 0; | ||
1439 | - var textXOff = 0; | ||
1440 | - if (iconUrl) { | ||
1441 | - var computedStyle = window.getComputedStyle(node.node()); | ||
1442 | - var u = node.append('svg:use') | ||
1443 | - .attr({ | ||
1444 | - 'xlink:href': iconUrl, | ||
1445 | - width: config.icons.w, | ||
1446 | - height: config.icons.h, | ||
1447 | - fill: computedStyle.fill, | ||
1448 | - color: computedStyle.color | ||
1449 | - }); | ||
1450 | 1464 | ||
1451 | - var ubbox = node.select('use').node().getBBox(); | 1465 | + if (icon) { |
1452 | - u.attr('y', -ubbox.height/2); | 1466 | + addHostIcon(node, r, icon); |
1453 | - textYOff = ubbox.height/2 + 4; // pad by 4 pixels | ||
1454 | - textXOff = ubbox.width/2; | ||
1455 | } | 1467 | } |
1456 | 1468 | ||
1457 | 1469 | ||
1458 | - | ||
1459 | node.append('text') | 1470 | node.append('text') |
1460 | .text(hostLabel) | 1471 | .text(hostLabel) |
1461 | - .attr('alignment-baseline', 'text-before-edge') | 1472 | + .attr('dy', textDy) |
1462 | - .attr('x', textXOff) | ||
1463 | - .attr('y', textYOff) | ||
1464 | .attr('text-anchor', 'middle'); | 1473 | .attr('text-anchor', 'middle'); |
1465 | 1474 | ||
1466 | // debug function to show the modelled x,y coordinates of nodes... | 1475 | // debug function to show the modelled x,y coordinates of nodes... |
... | @@ -1499,9 +1508,9 @@ | ... | @@ -1499,9 +1508,9 @@ |
1499 | .style('opacity', 0); | 1508 | .style('opacity', 0); |
1500 | // note, leave <g>.remove to remove this element | 1509 | // note, leave <g>.remove to remove this element |
1501 | 1510 | ||
1502 | - node.select('use') | 1511 | + node.select('circle') |
1503 | - .style('color', '#aaa') | 1512 | + .style('stroke-fill', '#555') |
1504 | - .style('fill', '#000') | 1513 | + .style('fill', '#888') |
1505 | .style('opacity', 0.5) | 1514 | .style('opacity', 0.5) |
1506 | .transition() | 1515 | .transition() |
1507 | .duration(1500) | 1516 | .duration(1500) |
... | @@ -1858,7 +1867,7 @@ | ... | @@ -1858,7 +1867,7 @@ |
1858 | function zoomPan(scale, translate) { | 1867 | function zoomPan(scale, translate) { |
1859 | zoomPanContainer.attr("transform", "translate(" + translate + ")scale(" + scale + ")"); | 1868 | zoomPanContainer.attr("transform", "translate(" + translate + ")scale(" + scale + ")"); |
1860 | // keep the map lines constant width while zooming | 1869 | // keep the map lines constant width while zooming |
1861 | - bgImg.attr("stroke-width", config.map.strokeWidth / scale + "px"); | 1870 | + bgImg.style("stroke-width", 2.0 / scale + "px"); |
1862 | } | 1871 | } |
1863 | 1872 | ||
1864 | function resetZoomPan() { | 1873 | function resetZoomPan() { |
... | @@ -1977,27 +1986,6 @@ | ... | @@ -1977,27 +1986,6 @@ |
1977 | gly.defBullhorn(defs); | 1986 | gly.defBullhorn(defs); |
1978 | } | 1987 | } |
1979 | 1988 | ||
1980 | - // create references to bring these into cache so that getBBox() works when they | ||
1981 | - // are inserted later | ||
1982 | - function preloadIcons(svg) { | ||
1983 | - var icons = [ | ||
1984 | - "router", | ||
1985 | - "switch", | ||
1986 | - "roadm", | ||
1987 | - "endstation", | ||
1988 | - "bgpSpeaker" | ||
1989 | - ]; | ||
1990 | - | ||
1991 | - var g = svg.append('g'); | ||
1992 | - for (var icon in icons) { | ||
1993 | - g.append('use') | ||
1994 | - .attr({ | ||
1995 | - 'xlink:href': 'icons.svg#' + icon | ||
1996 | - }); | ||
1997 | - } | ||
1998 | - g.style('visibility', 'hidden'); | ||
1999 | - } | ||
2000 | - | ||
2001 | // ============================== | 1989 | // ============================== |
2002 | // View life-cycle callbacks | 1990 | // View life-cycle callbacks |
2003 | 1991 | ||
... | @@ -2014,7 +2002,6 @@ | ... | @@ -2014,7 +2002,6 @@ |
2014 | setSize(svg, view); | 2002 | setSize(svg, view); |
2015 | 2003 | ||
2016 | loadGlyphs(svg); | 2004 | loadGlyphs(svg); |
2017 | - preloadIcons(svg); | ||
2018 | 2005 | ||
2019 | zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer'); | 2006 | zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer'); |
2020 | setupZoomPan(); | 2007 | setupZoomPan(); |
... | @@ -2111,7 +2098,7 @@ | ... | @@ -2111,7 +2098,7 @@ |
2111 | width: config.birdDim, | 2098 | width: config.birdDim, |
2112 | height: config.birdDim, | 2099 | height: config.birdDim, |
2113 | fill: '#111' | 2100 | fill: '#111' |
2114 | - }); | 2101 | + }) |
2115 | } | 2102 | } |
2116 | 2103 | ||
2117 | function para(sel, text) { | 2104 | function para(sel, text) { |
... | @@ -2226,9 +2213,7 @@ | ... | @@ -2226,9 +2213,7 @@ |
2226 | .translate(t); | 2213 | .translate(t); |
2227 | 2214 | ||
2228 | bgImg = zoomPanContainer.insert("g", '#topo-G'); | 2215 | bgImg = zoomPanContainer.insert("g", '#topo-G'); |
2229 | - // pointer-events: none so that browser select tools don't pick up the map svg | 2216 | + bgImg.attr('id', 'map').selectAll('path') |
2230 | - bgImg.attr('id', 'map').attr('stroke-width', config.map.strokeWidth + 'px').style('pointer-events', 'none') | ||
2231 | - .selectAll('path') | ||
2232 | .data(topoData.features) | 2217 | .data(topoData.features) |
2233 | .enter() | 2218 | .enter() |
2234 | .append('path') | 2219 | .append('path') | ... | ... |
1 | -.theme_dark #topo { | ||
2 | - background-color: #20201D; | ||
3 | -} | ||
4 | - | ||
5 | -.theme_dark #topo #map { | ||
6 | - stroke: #444; | ||
7 | -} | ||
8 | - | ||
9 | -/* note: device is offline without the 'online' class */ | ||
10 | -.theme_dark #topo svg .node.device { | ||
11 | - fill: #777; | ||
12 | -} | ||
13 | - | ||
14 | -.theme_dark #topo .host { | ||
15 | - fill: #000; | ||
16 | - color: white; | ||
17 | -} | ||
18 | - | ||
19 | - | ||
20 | -.theme_dark #topo svg .node.device.switch.online { | ||
21 | - fill: #000; | ||
22 | -} | ||
23 | - | ||
24 | -.theme_dark #topo svg .node.device.roadm.online { | ||
25 | - fill: #03c; | ||
26 | -} | ||
27 | - | ||
28 | -/* note: device is offline without the 'online' class */ | ||
29 | -.theme_dark #topo svg .node.device text { | ||
30 | - fill: #aaa; | ||
31 | -} | ||
32 | - | ||
33 | -.theme_dark #topo svg .node.device.online { | ||
34 | - color: white; | ||
35 | -} | ||
36 | -.theme_dark #topo svg .node.device.online text { | ||
37 | - fill: currentColor; | ||
38 | -} | ||
39 | - | ||
40 | -.theme_dark #topo svg .glyph { | ||
41 | - fill: white; | ||
42 | -} | ||
43 | - | ||
44 | -.theme_dark #topo-oibox .onosInst { | ||
45 | - color: #444; | ||
46 | - background-color: #ccc; | ||
47 | - border-color: #aaa; | ||
48 | -} | ||
49 | - | ||
50 | -.theme_dark #topo-oibox .onosInst.online { | ||
51 | - color: #113; | ||
52 | - background-color: #bbf; | ||
53 | - border-color: #555; | ||
54 | -} | ||
55 | - | ||
56 | -.theme_dark #topo-oibox .onosInst .onosTitle { | ||
57 | - color: #888; | ||
58 | -} | ||
59 | - | ||
60 | -.theme_dark #topo svg .node.device.fixed.online rect { | ||
61 | - stroke: #666; | ||
62 | -} | ||
63 | - | ||
64 | -.theme_dark #topo svg .node.host { | ||
65 | - stroke: #000; | ||
66 | -} | ||
67 | - | ||
68 | -.theme_dark #topo-detail .actionBtn { | ||
69 | - border-color: #ddf; | ||
70 | - color: #99f; | ||
71 | -} | ||
72 | - | ||
73 | -.theme_dark #topo-detail .actionBtn:hover { | ||
74 | - border-color: #ddf; | ||
75 | - background: #eef; | ||
76 | - color: #77d; | ||
77 | -} | ||
78 | - | ||
79 | -.theme_dark #topo svg .link.primary { | ||
80 | - stroke: #f11; | ||
81 | -} | ||
82 | - | ||
83 | -.theme_dark #topo svg .link.secondary { | ||
84 | - stroke: rgba(255,100,100,0.5); | ||
85 | -} | ||
86 | - | ||
87 | -.theme_dark #topo svg .link.animated { | ||
88 | - stroke: #f11; | ||
89 | -} | ||
90 | - | ||
91 | -.theme_dark #topo svg .link.primary.optical { | ||
92 | - stroke: #74f; | ||
93 | -} | ||
94 | - | ||
95 | -.theme_dark #topo svg .link.secondary.optical { | ||
96 | - stroke: rgba(128,64,255,0.5); | ||
97 | -} | ||
98 | - | ||
99 | -.theme_dark #topo svg .link.animated.optical { | ||
100 | - stroke: #74f; | ||
101 | -} | ||
102 | - | ||
103 | -/*.theme_dark #topo .link { | ||
104 | - stroke: #666; | ||
105 | -} | ||
106 | -*/ | ||
107 | - |
-
Please register or login to post a comment