diff options
| -rw-r--r-- | web/nms.gathering.org/index.html | 8 | ||||
| -rw-r--r-- | web/nms.gathering.org/js/nms-info-box.js | 541 |
2 files changed, 305 insertions, 244 deletions
diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html index a20ae67..db1acfa 100644 --- a/web/nms.gathering.org/index.html +++ b/web/nms.gathering.org/index.html @@ -74,7 +74,7 @@ <li class="dropdown-header">Move switches</li> <li><a href="#" onclick="nmsMap.moveSet(true);">Enable switch moving</a></li> <li><a href="#" onclick="nmsMap.moveSet(false);">Disable switch moving</a></li> - <li><a href="#" onclick="nmsInfoBox._createShow();">Add switch</a></li> + <li><a href="#" onclick="nmsInfoBox.showWindow('addSwitch')">Add switch</a></li> <li class="divider"> </li> <li class="dropdown-header">Help</li> <li><a href="#" onclick="toggleLayer('aboutKeybindings');" >Keyboard Shortcuts</a></li> @@ -92,7 +92,7 @@ <div class="input-group input-group-sm"> <input id="searchbox" type="text" class="form-control" placeholder="Filter" oninput="nmsInfoBox._search()" /> <span class="input-group-btn"> - <button class="btn btn-default" type="button" onclick="nmsInfoBox.show(document.getElementById('searchbox').value);">Go!</button> + <button id="searchbox-submit" class="btn btn-default" type="button" onclick="nmsInfoBox.showWindow('switchInfo',document.getElementById('searchbox').value);">Go!</button> </span> </div> </div> @@ -222,9 +222,7 @@ </div> </div> </div> - <div id="info-switch-parent" class="panel panel-default col-md-5" style="display: none; position: absolute; z-index: 120;"> - <div class="panel-heading"> <h3 class="panel-title" id="info-switch-title"></h3> </div> - <div id="info-switch-panel-body"> <table class="table" id="info-switch-table"></table> </div> + <div id="info-panel-container" class="col-md-5" style="display: none; position: absolute; z-index: 120;"> </div> </div> diff --git a/web/nms.gathering.org/js/nms-info-box.js b/web/nms.gathering.org/js/nms-info-box.js index 7e27ce7..88bc7d7 100644 --- a/web/nms.gathering.org/js/nms-info-box.js +++ b/web/nms.gathering.org/js/nms-info-box.js @@ -1,71 +1,316 @@ "use strict"; /* - * Handle the info-box for switches (e.g.: what's shown when a switch is - * clicked). + * NMS info window controller + * + * Interface: nmsInfoBox.showWindow(windowType,optionalParameter), nmsInfoBox.hide(), nmsInfoBox.refresh() + * + * Any windowTypes should at a minimum implement load, unload, getTitle, getContent, getChildContent + * + * TODO: Implement useful update methods on windowTypes * - * Interfaces: show(switch), hide(), click(switch). */ - var nmsInfoBox = nmsInfoBox || { - stats: {}, - _showing:"" // Which switch we are displaying (if any). + stats: {}, + _container: false, //Container window + _window: false, //Active window (reference to _windowTypes object or false) + _windowTypes: [], //List of all avaliable window types +} + +/* + * Shows a window from the _windowTypes list + */ +nmsInfoBox.showWindow = function (windowName,argument) { + nmsInfoBox.hide(); + for(var win in this._windowTypes) { + if(windowName == win) { + this._window = this._windowTypes[win]; + this._show(argument); + return; + } + } } /* - * Show the infobox for a switch. + * Refresh the active window * - * Just a wrapper for _show, but adds a handler for comments. Could easily - * add a handler for other events too. E.g.: switches. + * Todo: Could use a less aggressive refresh that doesn't hide-show everything + * + */ +nmsInfoBox.refresh = function() { + nmsInfoBox._show(); +} + +/* + * Internal function to show the active _window and pass along any arguments */ -nmsInfoBox.show = function(x) { - nmsData.addHandler("comments","switchshower",nmsInfoBox._show,x); - nmsData.addHandler("switches","switchshower",nmsInfoBox._show,x); - nmsData.addHandler("smanagement","switchshower",nmsInfoBox._show,x); - nmsInfoBox._show(x); +nmsInfoBox._show = function(argument) { + nmsData.addHandler("comments","switchshower",nmsInfoBox.update,argument); + nmsData.addHandler("switches","switchshower",nmsInfoBox.update,argument); + nmsData.addHandler("smanagement","switchshower",nmsInfoBox.update,argument); + nmsData.addHandler("snmp","switchshower",nmsInfoBox.update,argument); + + this._window.load(argument); + + this._container = document.getElementById("info-panel-container"); + var panel = document.createElement("div"); + panel.classList.add("panel", "panel-default"); + var title = document.createElement("div"); + title.classList.add("panel-heading"); + var body = document.createElement("div"); + body.classList.add("panel-body"); + + title.innerHTML = this._window.getTitle() + '<button type="button" class="close" aria-label="Close" onclick="nmsInfoBox.hide();" style="float: right;"><span aria-hidden="true">×</span></button>'; + var content = this._window.getContent(); + if(!content.nodeName) { + body.innerHTML = this._window.content; + } else { + body.appendChild(content); + } + var childContent = this._window.getChildContent(); + if(childContent != false) { + body.appendChild(childContent); + } + + panel.appendChild(title); + panel.appendChild(body); + while(this._container.firstChild) { + this._container.removeChild(this._container.firstChild); + } + this._container.appendChild(panel); + this._container.style.display = "block"; } /* - * Hide switch info-box and remove handler. + * Hide the active window and tell it to unload */ nmsInfoBox.hide = function() { - nmsInfoBox._hide(); + if(this._container == false || this._window == false) + return; + this._container.style.display = "none"; + this._window.unload(); + this._window = false; nmsData.unregisterHandler("comments","switchshower"); nmsData.unregisterHandler("switches","switchshower"); nmsData.unregisterHandler("smanagement","switchshower"); + nmsData.unregisterHandler("snmp","switchshower"); } /* - * Click a switch: If it's currently showing: hide it, otherwise display + * Window type: Add Switch + * + * Basic window that lets you create a new switch + * + */ +nmsInfoBox._windowTypes.addSwitch = { + title: 'Add new switch', + content: '<input type="text" class="form-control" id="create-sysname" placeholder="Sysname id"><button class="btn btn-default" onclick="nmsInfoBox._windowTypes.addSwitch.save();">Add switch</button>', + childContent: false, + getTitle: function() { + return this.title; + }, + getContent: function() { + return this.content; + }, + getChildContent: function() { + return this.childContent; + }, + load: function(argument) { + }, + unload: function() { + }, + save: function() { + var sysname = document.getElementById('create-sysname').value; + var myData = JSON.stringify([{'sysname':sysname}]); + $.ajax({ + type: "POST", + url: "/api/private/switch-add", + dataType: "text", + data:myData, + success: function (data, textStatus, jqXHR) { + var result = JSON.parse(data); + if(result.switches_addded.length > 0) { + nmsInfoBox.hide(); + } + } + }); + } +}; + +/* + * Window type: Switch info + * + * Advanced window with information about a specific switch, and basic editing options + * + * Custom interfaces: showComments, showSNMP, showEdit, save + * + */ +nmsInfoBox._windowTypes.switchInfo = { + title: '', + content: '', + childContent: false, + sw: '', + swi: '', + swm: '', + load: function(sw) { + if(sw) { + this.sw = sw; + } + this.swi = nmsData.switches["switches"][this.sw]; + this.swm = nmsData.smanagement.switches[this.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; + + }, + getTitle: function() { + return '<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> ' + this.sw + ''; + }, + getContent: function() { + return this.content; + }, + getChildContent: function() { + return this.childContent; + }, + showComments: function() { + var domObj = document.createElement("div"); + var comments = []; + if (nmsData.comments.comments != undefined && nmsData.comments.comments[this.sw] != undefined) { + 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); + } + } + } + + if (comments.length > 0) { + var commenttable = nmsInfoBox._makeCommentTable(comments); + commenttable.id = "info-switch-comments-table"; + domObj.appendChild(commenttable); + $(function () { $('[data-toggle="popover"]').popover({placement:"top",continer:'body'}) }) + } + 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.\'; nmsInfoBox.hide();">Add comment</button></span></div>'; + domObj.appendChild(commentbox); + + this.childContent = domObj; + nmsInfoBox.refresh(); + }, + showEdit: function() { + var domObj = document.createElement("div"); + var template = {}; + + nmsInfoBox._editValues = {}; + for (var v in this.swi) { + if (v == "placement") { + var 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 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 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; + } + } + + this.childContent = domObj; + nmsInfoBox.refresh(); + }, + showSNMP: function(tree) { + var domObj = document.createElement("div"); + + var output = document.createElement("output"); + output.id = "edit-output"; + output.style = "white-space: pre;"; + try { + output.value = JSON.stringify(nmsData.snmp.snmp[this.sw][tree],null,4); + } catch(e) { + output.value = "(no recent data (yet)?)"; + } + domObj.appendChild(output); + + this.childContent = domObj; + nmsInfoBox.refresh(); + }, + unload: function() { + this.childContent = false; + }, + save: function() { + var myData = nmsInfoBox._editStringify(this.sw); + console.log(myData); + $.ajax({ + type: "POST", + url: "/api/private/switch-update", + dataType: "text", + data:myData, + success: function (data, textStatus, jqXHR) { + nmsData.invalidate("switches"); + nmsData.invalidate("smanagement"); + } + }); + nmsInfoBox.hide(); + } +}; + +/* + * Click a switch and display it * it. */ nmsInfoBox.click = function(sw) { - if (nmsInfoBox._showing == sw) - nmsInfoBox.hide(); - else - nmsInfoBox.show(sw); -} - -nmsInfoBox._hide = function() -{ - var swtop = document.getElementById("info-switch-parent"); - var switchele = document.getElementById("info-switch-table"); - var comments = document.getElementById("info-switch-comments-table"); - var commentbox; - if (switchele != undefined) - switchele.parentNode.removeChild(switchele); - if (comments != undefined) - comments.parentNode.removeChild(comments); - commentbox = document.getElementById("commentbox"); - if (commentbox != undefined) - commentbox.parentNode.removeChild(commentbox); - swtop.style.display = 'none'; - nmsInfoBox._showing = ""; - nmsInfoBox._editHide(); - nmsInfoBox._snmpHide(); - nmsInfoBox._createHide(); + this.showWindow("switchInfo",sw); } /* @@ -180,7 +425,7 @@ nmsInfoBox._searchSmart = function(id, sw) { nmsInfoBox._search = function() { var el = document.getElementById("searchbox"); var id = false; - var hits = 0; + var matches = []; if (el) { id = el.value; } @@ -188,13 +433,14 @@ nmsInfoBox._search = function() { for(var sw in nmsData.switches.switches) { if (id[0] == "/") { if (nmsInfoBox._searchSmart(id.slice(1),sw)) { + matches.push(sw); nmsMap.setSwitchHighlight(sw,true); } else { nmsMap.setSwitchHighlight(sw,false); } } else { if(sw.indexOf(id) > -1) { - hits++; + matches.push(sw); nmsMap.setSwitchHighlight(sw,true); } else { nmsMap.setSwitchHighlight(sw,false); @@ -204,158 +450,31 @@ nmsInfoBox._search = function() { } else { nmsMap.removeAllSwitchHighlights(); } -} - -nmsInfoBox._snmp = function(x,tree) -{ - - nmsInfoBox._snmpHide(); - var container = document.createElement("div"); - container.id = "nmsInfoBox-snmp-show"; - - var swtop = document.getElementById("info-switch-parent"); - var output = document.createElement("output"); - output.id = "edit-output"; - output.style = "white-space: pre;"; - try { - output.value = JSON.stringify(nmsData.snmp.snmp[x][tree],null,4); - } catch(e) { - output.value = "(no recent data (yet)?)"; + if(matches.length == 1) { + document.getElementById("searchbox-submit").classList.add("btn-primary"); + document.getElementById("searchbox").dataset.match = matches[0]; + document.getElementById("searchbox").addEventListener("keydown",nmsInfoBox._searchKeyListener,false); + } else { + document.getElementById("searchbox-submit").classList.remove("btn-primary"); + document.getElementById("searchbox").dataset.match = ''; + document.getElementById("searchbox").removeEventListener("keydown",nmsInfoBox._searchKeyListener,false); } - container.appendChild(output); - swtop.appendChild(container); } -/* - * Display info on switch "x" in the info-box - * - * Use nmsInfoBox.show(), otherwise changes wont be picked up. - */ -nmsInfoBox._show = function(x) -{ - var sw = nmsData.switches["switches"][x]; - var swm = nmsData.smanagement.switches[x]; - var swtop = document.getElementById("info-switch-parent"); - var swpanel = document.getElementById("info-switch-panel-body"); - var swtitle = document.getElementById("info-switch-title"); - var content = []; - - - nmsInfoBox._hide(); - nmsInfoBox._showing = x; - - swtitle.innerHTML = ' <button type="button" class="edit btn btn-xs btn-warning" onclick="nmsInfoBox._edit(\'' + x + '\');">Edit</button> <button type="button" class="edit btn btn-xs btn-default" onclick="nmsInfoBox._snmp(\'' + x + '\',\'ports\');">Ports</button> <button type="button" class="edit btn btn-xs btn-default" onclick="nmsInfoBox._snmp(\'' + x + '\',\'misc\');">Misc</button> ' + x + ' <button type="button" class="close" aria-label="Close" onclick="nmsInfoBox.hide();" style="float: right;"><span aria-hidden="true">×</span></button>'; - - for (var v in sw) { - if (v == "placement") { - var place = JSON.stringify(sw[v]); - content.push([v,place]); - continue; - } - content.push([v, sw[v]]); - } - for (var v in swm) { - content.push([v, swm[v]]); +nmsInfoBox._searchKeyListener = function(e) { + if(e.keyCode == 13) { + var sw = document.getElementById("searchbox").dataset.match; + nmsInfoBox.showWindow("switchInfo",sw); } - content.sort(); - - var comments = []; - if (nmsData.comments.comments != undefined && nmsData.comments.comments[x] != undefined) { - for (var c in nmsData.comments.comments[x]["comments"]) { - var comment = nmsData.comments.comments[x]["comments"][c]; - if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") { - comments.push(comment); - } - } - } - - var infotable = nmsInfoBox._makeTable(content); - infotable.id = "info-switch-table"; - swtop.appendChild(infotable); - if (comments.length > 0) { - var commenttable = nmsInfoBox._makeCommentTable(comments); - commenttable.id = "info-switch-comments-table"; - swtop.appendChild(commenttable); - $(function () { $('[data-toggle="popover"]').popover({placement:"top",continer:'body'}) }) - } - 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="' + x + '-comment"><span class=\"input-group-btn\"><button class="btn btn-default" onclick="addComment(\'' + x + '\',document.getElementById(\'' + x + '-comment\').value); document.getElementById(\'' + x + '-comment\').value = \'\'; document.getElementById(\'' + x + '-comment\').placeholder = \'Comment added. Wait for next refresh.\';">Add comment</button></span></div>'; - swtop.appendChild(commentbox); - swtop.style.display = 'block'; } + nmsInfoBox._nullBlank = function(x) { if (x == null || x == false || x == undefined) return ""; return x; } -nmsInfoBox._editHide = function() { - var container = document.getElementById("nmsInfoBox-edit-box"); - if (container != undefined) - container.parentNode.removeChild(container); -} -nmsInfoBox._snmpHide = function() { - var container = document.getElementById("nmsInfoBox-snmp-show"); - if (container != undefined) - container.parentNode.removeChild(container); -} - -nmsInfoBox._edit = function(sw) { - var template = {}; - var place = false; - nmsInfoBox._editHide(); - nmsInfoBox._snmpHide(); - var container = document.createElement("div"); - container.id = "nmsInfoBox-edit-box"; - - nmsInfoBox._editValues = {}; - if (nmsData.switches.switches[sw] != undefined) { - for (var v in nmsData.switches.switches[sw]) { - if (v == "placement") { - place = JSON.stringify(nmsData.switches.switches[sw][v]); - template[v] = ""; - continue; - } - template[v] = this._nullBlank(nmsData.switches.switches[sw][v]); - } - } - if (nmsData.smanagement.switches[sw] != undefined) { - for (var v in nmsData.smanagement.switches[sw]) { - template[v] = this._nullBlank(nmsData.smanagement.switches[sw][v]); - } - } - var content = []; - for (v in template) { - var tmpsw = '\'' + sw + '\''; - var tmpv = '\'' + v + '\''; - var tmphandler = '"nmsInfoBox._editChange(' + tmpsw + ',' + tmpv + ');"'; - var html = "<input type=\"text\" class=\"form-control\" value=\"" + template[v] + "\" id=\"edit-"+ sw + "-" + v + '" onchange=' + tmphandler + ' oninput=' + tmphandler + '/>'; - content.push([v, html]); - } - var table = nmsInfoBox._makeTable(content, "edit"); - var swtop = document.getElementById("info-switch-parent"); - container.appendChild(table); - var submit = document.createElement("button"); - submit.innerHTML = "Save changes"; - submit.classList.add("btn", "btn-primary"); - submit.id = "edit-submit-" + sw; - submit.onclick = function(e) { nmsInfoBox._editSave(sw, e); }; - container.appendChild(submit); - var output = document.createElement("output"); - output.id = "edit-output"; - container.appendChild(output); - swtop.appendChild(container); - if (place) { - var pval = document.getElementById("edit-" + sw + "-placement"); - if (pval) { - pval.value = place; - } - } -} nmsInfoBox._editChange = function(sw, v) { var el = document.getElementById("edit-" + sw + "-" + v); @@ -385,59 +504,3 @@ nmsInfoBox._editStringify = function(sw) { var myData = JSON.stringify([nmsInfoBox._editValues]); return myData; } -nmsInfoBox._editSave = function(sw, e) { - var myData = nmsInfoBox._editStringify(sw); - $.ajax({ - type: "POST", - url: "/api/private/switch-update", - dataType: "text", - data:myData, - success: function (data, textStatus, jqXHR) { - nmsData.invalidate("switches"); - nmsData.invalidate("smanagement"); - } - }); - nmsInfoBox._editHide(); -} - - -/* - * Display infobox for new switch - * - * TODO: Integrate and rebuild info-box display logic - */ -nmsInfoBox._createShow = function() -{ - var container = document.createElement("div"); - container.className = "col-md-5"; - container.id = "nmsInfoBox-create"; - container.style.zIndex = "999"; - - var swtop = document.getElementById("wrap"); - nmsInfoBox._hide(); - - container.innerHTML = '<div class="panel panel-default"> <div class="panel-heading">Add new switch <button type="button" class="close" aria-label="Close" onclick="nmsInfoBox._createHide();" style="float: right;">X</button></div> <div class="panel-body"><input type="text" class="form-control" id="create-sysname" placeholder="Sysname id"><button class="btn btn-default" onclick="nmsInfoBox._createSave(document.getElementById(\'create-sysname\').value);">Add switch</button></div><div id="create-switch-feedback"></div> </div>'; - - swtop.appendChild(container); -} -nmsInfoBox._createSave = function(sw) { - var feedback = document.getElementById("create-switch-feedback"); - var myData = JSON.stringify([{'sysname':sw}]); - $.ajax({ - type: "POST", - url: "/api/private/switch-add", - dataType: "text", - data:myData, - success: function (data, textStatus, jqXHR) { - var result = JSON.parse(data); - if(result.switches_addded.length > 0) { - nmsInfoBox._createHide(); - } - } - }); -} -nmsInfoBox._createHide = function() { - var container = document.getElementById("nmsInfoBox-create"); - if (container != undefined) - container.parentNode.removeChild(container); -} |