From 843a1b99b21bacfd8263cf55cc252c26045b4ec2 Mon Sep 17 00:00:00 2001
From: Kristian Lyngstol <kly@kly.no>
Date: Thu, 30 Jun 2016 19:04:01 +0200
Subject: front: Add score card page

Displays a sorted list of what needs attention.
---
 web/css/nms.css            |  5 ++++
 web/index.html             | 10 +++++++
 web/js/nms-info-box.js     | 48 ++++++++++++++++++++++++++++++++
 web/js/nms-map-handlers.js |  4 +--
 web/js/nms-score-card.js   | 68 ++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 133 insertions(+), 2 deletions(-)
 create mode 100644 web/js/nms-score-card.js

(limited to 'web')

diff --git a/web/css/nms.css b/web/css/nms.css
index ac2791c..50ec36b 100644
--- a/web/css/nms.css
+++ b/web/css/nms.css
@@ -19,6 +19,11 @@ canvas {
 	background-color: #333333;
 	color: #ADADAD;
 }
+.fakelink {
+	text-decoration: underline;
+	cursor: pointer;
+}
+	
 .left {
 	width:  22ch;
 }
diff --git a/web/index.html b/web/index.html
index 14b60fc..655204e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -39,6 +39,7 @@
 	  <ul class="nav navbar-nav">
 	     <li id='map-link' class="active"><a href="#" onclick="nmsUi.setActive('map');">Map<span class="sr-only">(current)</span></a></li>
 	     <li id='admin-link' class="gondul-is-private"><a href="#" onclick="nmsUi.setActive('admin');nmsAdmin.updateConfigPane();">Admin</a></li>
+	     <li id='score-link' class="gondul-is-private"><a href="#" onclick="nmsUi.setActive('score');nmsScoreCard.init();">Score</a></li>
 	     <li id='oplog-link' class="gondul-is-private"><a href="#" onclick="nmsUi.setActive('oplog');">Oplog</a></li>
 	    <li class="dropdown">
 	      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Menu
@@ -127,6 +128,14 @@
 	</div>
       </div>
     </div>
+    <div class="container-fluid" id="score">
+      <div class="row-fluid" id="score-row">
+	<div id="score-parent" class="scorecard">
+	  <table id="score-table" class="table table-condensed">
+	  </table>
+	</div>
+      </div>
+    </div>
     <div class="container-fluid" id="map">
       <div class="row-fluid">
 	<div class="span12">
@@ -302,6 +311,7 @@
     <script type="text/javascript" src="js/nms-search.js"></script>
     <script type="text/javascript" src="js/nms-time.js"></script>
     <script type="text/javascript" src="js/nms-dhcp.js"></script>
+    <script type="text/javascript" src="js/nms-score-card.js"></script>
     <script src="js/jquery.datetimepicker.full.js" type="text/javascript"></script>
     <script type="text/javascript">
 	initNMS();
diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js
index 90ba12f..e15507d 100644
--- a/web/js/nms-info-box.js
+++ b/web/js/nms-info-box.js
@@ -50,6 +50,10 @@ var nmsInfoBox = nmsInfoBox || {
 				'name': 'SNMP - Misc',
 				'panels': ['switchSNMP:misc']
 			},
+			'graphs': {
+				'name': 'Graphs',
+				'panels': ['graphs']
+			},
 			'details': {
 				'name': 'Settings',
 				'panels': ['switchDetails']
@@ -618,6 +622,50 @@ var switchDetailsPanel = function() {
 	};
 };
 nmsInfoBox.addPanelType("switchDetails",switchDetailsPanel);
