diff options
| -rw-r--r-- | ansible/playbook-prod.yml | 3 | ||||
| -rw-r--r-- | web/css/nms.css | 21 | ||||
| -rw-r--r-- | web/js/nms-info-box.js | 97 |
3 files changed, 113 insertions, 8 deletions
diff --git a/ansible/playbook-prod.yml b/ansible/playbook-prod.yml index 0dc620f..e0e778b 100644 --- a/ansible/playbook-prod.yml +++ b/ansible/playbook-prod.yml @@ -11,9 +11,6 @@ - name: "gondul-varnish-test" links: [ "gondul-front-test:gondul-front" ] ports: "{{ varnish_ports }}" - - name: "gondul-collector-test" - links: [ ] - ports: [] - name: "gondul-snmp-test" links: [ ] ports: [] diff --git a/web/css/nms.css b/web/css/nms.css index 4a84f54..9f2e246 100644 --- a/web/css/nms.css +++ b/web/css/nms.css @@ -100,3 +100,24 @@ div.map-mode-legend button { } .pulse-on { color: #a00; } +.panel-heading small { + font-size: x-small; +} +.nightmode .panel .panel-heading small { + color: #999; +} +// Classes +.pull-left { + float: left !important; +} +.pull-right { + float: right !important; +} + +.nms-panel-small .panel-heading { + padding-top: 1px; + padding-bottom: 1px; +} +.panel-group .panel+ .nms-panel-small { + margin-top: 1px; +} diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js index 535069f..d5d9e77 100644 --- a/web/js/nms-info-box.js +++ b/web/js/nms-info-box.js @@ -43,15 +43,15 @@ var nmsInfoBox = nmsInfoBox || { 'panels': ['switchSummary','switchComments'] }, 'ports': { - 'name': 'SNMP - Ports', - 'panels': ['switchSNMP:ports'] + 'name': 'Ports', + 'panels': ['switchPorts'] }, 'misc': { - 'name': 'SNMP - Misc', + 'name': 'SNMP', 'panels': ['switchSNMP:misc'] }, 'graphs': { - 'name': 'Graphs', + 'name': 'Traffic', 'panels': ['graphs'] }, 'details': { @@ -548,7 +548,7 @@ var switchSNMPPanel = function () { var cleanObj = obj.replace(/\W+/g, ""); var groupObj = document.createElement("div"); - groupObj.classList.add("panel","panel-default"); + 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"); @@ -581,6 +581,93 @@ var switchSNMPPanel = function () { }; }; 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 indicies = []; + for (var obj in snmpJson) { + indicies.push(obj); + } + indicies.sort(function(a,b) { + return snmpJson[a].ifIndex - snmpJson[b].ifIndex; + }); + 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"; + if (snmpJson[obj].ifOperStatus == "up") { + glyphicon = "glyphicon-ok"; + button = "btn-success"; + title = "link up"; + } + 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) {}; + + + + groupObj.innerHTML = '<span class="panel-heading" style="display:block;"><a class="collapse-controller" role="button" data-toggle="collapse" href="#'+cleanObj+'-group">' + snmpJson[obj].ifDescr + ' </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"); + + 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); + }; +}; +nmsInfoBox.addPanelType("switchPorts",switchPortsPanel); /* * Panel type: Switch details |