Reverting the theme to light for the demo and switching icons set.
Change-Id: Ic3f7b46ce56100aabc1b7df3370218cbfd94db0c
diff --git a/tools/test/topos/sdn-ip.json b/tools/test/topos/sdn-ip.json
new file mode 100644
index 0000000..80464b1
--- /dev/null
+++ b/tools/test/topos/sdn-ip.json
@@ -0,0 +1,13 @@
+{
+ "hosts" : [
+ { "mac": "00:00:00:00:00:01", "vlan": -1, "location": "of:0000000000000001/10", "ip": "0.0.0.0", "annotations": { "type": "bgpSpeaker" } },
+ { "mac": "00:00:00:00:00:02", "vlan": -1, "location": "of:0000000000000002/10", "ip": "0.0.0.0", "annotations": { "type": "bgpSpeaker" } },
+ { "mac": "00:00:00:00:00:03", "vlan": -1, "location": "of:0000000000000003/10", "ip": "0.0.0.0", "annotations": { "type": "bgpSpeaker" } },
+ { "mac": "00:00:00:00:01:01", "vlan": -1, "location": "of:0000000000000005/10", "ip": "0.0.0.0", "annotations": { "type": "router" } },
+ { "mac": "00:00:00:00:01:02", "vlan": -1, "location": "of:0000000000000006/10", "ip": "0.0.0.0", "annotations": { "type": "router" } },
+ { "mac": "00:00:00:00:02:01", "vlan": -1, "location": "of:0000000000000007/10", "ip": "0.0.0.0", "annotations": { "type": "router" } },
+ { "mac": "00:00:00:00:03:01", "vlan": -1, "location": "of:0000000000000008/10", "ip": "0.0.0.0", "annotations": { "type": "router" } },
+ { "mac": "00:00:00:00:04:01", "vlan": -1, "location": "of:0000000000000009/10", "ip": "0.0.0.0", "annotations": { "type": "router" } },
+ { "mac": "00:00:00:00:44:01", "vlan": -1, "location": "of:0000000000000010/10", "ip": "0.0.0.0", "annotations": { "type": "router" } }
+ ]
+}
\ No newline at end of file
diff --git a/web/gui/src/main/java/org/onlab/onos/gui/TopologyViewMessages.java b/web/gui/src/main/java/org/onlab/onos/gui/TopologyViewMessages.java
index 87ea7cd..5796c65 100644
--- a/web/gui/src/main/java/org/onlab/onos/gui/TopologyViewMessages.java
+++ b/web/gui/src/main/java/org/onlab/onos/gui/TopologyViewMessages.java
@@ -63,6 +63,7 @@
import java.util.concurrent.ConcurrentHashMap;
import static com.google.common.base.Preconditions.checkNotNull;
+import static com.google.common.base.Strings.isNullOrEmpty;
import static org.onlab.onos.cluster.ClusterEvent.Type.INSTANCE_ADDED;
import static org.onlab.onos.cluster.ClusterEvent.Type.INSTANCE_REMOVED;
import static org.onlab.onos.cluster.ControllerNode.State.ACTIVE;
@@ -253,8 +254,10 @@
// Produces a host event message to the client.
protected ObjectNode hostMessage(HostEvent event) {
Host host = event.subject();
+ String hostType = host.annotations().value("type");
ObjectNode payload = mapper.createObjectNode()
.put("id", host.id().toString())
+ .put("type", isNullOrEmpty(hostType) ? "host" : hostType)
.put("ingress", compactLinkString(edgeLink(host, true)))
.put("egress", compactLinkString(edgeLink(host, false)));
payload.set("cp", hostConnect(mapper, host.location()));
@@ -358,8 +361,10 @@
protected ObjectNode hostDetails(HostId hostId, long sid) {
Host host = hostService.getHost(hostId);
Annotations annot = host.annotations();
+ String type = annot.value("type");
return envelope("showDetails", sid,
- json(hostId.toString(), "host",
+ json(hostId.toString(), isNullOrEmpty(type) ? "host" : type,
+ new Prop("Name", annot.value("name")),
new Prop("MAC", host.mac().toString()),
new Prop("IP", host.ipAddresses().toString()),
new Separator(),
diff --git a/web/gui/src/main/webapp/icons.svg b/web/gui/src/main/webapp/icons.svg
deleted file mode 100644
index 524594b..0000000
--- a/web/gui/src/main/webapp/icons.svg
+++ /dev/null
@@ -1,176 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<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">
- <symbol id="switch">
- <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-344.44812,-517.03149)">
- <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"/>
- <g id="g24011" transform="matrix(1.25,0,0,-1.25,345.15125,532.23224)">
- <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"/>
- </g>
- <g id="g24015" transform="matrix(1.25,0,0,-1.25,345.15125,532.23224)">
- <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"/>
- </g>
- <g id="g24019" transform="matrix(1.25,0,0,-1.25,389.8925,547.10962)">
- <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"/>
- </g>
- <g id="g24023" transform="matrix(1.25,0,0,-1.25,389.8925,547.10962)">
- <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"/>
- </g>
- <g id="g24027" transform="matrix(1.25,0,0,-1.25,371.32312,528.42974)">
- <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"/>
- </g>
- <g id="g24031" transform="matrix(1.25,0,0,-1.25,380.07312,522.96099)">
- <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"/>
- </g>
- <g id="g24035" transform="matrix(1.25,0,0,-1.25,373.28837,526.49738)">
- <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"/>
- </g>
- <g id="g24039" transform="matrix(1.25,0,0,-1.25,379.06962,521.02863)">
- <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"/>
- </g>
- </g>
- </symbol>
- <symbol id="router">
- <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-351.74132,-516.62992)">
- <g id="g18775" transform="matrix(1.25,0,0,-1.25,397.99132,525.81444)">
- <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"/>
- </g>
- <g id="g18779" transform="matrix(1.25,0,0,-1.25,397.99132,525.81444)">
- <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"/>
- </g>
- <g id="g18783" transform="matrix(1.25,0,0,-1.25,374.99992,534.75492)">
- <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"/>
- </g>
- <g id="g18787" transform="matrix(1.25,0,0,-1.25,374.99992,534.75492)">
- <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"/>
- </g>
- <g id="g18791" transform="matrix(1.25,0,0,-1.25,369.75031,522.31831)">
- <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"/>
- </g>
- <g id="g18795" transform="matrix(1.25,0,0,-1.25,379.85043,529.22393)">
- <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"/>
- </g>
- <g id="g18799" transform="matrix(1.25,0,0,-1.25,376.31043,520.76318)">
- <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"/>
- </g>
- <g id="g18803" transform="matrix(1.25,0,0,-1.25,373.20244,531.90095)">
- <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"/>
- </g>
- </g>
- </symbol>
- <symbol id="roadm">
- <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-352.14937,-517.55019)">
- <g id="g23883" transform="matrix(1.25,0,0,-1.25,397.44718,526.34356)">
- <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"/>
- </g>
- <g id="g23887" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
- <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"/>
- </g>
- <g id="g23891" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
- <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"/>
- </g>
- <g id="g23895" transform="matrix(1.25,0,0,-1.25,370.5857,523.05858)">
- <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"/>
- </g>
- <g id="g23899" transform="matrix(1.25,0,0,-1.25,379.79093,529.35194)">
- <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"/>
- </g>
- <g id="g23903" transform="matrix(1.25,0,0,-1.25,377.03218,521.01569)">
- <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"/>
- </g>
- <g id="g23907" transform="matrix(1.25,0,0,-1.25,372.99894,532.36957)">
- <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"/>
- </g>
- <g id="g23911" transform="matrix(1.25,0,0,-1.25,386.49758,546.80069)">
- <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"/>
- </g>
- <g id="g25718" transform="matrix(1.25,0,0,-1.25,397.44718,526.34356)">
- <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"/>
- </g>
- <g id="g25722" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
- <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"/>
- </g>
- <g id="g25726" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
- <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"/>
- </g>
- <g id="g25730" transform="matrix(1.25,0,0,-1.25,370.5857,523.05858)">
- <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"/>
- </g>
- <g id="g25734" transform="matrix(1.25,0,0,-1.25,379.79093,529.35194)">
- <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"/>
- </g>
- <g id="g25738" transform="matrix(1.25,0,0,-1.25,377.03218,521.01569)">
- <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"/>
- </g>
- <g id="g25742" transform="matrix(1.25,0,0,-1.25,372.99894,532.36957)">
- <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"/>
- </g>
- <g id="g25746" transform="matrix(1.25,0,0,-1.25,386.49758,546.80069)">
- <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"/>
- </g>
- </g>
- </symbol>
- <symbol id="endstation">
- <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-361.79125,-513.72074)">
- <g id="g19723" transform="matrix(1.25,0,0,-1.25,381.81625,520.11362)">
- <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"/>
- </g>
- <g id="g19727" transform="matrix(1.25,0,0,-1.25,381.81625,550.75074)">
- <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"/>
- </g>
- <g id="g19731" transform="matrix(1.25,0,0,-1.25,381.81625,550.75074)">
- <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"/>
- </g>
- <g id="g19735" transform="matrix(1.25,0,0,-1.25,381.81625,520.11362)">
- <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"/>
- </g>
- <g id="g19739" transform="matrix(1.25,0,0,-1.25,371.85774,520.11362)">
- <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"/>
- </g>
- <g id="g19743" transform="matrix(1.25,0,0,-1.25,372.17024,520.11362)">
- <path d="M 0,0 5.346,4.914" id="path19745" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
- </g>
- <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"/>
- </g>
- </symbol>
- <symbol id="bgpSpeaker">
- <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-355.47362,-514.96093)">
- <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"/>
- <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"/>
- <g id="g5108" transform="matrix(1.25,0,0,-1.25,359.70763,515.2113)">
- <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"/>
- </g>
- <g id="g5112" transform="matrix(1.25,0,0,-1.25,359.70763,515.2113)">
- <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"/>
- </g>
- <g id="g5116" transform="matrix(1.25,0,0,-1.25,394.27674,545.42854)">
- <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"/>
- </g>
- <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"/>
- <g id="g5122" transform="matrix(1.25,0,0,-1.25,385.85025,531.2343)">
- <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"/>
- </g>
- <g id="g5126" transform="matrix(1.25,0,0,-1.25,385.85025,531.2343)">
- <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"/>
- </g>
- <g id="g5130" transform="matrix(1.25,0,0,-1.25,373.32524,536.10479)">
- <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"/>
- </g>
- <g id="g5134" transform="matrix(1.25,0,0,-1.25,373.32524,536.10479)">
- <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"/>
- </g>
- <g id="g5138" transform="matrix(1.25,0,0,-1.25,370.46387,529.32993)">
- <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"/>
- </g>
- <g id="g5142" transform="matrix(1.25,0,0,-1.25,375.96798,533.09218)">
- <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"/>
- </g>
- <g id="g5146" transform="matrix(1.25,0,0,-1.25,374.03937,528.48281)">
- <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"/>
- </g>
- <g id="g5150" transform="matrix(1.25,0,0,-1.25,372.34687,534.54968)">
- <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"/>
- </g>
- </g>
- </symbol>
-</svg>
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/img/device.png b/web/gui/src/main/webapp/img/device.png
deleted file mode 100644
index d608153..0000000
--- a/web/gui/src/main/webapp/img/device.png
+++ /dev/null
Binary files differ
diff --git a/web/gui/src/main/webapp/img/host.png b/web/gui/src/main/webapp/img/host.png
index cacde17..0f4595b 100644
--- a/web/gui/src/main/webapp/img/host.png
+++ b/web/gui/src/main/webapp/img/host.png
Binary files differ
diff --git a/web/gui/src/main/webapp/img/opt.png b/web/gui/src/main/webapp/img/opt.png
deleted file mode 100644
index 2f2c88e..0000000
--- a/web/gui/src/main/webapp/img/opt.png
+++ /dev/null
Binary files differ
diff --git a/web/gui/src/main/webapp/img/pkt.png b/web/gui/src/main/webapp/img/pkt.png
deleted file mode 100644
index 1b1d5a3..0000000
--- a/web/gui/src/main/webapp/img/pkt.png
+++ /dev/null
Binary files differ
diff --git a/web/gui/src/main/webapp/img/roadm.png b/web/gui/src/main/webapp/img/roadm.png
index 75ff527..5129683 100644
--- a/web/gui/src/main/webapp/img/roadm.png
+++ b/web/gui/src/main/webapp/img/roadm.png
Binary files differ
diff --git a/web/gui/src/main/webapp/img/switch.png b/web/gui/src/main/webapp/img/switch.png
index d608153..89bd78a 100644
--- a/web/gui/src/main/webapp/img/switch.png
+++ b/web/gui/src/main/webapp/img/switch.png
Binary files differ
diff --git a/web/gui/src/main/webapp/img/us-map.png b/web/gui/src/main/webapp/img/us-map.png
deleted file mode 100644
index 96e84d6..0000000
--- a/web/gui/src/main/webapp/img/us-map.png
+++ /dev/null
Binary files differ
diff --git a/web/gui/src/main/webapp/index2.html b/web/gui/src/main/webapp/index2.html
index 24aeee3..ce09aab 100644
--- a/web/gui/src/main/webapp/index2.html
+++ b/web/gui/src/main/webapp/index2.html
@@ -40,14 +40,12 @@
<!-- Base library and framework stylesheets included here -->
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="onos2.css">
- <link rel="stylesheet" href="onos_theme.css">
<link rel="stylesheet" href="mast2.css">
<link rel="stylesheet" href="floatPanel.css">
<!-- This is where contributed stylesheets get INJECTED -->
<!-- TODO: replace with template marker and inject refs server-side -->
<link rel="stylesheet" href="topo2.css">
- <link rel="stylesheet" href="topo_theme.css">
<link rel="stylesheet" href="webSockTrace.css">
@@ -58,7 +56,7 @@
<script src="onos2.js"></script>
</head>
-<body class='theme_dark'>
+<body>
<div id="frame">
<div id="mast">
<!-- NOTE: masthead injected here by mast.js -->
diff --git a/web/gui/src/main/webapp/onos_theme.css b/web/gui/src/main/webapp/onos_theme.css
deleted file mode 100644
index e69de29..0000000
--- a/web/gui/src/main/webapp/onos_theme.css
+++ /dev/null
diff --git a/web/gui/src/main/webapp/topo2.css b/web/gui/src/main/webapp/topo2.css
index 7ee73c6..484cfe7 100644
--- a/web/gui/src/main/webapp/topo2.css
+++ b/web/gui/src/main/webapp/topo2.css
@@ -25,11 +25,14 @@
}
#topo #map {
+ stroke-width: 2px;
+ stroke: #aaaaaa;
fill: transparent;
}
#topo svg .glyph {
+ fill: white;
stroke: none;
}
@@ -65,20 +68,39 @@
#topo svg .node.device.fixed rect {
stroke-width: 1.5;
-}
-
-#topo .node text {
- font-weight: 100;
+ stroke: #ccc;
}
/* note: device is offline without the 'online' class */
+#topo svg .node.device {
+ fill: #777;
+}
+
+#topo svg .node.device.switch.online {
+ fill: #17f;
+}
+
+#topo svg .node.device.roadm.online {
+ fill: #03c;
+}
+
/* note: device is offline without the 'online' class */
#topo svg .node.device text {
+ fill: #aaa;
font: 10pt sans-serif;
}
+#topo svg .node.device.online text {
+ fill: white;
+}
+
+
/* Host Nodes */
+#topo svg .node.host {
+ stroke: #000;
+}
+
#topo svg .node.host text {
fill: #846;
stroke: none;
@@ -86,11 +108,18 @@
}
svg .node.host circle {
- fill: #c96;
+ stroke: #000;
+ fill: #ddd;
}
#topo svg .node.host.bgpSpeaker circle {
- fill: #853;
+ stroke: #000;
+ fill: #ddd;
+}
+
+#topo svg .node.host.router circle {
+ stroke: #000;
+ fill: #ddd;
}
/* LINKS */
@@ -105,23 +134,29 @@
}
#topo svg .link.primary {
+ stroke: #f11;
stroke-width: 6px;
}
#topo svg .link.secondary {
+ stroke: rgba(255,100,100,0.5);
stroke-width: 4px;
}
#topo svg .link.animated {
+ stroke: #f11;
stroke-width: 10px;
stroke-dasharray: 8 8
}
#topo svg .link.primary.optical {
+ stroke: #74f;
stroke-width: 6px;
}
#topo svg .link.secondary.optical {
+ stroke: rgba(128,64,255,0.5);
stroke-width: 4px;
}
#topo svg .link.animated.optical {
+ stroke: #74f;
stroke-width: 10px;
stroke-dasharray: 8 8
}
@@ -177,13 +212,17 @@
cursor: pointer;
width: 50%;
text-align: center;
- border-width: 1px;
- borer-style: solid;
+
+ /* theme specific... */
+ border: 1px solid #ddf;
+ color: #99f;
}
#topo-detail .actionBtn:hover {
- border-width: 1px;
- border-style: solid;
+ /* theme specific... */
+ border: 1px solid #ddf;
+ background: #eef;
+ color: #77d;
}
@@ -207,14 +246,29 @@
height: 80px;
margin: 4px 0;
cursor: pointer;
- border-width: 2px;
- border-style: solid;
+
+ /* theme-related */
+ color: #444;
+ background-color: #ccc;
+ border: 2px solid #aaa;
+}
+
+#topo-oibox .onosInst.online {
+ /* theme-related */
+ color: #113;
+ background-color: #bbf;
+ border: 2px solid #555;
}
#topo-oibox .onosInst .onosTitle {
text-align: center;
font-size: 11pt;
margin-top: 6px;
+ color: #888;
+}
+
+#topo-oibox .onosInst.online .onosTitle {
+ color: black;
}
#topo-oibox .onosInst img {
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index 20615e3..bffa191 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -70,17 +70,23 @@
}
},
topo: {
+ linkBaseColor: '#666',
linkInColor: '#66f',
- linkOutColor: '#f00',
linkInWidth: 14,
+ linkOutColor: '#f00',
linkOutWidth: 30
},
- map: {
- strokeWidth: 1
- },
icons: {
- w: 100,
- h: 100
+ w: 24,
+ h: 24,
+ xoff: -10,
+ yoff: -6
+ },
+ iconUrl: {
+ device: 'img/device.png',
+ host: 'img/host.png',
+ pkt: 'img/pkt.png',
+ opt: 'img/opt.png'
},
force: {
note_for_links: 'link.type is used to differentiate',
@@ -330,6 +336,7 @@
var layerLookup = {
host: {
endstation: 'pkt', // default, if host event does not define type
+ router: 'pkt',
bgpSpeaker: 'pkt'
},
device: {
@@ -526,7 +533,8 @@
}
el.transition()
.duration(1000)
- .attr('stroke-width', linkScale(lw));
+ .attr('stroke-width', linkScale(lw))
+ .attr('stroke', config.topo.linkBaseColor);
}
// ==============================
@@ -1227,8 +1235,8 @@
$.extend(node, xy);
}
- function getIconUrl(d) {
- return 'icons.svg#' + d.type;
+ function iconUrl(d) {
+ return 'img/' + d.type + '.png';
}
// returns the newly computed bounding box of the rectangle
@@ -1270,29 +1278,6 @@
return (label && label.trim()) ? label : '.';
}
- function updateDeviceIconAppearance(node, box, animate) {
- var u = node.select('use');
- var ubbox = u.node().getBBox();
-
- var xoff = -ubbox.width/2 - box.width/2 - 4;
- var yoff = -ubbox.height;
- var iconTransform = 'translate(' + xoff + ',' + yoff + ')';
- if (animate) {
- node.select('use')
- .transition()
- .attr('transform', iconTransform);
- } else {
- node.select('use')
- .attr('transform', iconTransform);
- }
-
- var computedStyle = window.getComputedStyle(node.node());
- u.attr({
- fill: computedStyle.fill,
- color: computedStyle.color
- });
- }
-
function updateDeviceLabel(d) {
var label = niceLabel(deviceLabel(d)),
node = d.el,
@@ -1310,7 +1295,10 @@
.transition()
.attr(box);
- updateDeviceIconAppearance(node, box, true);
+ node.select('image')
+ .transition()
+ .attr('x', box.x + config.icons.xoff)
+ .attr('y', box.y + config.icons.yoff);
}
function updateHostLabel(d) {
@@ -1352,6 +1340,17 @@
}
}
+ function addHostIcon(node, radius, iconId) {
+ var dim = radius * 1.5,
+ xlate = -dim / 2;
+
+ node.append('svg:image')
+ .attr('transform', translate(xlate,xlate))
+ .attr('xlink:href', 'img/' + iconId + '.png')
+ .attr('width', dim)
+ .attr('height', dim);
+ }
+
function updateNodes() {
node = nodeG.selectAll('.node')
.data(network.nodes, function (d) { return d.id; });
@@ -1378,7 +1377,7 @@
// augment device nodes...
entering.filter('.device').each(function (d) {
var node = d3.select(this),
- iconUrl = getIconUrl(d),
+ icon = iconUrl(d),
label = niceLabel(deviceLabel(d)),
box;
@@ -1400,17 +1399,29 @@
node.select('rect')
.attr(box);
- if (iconUrl) {
- node.append('svg:use')
+ if (icon) {
+ var cfg = config.icons;
+ node.append('rect')
.attr({
- 'xlink:href': iconUrl,
- width: config.icons.w,
- height: config.icons.h
+ x: box.x + config.icons.xoff,
+ y: box.y + config.icons.yoff,
+ width: cfg.w,
+ height: cfg.h,
+ rx: 4
+ }).style({
+ stroke: '#000',
+ fill: '#ddd'
+ });
+ node.append('svg:image')
+ .attr({
+ x: box.x + config.icons.xoff + 2,
+ y: box.y + config.icons.yoff + 2,
+ width: cfg.w - 4,
+ height: cfg.h - 4,
+ 'xlink:href': icon
});
}
- updateDeviceIconAppearance(node, box, false);
-
// debug function to show the modelled x,y coordinates of nodes...
if (debug('showNodeXY')) {
node.select('rect').attr('fill-opacity', 0.5);
@@ -1424,43 +1435,41 @@
}
});
+ // TODO: better place for this configuration state
+ var defaultHostRadius = 9,
+ hostRadius = {
+ bgpSpeaker: 14,
+ router: 14,
+ host: 14
+ },
+ hostIcon = {
+ bgpSpeaker: 'bgpSpeaker',
+ router: 'router',
+ host: 'host'
+ };
+
+
// augment host nodes...
entering.filter('.host').each(function (d) {
var node = d3.select(this),
- iconUrl = getIconUrl(d);
+ r = hostRadius[d.type] || defaultHostRadius,
+ textDy = r + 10,
+ icon = hostIcon[d.type];
// provide ref to element from backing data....
d.el = node;
- // var box = node.append('circle')
- // .attr('r', r).node().getBBox();
+ node.append('circle')
+ .attr('r', r);
- var textYOff = 0;
- var textXOff = 0;
- if (iconUrl) {
- var computedStyle = window.getComputedStyle(node.node());
- var u = node.append('svg:use')
- .attr({
- 'xlink:href': iconUrl,
- width: config.icons.w,
- height: config.icons.h,
- fill: computedStyle.fill,
- color: computedStyle.color
- });
-
- var ubbox = node.select('use').node().getBBox();
- u.attr('y', -ubbox.height/2);
- textYOff = ubbox.height/2 + 4; // pad by 4 pixels
- textXOff = ubbox.width/2;
+ if (icon) {
+ addHostIcon(node, r, icon);
}
-
node.append('text')
.text(hostLabel)
- .attr('alignment-baseline', 'text-before-edge')
- .attr('x', textXOff)
- .attr('y', textYOff)
+ .attr('dy', textDy)
.attr('text-anchor', 'middle');
// debug function to show the modelled x,y coordinates of nodes...
@@ -1499,9 +1508,9 @@
.style('opacity', 0);
// note, leave <g>.remove to remove this element
- node.select('use')
- .style('color', '#aaa')
- .style('fill', '#000')
+ node.select('circle')
+ .style('stroke-fill', '#555')
+ .style('fill', '#888')
.style('opacity', 0.5)
.transition()
.duration(1500)
@@ -1858,7 +1867,7 @@
function zoomPan(scale, translate) {
zoomPanContainer.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
// keep the map lines constant width while zooming
- bgImg.attr("stroke-width", config.map.strokeWidth / scale + "px");
+ bgImg.style("stroke-width", 2.0 / scale + "px");
}
function resetZoomPan() {
@@ -1977,27 +1986,6 @@
gly.defBullhorn(defs);
}
- // create references to bring these into cache so that getBBox() works when they
- // are inserted later
- function preloadIcons(svg) {
- var icons = [
- "router",
- "switch",
- "roadm",
- "endstation",
- "bgpSpeaker"
- ];
-
- var g = svg.append('g');
- for (var icon in icons) {
- g.append('use')
- .attr({
- 'xlink:href': 'icons.svg#' + icon
- });
- }
- g.style('visibility', 'hidden');
- }
-
// ==============================
// View life-cycle callbacks
@@ -2014,7 +2002,6 @@
setSize(svg, view);
loadGlyphs(svg);
- preloadIcons(svg);
zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer');
setupZoomPan();
@@ -2111,7 +2098,7 @@
width: config.birdDim,
height: config.birdDim,
fill: '#111'
- });
+ })
}
function para(sel, text) {
@@ -2226,13 +2213,11 @@
.translate(t);
bgImg = zoomPanContainer.insert("g", '#topo-G');
- // pointer-events: none so that browser select tools don't pick up the map svg
- bgImg.attr('id', 'map').attr('stroke-width', config.map.strokeWidth + 'px').style('pointer-events', 'none')
- .selectAll('path')
- .data(topoData.features)
- .enter()
- .append('path')
- .attr('d', path);
+ bgImg.attr('id', 'map').selectAll('path')
+ .data(topoData.features)
+ .enter()
+ .append('path')
+ .attr('d', path);
}
function resize(view, ctx, flags) {
diff --git a/web/gui/src/main/webapp/topo_theme.css b/web/gui/src/main/webapp/topo_theme.css
deleted file mode 100644
index 9bb2fd7..0000000
--- a/web/gui/src/main/webapp/topo_theme.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.theme_dark #topo {
- background-color: #20201D;
-}
-
-.theme_dark #topo #map {
- stroke: #444;
-}
-
-/* note: device is offline without the 'online' class */
-.theme_dark #topo svg .node.device {
- fill: #777;
-}
-
-.theme_dark #topo .host {
- fill: #000;
- color: white;
-}
-
-
-.theme_dark #topo svg .node.device.switch.online {
- fill: #000;
-}
-
-.theme_dark #topo svg .node.device.roadm.online {
- fill: #03c;
-}
-
-/* note: device is offline without the 'online' class */
-.theme_dark #topo svg .node.device text {
- fill: #aaa;
-}
-
-.theme_dark #topo svg .node.device.online {
- color: white;
-}
-.theme_dark #topo svg .node.device.online text {
- fill: currentColor;
-}
-
-.theme_dark #topo svg .glyph {
- fill: white;
-}
-
-.theme_dark #topo-oibox .onosInst {
- color: #444;
- background-color: #ccc;
- border-color: #aaa;
-}
-
-.theme_dark #topo-oibox .onosInst.online {
- color: #113;
- background-color: #bbf;
- border-color: #555;
-}
-
-.theme_dark #topo-oibox .onosInst .onosTitle {
- color: #888;
-}
-
-.theme_dark #topo svg .node.device.fixed.online rect {
- stroke: #666;
-}
-
-.theme_dark #topo svg .node.host {
- stroke: #000;
-}
-
-.theme_dark #topo-detail .actionBtn {
- border-color: #ddf;
- color: #99f;
-}
-
-.theme_dark #topo-detail .actionBtn:hover {
- border-color: #ddf;
- background: #eef;
- color: #77d;
-}
-
-.theme_dark #topo svg .link.primary {
- stroke: #f11;
-}
-
-.theme_dark #topo svg .link.secondary {
- stroke: rgba(255,100,100,0.5);
-}
-
-.theme_dark #topo svg .link.animated {
- stroke: #f11;
-}
-
-.theme_dark #topo svg .link.primary.optical {
- stroke: #74f;
-}
-
-.theme_dark #topo svg .link.secondary.optical {
- stroke: rgba(128,64,255,0.5);
-}
-
-.theme_dark #topo svg .link.animated.optical {
- stroke: #74f;
-}
-
-/*.theme_dark #topo .link {
- stroke: #666;
-}
-*/
-
