ONOS-245 Adding more polish and capability to the GUI.
Change-Id: I20cfd48f10de5f053d0c00dc1460d85d5c0d22de
diff --git a/web/gui/src/main/webapp/topo2.css b/web/gui/src/main/webapp/topo2.css
index 45377b1..0514a6f 100644
--- a/web/gui/src/main/webapp/topo2.css
+++ b/web/gui/src/main/webapp/topo2.css
@@ -135,28 +135,26 @@
stroke-dasharray: 8 4;
}
-#topo svg .link.primary {
- stroke: #ffA300;
- stroke-width: 4px;
-}
#topo svg .link.secondary {
stroke: rgba(0,153,51,0.5);
stroke-width: 3px;
}
+#topo svg .link.primary {
+ stroke: #ffA300;
+ stroke-width: 4px;
+}
#topo svg .link.animated {
stroke: #ffA300;
- Xstroke-width: 6px;
- Xstroke-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.primary.optical {
+ stroke: #74f;
+ stroke-width: 6px;
+}
#topo svg .link.animated.optical {
stroke: #74f;
stroke-width: 10px;
@@ -164,8 +162,6 @@
}
#topo svg .linkLabel rect {
- Xstroke: #ccc;
- Xstroke-width: 2px;
fill: #eee;
stroke: none;
}
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index 2a36dfd..e9a8c1e 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -141,6 +141,8 @@
U: unpin,
R: resetZoomPan,
H: toggleHover,
+ V: showTrafficAction,
+ A: showAllTrafficAction,
esc: handleEscape
};
@@ -832,8 +834,9 @@
}
// NOTE: hover is only populated if "show traffic on hover" is
- // toggled on, and the item hovered is a host...
- var hoverId = (trafficHover() && hovered && hovered.class === 'host')
+ // toggled on, and the item hovered is a host or a device...
+ var hoverId = (trafficHover() && hovered &&
+ (hovered.class === 'host' || hovered.class === 'device'))
? hovered.id : '';
sendMessage('requestTraffic', {
ids: selectOrder,
@@ -841,6 +844,10 @@
});
}
+ function showAllTrafficAction() {
+ sendMessage('requestAllTraffic', {});
+ }
+
// ==============================
// onos instance panel functions
@@ -1367,14 +1374,14 @@
function nodeMouseOver(d) {
hovered = d;
- if (trafficHover() && d.class === 'host') {
+ if (trafficHover() && (d.class === 'host' || d.class === 'device')) {
showTrafficAction();
}
}
function nodeMouseOut(d) {
hovered = null;
- if (trafficHover() && d.class === 'host') {
+ if (trafficHover() && (d.class === 'host' || d.class === 'device')) {
showTrafficAction();
}
}