GUI -- Re-worked ONOS Instance panel (WIP)
- added sample events, including updated addInstance event.
- cleaned up glyphs; added badges.
- fixed defect in floating panel .width(...) function.
Change-Id: I00d7ca38a1b291c4735b6dd5e39f0266549b545f
diff --git a/web/gui/src/main/webapp/topo2.css b/web/gui/src/main/webapp/topo2.css
index d982ee2..50b3493 100644
--- a/web/gui/src/main/webapp/topo2.css
+++ b/web/gui/src/main/webapp/topo2.css
@@ -32,7 +32,6 @@
/* TODO: move glyphs into framework */
-#topo-oibox svg .glyphIcon,
#topo svg .glyphIcon {
fill: black;
stroke: none;
@@ -43,6 +42,7 @@
stroke: none;
}
+
/* NODES */
#topo svg .node {
@@ -313,10 +313,59 @@
/* ONOS instance stuff */
#topo-oibox {
- width: 120px;
+ height: 100px;
}
-#topo-oibox .onosInst {
+#topo-oibox div.onosInst {
+ display: inline-block;
+ width: 120px;
+ height: 100px;
+}
+
+#topo-oibox svg rect {
+ fill: #ccc;
+ stroke: #aaa;
+ stroke-width: 3.5;
+}
+#topo-oibox .online svg rect {
+ opacity: 1;
+ fill: #9cf;
+ stroke: #357;
+}
+
+#topo-oibox svg .glyphIcon {
+ fill: #888;
+ fill-rule: evenodd;
+}
+#topo-oibox .online svg .glyphIcon {
+ fill: #000;
+}
+
+#topo-oibox svg .badgeIcon {
+ fill: #aaa;
+ fill-rule: evenodd;
+}
+
+#topo-oibox .online svg .badgeIcon {
+ fill: #fff;
+}
+
+
+#topo-oibox .onosInst.mastership {
+ opacity: 0.3;
+}
+#topo-oibox .onosInst.mastership.affinity {
+ opacity: 1.0;
+}
+#topo-oibox .onosInst.mastership.affinity svg rect {
+ filter: url(#blue-glow);
+}
+
+/* ------------------------------------------------------ */
+/* ------------------------------------------------------ */
+/* ------------------------------------------------------ */
+
+#topo-oibox .onosInst_OLD {
position: relative;
width: 88%;
left: 4%;
@@ -333,31 +382,24 @@
border: 4px solid #aaa;
}
-#topo-oibox .onosInst.online {
- /* theme-related */
- color: #113;
- background-color: #9cf;
- border: 4px solid #357;
-}
-
-#topo-oibox .onosInst .onosTitle {
+#topo-oibox .onosInst_OLD .onosTitle {
text-align: center;
font-size: 10pt;
margin-top: 6px;
color: #888;
}
-#topo-oibox .onosInst.online .onosTitle {
+#topo-oibox .onosInst_OLD.online .onosTitle {
color: black;
}
-#topo-oibox .onosInst svg .glyphIcon {
+#topo-oibox .onosInst_OLD svg .glyphIcon {
opacity: 0.5;
fill: black;
stroke: none;
fill-rule: evenodd;
}
-#topo-oibox .onosInst.online svg .glyphIcon {
+#topo-oibox .onosInst_OLD.online svg .glyphIcon {
opacity: 1;
fill: black;
stroke: none;
@@ -365,12 +407,12 @@
}
-#topo-oibox .onosInst.online img {
+#topo-oibox .onosInst_OLD.online img {
opacity: 1.0;
padding: 3px;
}
-#topo-oibox .onosInst img.ui {
+#topo-oibox .onosInst_OLD img.ui {
opacity: 1;
position: absolute;
top: 3px;
@@ -379,14 +421,6 @@
height: 20px;
}
-#topo-oibox .onosInst.mastership {
- opacity: 0.3;
-}
-#topo-oibox .onosInst.mastership.affinity {
- opacity: 1.0;
- box-shadow: 0 2px 8px #33e;
-}
-
#topo svg .suppressed {
opacity: 0.2;