홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Thomas Vachuska
Committed by Gerrit Code Review
8954329a 1 parent 4e729aff

Reverting the theme to light for the demo and switching icons set. 

Change-Id: Ic3f7b46ce56100aabc1b7df3370218cbfd94db0c
Expand all
Inline Side-by-side
Showing 15 changed files with 169 additions and 221 deletions
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(),
......
This diff is collapsed. Click to expand it.

9.83 KB | W: | H:

800 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

8.83 KB | W: | H:

991 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

9.27 KB | W: | H:

848 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -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 -->
......
...@@ -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,13 +2213,11 @@ ...@@ -2226,13 +2213,11 @@
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') 2217 + .data(topoData.features)
2231 - .selectAll('path') 2218 + .enter()
2232 - .data(topoData.features) 2219 + .append('path')
2233 - .enter() 2220 + .attr('d', path);
2234 - .append('path')
2235 - .attr('d', path);
2236 } 2221 }
2237 2222
2238 function resize(view, ctx, flags) { 2223 function resize(view, ctx, flags) {
......
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 -