NMS: Improve switch info window

New summary view with live switch-information. Improved SNMP data
listing and no more repetition of basic switch data for every view.

1 files changed, 280 insertions, 157 deletions

diff --git a/web/nms.gathering.org/js/nms-info-box.js b/web/nms.gathering.org/js/nms-info-box.js
index 1728d81..42ed505 100644
--- a/web/nms.gathering.org/js/nms-info-box.js
+++ b/web/nms.gathering.org/js/nms-info-box.js
@@ -158,176 +158,299 @@ nmsInfoBox._windowTypes.addSwitch = {
  *
  * Advanced window with information about a specific switch, and basic editing options
  *
- * Custom interfaces: showComments, showSNMP, showEdit, save
+ * Custom interfaces: showSummary, showInfoTable, showComments, showSNMP, showEdit, save
  *
  */
 nmsInfoBox._windowTypes.switchInfo = {
-  title: '',
-  content: '',
-  childContent: false,
-  sw: '',
-  swi: '',
-  swm: '',
+	title: '',
+	content: '',
+	childContent: false,
+	sw: '',
+	swi: '',
+	swm: '',
 	commentsHash: false,
 	activeView: '',
-  load: function(sw) {
-    if(sw) {
-      this.sw = sw;
-    }
-    this.swi = nmsData.switches["switches"][this.sw];
-		try {
-			this.swm = nmsData.smanagement.switches[this.sw];
-		} catch(e) {
-			this.swm = [];
+	load: function(sw) {
+		if(sw) {
+			this.sw = sw;
 		}
-
-    var content = [];
-
-    for (var v in this.swi) { 
-      if (v == "placement") {
-        var place = JSON.stringify(this.swi[v]);
-        content.push([v,place]);
-        continue;
-      }
-      content.push([v, this.swi[v]]);
-    }
-
-    for (var v in this.swm) { 
-      content.push([v, this.swm[v]]);
-    }
-    content.sort();
-
-    var infotable = nmsInfoBox._makeTable(content);
-    infotable.id = "info-switch-table";
-
-    this.content = infotable;
-
-  },
+		if(!this.swi) {
+			try {
+				this.swi = nmsData.switches["switches"][this.sw];
+			} catch(e) {
+				this.swi = [];
+			}
+		}
+		if(!this.swm) {
+			try {
+				this.swm = nmsData.smanagement.switches[this.sw];
+			} catch(e) {
+				this.swm = [];
+			}
+		}
+		nmsInfoBox._windowTypes.switchInfo.showSummary();
+		nmsData.addHandler("ticker","switchInfo",nmsInfoBox._windowTypes.switchInfo.update,"tick");
+	},
 	update: function(type) {
 		switch (type) {
 			case 'comments':
-				if(this.activeView == "comments" && this.commentsHash != nmsData.comments.hash) {
+				if(this.activeView == "summary" && this.commentsHash != nmsData.comments.hash) {
 					nmsInfoBox._windowTypes.switchInfo.showComments();
 				}
 				break;
 		}
 	},
-  getTitle: function() {
+	getTitle: function() {
 		var sshButton = '';
 		try {
 			var mgmt = nmsInfoBox._window.swm.mgmt_v4_addr;
 			sshButton = mgmt.split("/")[0];
-		} catch(e) {
-			console.log(e);
-		}
+		} catch(e) {}
 		if(sshButton != null && sshButton != undefined && sshButton != '') {
 			sshButton = ' <button type="button" class="ssh btn btn-xs btn-default"><a href="ssh://' + sshButton + '">SSH</a></button>';
 		}
-    return '<h4>' + this.sw + '</h4><button type="button" class="edit btn btn-xs btn-warning" onclick="nmsInfoBox._windowTypes.switchInfo.showEdit(\'' + this.sw + '\');">Edit</button> <button type="button" class="comments btn btn-xs btn-default" onclick="nmsInfoBox._windowTypes.switchInfo.showComments(\'' + this.sw + '\');">Comments</button> <button type="button" class="edit btn btn-xs btn-default" onclick="nmsInfoBox._windowTypes.switchInfo.showSNMP(\'ports\');">Ports</button> <button type="button" class="edit btn btn-xs btn-default" onclick="nmsInfoBox._windowTypes.switchInfo.showSNMP(\'misc\');">Misc</button>' + sshButton;
-  },
-  getContent: function() {
-    return this.content;
-  },
-  getChildContent: function() {
-    return this.childContent;
-  },
-  showComments: function() {
-			var oldView = this.activeView;
-			this.activeView = "comments";
-      var domObj = document.createElement("div");
-      var comments = [];
-
-      var commentbox = document.createElement("div");
-      commentbox.id = "commentbox";
-      commentbox.className = "panel-body";
-      commentbox.style.width = "100%";
-      commentbox.innerHTML = '<div class="input-group"><input type="text" class="form-control" placeholder="Comment" id="' + this.sw + '-comment"><span class=\"input-group-btn\"><button class="btn btn-default" onclick="addComment(\'' + this.sw + '\',document.getElementById(\'' + this.sw + '-comment\').value); document.getElementById(\'' + this.sw + '-comment\').value = \'\'; document.getElementById(\'' + this.sw + '-comment\').placeholder = \'Comment added. Wait for next refresh.\';">Add comment</button></span></div>';
-
-			// If we have no switch data, so just show comment form
-			if(!nmsData.comments || !nmsData.comments.comments) {
-				this.commentsHash = false;
+		return '<h4>' + this.sw + '</h4><button type="button" class="edit btn btn-xs btn-warning" onclick="nmsInfoBox._windowTypes.switchInfo.showEdit();">Edit</button> <button type="button" class="summary btn btn-xs btn-default" onclick="nmsInfoBox._windowTypes.switchInfo.showSummary();">Summary</button> <button type="button" class="details btn btn-xs btn-default" onclick="nmsInfoBox._windowTypes.switchInfo.showInfoTable();">Details</button> <button type="button" class="edit btn btn-xs btn-default" onclick="nmsInfoBox._windowTypes.switchInfo.showSNMP(\'ports\');">Ports</button> <button type="button" class="edit btn btn-xs btn-default" onclick="nmsInfoBox._windowTypes.switchInfo.showSNMP(\'misc\');">Misc</button>' + sshButton;
+	},
+	getContent: function() {
+		return this.content;
+	},
+	getChildContent: function() {
+		return this.childContent;
+	},
+	showSummary: function(argument) {
+		this.activeView = "summary";
+		var content = [];
 
-			// We have data, refresh
-			} else if(nmsData.comments.comments[this.sw]) {
-				this.commentsHash = nmsData.comments.hash;
-				for (var c in nmsData.comments.comments[this.sw]["comments"]) {
-					var comment = nmsData.comments.comments[this.sw]["comments"][c];
-					if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") {
-						comments.push(comment);
-					}
+		//Get DHCP info
+		var lastDhcp = undefined;
+		try {
+			var tempDhcp = nmsData.dhcp.dhcp[this.sw];
+			var now = Date.now();
+			now = Math.floor(now / 1000);
+			tempDhcp = now - parseInt(tempDhcp);
+			tempDhcp = tempDhcp + " s";
+		} catch(e) {}
+
+		//Get SNMP status
+		var snmpStatus = undefined;
+		try {
+			if (nmsData.snmp.snmp[this.sw].misc.sysName[0] != sw) {
+				snmpStatus = "Sysname mismatch";
+			} else {
+				snmpStatus = "OK";
+			}
+		} catch(e) {}
+
+		//Get CPU usage
+		var cpuUsage = undefined;
+		try {
+			var cpu = 0;
+			for (var u in nmsData.snmp.snmp[this.sw].misc.jnxOperatingCPU) {
+				var local = nmsData.snmp.snmp[this.sw].misc['jnxOperatingCPU'][u];
+				cpu = Math.max(nmsData.snmp.snmp[this.sw].misc.jnxOperatingCPU[u],cpu);
+			}
+			cpuUsage = cpu + " %";
+		} catch (e) {}
+
+		//Get traffic data
+		var uplinkTraffic = undefined;
+		try {
+			var speed = 0;
+			var t = parseInt(nmsData.switchstate.then[this.sw].uplinks.ifHCOutOctets);
+			var n = parseInt(nmsData.switchstate.switches[this.sw].uplinks.ifHCOutOctets);
+			var tt = parseInt(nmsData.switchstate.then[this.sw].time);
+			var nt = parseInt(nmsData.switchstate.switches[this.sw].time);
+			var tdiff = nt - tt;
+			var diff = n - t;
+			speed = diff / tdiff;
+			if(!isNaN(speed)) {
+				uplinkTraffic = byteCount(speed*8,0);
+			}
+		} catch (e) {};
+
+		//Get uptime data
+		var uptime = "";
+		try {
+			uptime = nmsData.snmp.snmp[this.sw]["misc"]["sysUpTimeInstance"][""] / 60 / 60 / 100;
+			uptime = Math.floor(uptime) + " t";
+		} catch(e) {}
+
+		//Get temperature data
+		var temp = "";
+		try {
+			temp = nmsData.switchstate.switches[this.sw].temp + " °C";
+		} catch(e) {}
+
+		content.push(["Ping latency:",(nmsData.ping.switches[this.sw].latency + " ms" || undefined)]);
+		content.push(["Last DHCP lease:",lastDhcp]);
+		content.push(["SNMP status:",snmpStatus]);
+		content.push(["CPU usage:",cpuUsage]);
+		content.push(["Uplink traffic:",uplinkTraffic]);
+		content.push(["System uptime:",uptime]);
+		content.push(["Temperature",temp]);
+		content.push(["Management (v4):",(this.swm.mgmt_v4_addr || '')]);
+		content.push(["Management (v6):",(this.swm.mgmt_v6_addr || '')]);
+		content.push(["Subnet (v4):",(this.swm.subnet4 || '')]);
+		content.push(["Subnet (v6):",(this.swm.subnet6 || '')]);
+
+		var contentCleaned = [];
+		for(var i in content) {
+			if(content[i][1] == '' || content[i][1] == null)
+				continue;
+			if(content[i][1] == undefined || content[i][1])
+				content[i][1] == "No data";
+			contentCleaned.push(content[i]);
+		}
+
+		var table = nmsInfoBox._makeTable(contentCleaned);
+		table.id = this.sw + "-summary";
+
+		this.content = table;
+
+		if(argument == "tick") {
+			var myObj = document.getElementById(this.sw + "-summary");
+			var oldObj = myObj.parentNode.replaceChild(this.content,myObj);
+			return;
+		}
+
+		this.childContent = '';
+		nmsInfoBox._windowTypes.switchInfo.showComments();
+		nmsInfoBox.refresh("soft");
+	},
+	showInfoTable: function() {
+		this.activeView = "infotable";
+		var content = [];
+
+		for (var v in this.swi) { 
+			if (v == "placement") {
+				var place = JSON.stringify(this.swi[v]);
+				content.push([v,place]);
+				continue;
+			}
+			content.push([v, this.swi[v]]);
+		}
+
+		for (var v in this.swm) { 
+			content.push([v, this.swm[v]]);
+		}
+		content.sort();
+
+		var infotable = nmsInfoBox._makeTable(content);
+		infotable.id = "info-switch-table";
+
+		this.content = infotable;
+		this.childContent = '';
+		nmsInfoBox.refresh("soft");
+	},
+	update: function(type) {
+		switch (type) {
+			case 'comments':
+				if(nmsInfoBox._windowTypes.switchInfo.activeView == "summary" && this.commentsHash != nmsData.comments.hash) {
+					nmsInfoBox._windowTypes.switchInfo.showComments();
 				}
+				break;
+			case 'tick':
+				if(nmsInfoBox._windowTypes.switchInfo.activeView == "summary")
+					nmsInfoBox._windowTypes.switchInfo.showSummary("tick");
+				break;
+		}
+	},
+	showComments: function() {
+		var domObj = document.createElement("div");
+		var comments = [];
+
+		var commentbox = document.createElement("div");
+		commentbox.id = "commentbox";
+		commentbox.className = "panel-body";
+		commentbox.style.width = "100%";
+		commentbox.innerHTML = '<div class="input-group"><input type="text" class="form-control" placeholder="Comment" id="' + this.sw + '-comment"><span class=\"input-group-btn\"><button class="btn btn-default" onclick="addComment(\'' + this.sw + '\',document.getElementById(\'' + this.sw + '-comment\').value); document.getElementById(\'' + this.sw + '-comment\').value = \'\'; document.getElementById(\'' + this.sw + '-comment\').placeholder = \'Comment added. Wait for next refresh.\';">Add comment</button></span></div>';
 
-				if (comments.length > 0) {
-					var commenttable = nmsInfoBox._makeCommentTable(comments);
-					commenttable.id = "info-switch-comments-table";
-					domObj.appendChild(commenttable);
+		// If we have no switch data, so just show comment form
+		if(!nmsData.comments || !nmsData.comments.comments) {
+			this.commentsHash = false;
+
+			// We have data, refresh
+		} else if(nmsData.comments.comments[this.sw]) {
+			this.commentsHash = nmsData.comments.hash;
+			for (var c in nmsData.comments.comments[this.sw]["comments"]) {
+				var comment = nmsData.comments.comments[this.sw]["comments"][c];
+				if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") {
+					comments.push(comment);
 				}
+			}
 
-			// We have no data for this switch, but its still correct
-			} else {
-				this.commentsHash = nmsData.comments.hash;
+			if (comments.length > 0) {
+				var commenttable = nmsInfoBox._makeCommentTable(comments);
+				commenttable.id = "info-switch-comments-table";
+				domObj.appendChild(commenttable);
 			}
 
-      domObj.appendChild(commentbox);
-      this.childContent = domObj;
-      nmsInfoBox.refresh();
-  },
-  showEdit: function() {
+			// We have no data for this switch, but its still correct
+		} else {
+			this.commentsHash = nmsData.comments.hash;
+		}
+
+		domObj.appendChild(commentbox);
+		this.childContent = domObj;
+		nmsInfoBox.refresh("soft");
+	},
+	showEdit: function() {
 		this.activeView = "edit";
-    var domObj = document.createElement("div");
-    var template = {};
-
-    nmsInfoBox._editValues = {};
-    var place;
-    for (var v in this.swi) {
-      if (v == "placement") {
-        place = JSON.stringify(this.swi[v]);
-        template[v] = place;
-        continue;
-      }
-      template[v] = nmsInfoBox._nullBlank(this.swi[v]);
-    }
-    for (var v in this.swm) {
-      template[v] = nmsInfoBox._nullBlank(this.swm[v]);
-    }
-    var content = [];
-    for (v in template) {
-      var tmpsw = '\'' + this.sw + '\'';
-      var tmpv = '\'' + v + '\'';
-      var tmphandler = '"nmsInfoBox._editChange(' + tmpsw + ',' + tmpv + ');"';
-      var html = "<input type=\"text\" class=\"form-control\" value='" + template[v] + "' id=\"edit-"+ this.sw + "-" + v + '" onchange=' + tmphandler + ' oninput=' + tmphandler + '/>';
-      content.push([v, html]);
-    }
+		var domObj = document.createElement("div");
+		var template = {};
+
+		nmsInfoBox._editValues = {};
+		var place;
+		for (var v in this.swi) {
+			if (v == "placement") {
+				place = JSON.stringify(this.swi[v]);
+				template[v] = place;
+				continue;
+			}
+			template[v] = nmsInfoBox._nullBlank(this.swi[v]);
+		}
+		for (var v in this.swm) {
+			template[v] = nmsInfoBox._nullBlank(this.swm[v]);
+		}
+		var content = [];
+		for (v in template) {
+			var tmpsw = '\'' + this.sw + '\'';
+			var tmpv = '\'' + v + '\'';
+			var tmphandler = '"nmsInfoBox._editChange(' + tmpsw + ',' + tmpv + ');"';
+			var html = "<input type=\"text\" class=\"form-control\" value='" + template[v] + "' id=\"edit-"+ this.sw + "-" + v + '" onchange=' + tmphandler + ' oninput=' + tmphandler + '/>';
+			content.push([v, html]);
+		}
 
 		content.sort();
 
-    var table = nmsInfoBox._makeTable(content, "edit");
-    domObj.appendChild(table);
+		var table = nmsInfoBox._makeTable(content, "edit");
+		domObj.appendChild(table);
 
-    var submit = document.createElement("button");
-    submit.innerHTML = "Save changes";
-    submit.classList.add("btn", "btn-primary");
-    submit.id = "edit-submit-" + this.sw;
-    submit.onclick = function(e) { nmsInfoBox._windowTypes.switchInfo.save(); };
-    domObj.appendChild(submit);
+		var submit = document.createElement("button");
+		submit.innerHTML = "Save changes";
+		submit.classList.add("btn", "btn-primary");
+		submit.id = "edit-submit-" + this.sw;
+		submit.onclick = function(e) { nmsInfoBox._windowTypes.switchInfo.save(); };
+		domObj.appendChild(submit);
 
-    var output = document.createElement("output");
-    output.id = "edit-output";
-    domObj.appendChild(output);
+		var output = document.createElement("output");
+		output.id = "edit-output";
+		domObj.appendChild(output);
 
-    if (place) {
-      var pval = document.getElementById("edit-" + this.sw + "-placement");
-      if (pval) {
-        pval.value = place;
-      }
-    }
+		if (place) {
+			var pval = document.getElementById("edit-" + this.sw + "-placement");
+			if (pval) {
+				pval.value = place;
+			}
+		}
 
-    this.childContent = domObj;
-    nmsInfoBox.refresh();
-  },
-  showSNMP: function(tree) {
+		this.content = domObj;
+		this.childContent = '';
+		nmsInfoBox.refresh("soft");
+	},
+	showSNMP: function(tree) {
 		this.activeView = "snmp";
-    var domObj = document.createElement("div");
+		var domObj = document.createElement("div");
 		domObj.classList.add("panel-group");
 
 		try {
@@ -375,10 +498,11 @@ nmsInfoBox._windowTypes.switchInfo = {
 
 		}
 		this.content = domObj;
-		
-    nmsInfoBox.refresh("soft");
-  },
-  unload: function() {
+		this.childContent = '';
+
+		nmsInfoBox.refresh("soft");
+	},
+	unload: function() {
 		this.title = '';
 		this.content = '';
 		this.childContent = false;
@@ -387,24 +511,25 @@ nmsInfoBox._windowTypes.switchInfo = {
 		this.swm = '';
 		this.commentsHash = false;
 		this.activeView = '';
-  },
-  save: function() {
-    var myData = nmsInfoBox._editStringify(this.sw);
-    $.ajax({
-      type: "POST",
-      url: "/api/write/switch-update",
-      dataType: "text",
-      data:myData,
-      success: function (data, textStatus, jqXHR) {
-        var result = JSON.parse(data);
-        if(result.switches_updated.length > 0) { // FIXME unresolved variable switches_addded
-          nmsInfoBox.hide();
-        }
-        nmsData.invalidate("switches");
-        nmsData.invalidate("smanagement");
-      }
-    });
-  }
+		nmsData.unregisterHandler("ticker","switchInfo");
+	},
+	save: function() {
+		var myData = nmsInfoBox._editStringify(this.sw);
+		$.ajax({
+			type: "POST",
+			url: "/api/write/switch-update",
+			dataType: "text",
+			data:myData,
+			success: function (data, textStatus, jqXHR) {
+				var result = JSON.parse(data);
+				if(result.switches_updated.length > 0) { // FIXME unresolved variable switches_addded
+					nmsInfoBox.hide();
+				}
+				nmsData.invalidate("switches");
+				nmsData.invalidate("smanagement");
+			}
+		});
+	}
 };
 
 /*
@@ -534,7 +659,6 @@ nmsInfoBox._windowTypes.inventoryListing = {
 nmsInfoBox.click = function(sw)
 {
   this.showWindow("switchInfo",sw);
-  this._windowTypes.switchInfo.showComments();
 };
 
 /*
@@ -707,7 +831,6 @@ nmsInfoBox._searchKeyListener = function(e) {
 			var sw = document.getElementById("searchbox").dataset.match;
 			if(sw != '') {
 				nmsInfoBox.showWindow("switchInfo",sw);
-				this._windowTypes.switchInfo.showComments();
 			}
 			break;
 		case 27: