Refactored Traffic Monitor code to display packets / second.
- cleaned up "rate thresholds" for coloring links.
- added unit tests for TopoUtils.
- "Monitor All Traffic" button on toolbar now cycles between 3 modes.
Change-Id: If33cfb3e6d6190e1321752b6d058274d3004f309
diff --git a/web/gui/src/main/webapp/app/view/topo/topo-theme.css b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
index 768c506..8f48766 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
@@ -267,24 +267,37 @@
stroke: rgba(0,153,51,0.5);
}
-/* Port traffic color visualization for Kbps, Mbps, and Gbps */
+/* Port traffic color visualization:
-#ov-topo svg .link.secondary.port-traffic-Kbps {
+ For bits per second we will use:
+ - green for Kbps,
+ - yellow for Mbps,
+ - orange for Gbps, and
+ - red for > 10 Gbps
+
+ For packets per second we will use:
+ - green for > 0
+ - yellow for > ?
+ - orange for > ??
+ - red for > ???
+*/
+
+#ov-topo svg .link.secondary.port-traffic-green {
stroke: rgb(0,153,51);
stroke-width: 5.0;
}
-#ov-topo svg .link.secondary.port-traffic-Mbps {
+#ov-topo svg .link.secondary.port-traffic-yellow {
stroke: rgb(128,145,27);
stroke-width: 6.5;
}
-#ov-topo svg .link.secondary.port-traffic-Gbps {
+#ov-topo svg .link.secondary.port-traffic-orange {
stroke: rgb(255, 137, 3);
stroke-width: 8.0;
}
-#ov-topo svg .link.secondary.port-traffic-Gbps-choked {
+#ov-topo svg .link.secondary.port-traffic-red {
stroke: rgb(183, 30, 21);
stroke-width: 8.0;
}
diff --git a/web/gui/src/main/webapp/app/view/topo/topoForce.js b/web/gui/src/main/webapp/app/view/topo/topoForce.js
index 03d8477..0808271 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoForce.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoForce.js
@@ -898,8 +898,8 @@
// TODO: find an automatic way of tracking via the "showHighlights" events
var allTrafficClasses = 'primary secondary optical animated ' +
- 'port-traffic-Kbps port-traffic-Mbps port-traffic-Gbps ' +
- 'port-traffic-Gbps-choked';
+ 'port-traffic-green port-traffic-yellow port-traffic-orange ' +
+ 'port-traffic-red';
function clearLinkTrafficStyle() {
link.style('stroke-width', null)
diff --git a/web/gui/src/main/webapp/app/view/topo/topoTraffic.js b/web/gui/src/main/webapp/app/view/topo/topoTraffic.js
index 2db9275..11a4dba 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoTraffic.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoTraffic.js
@@ -32,9 +32,22 @@
selectOrder()
*/
+ var allTrafficTypes = [
+ 'flowStatsBytes',
+ 'portStatsBitSec',
+ 'portStatsPktSec'
+ ],
+ allTrafficMsgs = [
+ 'Flow Stats (bytes)',
+ 'Port Stats (bits / second)',
+ 'Port Stats (packets / second)'
+ ];
+
// internal state
var trafficMode = null,
- hoverMode = null;
+ hoverMode = null,
+ allTrafficIndex = 0;
+
// === -----------------------------------------------------
@@ -104,18 +117,14 @@
return true;
}
- function showAllFlowTraffic() {
+ function showAllTraffic() {
trafficMode = 'allFlowPort';
hoverMode = null;
- wss.sendEvent('requestAllFlowTraffic');
- flash.flash('All Flow Traffic');
- }
-
- function showAllPortTraffic() {
- trafficMode = 'allFlowPort';
- hoverMode = null;
- wss.sendEvent('requestAllPortTraffic');
- flash.flash('All Port Traffic');
+ wss.sendEvent('requestAllTraffic', {
+ trafficType: allTrafficTypes[allTrafficIndex]
+ });
+ flash.flash(allTrafficMsgs[allTrafficIndex]);
+ allTrafficIndex = (allTrafficIndex + 1) % 3;
}
function showDeviceLinkFlows () {
@@ -245,8 +254,7 @@
// invoked from toolbar overlay buttons or keystrokes
cancelTraffic: cancelTraffic,
- showAllFlowTraffic: showAllFlowTraffic,
- showAllPortTraffic: showAllPortTraffic,
+ showAllTraffic: showAllTraffic,
showDeviceLinkFlows: showDeviceLinkFlows,
showRelatedIntents: showRelatedIntents,
showPrevIntent: showPrevIntent,
diff --git a/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js b/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
index ac8f4a2..7877e93 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
@@ -75,13 +75,8 @@
},
A: {
- cb: function () { tts.showAllFlowTraffic(); },
- tt: 'Monitor all traffic using flow stats',
- gid: 'm_allTraffic'
- },
- Q: {
- cb: function () { tts.showAllPortTraffic(); },
- tt: 'Monitor all traffic using port stats',
+ cb: function () { tts.showAllTraffic(); },
+ tt: 'Monitor all traffic',
gid: 'm_allTraffic'
},
F: {
@@ -111,7 +106,7 @@
},
_keyOrder: [
- '0', 'A', 'Q', 'F', 'V', 'leftArrow', 'rightArrow', 'W'
+ '0', 'A', 'F', 'V', 'leftArrow', 'rightArrow', 'W'
]
},
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoTraffic-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoTraffic-spec.js
index 0a04f34..2f51848 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoTraffic-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoTraffic-spec.js
@@ -38,8 +38,7 @@
'initTraffic',
'destroyTraffic',
'cancelTraffic',
- 'showAllFlowTraffic',
- 'showAllPortTraffic',
+ 'showAllTraffic',
'showDeviceLinkFlows',
'showRelatedIntents',
'showPrevIntent',