From 4ea3a099b05fa910498bfbf1b2d7387118355472 Mon Sep 17 00:00:00 2001
From: "Ole Mathias Aa. Heggem" <olemathias.aa.heggem@gmail.com>
Date: Sun, 13 Apr 2025 07:18:45 +0200
Subject: Upgrade bootstrap and rewrite API (#230)

---
 web/js/nms-info-box.js | 1851 ++++++++++++++++++++++++------------------------
 1 file changed, 929 insertions(+), 922 deletions(-)

(limited to 'web/js/nms-info-box.js')

diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js
index 1a15e6c..f79fc7a 100644
--- a/web/js/nms-info-box.js
+++ b/web/js/nms-info-box.js
@@ -29,220 +29,224 @@
  * Basic configuration
  */
 var nmsInfoBox = nmsInfoBox || {
-	stats: {},
-	_container: false, //Container window
-	_windowHandler: false, //Window handler
-	_sw: false, //Name of last switch opened, used for toggle-click
-	_windowTypes: [
-	{
-		'id': 'switchInfo',
-		'title': 'Switch info',
-		'views': {
-			'initial': {
-				'name': 'Summary',
-				'panels': ['switchLatency','switchSummary','switchComments'],
-				'public': true
-			},
-			'ports': {
-				'name': 'Ports',
-				'panels': ['switchPorts']
-			},
-			'misc': {
-				'name': 'SNMP',
-				'panels': ['switchSNMP:misc']
-			},
-			'links': {
-				'name': 'Links',
-				'panels': ['switchLinks']
-			},
-			'edit': {
-				'name': 'Edit settings',
-				'panels': ['switchEdit']
-			}
-		}
-	},
-	{
-		'id': 'networkInfo',
-		'title': 'Network info',
-		'views': {
-			'initial': {
-				'name': 'Summary',
-				'panels': ['networkSummary']
-			},
-			'edit': {
-				'name': 'Edit settings',
-				'panels': ['networkEdit']
-			}
-		}
-	},
-	{
-		'id': 'addSwitch',
-		'title': 'Add new switch(es)',
-		'views': {
-			'initial': {
-				'name': 'Add switch',
-				'panels': ['switchAdd']
-			}
-		}
-	},
-	{
-		'id': 'addNetwork',
-		'title': 'Add new network(s)',
-		'views': {
-			'initial': {
-				'name': 'Add network',
-				'panels': ['networkAdd']
-			}
-		}
-	},
-	{
-		'id': 'searchHelp',
-		'title': 'Search help',
-		'views': {
-			'initial': {
-				'name': 'Search help',
-				'panels': ['searchHelp']
-			}
-		}
-	},
-  {
-		'id': 'searchResults',
-		'title': 'Search Results',
-		'views': {
-			'initial': {
-				'name': 'Search Results',
-				'panels': ['searchResults']
-			}
-		}
-	},
-	{
-		'id': 'listNetwork',
-		'title': 'Networks',
-		'views': {
-			'initial': {
-				'name': 'List all networks',
-				'panels': ['listNetworks']
-			}
-		}
-	},
-],
-	_panelTypes: {} //Populate by using the nmsInfoBox.addPanelType method
+  stats: {},
+  _container: false, //Container window
+  _windowHandler: false, //Window handler
+  _sw: false, //Name of last switch opened, used for toggle-click
+  _windowTypes: [
+    {
+      id: "switchInfo",
+      title: "Switch info",
+      views: {
+        initial: {
+          name: "Summary",
+          panels: ["switchLatency", "switchSummary", "switchLinks", "switchComments"],
+          public: true,
+        },
+        ports: {
+          name: "Ports",
+          panels: ["switchPorts"],
+        },
+        misc: {
+          name: "SNMP",
+          panels: ["switchSNMP:misc"],
+        },
+        edit: {
+          name: "Settings",
+          panels: ["switchEdit"],
+        },
+      },
+    },
+    {
+      id: "networkInfo",
+      title: "Network info",
+      views: {
+        initial: {
+          name: "Summary",
+          panels: ["networkSummary"],
+        },
+        edit: {
+          name: "Settings",
+          panels: ["networkEdit"],
+        },
+      },
+    },
+    {
+      id: "addSwitch",
+      title: "Add new switch(es)",
+      views: {
+        initial: {
+          name: "Add switch",
+          panels: ["switchAdd"],
+        },
+      },
+    },
+    {
+      id: "addNetwork",
+      title: "Add new network(s)",
+      views: {
+        initial: {
+          name: "Add network",
+          panels: ["networkAdd"],
+        },
+      },
+    },
+    {
+      id: "searchHelp",
+      title: "Search help",
+      views: {
+        initial: {
+          name: "Search help",
+          panels: ["searchHelp"],
+        },
+      },
+    },
+    {
+      id: "searchResults",
+      title: "Search Results",
+      views: {
+        initial: {
+          name: "Search Results",
+          panels: ["searchResults"],
+        },
+      },
+    },
+    {
+      id: "listNetwork",
+      title: "Networks",
+      views: {
+        initial: {
+          name: "List all networks",
+          panels: ["listNetworks"],
+        },
+      },
+    },
+    {
+      id: "debug",
+      title: "Debug",
+      views: {
+        initial: {
+          name: "Debug",
+          panels: ["debugInfo"],
+        },
+        stats: {
+          name: "Stats",
+          panels: ["debugStats"],
+        },
+      },
+    },
+  ],
+  _panelTypes: {}, //Populate by using the nmsInfoBox.addPanelType method
 };
 
 /*
  * Shows a window, and triggers initial load if needed
  */
-nmsInfoBox.showWindow = function (windowName,argument) {
-	if(windowName == "switchInfo" && argument != '' && argument == this._sw) {
-		nmsInfoBox.hide();
-		return;
-	}
-
-	if(!this._container)
-		this._load();
-	if(!windowName)
-		windowName = 'switchInfo';
-
-	this._sw = argument;
-
-	this._windowHandler.showWindow(windowName,argument)
-
-	$(this._windowHandler.getTitleObj()).on('mousedown', function(e) {
-		var cont = $(nmsInfoBox._container);
-		var dimensions = nmsInfoBox._container.getBoundingClientRect();
-		var startLeft = dimensions.left;
-		var startTop = dimensions.top;
-		nmsInfoBox.startDrag(e.screenX, e.screenY, startLeft, startTop);
-	});
-	$(this._windowHandler.getTitleObj()).on('mouseup',nmsInfoBox.stopDrag);
+nmsInfoBox.showWindow = function (windowName, argument) {
+  if (windowName == "switchInfo" && argument != "" && argument == this._sw) {
+    nmsInfoBox.hide();
+    return;
+  }
+
+  if (!this._container) this._load();
+  if (!windowName) windowName = "switchInfo";
+
+  this._sw = argument;
+
+  this._windowHandler.showWindow(windowName, argument);
 };
 
 /*
  * Internal function to load and register the initial html objects
  */
-nmsInfoBox._load = function() {
-	var infoBox = document.createElement("div");
-	infoBox.classList.add("panel", "panel-default");
-	var title = document.createElement("div");
-	title.id = "info-box-title";
-	title.classList.add("panel-heading");
-	var nav = document.createElement("div");
-	nav.id = "info-box-nav";
-	nav.classList.add("panel-body");
-	var body = document.createElement("div");
-	body.id = "info-box-body";
-	body.classList.add("panel-body");
-
-	infoBox.appendChild(title);
-	infoBox.appendChild(nav);
-	infoBox.appendChild(body);
-
-	this._container = document.getElementById("info-box-container");
-	this._container.appendChild(infoBox);
-
-	this._windowHandler = new windowHandler();
-	this._windowHandler.setContainerObj(document.getElementById("info-box-container"));
-	this._windowHandler.setTitleObj(document.getElementById("info-box-title"));
-	this._windowHandler.setBodyObj(document.getElementById("info-box-body"));
-	this._windowHandler.setNavObj(document.getElementById("info-box-nav"));
-	this._windowHandler.setPanelTypes(this._panelTypes);
-	this._windowHandler.setWindowTypes(this._windowTypes);
+nmsInfoBox._load = function () {
+  var modalBox = document.createElement("div");
+  modalBox.classList.add("modal", "show");
+  modalBox.style = "display: block;";
+  // did not work
+  // modalBox.setAttribute('data-bs-backdrop', "false");
+
+  var dialogBox = document.createElement("div");
+  dialogBox.classList.add(
+    "modal-dialog",
+    "modal-lg",
+    "modal-dialog-scrollable"
+  );
+
+  var dialogContentBox = document.createElement("div");
+  dialogContentBox.classList.add("modal-content");
+
+  var dialogHeader = document.createElement("div");
+  dialogHeader.classList.add("modal-header");
+
+  modalBox.appendChild(dialogBox);
+
+  dialogBox.appendChild(dialogContentBox);
+
+  var title = document.createElement("div");
+  title.id = "info-box-title";
+  title.classList.add("modal-title");
+
+  var nav = document.createElement("div");
+  nav.id = "info-box-nav";
+
+  var body = document.createElement("div");
+  body.id = "info-box-body";
+  body.classList.add("modal-body");
+
+  var closeButton = document.createElement("button");
+  // <button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
+  closeButton.classList.add("btn-close");
+  closeButton.onclick = function () {
+    nmsInfoBox.hide();
+  };
+
+  dialogContentBox.appendChild(dialogHeader);
+  dialogContentBox.appendChild(body);
+  dialogHeader.appendChild(title);
+  dialogHeader.appendChild(nav);
+  dialogHeader.appendChild(closeButton);
+
+  this._container = document.getElementById("info-box-container");
+  this._container.appendChild(modalBox);
+
+  this._windowHandler = new windowHandler();
+  this._windowHandler.setContainerObj(
+    document.getElementById("info-box-container")
+  );
+  this._windowHandler.setTitleObj(document.getElementById("info-box-title"));
+  this._windowHandler.setBodyObj(document.getElementById("info-box-body"));
+  this._windowHandler.setNavObj(document.getElementById("info-box-nav"));
+  this._windowHandler.setPanelTypes(this._panelTypes);
+  this._windowHandler.setWindowTypes(this._windowTypes);
 };
 
 /*
  * Adds a panel type to _panelTypes for usage in windows and views
  */
 nmsInfoBox.addPanelType = function (id, obj) {
-	this._panelTypes[id] = obj;
+  this._panelTypes[id] = obj;
 };
 
-
 /*
  * Hide the active window and tell it to unload
  */
-nmsInfoBox.hide = function() {
-	this._sw = false;
-	if (this._windowHandler != undefined && this._windowHandler.hide != undefined) {
-		this._windowHandler.hide();
-		this._windowHandler.unloadWindow();
-	}
-	nmsInfoBox.resetDrag();
-};
-
-/*
- * Start window drag
- */
-nmsInfoBox.startDrag = function(mouseStartX, mouseStartY, startLeft, startTop) {
-	document.onmousemove = function(e) {
-		var mouseOffsetX = e.screenX - mouseStartX;
-		var mouseOffsetY = e.screenY - mouseStartY;
-		$(nmsInfoBox._container).css('left', startLeft + mouseOffsetX + 'px');
-		$(nmsInfoBox._container).css('top', startTop + mouseOffsetY + 'px');
-	};
-};
-
-/*
- * Reset drag
- */
-nmsInfoBox.resetDrag = function() {
-	nmsInfoBox.stopDrag();
-	$(nmsInfoBox._container).css('left','');
-	$(nmsInfoBox._container).css('top','');
-};
-
-/*
- * Stop window drag
- */
-nmsInfoBox.stopDrag = function() {
-	document.onmousemove = null;
+nmsInfoBox.hide = function () {
+  this._sw = false;
+  if (
+    this._windowHandler != undefined &&
+    this._windowHandler.hide != undefined
+  ) {
+    this._windowHandler.hide();
+    this._windowHandler.unloadWindow();
+  }
 };
 
 /*
  * Click a switch and display it.
  */
-nmsInfoBox.click = function(sw)
-{
-	this.showWindow("switchInfo",sw);
+nmsInfoBox.click = function (sw) {
+  this.showWindow("switchInfo", sw);
 };
 
 /*
@@ -262,159 +266,163 @@ nmsInfoBox.click = function(sw)
  *
  */
 var windowHandler = function () {
-	this.containerObj = false;
-	this.titleObj = false;
-	this.navObj = false;
-	this.bodyObj = false;
-	this._panels = {};
-	this._view = "";
-	this._viewId = {};
-	this._window = {};
-	this.windowTypes = false;
-	this.panelTypes = false;
-	this.argument = false;
-	this.show = function () {
-		this.containerObj.classList.remove("hidden");
-	};
-	this.hide = function () {
-		this.containerObj.classList.add("hidden");
-	};
-	this.setContainerObj = function (containerObj) {
-		this.containerObj = containerObj;
-	};
-	this.setTitleObj = function (titleObj) {
-		this.titleObj = titleObj;
-	};
-	this.getTitleObj = function (titleObj) {
-		return this.titleObj;
-	};
-	this.setNavObj = function (navObj) {
-		this.navObj = navObj;
-	};
-	this.setBodyObj = function (bodyObj) {
-		this.bodyObj = bodyObj;
-	};
-	this.setPanelTypes = function (panelTypes) {
-		this.panelTypes = panelTypes;
-	};
-	this.setWindowTypes = function (windowTypes) {
-		this.windowTypes = {};
-		for(var i in windowTypes) {
-			this.windowTypes[windowTypes[i].id] = windowTypes[i];
-		}
-	};
-	this.setArgument = function (argument) {
-		if(this.argument != argument) {
-			this.argument = argument;
-			this.showView(this._view);
-		}
-	};
-	this.showPanel = function (panelName) {
-		var panelArray = panelName.split(":");
-		var panelName = panelArray[0];
-		var panelMode = panelArray[1];
-		if(this.panelTypes[panelName]) {
-			var id = (Math.random().toString(36)+'00000000000000000').slice(2, 10+2);
-			var panel = new this.panelTypes[panelName];
-			panel.setId(id);
-			if(!!panelMode)
-				panel.setMode(panelMode);
-			panel.load(this.bodyObj,this.argument);
-			this._panels[id] = panel;
-		}
-	};
-	this.showTitle = function (title) {
-		this.titleObj.innerHTML = '<button type="button" class="close" aria-label="Close" onclick="nmsInfoBox.hide();" style="float: right;"><span aria-hidden="true">&times;</span></button><h4>' + title + '</h4>';
-	};
-	this.showNav = function () {
-		if(!this._window.views)
-			this.navObj.innerHTML = '';
-		var output = '<ul class="nav nav-pills small">';
-		var i = 0;
-		for(var view in this._window.views) {
-			var viewObj = this._window.views[view];
-			var active = '';
-			if (viewObj.public == null || viewObj.public == false)
-				active = ' class="gondul-is-private" '
-			if(this._view == view)
-				active = ' class="active" ';
-			output += '<li' + active + '><a class="' + view + '" aria-label="' + viewObj.name + '" onclick="nmsInfoBox._windowHandler.showView(\'' + view + '\');">' + viewObj.name + '</a></li> ';
-			i++;
-		}
-		output += '</ul>';
-		if(i < 2) {
-			this.navObj.innerHTML = '';
-		} else {
-			this.navObj.innerHTML = output;
-		}
-	};
-	this.addWindow = function (windowObj) {
-		this.windowTypes[windowObj.id] = windowObj;
-	};
-	this.showWindow = function (windowName,argument) {
-		if(!this.windowTypes[windowName])
-			return;
-		this.unloadWindow();
-		this.argument = argument;
-		this._window = this.windowTypes[windowName];
-		this.showTitle(this._window.title + " " + (argument ? argument : ""));
-		this.showView();
-		this.show();
-	};
-	this.showView = function (viewId) {
-		if(!viewId || viewId == '') {
-			if (this._viewId[this._window.id] == undefined)
-				viewId = "initial";
-			else
-				viewId = this._viewId[this._window.id];
-		} else {
-			this._viewId[this._window.id] = viewId;
-		}
-		if(!this._window.views || !this._window.views[viewId])
-			return;
-		this.unloadView();
-		for(var panel in this._window.views[viewId].panels) {
-			this.showPanel(this._window.views[viewId].panels[panel]);
-		}
-		this._view = viewId;
-		this.showNav();
-	};
-	this.removePanel = function (panelId) {
-		if(!!panelId)
-			this.unloadPanel(panelId);
-	};
-	this.unloadView = function () {
-		this.unloadPanel();
-	};
-	this.unloadWindow = function() {
-		this.hide();
-		this.unloadPanel();
-	};
-	this.unloadPanel = function (panelId) {
-		if(!panelId) {
-			for(var i in this._panels) {
-				this._panels[i].unload();
-			}
-			this._panels = {};
-		} else {
-			try {
-				this._panels[panelId].unload();
-			} catch (e) {}
-			delete this._panels[panelId];
-		}
-	};
-	//Method for triggering a function in an active panel
-	this.doInPanel = function (panelId, action, argument) {
-		if(!this._panels[panelId])
-			return;
-		if(typeof this._panels[panelId][action] === "function") {
-			if(!argument) {
-				this._panels[panelId][action]();
-			} else {
-				this._panels[panelId][action](argument);
-			}
-		}
-	};
+  this.containerObj = false;
+  this.titleObj = false;
+  this.navObj = false;
+  this.bodyObj = false;
+  this._panels = {};
+  this._view = "";
+  this._viewId = {};
+  this._window = {};
+  this.windowTypes = false;
+  this.panelTypes = false;
+  this.argument = false;
+  this.show = function () {
+    this.containerObj.classList.remove("d-none");
+  };
+  this.hide = function () {
+    this.containerObj.classList.add("d-none");
+  };
+  this.setContainerObj = function (containerObj) {
+    this.containerObj = containerObj;
+  };
+  this.setTitleObj = function (titleObj) {
+    this.titleObj = titleObj;
+  };
+  this.getTitleObj = function (titleObj) {
+    return this.titleObj;
+  };
+  this.setNavObj = function (navObj) {
+    this.navObj = navObj;
+  };
+  this.setBodyObj = function (bodyObj) {
+    this.bodyObj = bodyObj;
+  };
+  this.setPanelTypes = function (panelTypes) {
+    this.panelTypes = panelTypes;
+  };
+  this.setWindowTypes = function (windowTypes) {
+    this.windowTypes = {};
+    for (var i in windowTypes) {
+      this.windowTypes[windowTypes[i].id] = windowTypes[i];
+    }
+  };
+  this.setArgument = function (argument) {
+    if (this.argument != argument) {
+      this.argument = argument;
+      this.showView(this._view);
+    }
+  };
+  this.showPanel = function (panelName) {
+    var panelArray = panelName.split(":");
+    var panelName = panelArray[0];
+    var panelMode = panelArray[1];
+    if (this.panelTypes[panelName]) {
+      var id = (Math.random().toString(36) + "00000000000000000").slice(
+        2,
+        10 + 2
+      );
+      var panel = new this.panelTypes[panelName]();
+      panel.setId(id);
+      if (!!panelMode) panel.setMode(panelMode);
+      panel.load(this.bodyObj, this.argument);
+      this._panels[id] = panel;
+    }
+  };
+  this.showTitle = function (title) {
+    this.titleObj.innerHTML = '<h1 class="modal-title fs-4">' + title + "</h1>";
+  };
+  this.showNav = function () {
+    if (!this._window.views) this.navObj.innerHTML = "";
+    var output = '<ul class="nav nav-tabs">';
+    var i = 0;
+    for (var view in this._window.views) {
+      var viewObj = this._window.views[view];
+      var active = '><a class="nav-link ';
+      if (this._view == view) {
+        active = '><a class="nav-link active ';
+      }
+      output +=
+        "<li" +
+        ' class="nav-item gondul-is-private" ' +
+        active +
+        view +
+        '" aria-label="' +
+        viewObj.name +
+        '" onclick="nmsInfoBox._windowHandler.showView(\'' +
+        view +
+        "');\">" +
+        viewObj.name +
+        "</a></li> ";
+      i++;
+    }
+    if (i < 2) {
+      this.navObj.innerHTML = "";
+    } else {
+      this.navObj.innerHTML = output;
+    }
+  };
+  this.addWindow = function (windowObj) {
+    this.windowTypes[windowObj.id] = windowObj;
+  };
+  this.showWindow = function (windowName, argument) {
+    if (!this.windowTypes[windowName]) return;
+    this.unloadWindow();
+    this.argument = argument;
+    this._window = this.windowTypes[windowName];
+    this.showTitle(this._window.title + " " + (argument ? argument : ""));
+    this.showView();
+    this.show();
+  };
+  this.showView = function (viewId) {
+    if (!viewId || viewId == "") {
+      if (this._viewId[this._window.id] == undefined) viewId = "initial";
+      else viewId = this._viewId[this._window.id];
+    } else {
+      this._viewId[this._window.id] = viewId;
+    }
+    if (!this._window.views || !this._window.views[viewId]) return;
+    this.unloadView();
+    for (var panel in this._window.views[viewId].panels) {
+      this.showPanel(this._window.views[viewId].panels[panel]);
+    }
+    this._view = viewId;
+    this.showNav();
+  };
+  this.removePanel = function (panelId) {
+    if (!!panelId) this.unloadPanel(panelId);
+  };
+  this.unloadView = function () {
+    this.unloadPanel();
+  };
+  this.unloadWindow = function () {
+    this.hide();
+    this.unloadPanel();
+  };
+  this.unloadPanel = function (panelId) {
+    if (!panelId) {
+      for (var i in this._panels) {
+        this._panels[i].unload();
+      }
+      this._panels = {};
+    } else {
+      try {
+        this._panels[panelId].unload();
+      } catch (e) {}
+      delete this._panels[panelId];
+    }
+  };
+  //Method for triggering a function in an active panel
+  this.doInPanel = function (panelId, action, argument) {
+    if (!this._panels[panelId]) return;
+    if (typeof this._panels[panelId][action] === "function") {
+      if (!argument) {
+        this._panels[panelId][action]();
+      } else {
+        this._panels[panelId][action](argument);
+      }
+    }
+  };
 };
 
 /*
@@ -432,122 +440,125 @@ var windowHandler = function () {
  * };
  *
  */
-var nmsInfoPanel = function nmsInfoPanel(name,id) {
-	this.name = name;
-	this.id = id;
-	this.sw = false;
-	this.container = false;
-	this.classList = ['info-panel'];
-	this.me = false;
-	this.handlers = [];
-	this.mode = "initial";
-
-	if(!this.id)
-		this.id = (Math.random().toString(36)+'00000000000000000').slice(2, 10+2);
-
-	//Method for loading the general panel properties
-	this.load = function (container,argument) {
-		this.container = container;
-		this.sw = argument;
-		this.me = document.createElement("div");
-		this.me.id = this.id;
-		for(var i in this.classList)
-			this.me.classList.add(this.classList[i]);
-		this.container.appendChild(this.me);
-		this.init(argument);
-	};
-
-	//Method for making this specific panel-instance ready for first refresh
-	//Override in children when any custom init-functionality is needed
-	this.init = function (argument) {
-		this.refresh("init");
-	};
-
-	//Methods for getting and setting panel id
-	this.setId = function (id) {
-		this.id = id;
-	};
-	this.getId = function () {
-		return this.id;
-	};
-
-	//Methods for setting and getting mode (default "initial")
-	this.setMode = function (mode) {
-		this.mode = mode;
-	};
-	this.getMode = function () {
-		return this.mode;
-	};
-
-	//Internal method for rendering content
-	this._render = function (newContent) {
-		if(!newContent || !this.me)
-			return;
-		this.me.innerHTML = newContent.outerHTML;
-	};
-
-	//Helper method for rendering error messages in a unified way
-	this._renderError = function (message) {
-		var error = document.createElement("div");
-		error.className = "alert alert-info";
-		error.innerHTML = message;
-		this._render(error);
-	};
-
-	//Method for unloading any local data
-	this.unload = function () {
-		if(!this.me)
-			return;
-		this.me.remove();
-		this.removeHandlers();
-		this.sw = false;
-		this.container = false;
-		this.me = false;
-		this.id = false;
-	};
-
-	//Method for loading new data and triggering a _render if needed
-	//Implemented in children only
-	this.refresh = function (reason) {};
-
-	//Methods for adding and removing classes
-	this.addClass = function (className) {
-		if(this.classList.indexOf(className) == -1) {
-			this.classList.push(className);
-			this.me.classList.add(className);
-		}
-	};
-	this.removeClass = function (className) {
-		var index = this.classList.indexOf(className);
-		if(index != -1) {
-			this.classList.splice(index,1);
-			this.me.classList.remove(className);
-		}
-	};
-
-	//Method for registering a data handler (lets us clean them up later)
-	this.addHandler = function (dataType,targetFunction) {
-		if(!targetFunction)
-			targetFunction = "refresh";
-		nmsData.addHandler(dataType,this.id,(this[targetFunction]).bind(this),"handler-"+dataType);
-		this.handlers.push(dataType);
-	};
-
-	//Method for removing all handlers we have registered
-	this.removeHandlers = function () {
-		for(var i in this.handlers) {
-			nmsData.unregisterHandler(this.handlers[i],this.id);
-		}
-	};
-
-	//Method for checking if we have handlers registered
-	this.hasHandler = function (dataType) {
-		for(var i in this.handlers) {
-			if(this.handlers[i] == dataType)
-				return true;
-		}
-		return false;
-	};
+var nmsInfoPanel = function nmsInfoPanel(name, id) {
+  this.name = name;
+  this.id = id;
+  this.sw = false;
+  this.container = false;
+  this.classList = ["info-panel"];
+  this.me = false;
+  this.handlers = [];
+  this.mode = "initial";
+
+  if (!this.id)
+    this.id = (Math.random().toString(36) + "00000000000000000").slice(
+      2,
+      10 + 2
+    );
+
+  //Method for loading the general panel properties
+  this.load = function (container, argument) {
+    this.container = container;
+    this.sw = argument;
+    this.me = document.createElement("div");
+    this.me.id = this.id;
+    for (var i in this.classList) this.me.classList.add(this.classList[i]);
+    this.container.appendChild(this.me);
+    this.init(argument);
+  };
+
+  //Method for making this specific panel-instance ready for first refresh
+  //Override in children when any custom init-functionality is needed
+  this.init = function (argument) {
+    this.refresh("init");
+  };
+
+  //Methods for getting and setting panel id
+  this.setId = function (id) {
+    this.id = id;
+  };
+  this.getId = function () {
+    return this.id;
+  };
+
+  //Methods for setting and getting mode (default "initial")
+  this.setMode = function (mode) {
+    this.mode = mode;
+  };
+  this.getMode = function () {
+    return this.mode;
+  };
+
+  //Internal method for rendering content
+  this._render = function (newContent) {
+    if (!newContent || !this.me) return;
+    this.me.innerHTML = newContent.outerHTML;
+  };
+
+  //Helper method for rendering error messages in a unified way
+  this._renderError = function (message) {
+    var error = document.createElement("div");
+    error.className = "alert alert-info";
+    error.innerHTML = message;
+    this._render(error);
+  };
+
+  //Method for unloading any local data
+  this.unload = function () {
+    if (!this.me) return;
+    this.me.remove();
+    this.removeHandlers();
+    this.sw = false;
+    this.container = false;
+    this.me = false;
+    this.id = false;
+  };
+
+  //Method for loading new data and triggering a _render if needed
+  //Implemented in children only
+  this.refresh = function (reason) {};
+
+  //Methods for adding and removing classes
+  this.addClass = function (className) {
+    if (this.classList.indexOf(className) == -1) {
+      this.classList.push(className);
+      this.me.classList.add(className);
+    }
+  };
+  this.removeClass = function (className) {
+    var index = this.classList.indexOf(className);
+    if (index != -1) {
+      this.classList.splice(index, 1);
+      this.me.classList.remove(className);
+    }
+  };
+
+  //Method for registering a data handler (lets us clean them up later)
+  this.addHandler = function (dataType, targetFunction) {
+    if (!targetFunction) targetFunction = "refresh";
+    nmsData.addHandler(
+      dataType,
+      this.id,
+      this[targetFunction].bind(this),
+      "handler-" + dataType
+    );
+    this.handlers.push(dataType);
+  };
+
+  //Method for removing all handlers we have registered
+  this.removeHandlers = function () {
+    for (var i in this.handlers) {
+      nmsData.unregisterHandler(this.handlers[i], this.id);
+    }
+  };
+
+  //Method for checking if we have handlers registered
+  this.hasHandler = function (dataType) {
+    for (var i in this.handlers) {
+      if (this.handlers[i] == dataType) return true;
+    }
+    return false;
+  };
 };
 
 /*
@@ -559,220 +570,228 @@ var nmsInfoPanel = function nmsInfoPanel(name,id) {
  *
  */
 var switchSNMPPanel = function () {
-	nmsInfoPanel.call(this,"switchSNMP");
-	this.init = function() {
-		this.refresh();
-	};
-	this.refresh = function(reason) {
-		var domObj = document.createElement("div");
-		domObj.classList.add("panel-group");
-
-		try {
-			var snmpJson = nmsData.snmp.snmp[this.sw][this.mode];
-		} catch(e) {
-			this._renderError("Waiting for data.");
-			return;
-		}
-
-		for(var obj in snmpJson) {
-
-			var cleanObj = obj.replace(/\W+/g, "");
-
-			var groupObj = document.createElement("div");
-			groupObj.classList.add("panel","panel-default","nms-panel-small");
-			groupObj.innerHTML = '<a class="panel-heading collapse-controller" style="display:block;" role="button" data-toggle="collapse" href="#'+cleanObj+'-group">' + obj + '</a>';
-
-			var groupObjCollapse = document.createElement("div");
-			groupObjCollapse.id = cleanObj + "-group";
-			groupObjCollapse.classList.add("collapse");
-
-			var panelBodyObj = document.createElement("div");
-			panelBodyObj.classList.add("panel-body");
-
-			var tableObj = document.createElement("table");
-			tableObj.classList.add("table","table-condensed");
-
-			var tbody = document.createElement("tbody");
-
-			for(var prop in snmpJson[obj]) {
-				var propObj = document.createElement("tr");
-				propObj.innerHTML = '<td>' + prop + '</td><td>' + snmpJson[obj][prop] + '</td>';
-				tbody.appendChild(propObj);
-			}
-
-			tableObj.appendChild(tbody);
-			panelBodyObj.appendChild(tableObj);
-			groupObjCollapse.appendChild(panelBodyObj);
-			groupObj.appendChild(groupObjCollapse);
-			domObj.appendChild(groupObj);
-
-		}
-
-		this._render(domObj);
-	};
+  nmsInfoPanel.call(this, "switchSNMP");
+  this.init = function () {
+    this.refresh();
+  };
+  this.refresh = function (reason) {
+    var domObj = document.createElement("div");
+    domObj.classList.add("panel-group");
+
+    try {
+      var snmpJson = nmsData.snmp.snmp[this.sw][this.mode];
+    } catch (e) {
+      this._renderError("Waiting for data.");
+      return;
+    }
+
+    for (var obj in snmpJson) {
+      var cleanObj = obj.replace(/\W+/g, "");
+
+      var groupObj = document.createElement("div");
+      groupObj.classList.add("panel", "panel-default", "nms-panel-small");
+      groupObj.innerHTML =
+        '<h6 class="">' + obj + '</h6>';
+
+      var groupObjCollapse = document.createElement("div");
+      groupObjCollapse.id = cleanObj + "-group";
+      //groupObjCollapse.classList.add("collapse");
+
+      var panelBodyObj = document.createElement("div");
+      panelBodyObj.classList.add("panel-body");
+
+      var tableObj = document.createElement("table");
+      tableObj.classList.add("table");
+
+      var tbody = document.createElement("tbody");
+
+      for (var prop in snmpJson[obj]) {
+        var propObj = document.createElement("tr");
+        propObj.innerHTML =
+          "<td>" + prop + "</td><td>" + snmpJson[obj][prop] + "</td>";
+        tbody.appendChild(propObj);
+      }
+
+      tableObj.appendChild(tbody);
+      panelBodyObj.appendChild(tableObj);
+      groupObjCollapse.appendChild(panelBodyObj);
+      groupObj.appendChild(groupObjCollapse);
+      domObj.appendChild(groupObj);
+    }
+
+    this._render(domObj);
+  };
 };
-nmsInfoBox.addPanelType("switchSNMP",switchSNMPPanel);
+nmsInfoBox.addPanelType("switchSNMP", switchSNMPPanel);
 var switchPortsPanel = function () {
-	nmsInfoPanel.call(this,"switchPorts");
-	this.init = function() {
-		this.refresh();
-	};
-	this.refresh = function(reason) {
-		var domObj = document.createElement("div");
-		domObj.classList.add("panel-group");
-
-		try {
-			var snmpOldJson;
-			var snmpJson = nmsData.snmp.snmp[this.sw]['ports'];
-			if (nmsData.old.snmp != undefined) {
-				snmpOldJson = nmsData.old.snmp.snmp[this.sw]['ports'];
-			}
-		} catch(e) {
-			this._renderError("Waiting for data.");
-			return;
-		}
-		var chart = document.createElement("canvas");
-		chart.id = this.sw+'port-total-chart';
-		drawSumOfPorts(this.sw+'port-total-chart',this.sw)
-		var expanderButton = document.createElement("a");
-		expanderButton.innerHTML = "Toggle all";
-		expanderButton.setAttribute("onclick","$('.collapse-top').collapse('toggle');");
-		expanderButton.setAttribute("role","button");
-
-                var interfaceAliasButton = document.createElement("a");
-                interfaceAliasButton.innerHTML = "Toggle interfaces without ifAlias";
-                interfaceAliasButton.setAttribute("onclick", "$('.nms-interface-missing-alias').toggle();");
-                interfaceAliasButton.setAttribute("role","button");
-
-		domObj.appendChild(chart);
-		domObj.appendChild(expanderButton);
-		domObj.appendChild(document.createElement("br"));
-		domObj.appendChild(interfaceAliasButton);
-		var indicies = [];
-		for (var obj in snmpJson) {
-			indicies.push(obj);
-		}
-		indicies.sort(function(a,b) {
-			var tmpx = [ snmpJson[a].ifName, snmpJson[b].ifName ];
-			tmpx.sort();
-			if (tmpx[0] == snmpJson[a].ifName) {
-				return -1;
-			} else {
-				return 1;
-			}
-		});
-		for(var obji in indicies) {
-			var obj = indicies[obji];
-			var cleanObj = obj.replace(/\W+/g, "");
-			var groupObj = document.createElement("div");
-			groupObj.classList.add("panel","panel-default","nms-panel-small");
-			var glyphicon = "glyphicon-remove";
-			var button = "btn-danger";
-			var title = "link down";
-			groupObj.classList.add("nms-interface-down");
-			if (snmpJson[obj].ifOperStatus == "up") {
-				glyphicon = "glyphicon-ok";
-				button = "btn-success";
-				title = "link up";
-				groupObj.classList.remove("nms-interface-down");
-			}
-			if (snmpJson[obj].ifAdminStatus == "down") {
-				glyphicon = "glyphicon-ban-circle";
-				title = "admin down";
-				button = "btn-info";
-			}
-			var traffic = "";
-			try {
-				var nowin = parseInt(snmpJson[obj].ifHCInOctets);
-				var nowout = parseInt(snmpJson[obj].ifHCOutOctets);
-				if (!isNaN(nowin) && !isNaN(nowout)) {
-					traffic = "<small>" + byteCount(nowin) + "B in | " + byteCount(nowout) + "B out </small>";
-				}
-			} catch(e) {};
-
-			if(snmpJson[obj].ifAlias == null || snmpJson[obj].ifAlias == '') {
-				groupObj.classList.add("nms-interface-missing-alias");
-			}
-			groupObj.innerHTML = '<span class="panel-heading" style="display:block;"><a class="collapse-controller" role="button" data-toggle="collapse" href="#'+cleanObj+'-group">' + snmpJson[obj].ifName + ' </a><small>' + snmpJson[obj].ifAlias + '</small><span class="pull-right">' + traffic + '<i class="btn-xs ' + button + '"><span class="glyphicon ' + glyphicon + '" title="' + title + '" aria-hidden="true"></span></i></span></span>';
-
-			var groupObjCollapse = document.createElement("div");
-			groupObjCollapse.id = cleanObj + "-group";
-			groupObjCollapse.classList.add("collapse");
-			groupObjCollapse.classList.add("collapse-top");
-
-			var panelBodyObj = document.createElement("div");
-			panelBodyObj.classList.add("panel-body");
-
-			var tableObj = document.createElement("table");
-			tableObj.classList.add("table","table-condensed");
-
-			var tbody = document.createElement("tbody");
-			var props = [];
-			for (var prop in snmpJson[obj]) {
-				props.push(prop);
-			}
-			props.sort();
-			for(var index in props) {
-				var prop = props[index];
-				var propObj = document.createElement("tr");
-				var append = "";
-				var value = snmpJson[obj][prop];
-				if (!isNaN(parseInt(value))) {
-					append = byteCount(value, 2);
-					if (append != value)
-						append = " (" + append + ")";
-					else
-						append = "";
-				}
-				propObj.innerHTML = '<td>' + prop + '</td><td>' + value + append + '</td>';
-				tbody.appendChild(propObj);
-			}
-
-			tableObj.appendChild(tbody);
-			if (snmpJson[obj].ifHCInOctets != 0
-			 || snmpJson[obj].ifHCOutOctets != 0) {
-				var chart = document.createElement("canvas");
-                		chart.id = this.sw+'port-'+obj+'-chart';
-                		drawPort(this.sw+'port-'+obj+'-chart',this.sw,obj)
-
-				panelBodyObj.appendChild(chart);
-			}
-			var tableTopObj = document.createElement("div");
-			tableTopObj.innerHTML = '<span class="panel-heading" style="display:block;"><a class="collapse-controller" role="button" data-toggle="collapse" href="#'+cleanObj+'-table-group">Details</a></span>';
-			var tableTopObjCollapse = document.createElement("div");
-			tableTopObjCollapse.id = cleanObj + "-table-group";
-			tableTopObjCollapse.classList.add("collapse");
-			tableTopObjCollapse.classList.add("collapse-detail");
-			tableTopObjCollapse.appendChild(tableObj);
-			tableTopObj.appendChild(tableTopObjCollapse);
-			panelBodyObj.appendChild(tableTopObj);
-			//panelBodyObj.appendChild(tableObj);
-			groupObjCollapse.appendChild(panelBodyObj);
-			groupObj.appendChild(groupObjCollapse);
-			domObj.appendChild(groupObj);
-
-		}
-
-		this._render(domObj);
-	};
+  nmsInfoPanel.call(this, "switchPorts");
+  this.init = function () {
+    this.refresh();
+  };
+  this.refresh = function (reason) {
+    var domObj = document.createElement("div");
+    domObj.classList.add("panel-group");
+
+    try {
+      var snmpOldJson;
+      var snmpJson = nmsData.snmp.snmp[this.sw]["ports"];
+      if (nmsData.old.snmp != undefined) {
+        snmpOldJson = nmsData.old.snmp.snmp[this.sw]["ports"];
+      }
+    } catch (e) {
+      this._renderError("Waiting for data.");
+      return;
+    }
+    //var expanderButton = document.createElement("a");
+    //expanderButton.innerHTML = "Toggle all";
+    //expanderButton.setAttribute("onclick","$('.collapse-top').collapse('toggle');");
+    //expanderButton.setAttribute("role", "button");
+
+    //var interfaceAliasButton = document.createElement("a");
+    //interfaceAliasButton.innerHTML = "Toggle interfaces without ifAlias";
+    //interfaceAliasButton.setAttribute("onclick", "$('.nms-interface-missing-alias').toggle();");
+    //interfaceAliasButton.setAttribute("role", "button");
+
+    //domObj.appendChild(expanderButton);
+    //domObj.appendChild(document.createElement("br"));
+    //domObj.appendChild(interfaceAliasButton);
+    var indicies = [];
+    for (var obj in snmpJson) {
+      indicies.push(obj);
+    }
+    indicies.sort(function (a, b) {
+      var tmpx = [snmpJson[a].ifName, snmpJson[b].ifName];
+      tmpx.sort();
+      if (tmpx[0] == snmpJson[a].ifName) {
+        return -1;
+      } else {
+        return 1;
+      }
+    });
+    for (var obji in indicies) {
+      var obj = indicies[obji];
+      var cleanObj = obj.replace(/\W+/g, "");
+      var groupObj = document.createElement("div");
+      groupObj.classList.add("panel", "panel-default", "nms-panel-small");
+      var glyphicon = "glyphicon-remove";
+      var button = "btn-danger";
+      var title = "link down";
+      groupObj.classList.add("nms-interface-down");
+      if (snmpJson[obj].ifOperStatus == "up") {
+        glyphicon = "glyphicon-ok";
+        button = "btn-success";
+        title = "link up";
+        groupObj.classList.remove("nms-interface-down");
+      }
+      if (snmpJson[obj].ifAdminStatus == "down") {
+        glyphicon = "glyphicon-ban-circle";
+        title = "admin down";
+        button = "btn-info";
+      }
+      var traffic = "";
+      try {
+        var nowin = parseInt(snmpJson[obj].ifHCInOctets);
+        var nowout = parseInt(snmpJson[obj].ifHCOutOctets);
+        if (!isNaN(nowin) && !isNaN(nowout)) {
+          traffic =
+            "<small>" +
+            byteCount(nowin) +
+            "B in | " +
+            byteCount(nowout) +
+            "B out </small>";
+        }
+      } catch (e) {}
+
+      if (snmpJson[obj].ifAlias == null || snmpJson[obj].ifAlias == "") {
+        groupObj.classList.add("nms-interface-missing-alias");
+      }
+      groupObj.innerHTML =
+        '<span class="panel-heading" style="display:block;"><a class="collapse-controller" role="button" data-toggle="collapse" href="#' +
+        cleanObj +
+        '-group">' +
+        snmpJson[obj].ifName +
+        " </a><small>" +
+        snmpJson[obj].ifAlias +
+        '</small><span class="pull-right">' +
+        traffic +
+        '<i class="btn-xs ' +
+        button +
+        '"><span class="glyphicon ' +
+        glyphicon +
+        '" title="' +
+        title +
+        '" aria-hidden="true"></span></i></span></span>';
+
+      var groupObjCollapse = document.createElement("div");
+      groupObjCollapse.id = cleanObj + "-group";
+      //groupObjCollapse.classList.add("collapse");
+      //groupObjCollapse.classList.add("collapse-top");
+
+      var panelBodyObj = document.createElement("div");
+      panelBodyObj.classList.add("panel-body");
+
+      var tableObj = document.createElement("table");
+      tableObj.classList.add("table", "table-condensed");
+
+      var tbody = document.createElement("tbody");
+      var props = [];
+      for (var prop in snmpJson[obj]) {
+        props.push(prop);
+      }
+      props.sort();
+      for (var index in props) {
+        var prop = props[index];
+        var propObj = document.createElement("tr");
+        var append = "";
+        var value = snmpJson[obj][prop];
+        if (!isNaN(parseInt(value))) {
+          append = byteCount(value, 2);
+          if (append != value) append = " (" + append + ")";
+          else append = "";
+        }
+        propObj.innerHTML =
+          "<td>" + prop + "</td><td>" + value + append + "</td>";
+        tbody.appendChild(propObj);
+      }
+
+      tableObj.appendChild(tbody);
+      var tableTopObj = document.createElement("div");
+      tableTopObj.innerHTML =
+        '<span class="panel-heading" style="display:block;"><a class="collapse-controller" role="button" data-toggle="collapse" href="#' +
+        cleanObj;
+        //'-table-group">Details</a></span>';
+      var tableTopObjCollapse = document.createElement("div");
+      tableTopObjCollapse.id = cleanObj + "-table-group";
+      //tableTopObjCollapse.classList.add("collapse");
+      //tableTopObjCollapse.classList.add("collapse-detail");
+      tableTopObjCollapse.appendChild(tableObj);
+      tableTopObj.appendChild(tableTopObjCollapse);
+      panelBodyObj.appendChild(tableTopObj);
+      //panelBodyObj.appendChild(tableObj);
+      groupObjCollapse.appendChild(panelBodyObj);
+      groupObj.appendChild(groupObjCollapse);
+      domObj.appendChild(groupObj);
+    }
+
+    this._render(domObj);
+  };
 };
-nmsInfoBox.addPanelType("switchPorts",switchPortsPanel);
-
-var searchHelpPanel = function() {
-	nmsInfoPanel.call(this,"searchHelp");
-	this.refresh = function(reason) {
-		var x = document.createElement("div");
-		var searchHelp = nmsSearch.helpText;
-		for (var a in searchHelp) {
-			var c = document.createElement("p");
-			c.innerText = searchHelp[a];
-			x.appendChild(c);
-		}
-		this._render(x);
-	};
+nmsInfoBox.addPanelType("switchPorts", switchPortsPanel);
+
+var searchHelpPanel = function () {
+  nmsInfoPanel.call(this, "searchHelp");
+  this.refresh = function (reason) {
+    var x = document.createElement("div");
+    var searchHelp = nmsSearch.helpText;
+    for (var a in searchHelp) {
+      var c = document.createElement("p");
+      c.innerText = searchHelp[a];
+      x.appendChild(c);
+    }
+    this._render(x);
+  };
 };
-nmsInfoBox.addPanelType("searchHelp",searchHelpPanel);
-
+nmsInfoBox.addPanelType("searchHelp", searchHelpPanel);
 
 /*
  * Panel type: Search Results
@@ -780,28 +799,36 @@ nmsInfoBox.addPanelType("searchHelp",searchHelpPanel);
  * Show the search results
  *
  */
-var searchResultsPanel = function() {
-	var searchPage = 0;
-        nmsInfoPanel.call(this,"searchResults");
-        this.refresh = function(reason) {
-		var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
-                var switches = nmsSearch.matches.sort(collator.compare);
-		var table = document.createElement('table');
-		table.className = "table table-condensed";
-		table.id = "searchResults-table"
-		for (var sw in switches) {
-			var row = table.insertRow(sw);
-			var cell1 = row.insertCell(0);
-			var cell2 = row.insertCell(1);
-			var cell3 = row.insertCell(2);
-                       	cell1.innerHTML = "<a href='#' onclick='nmsInfoBox.showWindow(\"switchInfo\",\""+switches[sw]+"\");'>"+switches[sw]+ '</a>';
-			cell2.innerHTML = nmsData.switches["switches"][switches[sw]].distro_name;
-			cell3.innerHTML = handlers[0].getInfo(switches[sw]).why;
-                	}
-		this._render(table);
-		}
+var searchResultsPanel = function () {
+  var searchPage = 0;
+  nmsInfoPanel.call(this, "searchResults");
+  this.refresh = function (reason) {
+    var collator = new Intl.Collator(undefined, {
+      numeric: true,
+      sensitivity: "base",
+    });
+    var switches = nmsSearch.matches.sort(collator.compare);
+    var table = document.createElement("table");
+    table.className = "table table-condensed";
+    table.id = "searchResults-table";
+    for (var sw in switches) {
+      var row = table.insertRow(sw);
+      var cell1 = row.insertCell(0);
+      var cell2 = row.insertCell(1);
+      var cell3 = row.insertCell(2);
+      cell1.innerHTML =
+        "<a href='#' onclick='nmsInfoBox.showWindow(\"switchInfo\",\"" +
+        switches[sw] +
+        "\");'>" +
+        switches[sw] +
+        "</a>";
+      cell2.innerHTML = nmsData.switches["switches"][switches[sw]].distro_name;
+      cell3.innerHTML = handlers[0].getInfo(switches[sw]).why;
+    }
+    this._render(table);
+  };
 };
-nmsInfoBox.addPanelType("searchResults",searchResultsPanel);
+nmsInfoBox.addPanelType("searchResults", searchResultsPanel);
 
 /*
  * Panel type: Edit switch
@@ -810,16 +837,17 @@ nmsInfoBox.addPanelType("searchResults",searchResultsPanel);
  *
  */
 var switchEditPanel = function () {
-	nmsInfoPanel.call(this,"switchEdit");
-	this.refresh = function (reason) {
-		if (this.box) { return; }
-		this.box = new nmsModSwitch(this.sw);
-		this.box.attach(this.me)
-		this.box.show()
-	};
-
+  nmsInfoPanel.call(this, "switchEdit");
+  this.refresh = function (reason) {
+    if (this.box) {
+      return;
+    }
+    this.box = new nmsModSwitch(this.sw);
+    this.box.attach(this.me);
+    this.box.show();
+  };
 };
-nmsInfoBox.addPanelType("switchEdit",switchEditPanel);
+nmsInfoBox.addPanelType("switchEdit", switchEditPanel);
 
 /*
  * Panel type: Switch comments
@@ -828,80 +856,79 @@ nmsInfoBox.addPanelType("switchEdit",switchEditPanel);
  *
  */
 var switchCommentsPanel = function () {
-	nmsInfoPanel.call(this,"switchComments");
-	this.commentsHash = false;
-	this.refresh = function (reason) {
-		var domObj = document.createElement("div");
-		domObj.className = 'gondul-is-private';
-		var comments = [];
-		var logs = nmsOplog.getSwitchLogs(this.sw);
-		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");
-		var cap = document.createElement("caption");
-		cap.textContent = "Relevant log entries";
-		table.appendChild(cap);
-		for (var v in logs) {
-			tr = table.insertRow(-1);
-			tr.className =
-				td1 = tr.insertCell(0);
-			td2 = tr.insertCell(1);
-			var date = new Date(logs[v]['timestamp']);
-			var month = date.getMonth() + 1;
-			var day = date.getDate();
-			var tmp = (date.getYear() + 1900) + "-" + (month < 10 ? "0": "") + month + "-" + (day < 10 ? "0" : "") + day + " " + date.toTimeString().replace(/:\d\d .*$/,"");
-			td1.textContent = tmp;
-			td1.classList.add("left");
-			td2.textContent = logs[v]['systems'] + "[" + logs[v]['username'] + "] " + logs[v]['log'];
-		}
-		domObj.appendChild(table);
-		this._render(domObj);
-	};
+  nmsInfoPanel.call(this, "switchComments");
+  this.commentsHash = false;
+  this.refresh = function (reason) {
+    var domObj = document.createElement("div");
+    domObj.className = "gondul-is-private";
+    var comments = [];
+    var logs = nmsOplog.getSwitchLogs(this.sw);
+    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");
+    var cap = document.createElement("h5");
+    cap.textContent = "Relevant log entries";
+    table.appendChild(cap);
+    for (var v in logs) {
+      tr = table.insertRow(-1);
+      tr.className = td1 = tr.insertCell(0);
+      td2 = tr.insertCell(1);
+      var date = new Date(logs[v]["time"] * 1000);
+      var month = date.getMonth() + 1;
+      var day = date.getDate();
+      var tmp =
+        date.getYear() +
+        1900 +
+        "-" +
+        (month < 10 ? "0" : "") +
+        month +
+        "-" +
+        (day < 10 ? "0" : "") +
+        day +
+        " " +
+        date.toTimeString().replace(/:\d\d .*$/, "");
+      td1.textContent = tmp;
+      td1.classList.add("left");
+      td2.textContent =
+        logs[v]["systems"] + "[" + logs[v]["username"] + "] " + logs[v]["message"];
+    }
+    domObj.appendChild(table);
+    this._render(domObj);
+  };
 };
-nmsInfoBox.addPanelType("switchComments",switchCommentsPanel);
+nmsInfoBox.addPanelType("switchComments", switchCommentsPanel);
 
 /*
- * Panel type: Switch latency
+ * Panel type: Switch links
+ *
  *
- * Display a live line chart with latency
  *
  */
-var switchLatencyPanel = function() {
-	nmsInfoPanel.call(this,"switchLatency");	
-	var latencyChart;
-        this.init = function() {
-		if(nms._public == false) {
-			this.addHandler("ticker");
-			this.refresh();
-		}
-        };
-	this.refresh = function(reason) {
-		if (this.sw == false) {
-                        console.log("ugh, cleanup failed?");
-                        return;
-                }
-
-		if(reason == 'handler-ticker' && latencyChart != undefined) {
-			drawLatency(this.sw+'latency_chart',this.sw, latencyChart);
-			return;
-		}
-
-		var topper = document.createElement("div");
-                var latency = document.createElement("canvas");
-                latency.id = this.sw+'latency_chart';
-                latency.width = 500;
-                latency.height = 50;
-                drawLatency(this.sw+'latency_chart',this.sw, false, function(chart) { latencyChart = chart; });
-                topper.appendChild(latency);
-                this._render(topper);
-	};
+var switchLinksPanel = function () {
+  nmsInfoPanel.call(this, "switchLinks");
+  this.commentsHash = false;
+  this.refresh = function (reason) {
+    var domObj = document.createElement("div");
+    domObj.className = "gondul-is-private d-grid gap-0 row-gap-3";
+    var device = nmsData.smanagement.switches[this.sw]
+    if(["eos64"].includes(device["platform"]) && device["serial"] != null && device["serial"] != "") {
+    	var cap = document.createElement("a");
+    	cap.textContent = "Open in CVP";
+    	cap.href = "https://www.cv-prod-euwest-2.arista.io/cv/devices/overview/" + device["serial"];
+	cap.target = "_blank";
+	cap.className = "my-4 btn btn-outline-primary";
+	cap.role = "button";
+    	domObj.appendChild(cap);
+    }
+    this._render(domObj);
+  };
 };
-nmsInfoBox.addPanelType("switchLatency",switchLatencyPanel);
+nmsInfoBox.addPanelType("switchLinks", switchLinksPanel);
 
 /*
  * Panel type: Switch summary
@@ -909,129 +936,83 @@ nmsInfoBox.addPanelType("switchLatency",switchLatencyPanel);
  * Display a live summary of key metrics
  *
  */
-var switchSummaryPanel = function() {
-	nmsInfoPanel.call(this,"switchSummary");
-	var latencyChart;
-	this.init = function() {
-		this.addHandler("ticker");
-		this.refresh();
-	};
-	this.refresh = function(reason) {
-		if (this.box) {
-			this.box.refresh(); 
-			return;
-		}
-		this.box = new nmsSwitchSummary(this.sw);
-		this.box.attach(this.me)
-		this.box.show()
-	};
+var switchSummaryPanel = function () {
+  nmsInfoPanel.call(this, "switchSummary");
+  this.init = function () {
+    this.addHandler("ticker");
+    this.refresh();
+  };
+  this.refresh = function (reason) {
+    if (this.box) {
+      this.box.refresh();
+      return;
+    }
+    this.box = new nmsSwitchSummary(this.sw);
+    this.box.attach(this.me);
+    this.box.show();
+  };
 };
-nmsInfoBox.setLegendPick = function(tag,id) {
-	if (nms.legendPick != undefined) {
-		if (nms.legendPick.handler == tag && nms.legendPick.idx == id) {
-			nms.legendPick = undefined;
-			return;
-		}
-	}
-	nms.legendPick = {handler: tag, idx: id};
-}
-
-nmsInfoBox.addPanelType("switchSummary",switchSummaryPanel);
-
-var copybuttonfunc = function(text) {
-	console.log('clickened', text);
-	navigator.clipboard.writeText(text);
-}
-var switchLinks = function() {
-	nmsInfoPanel.call(this,"switchLinks");
-	var latencyChart;
-	this.init = function() {
-		this.refresh();
-	};
-	this.refresh = function(reason) {
-		var content = [];
-		if (this.sw == false) {
-			console.log("ugh, cleanup failed?");
-			return;
-		}
-		var sw = this.sw;
-		
-		var topp = document.createElement("div")
-		var urls = [ "http://gondul.tg23.gathering.org/api/templates/magic.conf/switch=" + sw,
-			     "http://185.110.148.105/api/templates/magic.conf/switch=" + sw,
-			     "http://gondul.tg23.gathering.org/api/write/fap/" + sw
-		];
-		if (testTree(nmsData,['smanagement','switches',sw])) {
-			var mg = nmsData["smanagement"]["switches"][sw];
-			urls.push("ssh://[" + mg.mgmt_v6_addr + "]");
-			urls.push("ssh://" + mg.mgmt_v4_addr);
-		}
-		for (var x in urls) {
-			console.log("create link")
-			topp.appendChild(document.createElement("br"));
-			var container = document.createElement("div");
-			var link = document.createElement("a");
-			link.href = urls[x];
-			link.textContent = urls[x];
-			var copybutton = document.createElement("button");
-			copybutton.setAttribute("onclick", "copybuttonfunc('"+urls[x]+"')");
-			copybutton.type = "button";
-			var btnText = document.createTextNode("copy url");
-			copybutton.className = "btn btn-primary";
-			copybutton.appendChild(btnText);
-			container.appendChild(link);
-			container.appendChild(copybutton);
-			topp.appendChild(container);
-		}
-		this._render(topp);
-	};
+nmsInfoBox.setLegendPick = function (tag, id) {
+  if (nms.legendPick != undefined) {
+    if (nms.legendPick.handler == tag && nms.legendPick.idx == id) {
+      nms.legendPick = undefined;
+      return;
+    }
+  }
+  nms.legendPick = { handler: tag, idx: id };
 };
-nmsInfoBox.addPanelType("switchLinks",switchLinks);
+
+nmsInfoBox.addPanelType("switchSummary", switchSummaryPanel);
 
 /*
-* List networks
-*
-* Shows all networks
-*
-*/
-var networkListPanel = function() {
-	nmsInfoPanel.call(this,"listNetworks");
-	this.refresh = function(reason) {
-		var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
-		var networks = nmsData.networks.networks;
-		var table = document.createElement('table');
-		table.className = "table table-condensed";
-		table.id = "searchResults-table"
-		for (var net in networks) {
-			var row = table.insertRow(net);
-			var cell1 = row.insertCell(0);
-			var cell2 = row.insertCell(1);
-			var cell3 = row.insertCell(2);
-			cell1.innerHTML = "<a href='#' onclick='nmsInfoBox.showWindow(\"networkInfo\",\""+net+"\");'>"+net+ '</a>';
-			cell2.innerHTML = networks[net].vlan;
-			cell3.innerHTML = networks[net].router;
-		}
-		this._render(table);
-
-	};
+ * List networks
+ *
+ * Shows all networks
+ *
+ */
+var networkListPanel = function () {
+  nmsInfoPanel.call(this, "listNetworks");
+  this.refresh = function (reason) {
+    var collator = new Intl.Collator(undefined, {
+      numeric: true,
+      sensitivity: "base",
+    });
+    var networks = nmsData.networks.networks;
+    var table = document.createElement("table");
+    table.className = "table table-condensed";
+    table.id = "searchResults-table";
+    for (var net in networks) {
+      var row = table.insertRow(net);
+      var cell1 = row.insertCell(0);
+      var cell2 = row.insertCell(1);
+      var cell3 = row.insertCell(2);
+      cell1.innerHTML =
+        "<a href='#' onclick='nmsInfoBox.showWindow(\"networkInfo\",\"" +
+        net +
+        "\");'>" +
+        net +
+        "</a>";
+      cell2.innerHTML = networks[net].vlan;
+      cell3.innerHTML = networks[net].router;
+    }
+    this._render(table);
+  };
 };
-nmsInfoBox.addPanelType("listNetworks",networkListPanel);
+nmsInfoBox.addPanelType("listNetworks", networkListPanel);
 
 /*
-* Panel type: Network summary
-*
-* Display a summary
-*
-*/
-var networkSummaryPanel = function() {
-	nmsInfoPanel.call(this,"networkSummary");
-	this.refresh = function(reason) {
-		var network = this.sw;
-
-	};
-}
-nmsInfoBox.addPanelType("networkSummary",networkSummaryPanel);
-
+ * Panel type: Network summary
+ *
+ * Display a summary
+ *
+ */
+var networkSummaryPanel = function () {
+  nmsInfoPanel.call(this, "networkSummary");
+  this.refresh = function (reason) {
+    var network = this.sw;
+  };
+};
+nmsInfoBox.addPanelType("networkSummary", networkSummaryPanel);
 
 /*
  * Panel type: Edit network
@@ -1040,50 +1021,76 @@ nmsInfoBox.addPanelType("networkSummary",networkSummaryPanel);
  *
  */
 var networkEditPanel = function () {
-	nmsInfoPanel.call(this,"networkEdit");
-	this.refresh = function (reason) {
-		if (this.box) { return; }
-		this.box = new nmsModNet(this.sw);
-		this.box.attach(this.me)
-		this.box.show()
-	};
+  nmsInfoPanel.call(this, "networkEdit");
+  this.refresh = function (reason) {
+    if (this.box) {
+      return;
+    }
+    this.box = new nmsModNet(this.sw);
+    this.box.attach(this.me);
+    this.box.show();
+  };
+};
+nmsInfoBox.addPanelType("networkEdit", networkEditPanel);
+
+/*
+ * Debug Panel
+ *
+ * Show debug information
+ *
+ */
+var debugStatsPanel = function () {
+  nmsInfoPanel.call(this, "debugStatsPanel");
+  this.init = function () {
+    this.addHandler("ticker");
+    this.refresh();
+  };
+  this.refresh = function (reason) {
+    var table = document.createElement("table");
+    table.className = "table table-condensed";
+    table.id = "searchResults-table";
+    var stats = Object.fromEntries(
+      Object.entries(nmsData.stats).sort((a, b) => a[0].localeCompare(b[0]))
+    );
+    for (var stat in stats) {
+      var row = table.insertRow(stat);
+      var cell1 = row.insertCell(0);
+      var cell2 = row.insertCell(1);
+      cell1.innerHTML = stat;
+      cell2.innerHTML = nmsData.stats[stat];
+    }
+    this._render(table);
+  };
 };
-nmsInfoBox.addPanelType("networkEdit",networkEditPanel);
+nmsInfoBox.addPanelType("debugStats", debugStatsPanel);
 
 /*
- * Provide common defaults for graph renders.
+ * Debug Panel
+ *
+ * Show debug information
  *
- * Kept on the URL to avoid having to manage templates since we need to
- * manage night mode anyway for now.
  */
-nmsInfoBox._graphZoom = function() {
-	if (nmsInfoBox._graphFrom == "-60min") {
-		nmsInfoBox._graphFrom = "-6h";
-	} else if (nmsInfoBox._graphFrom == "-6h") {
-		nmsInfoBox._graphFrom = "-24h";
-	} else if (nmsInfoBox._graphFrom == "-24h") {
-		nmsInfoBox._graphFrom = "-7days";
-	} else {
-		nmsInfoBox._graphFrom = "-60min";
-	}
-
-
-}
-nmsInfoBox._graphFrom = "-60min";
-nmsInfoBox._graphUntil = "now";
-nmsInfoBox._graphNormalize = function(f) {
-	return f.replace(/[^a-z0-9]/gi,"_");
-}
-nmsInfoBox._graphDefaults = function(title) {
-	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&bgcolor=%23ffffff00&fontName=courier&width=600&height=240&yUnitSystem=binary&format=svg&from=" + nmsInfoBox._graphFrom + "&until=" + nmsInfoBox._graphUntil + '&title=' + title + "&lolBuster=" + Math.floor(new Date().getTime() / 30000);
-	if (nms.nightMode) {
-		return "&fgcolor=%23dddddd&minorGridLineColor=%233d3d3d&majorGridLineColor=%23666666" + base;
-	} else {
-		return base;
-	}
-}
+var debugPanel = function () {
+  nmsInfoPanel.call(this, "debugInfo");
+  this.init = function () {
+    this.addHandler("ticker");
+    this.refresh();
+  };
+  this.refresh = function (reason) {
+    var table = document.createElement("table");
+    table.className = "table table-condensed";
+    table.id = "searchResults-table";
+    var stats = Object.fromEntries(
+      Object.entries(nmsData.stats).sort((a, b) => a[0].localeCompare(b[0]))
+    );
+    for (var stat in stats) {
+      var row = table.insertRow(stat);
+      var cell1 = row.insertCell(0);
+      var cell2 = row.insertCell(1);
+      cell1.innerHTML = stat;
+      cell2.innerHTML = nmsData.stats[stat];
+    }
+    this._render(table);
+  };
+};
+nmsInfoBox.addPanelType("debugInfo", debugPanel);
-- 
cgit v1.2.3