First pass at svg icons and dark theme for topo
Have not addressed top bar etc
Change-Id: I0cc47a1f500bd9d8589eeaf8042f21ec4c8e6cbe
diff --git a/web/gui/src/main/webapp/icons.svg b/web/gui/src/main/webapp/icons.svg
new file mode 100644
index 0000000..524594b
--- /dev/null
+++ b/web/gui/src/main/webapp/icons.svg
@@ -0,0 +1,176 @@
+<?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/index2.html b/web/gui/src/main/webapp/index2.html
index ce09aab..24aeee3 100644
--- a/web/gui/src/main/webapp/index2.html
+++ b/web/gui/src/main/webapp/index2.html
@@ -40,12 +40,14 @@
<!-- 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">
@@ -56,7 +58,7 @@
<script src="onos2.js"></script>
</head>
-<body>
+<body class='theme_dark'>
<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
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/web/gui/src/main/webapp/onos_theme.css
diff --git a/web/gui/src/main/webapp/topo2.css b/web/gui/src/main/webapp/topo2.css
index d14b966..7ee73c6 100644
--- a/web/gui/src/main/webapp/topo2.css
+++ b/web/gui/src/main/webapp/topo2.css
@@ -25,14 +25,11 @@
}
#topo #map {
- stroke-width: 2px;
- stroke: #aaaaaa;
fill: transparent;
}
#topo svg .glyph {
- fill: white;
stroke: none;
}
@@ -68,39 +65,20 @@
#topo svg .node.device.fixed rect {
stroke-width: 1.5;
- stroke: #ccc;
+}
+
+#topo .node text {
+ font-weight: 100;
}
/* 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;
@@ -127,29 +105,23 @@
}
#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
}
@@ -205,17 +177,13 @@
cursor: pointer;
width: 50%;
text-align: center;
-
- /* theme specific... */
- border: 1px solid #ddf;
- color: #99f;
+ border-width: 1px;
+ borer-style: solid;
}
#topo-detail .actionBtn:hover {
- /* theme specific... */
- border: 1px solid #ddf;
- background: #eef;
- color: #77d;
+ border-width: 1px;
+ border-style: solid;
}
@@ -239,29 +207,14 @@
height: 80px;
margin: 4px 0;
cursor: pointer;
-
- /* 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;
+ border-width: 2px;
+ border-style: solid;
}
#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 66366c7..f818e2f 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -70,23 +70,17 @@
}
},
topo: {
- linkBaseColor: '#666',
linkInColor: '#66f',
- linkInWidth: 14,
linkOutColor: '#f00',
+ linkInWidth: 14,
linkOutWidth: 30
},
- icons: {
- w: 28,
- h: 28,
- xoff: -12,
- yoff: -8
+ map: {
+ strokeWidth: 1
},
- iconUrl: {
- device: 'img/device.png',
- host: 'img/host.png',
- pkt: 'img/pkt.png',
- opt: 'img/opt.png'
+ icons: {
+ w: 100,
+ h: 100
},
force: {
note_for_links: 'link.type is used to differentiate',
@@ -532,8 +526,7 @@
}
el.transition()
.duration(1000)
- .attr('stroke-width', linkScale(lw))
- .attr('stroke', config.topo.linkBaseColor);
+ .attr('stroke-width', linkScale(lw));
}
// ==============================
@@ -1234,8 +1227,8 @@
$.extend(node, xy);
}
- function iconUrl(d) {
- return 'img/' + d.type + '.png';
+ function getIconUrl(d) {
+ return 'icons.svg#' + d.type;
}
// returns the newly computed bounding box of the rectangle
@@ -1277,6 +1270,29 @@
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,
@@ -1294,10 +1310,7 @@
.transition()
.attr(box);
- node.select('image')
- .transition()
- .attr('x', box.x + config.icons.xoff)
- .attr('y', box.y + config.icons.yoff);
+ updateDeviceIconAppearance(node, box, true);
}
function updateHostLabel(d) {
@@ -1339,18 +1352,6 @@
}
}
- function addHostIcon(node, radius, iconId) {
- var dim = radius * 1.5,
- xlate = -dim / 2;
-
- node.append('use')
- .classed('glyph', true)
- .attr('transform', translate(xlate,xlate))
- .attr('xlink:href', '#' + iconId)
- .attr('width', dim)
- .attr('height', dim);
- }
-
function updateNodes() {
node = nodeG.selectAll('.node')
.data(network.nodes, function (d) { return d.id; });
@@ -1377,7 +1378,7 @@
// augment device nodes...
entering.filter('.device').each(function (d) {
var node = d3.select(this),
- icon = iconUrl(d),
+ iconUrl = getIconUrl(d),
label = niceLabel(deviceLabel(d)),
box;
@@ -1399,18 +1400,17 @@
node.select('rect')
.attr(box);
- if (icon) {
- var cfg = config.icons;
- node.append('svg:image')
+ if (iconUrl) {
+ node.append('svg:use')
.attr({
- x: box.x + config.icons.xoff,
- y: box.y + config.icons.yoff,
- width: cfg.w,
- height: cfg.h,
- 'xlink:href': icon
+ 'xlink:href': iconUrl,
+ width: config.icons.w,
+ height: config.icons.h
});
}
+ 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,36 +1424,43 @@
}
});
- // TODO: better place for this configuration state
- var defaultHostRadius = 9,
- hostRadius = {
- bgpSpeaker: 20
- },
- hostIcon = {
- bgpSpeaker: 'bullhorn'
- };
-
-
// augment host nodes...
entering.filter('.host').each(function (d) {
var node = d3.select(this),
- r = hostRadius[d.type] || defaultHostRadius,
- textDy = r + 10,
- icon = hostIcon[d.type];
+ iconUrl = getIconUrl(d);
// provide ref to element from backing data....
d.el = node;
- node.append('circle')
- .attr('r', r);
+ // var box = node.append('circle')
+ // .attr('r', r).node().getBBox();
- if (icon) {
- addHostIcon(node, r, icon);
+ 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;
}
+
+
node.append('text')
.text(hostLabel)
- .attr('dy', textDy)
+ .attr('alignment-baseline', 'text-before-edge')
+ .attr('x', textXOff)
+ .attr('y', textYOff)
.attr('text-anchor', 'middle');
// debug function to show the modelled x,y coordinates of nodes...
@@ -1492,9 +1499,9 @@
.style('opacity', 0);
// note, leave <g>.remove to remove this element
- node.select('circle')
- .style('stroke-fill', '#555')
- .style('fill', '#888')
+ node.select('use')
+ .style('color', '#aaa')
+ .style('fill', '#000')
.style('opacity', 0.5)
.transition()
.duration(1500)
@@ -1817,7 +1824,7 @@
function zoomPan(scale, translate) {
zoomPanContainer.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
// keep the map lines constant width while zooming
- bgImg.style("stroke-width", 2.0 / scale + "px");
+ bgImg.attr("stroke-width", config.map.strokeWidth / scale + "px");
}
function resetZoomPan() {
@@ -1934,6 +1941,27 @@
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
@@ -1950,6 +1978,7 @@
setSize(svg, view);
loadGlyphs(svg);
+ preloadIcons(svg);
zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer');
setupZoomPan();
@@ -2046,7 +2075,7 @@
width: config.birdDim,
height: config.birdDim,
fill: '#111'
- })
+ });
}
function para(sel, text) {
@@ -2161,11 +2190,13 @@
.translate(t);
bgImg = zoomPanContainer.insert("g", '#topo-G');
- bgImg.attr('id', 'map').selectAll('path')
- .data(topoData.features)
- .enter()
- .append('path')
- .attr('d', path);
+ // 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);
}
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
new file mode 100644
index 0000000..9bb2fd7
--- /dev/null
+++ b/web/gui/src/main/webapp/topo_theme.css
@@ -0,0 +1,107 @@
+.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;
+}
+*/
+
