홍길동 / 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
Inline Side-by-side
Showing 15 changed files with 165 additions and 393 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(),
......
1 -<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 -<!-- Created with Inkscape (http://www.inkscape.org/) -->
3 -<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg">
4 - <symbol id="switch">
5 - <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-344.44812,-517.03149)">
6 - <path d="m 389.9165,532.15849 -44.64875,0 0,14.495 44.64875,0 0,-14.495 z" id="path24009" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001"/>
7 - <g id="g24011" transform="matrix(1.25,0,0,-1.25,345.15125,532.23224)">
8 - <path d="m 0,0 14.428,11.694 33.33,0 L 35.779,0 0,0 z" id="path24013" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
9 - </g>
10 - <g id="g24015" transform="matrix(1.25,0,0,-1.25,345.15125,532.23224)">
11 - <path d="m 0,0 14.428,11.694 33.33,0 L 35.779,0 0,0 z" id="path24017" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
12 - </g>
13 - <g id="g24019" transform="matrix(1.25,0,0,-1.25,389.8925,547.10962)">
14 - <path d="M 0,0 11.932,12.892 11.939,23.575 0,11.919 0,0 z" id="path24021" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
15 - </g>
16 - <g id="g24023" transform="matrix(1.25,0,0,-1.25,389.8925,547.10962)">
17 - <path d="M 0,0 11.932,12.892 11.939,23.575 0,11.919 0,0 z" id="path24025" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
18 - </g>
19 - <g id="g24027" transform="matrix(1.25,0,0,-1.25,371.32312,528.42974)">
20 - <path d="m 0,0 -0.691,-0.568 -8.911,0 -0.886,-0.888 -2.414,1.052 4.853,1.389 L -8.906,0 0,0 z" id="path24029" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
21 - </g>
22 - <g id="g24031" transform="matrix(1.25,0,0,-1.25,380.07312,522.96099)">
23 - <path d="m 0,0 -0.691,-0.568 -8.911,0 -0.886,-0.888 -2.414,1.052 4.853,1.389 L -8.906,0 0,0 z" id="path24033" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
24 - </g>
25 - <g id="g24035" transform="matrix(1.25,0,0,-1.25,373.28837,526.49738)">
26 - <path d="m 0,0 0.691,0.569 8.913,0 L 10.49,1.456 12.904,0.405 8.049,-0.984 8.908,0 0,0 z" id="path24037" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
27 - </g>
28 - <g id="g24039" transform="matrix(1.25,0,0,-1.25,379.06962,521.02863)">
29 - <path d="m 0,0 0.691,0.569 8.913,0 L 10.49,1.456 12.904,0.405 8.049,-0.984 8.908,0 0,0 z" id="path24041" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
30 - </g>
31 - </g>
32 - </symbol>
33 - <symbol id="router">
34 - <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-351.74132,-516.62992)">
35 - <g id="g18775" transform="matrix(1.25,0,0,-1.25,397.99132,525.81444)">
36 - <path d="m 0,0 c 0,-3.95 -8.235,-7.152 -18.393,-7.152 -10.158,0 -18.393,3.202 -18.393,7.152 l 0,-10.478 c 0,-3.948 8.235,-7.151 18.393,-7.151 10.158,0 18.393,3.203 18.393,7.151 L 0,0 z" id="path18777" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
37 - </g>
38 - <g id="g18779" transform="matrix(1.25,0,0,-1.25,397.99132,525.81444)">
39 - <path d="m 0,0 c 0,-3.95 -8.235,-7.152 -18.393,-7.152 -10.158,0 -18.393,3.202 -18.393,7.152 l 0,-10.478 c 0,-3.948 8.235,-7.151 18.393,-7.151 10.158,0 18.393,3.203 18.393,7.151 L 0,0 z" id="path18781" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
40 - </g>
41 - <g id="g18783" transform="matrix(1.25,0,0,-1.25,374.99992,534.75492)">
42 - <path d="m 0,0 c 10.158,0 18.393,3.202 18.393,7.152 0,3.952 -8.235,7.153 -18.393,7.153 -10.158,0 -18.393,-3.201 -18.393,-7.153 C -18.393,3.202 -10.158,0 0,0" id="path18785" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
43 - </g>
44 - <g id="g18787" transform="matrix(1.25,0,0,-1.25,374.99992,534.75492)">
45 - <path d="m 0,0 c 10.158,0 18.393,3.202 18.393,7.152 0,3.952 -8.235,7.153 -18.393,7.153 -10.158,0 -18.393,-3.201 -18.393,-7.153 C -18.393,3.202 -10.158,0 0,0 z" id="path18789" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
46 - </g>
47 - <g id="g18791" transform="matrix(1.25,0,0,-1.25,369.75031,522.31831)">
48 - <path d="m 0,0 1.518,-2.278 -5.742,-1.327 1.255,1.043 -8.875,1.518 2.227,1.669 8.563,-1.45 L 0,0 z" id="path18793" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
49 - </g>
50 - <g id="g18795" transform="matrix(1.25,0,0,-1.25,379.85043,529.22393)">
51 - <path d="M 0,0 -1.036,2.35 4.143,3.384 3.245,2.579 11.878,1.104 9.807,-0.553 1.225,1.06 0,0 z" id="path18797" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
52 - </g>
53 - <g id="g18799" transform="matrix(1.25,0,0,-1.25,376.31043,520.76318)">
54 - <path d="M 0,0 5.802,1.588 5.87,-0.898 4.42,-0.622 1.589,-2.972 -1.113,-2.576 1.809,-0.279 0,0 z" id="path18801" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
55 - </g>
56 - <g id="g18803" transform="matrix(1.25,0,0,-1.25,373.20244,531.90095)">
57 - <path d="M 0,0 -5.525,-1.035 -5.732,1.52 -4.144,1.175 -1.103,3.771 1.588,3.315 -1.658,0.483 0,0 z" id="path18805" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
58 - </g>
59 - </g>
60 - </symbol>
61 - <symbol id="roadm">
62 - <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-352.14937,-517.55019)">
63 - <g id="g23883" transform="matrix(1.25,0,0,-1.25,397.44718,526.34356)">
64 - <path d="m 0,0 0,-9.5 -8.725,-6.977 -18.127,0 -9.064,6.977 0,9.5" id="path23885" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
65 - </g>
66 - <g id="g23887" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
67 - <path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path23889" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
68 - </g>
69 - <g id="g23891" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
70 - <path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path23893" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
71 - </g>
72 - <g id="g23895" transform="matrix(1.25,0,0,-1.25,370.5857,523.05858)">
73 - <path d="m 0,0 1.384,-2.076 -5.235,-1.21 1.145,0.952 -6.697,1.421 2.03,1.522 6.412,-1.361 L 0,0 z" id="path23897" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
74 - </g>
75 - <g id="g23899" transform="matrix(1.25,0,0,-1.25,379.79093,529.35194)">
76 - <path d="M 0,0 -0.945,2.14 3.777,3.084 2.959,2.351 9.951,1.152 8.064,-0.36 1.117,0.965 0,0 z" id="path23901" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
77 - </g>
78 - <g id="g23903" transform="matrix(1.25,0,0,-1.25,377.03218,521.01569)">
79 - <path d="M 0,0 5.289,1.448 5.352,-0.818 4.029,-0.566 1.449,-2.707 -1.014,-2.347 1.65,-0.255 0,0 z" id="path23905" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
80 - </g>
81 - <g id="g23907" transform="matrix(1.25,0,0,-1.25,372.99894,532.36957)">
82 - <path d="M 0,0 -5.037,-0.944 -5.224,1.385 -3.777,1.071 -1.006,3.44 1.447,3.023 -1.512,0.441 0,0 z" id="path23909" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
83 - </g>
84 - <g id="g23911" transform="matrix(1.25,0,0,-1.25,386.49758,546.80069)">
85 - <path d="M 0,0 0,9.389 M -18.25,0 l 0,9.389" id="path23913" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
86 - </g>
87 - <g id="g25718" transform="matrix(1.25,0,0,-1.25,397.44718,526.34356)">
88 - <path d="m 0,0 0,-9.5 -8.725,-6.977 -18.127,0 -9.064,6.977 0,9.5" id="path25720" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
89 - </g>
90 - <g id="g25722" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
91 - <path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path25724" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
92 - </g>
93 - <g id="g25726" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
94 - <path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path25728" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
95 - </g>
96 - <g id="g25730" transform="matrix(1.25,0,0,-1.25,370.5857,523.05858)">
97 - <path d="m 0,0 1.384,-2.076 -5.235,-1.21 1.145,0.952 -6.697,1.421 2.03,1.522 6.412,-1.361 L 0,0 z" id="path25732" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
98 - </g>
99 - <g id="g25734" transform="matrix(1.25,0,0,-1.25,379.79093,529.35194)">
100 - <path d="M 0,0 -0.945,2.14 3.777,3.084 2.959,2.351 9.951,1.152 8.064,-0.36 1.117,0.965 0,0 z" id="path25736" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
101 - </g>
102 - <g id="g25738" transform="matrix(1.25,0,0,-1.25,377.03218,521.01569)">
103 - <path d="M 0,0 5.289,1.448 5.352,-0.818 4.029,-0.566 1.449,-2.707 -1.014,-2.347 1.65,-0.255 0,0 z" id="path25740" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
104 - </g>
105 - <g id="g25742" transform="matrix(1.25,0,0,-1.25,372.99894,532.36957)">
106 - <path d="M 0,0 -5.037,-0.944 -5.224,1.385 -3.777,1.071 -1.006,3.44 1.447,3.023 -1.512,0.441 0,0 z" id="path25744" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
107 - </g>
108 - <g id="g25746" transform="matrix(1.25,0,0,-1.25,386.49758,546.80069)">
109 - <path d="M 0,0 0,9.389 M -18.25,0 l 0,9.389" id="path25748" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
110 - </g>
111 - </g>
112 - </symbol>
113 - <symbol id="endstation">
114 - <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-361.79125,-513.72074)">
115 - <g id="g19723" transform="matrix(1.25,0,0,-1.25,381.81625,520.11362)">
116 - <path d="m 0,0 -15.82,0 0,-24.512 15.82,0" id="path19725" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
117 - </g>
118 - <g id="g19727" transform="matrix(1.25,0,0,-1.25,381.81625,550.75074)">
119 - <path d="m 0,0 4.914,4.912 0,24.512 -14.445,0 L -15.82,24.51 0,24.51 0,0 z" id="path19729" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
120 - </g>
121 - <g id="g19731" transform="matrix(1.25,0,0,-1.25,381.81625,550.75074)">
122 - <path d="m 0,0 4.914,4.912 0,24.512 -14.445,0 L -15.82,24.51 0,24.51 0,0 z" id="path19733" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
123 - </g>
124 - <g id="g19735" transform="matrix(1.25,0,0,-1.25,381.81625,520.11362)">
125 - <path d="M 0,0 4.914,4.914" id="path19737" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
126 - </g>
127 - <g id="g19739" transform="matrix(1.25,0,0,-1.25,371.85774,520.11362)">
128 - <path d="M 0,0 0,-24.512" id="path19741" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
129 - </g>
130 - <g id="g19743" transform="matrix(1.25,0,0,-1.25,372.17024,520.11362)">
131 - <path d="M 0,0 5.346,4.914" id="path19745" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
132 - </g>
133 - <path d="m 379.91712,544.47137 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m -9.52375,0 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m 9.52375,-6.5625 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m -9.52375,0 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m 9.52375,-15 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m -9.52375,0 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m 1.7775,-2.795 6.68125,-6.1425" id="path19747" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
134 - </g>
135 - </symbol>
136 - <symbol id="bgpSpeaker">
137 - <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-355.47362,-514.96093)">
138 - <path d="m 355.72362,519.29593 34.56875,0 0,30.2175 -34.56875,0 0,-30.2175 z" id="path5104" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
139 - <path d="m 355.72362,519.29593 34.57,0 0,30.2175 -34.57,0 0,-30.2175 z" id="path5106" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
140 - <g id="g5108" transform="matrix(1.25,0,0,-1.25,359.70763,515.2113)">
141 - <path d="m 0,0 -3.187,-3.268 27.656,0 L 27.655,0 0,0 z" id="path5110" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
142 - </g>
143 - <g id="g5112" transform="matrix(1.25,0,0,-1.25,359.70763,515.2113)">
144 - <path d="m 0,0 -3.187,-3.268 27.656,0 L 27.655,0 0,0 z" id="path5114" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
145 - </g>
146 - <g id="g5116" transform="matrix(1.25,0,0,-1.25,394.27674,545.42854)">
147 - <path d="m 0,0 0,24.174 -3.186,-3.268 0,-24.174 L 0,0 z" id="path5118" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
148 - </g>
149 - <path d="m 387.49987,522.07593 z m 6.77625,23.3525 0,-30.2175 -3.9825,4.085 0,30.2175 3.9825,-4.085 z" id="path5120" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
150 - <g id="g5122" transform="matrix(1.25,0,0,-1.25,385.85025,531.2343)">
151 - <path d="m 0,0 c 0,-2.152 -4.486,-3.896 -10.02,-3.896 -5.533,0 -10.019,1.744 -10.019,3.896 l 0,-5.707 c 0,-2.152 4.486,-3.897 10.019,-3.897 5.534,0 10.02,1.745 10.02,3.897 L 0,0 z" id="path5124" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
152 - </g>
153 - <g id="g5126" transform="matrix(1.25,0,0,-1.25,385.85025,531.2343)">
154 - <path d="m 0,0 c 0,-2.152 -4.486,-3.896 -10.02,-3.896 -5.533,0 -10.019,1.744 -10.019,3.896 l 0,-5.707 c 0,-2.152 4.486,-3.897 10.019,-3.897 5.534,0 10.02,1.745 10.02,3.897 L 0,0 z" id="path5128" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
155 - </g>
156 - <g id="g5130" transform="matrix(1.25,0,0,-1.25,373.32524,536.10479)">
157 - <path d="M 0,0 C 5.534,0 10.02,1.744 10.02,3.896 10.02,6.049 5.534,7.793 0,7.793 -5.533,7.793 -10.019,6.049 -10.019,3.896 -10.019,1.744 -5.533,0 0,0" id="path5132" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
158 - </g>
159 - <g id="g5134" transform="matrix(1.25,0,0,-1.25,373.32524,536.10479)">
160 - <path d="M 0,0 C 5.534,0 10.02,1.744 10.02,3.896 10.02,6.049 5.534,7.793 0,7.793 -5.533,7.793 -10.019,6.049 -10.019,3.896 -10.019,1.744 -5.533,0 0,0 z" id="path5136" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
161 - </g>
162 - <g id="g5138" transform="matrix(1.25,0,0,-1.25,370.46387,529.32993)">
163 - <path d="m 0,0 0.828,-1.241 -3.128,-0.723 0.683,0.569 -4.834,0.828 1.213,0.908 4.665,-0.79 L 0,0 z" id="path5140" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
164 - </g>
165 - <g id="g5142" transform="matrix(1.25,0,0,-1.25,375.96798,533.09218)">
166 - <path d="M 0,0 -0.565,1.279 2.257,1.844 1.767,1.404 6.47,0.602 5.341,-0.301 0.668,0.577 0,0 z" id="path5144" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
167 - </g>
168 - <g id="g5146" transform="matrix(1.25,0,0,-1.25,374.03937,528.48281)">
169 - <path d="M 0,0 3.16,0.865 3.198,-0.488 2.408,-0.339 0.865,-1.617 -0.606,-1.403 0.986,-0.151 0,0 z" id="path5148" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
170 - </g>
171 - <g id="g5150" transform="matrix(1.25,0,0,-1.25,372.34687,534.54968)">
172 - <path d="M 0,0 -3.01,-0.564 -3.123,0.828 -2.258,0.64 -0.601,2.055 0.865,1.807 -0.903,0.264 0,0 z" id="path5152" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
173 - </g>
174 - </g>
175 - </symbol>
176 -</svg>
...\ No newline at end of file ...\ No newline at end of file

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,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 -