GUI -- Implemented "Show Traffic on hover" toggle button in masthead.
- also included sample *Instance events.
Change-Id: Ibdee2b6c54a0a192361d269dbe69128d44604838
diff --git a/web/gui/src/main/webapp/json/ev/_capture/rx/addInstance_ex1.json b/web/gui/src/main/webapp/json/ev/_capture/rx/addInstance_ex1.json
new file mode 100644
index 0000000..5077182
--- /dev/null
+++ b/web/gui/src/main/webapp/json/ev/_capture/rx/addInstance_ex1.json
@@ -0,0 +1,7 @@
+{
+ "event": "addInstance",
+ "payload": {
+ "id": "onos-1",
+ "online": "true"
+ }
+}
diff --git a/web/gui/src/main/webapp/json/ev/_capture/rx/removeInstance_ex1.json b/web/gui/src/main/webapp/json/ev/_capture/rx/removeInstance_ex1.json
new file mode 100644
index 0000000..0f9388b
--- /dev/null
+++ b/web/gui/src/main/webapp/json/ev/_capture/rx/removeInstance_ex1.json
@@ -0,0 +1,7 @@
+{
+ "event": "removeInstance",
+ "payload": {
+ "id": "onos-1",
+ "online": "false"
+ }
+}
diff --git a/web/gui/src/main/webapp/json/ev/_capture/rx/updateInstance_ex1.json b/web/gui/src/main/webapp/json/ev/_capture/rx/updateInstance_ex1.json
new file mode 100644
index 0000000..e8cf9e8
--- /dev/null
+++ b/web/gui/src/main/webapp/json/ev/_capture/rx/updateInstance_ex1.json
@@ -0,0 +1,7 @@
+{
+ "event": "updateInstance",
+ "payload": {
+ "id": "onos-1",
+ "online": "false"
+ }
+}
diff --git a/web/gui/src/main/webapp/mast2.css b/web/gui/src/main/webapp/mast2.css
index 57fede4..9cf1783 100644
--- a/web/gui/src/main/webapp/mast2.css
+++ b/web/gui/src/main/webapp/mast2.css
@@ -91,3 +91,47 @@
border: 1px solid #eee;
color: #aaf;
}
+
+/* Button Bar */
+
+#bb {
+ margin: 0 30px;
+ padding: 0 2px;
+}
+
+#bb .btn {
+ padding: 2px 6px;
+ font-size: 9pt;
+ cursor: pointer;
+}
+
+.light #bb .btn {
+ border: 1px solid #fff;
+ border-right-color: #444;
+ border-bottom-color: #444;
+ color: #222;
+}
+
+.light #bb .btn.active {
+ border: 1px solid #444;
+ border-right-color: #fff;
+ border-bottom-color: #fff;
+ background-color: #888;
+ color: #ddf;
+}
+
+.dark #bb .btn {
+ border: 1px solid #888;
+ border-right-color: #111;
+ border-bottom-color: #111;
+ color: #888;
+}
+
+.dark #bb .btn.active {
+ border: 1px solid #111;
+ border-right-color: #888;
+ border-bottom-color: #888;
+ background-color: #555;
+ color: #bbd;
+}
+
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index dcde928..f660f20 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -1385,11 +1385,33 @@
}
-
function para(sel, text) {
sel.append('p').text(text);
}
+ // TODO: toggle button (and other widgets in the masthead) should be provided
+ // by the framework; not generated by the view.
+
+ var showTrafficOnHover;
+
+ function addButtonBar(view) {
+ var bb = d3.select('#mast')
+ .append('span').classed('right', true).attr('id', 'bb');
+
+ showTrafficOnHover = bb.append('div')
+ .classed('btn', true)
+ .text('Show traffic on hover')
+ .on('click', toggleShowTraffic);
+ }
+
+ function toggleShowTraffic() {
+ showTrafficOnHover.classed('active', !trafficHover());
+ }
+
+ function trafficHover() {
+ return showTrafficOnHover.classed('active');
+ }
+
// ==============================
// View life-cycle callbacks
@@ -1496,6 +1518,10 @@
view.setRadio(btnSet);
view.setKeys(keyDispatch);
+ // patch in our "button bar" for now
+ // TODO: implement a more official frameworky way of doing this..
+ addButtonBar(view);
+
// Load map data asynchronously; complete startup after that..
loadGeoJsonData();
}