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