+var switchGraphsPanel = function() {
+	nmsInfoPanel.call(this,"switchDetails");
+	this.refresh = function(reason) {
+		var swi = [];
+		var swm = [];
+		try {
+			swi = nmsData.switches["switches"][this.sw];
+		} catch(e) {}
+		try {
+			swm = nmsData.smanagement.switches[this.sw];
+		} catch(e) {}
+		var zoomTime = 86400;
+		var device = this.sw;
+		var topel = document.createElement("div");
+		var interfaces = [];
+		for (var i in nmsData.switchstate.switches[this.sw].ifs) {
+			interfaces.push(i);
+		}
+		interfaces.sort();
+		var totalHead = document.createElement("h3");
+		totalHead.innerHTML = device + " total";
+		var total = document.createElement("img");
+		total.src = 'http://monitor.dx16.sorlanet.net/graph--start%3D-' + zoomTime +'%20--end%3D-60%20--width%3D530%20--height%3D150%20--rigid%20--slope-mode%20DEF%3Ab%3D%2F' + device + '%2Ftotals.rrd%3Atraffic_in%3AAVERAGE%20DEF%3Ac%3D%2F' + device + '%2Ftotals.rrd%3Atraffic_out%3AAVERAGE%20CDEF%3Acdefb%3Db%2C8%2C*%20CDEF%3Acdefg%3Dc%2C8%2C*%20AREA%3Acdefb%2300CF0033%20LINE1%3Acdefb%2300CF00FF%20AREA%3Acdefg%23002A9733%20LINE1%3Acdefg%23002A97FF';
+		topel.appendChild(totalHead);
+		topel.appendChild(total);
+		for (var ii in interfaces) {
+			var img = document.createElement("img");
+			var head = document.createElement("h3");
+			var i = interfaces[ii];
+			if (nmsData.switchstate.switches[this.sw].ifs[i].ifHCInOctets == 0 
+			 && nmsData.switchstate.switches[this.sw].ifs[i].ifHCOutOctets == 0) {
+				continue;
+			}
+			head.innerHTML = device + " - " + i;
+			i = i.replace(/\//g , "");
+			img.src = 'http://monitor.dx16.sorlanet.net/graph--start%3D-' + zoomTime + '%20--end%3D-60%20--width%3D530%20--height%3D150%20--rigid%20--slope-mode%20DEF%3Ab%3D%2F' + device + '%2F' + i + '.rrd%3Atraffic_in%3AAVERAGE%20DEF%3Ac%3D%2F' + device + '%2F' + i + '.rrd%3Atraffic_out%3AAVERAGE%20CDEF%3Acdefb%3Db%2C8%2C*%20CDEF%3Acdefg%3Dc%2C8%2C*%20AREA%3Acdefb%2300CF0033%20LINE1%3Acdefb%2300CF00FF%20AREA%3Acdefg%23002A9733%20LINE1%3Acdefg%23002A97FF';
+			topel.appendChild(head);
+			topel.appendChild(img);
+		}
+
+		this._render(topel);
+	};
+};
+nmsInfoBox.addPanelType("graphs",switchGraphsPanel);
 
 var searchHelpPanel = function() {
 	nmsInfoPanel.call(this,"searchHelp");
diff --git a/web/js/nms-map-handlers.js b/web/js/nms-map-handlers.js
index 6c5ef0d..4cf2fea 100644
--- a/web/js/nms-map-handlers.js
+++ b/web/js/nms-map-handlers.js
@@ -397,10 +397,10 @@ function pingInfo(sw)
 			ret.score = 1000;
 			ret.why = "No IPv4 or IPv6 ping reply";
 		} else if(v6 == undefined) {
-			ret.score = 100;
+			ret.score = 250;
 			ret.why = "No IPv6 ping reply";
 		} else if (v4 == undefined) {
-			ret.score = 99;
+			ret.score = 249;
 			ret.why = "No IPv4 ping reply";
 		}
 
diff --git a/web/js/nms-score-card.js b/web/js/nms-score-card.js
new file mode 100644
index 0000000..7e4d39a
--- /dev/null
+++ b/web/js/nms-score-card.js
@@ -0,0 +1,68 @@
+"use strict";
+
+var nmsScoreCard = nmsScoreCard || {
+	_handler: null
+};
+
+nmsScoreCard.init = function() {
+	var scores = [];
+	for (var sw in nmsData.switches.switches) {
+		var worst = healthInfo(sw);
+		worst.sw = sw;
+		scores.push(worst);
+	}
+	scores.sort(function(a,b) {
+		return b.score - a.score;
+	});
+	var content = [];
+	for (var i in scores) {
+		var sw = scores[i];
+		content.push([sw.score, sw.sw, sw.why]);
+	}
+	var parentel = document.getElementById("score-parent");
+	while (parentel.firstChild) {
+		parentel.removeChild(parentel.firstChild);
+	}
+	parentel.appendChild(nmsScoreCard._buildTable(content));
+	if (nmsScoreCard._handler != null) {
+		clearTimeout(nmsScoreCard._handler);
+		nmsScoreCard._handler = null;
+	}
+	nmsScoreCard._handler = setTimeout(nmsScoreCard.init, 10000);
+}
+nmsScoreCard._buildTable = function(content,caption) {
+	var table = document.createElement("table");
+	var tr;
+	var td1;
+	var td2;
+	var td3;
+	table.className = "table";
+	table.classList.add("table");
+	table.classList.add("table-condensed");
+	if (caption != undefined) {
+		var cap = document.createElement("caption");
+		cap.textContent = caption;
+		table.appendChild(cap);
+	}
+	for (var v in content) {
+		tr = table.insertRow(-1);
+		if (content[v][0] > 500) {
+			tr.classList.add("danger");
+		} else if (content[v][0] > 249) {
+			tr.classList.add("warning");
+		} else if (content[v][0] > 99) {
+			tr.classList.add("info");
+		} else {
+			tr.classList.add("success");
+		}
+		td1 = tr.insertCell(0);
+		td1.classList.add("left");
+		td2 = tr.insertCell(1);
+		td3 = tr.insertCell(2);
+		td1.innerHTML = content[v][0];
+		console.log("<p class=\"fakelink\" onclick=\"nmsUi.setActive(\"map\"); nmsInfoBox.click(\"" + content[v][1] + "\");\">" + content[v][1] + "</p>");
+		td2.innerHTML = "<p class=\"fakelink\" onclick='nmsUi.setActive(\"map\"); nmsInfoBox.click(\"" + content[v][1] + "\");'>" + content[v][1] + "</p>";
+		td3.innerHTML = content[v][2];
+	}
+	return table;
+}
-- 
cgit v1.2.3