From 6a3a30725cdd850995af897d8e0a62189ff1a3b1 Mon Sep 17 00:00:00 2001
From: Kristian Lyngstol <kristian@bohemians.org>
Date: Mon, 7 Nov 2016 16:11:54 +0100
Subject: Graph ALL the things

Tweaks background colors on graphs.

Adds a funky "ticker" to the navbar that may or may not break small
screens. Graphs average latency and total bandwidth for all equipment.
---
 web/index.html         |  3 +++
 web/js/nms-info-box.js |  8 +++-----
 web/js/nms.js          | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/web/index.html b/web/index.html
index 2133b0c..8df058e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -90,6 +90,9 @@
 	      </div>
 	    </div>
 	    <p class="navbar-text" id="dhcp-summary">(...)</p>
+	    <div class="navbar-text" id="navbar-graph-div">
+		    <img id="navbar-graph" title="Blue: Average latency, green: Total traffic"/>
+	    </div>
 	    </li>
 	  </ul>
 	  <div class="navbar-form navbar-right gondul-is-private">
diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js
index 3bc60af..9d9d9a3 100644
--- a/web/js/nms-info-box.js
+++ b/web/js/nms-info-box.js
@@ -682,7 +682,7 @@ var switchPortsPanel = function () {
 			if (snmpJson[obj].ifHCInOctets != 0 
 			 || snmpJson[obj].ifHCOutOctets != 0) {
 				var img = document.createElement("img");
-				img.src = '/render/?target=cactiStyle(aliasByMetric(perSecond(snmp.' + this.sw + '.' + obj + '.{ifHCOutOctets,ifHCInOctets})),"binary")&target=cactiStyle(aliasByMetric(secondYAxis(snmp.' + this.sw + '.' + obj + '.{ifInDiscards,ifInErrors,ifOutDiscards,ifOutErrors})),"binary")' + nmsInfoBox._graphDefaults();
+				img.src = '/render/?target=cactiStyle(aliasByMetric(perSecond(snmp.' + this.sw + '.' + obj + '.{ifHCOutOctets,ifHCInOctets})),"binary")&target=cactiStyle(aliasByMetric(secondYAxis(perSecond(snmp.' + this.sw + '.' + obj + '.{ifInDiscards,ifInErrors,ifOutDiscards,ifOutErrors}))),"binary")' + nmsInfoBox._graphDefaults();
 				img.classList.add("graph");
 				panelBodyObj.appendChild(img);
 			}
@@ -1140,16 +1140,14 @@ nmsInfoBox._graphZoom = function() {
 nmsInfoBox._graphFrom = "-60min";
 nmsInfoBox._graphUntil = "now";
 nmsInfoBox._graphDefaults = function(title) {
-	// Copied from nms-color-util.js. Could do with expanding.
-	var colorlist = "337ab7,5cb85c,5bc0de,f0ad4e,d9534f,ffffff";
 	if (title != undefined) {
 		title = "From " + nmsInfoBox._graphFrom + " until " + nmsInfoBox._graphUntil + " (" + title + ")";
 	} else {
 		title = "From " + nmsInfoBox._graphFrom + " until " + nmsInfoBox._graphUntil;
 	}
-	var base = "&yMinLeft=0&yMinRight=0&yMin=0&fontName=courier&width=600&height=240&yUnitSystem=binary&format=svg&colorList=" + colorlist + "&from=" + nmsInfoBox._graphFrom + "&until=" + nmsInfoBox._graphUntil + '&title=' + title;
+	var base = "&yMinLeft=0&yMinRight=0&yMin=0&bgcolor=%23ffffff00&fontName=courier&width=600&height=240&yUnitSystem=binary&format=svg&from=" + nmsInfoBox._graphFrom + "&until=" + nmsInfoBox._graphUntil + '&title=' + title;
 	if (nms.nightMode) {
-		return "&bgcolor=%23222222&fgcolor=%23dddddd&minorGridLineColor=%233d3d3d&majorGridLineColor=%23666666" + base;
+		return "&fgcolor=%23dddddd&minorGridLineColor=%233d3d3d&majorGridLineColor=%23666666" + base;
 	} else {
 		return base;
 	}
diff --git a/web/js/nms.js b/web/js/nms.js
index 36ff97f..bdea1b6 100644
--- a/web/js/nms.js
+++ b/web/js/nms.js
@@ -395,6 +395,8 @@ function initNMS() {
 		nmsData.registerSource("snmp","/api/read/snmp");
 		nmsData.registerSource("smanagement","/api/read/switches-management");
 		nmsData.registerSource("oplog", "/api/read/oplog");
+		setInterval(nmsUpdateNavbarGraph, 10000);
+		nmsUpdateNavbarGraph();
 		nmsOplog.init();
 	}
 
@@ -611,6 +613,19 @@ function restoreSettings()
 	setMenu();
 }
 
+/*
+ * Updates a simple legend-free graph, located on the navbar.
+ *
+ * The idea is to give a general "feeling" of the event. And that it's
+ * neat.
+ *
+ * The timer-thing to bust a cache divides by 10 seconds, so updating more
+ * than once every 10 seconds is pointless.
+ */
+function nmsUpdateNavbarGraph() {
+	var img = document.getElementById("navbar-graph");
+	img.src = "/render/?target=movingAverage(averageSeries(ping.*.ipv4),%225min%22)&target=secondYAxis(averageSeries(perSecond(snmp.*.*.{ifHCInOctets,ifHCOutOctets})))&bgcolor=%23ffffff00&width=600&height=20&format=svg&from=-60min&until=now&graphOnly=true&somerandomthing=" + Math.floor(new Date().getTime() / 10000);
+}
 /*
  * Test if the entire path specified in the arrary "ar" exists under the
  * specified root.
-- 
cgit v1.2.3