aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/nms.gathering.org/nms2/map.html185
-rw-r--r--web/nms.gathering.org/nms2/map.js213
2 files changed, 291 insertions, 107 deletions
diff --git a/web/nms.gathering.org/nms2/map.html b/web/nms.gathering.org/nms2/map.html
index ec4ce43..bd81f83 100644
--- a/web/nms.gathering.org/nms2/map.html
+++ b/web/nms.gathering.org/nms2/map.html
@@ -1,109 +1,91 @@
<!DOCTYPE html>
-<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
- <title>NMS2</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="">
- <meta name="author" content="">
- <script src="js/jquery-1.10.2.min.js"></script>
- <!--<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>-->
+<html lang="en">
+<head>
+ <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
+ <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
+ <meta charset="utf-8">
- <link href="css/bootstrap.min.css" rel="stylesheet">
- <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
- <link href="css/slider.css" rel="stylesheet">
- <!--<link src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" rel="stylesheet">-->
- <style type="text/css">
- body {
- padding-top: 60px;
- padding-bottom: 40px;
- }
- .sidebar-nav {
- padding: 9px 0;
- }
+ <title>NMS2</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <script src="js/jquery-1.10.2.min.js" type="text/javascript">
+ </script><!--<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>-->
+ <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
+ <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
+ <link href="css/slider.css" rel="stylesheet" type="text/css">
+ <link rel="stylesheet" href="/ping.css" type="text/css"><!--<link src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" rel="stylesheet">-->
- #canvas {
- background-image: url('http://nms.tg15.gathering.org/tg15-salkart.png');
- }
+ <style type="text/css">
+ body {
+ padding-top: 60px;
+ padding-bottom: 40px;
+ }
+ .sidebar-nav {
+ padding: 9px 0;
+ }
- #tooltip {
- position: absolute;
- left: 110px;
- top: 110px;
- border: 1px solid #FF0000;
- }
- </style>
+ </style>
+</head>
- <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
+<body id="body">
+ <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container-fluid">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a>
+ <div class="nav-collapse collapse">
+ <p class="navbar-text pull-right" id="speed" title="Client port speed"></p>
+ <ul class="navbar nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Map mode<span class="caret"></span></a>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#uplink" onclick="setUpdater(handler_uplinks)">Uplink map</a></li>
+ <li><a href="#temp" onclick="setUpdater(handler_temp)">Temperature map</a></li>
+ <li><a href="#ping" onclick="setUpdater(handler_ping)">Ping map</a></li>
+ <li><a href="#traffic" onclick="setUpdater(handler_traffic)">Traffic map</a></li>
+ <li><a href="#" onclick="toggleNightMode()" title="Add 'nightMode' anywhere in the url to auto-enable">Toggle Night Mode</a></li>
+ </ul>
+ </li>
+ </ul>
+ <p id="updater_name" class="navbar-text"></p>
+ </div><!--/.nav-collapse -->
+ </div>
+ </div>
+ </div>
- <style type="text/css"></style></head>
- <body>
- <div class="navbar navbar-inverse navbar-fixed-top">
- <div class="navbar-inner">
- <div class="container-fluid">
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
- <span class="icon-bar">
- </span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </a>
- <div class="nav-collapse collapse">
- <p class="navbar-text pull-right" id="speed">Foobar</p>
- <ul class="nav">
- <li><a href="#uplink" onclick="setUpdater(handler_uplinks)" >Uplink map</a></li>
- <li><a href="#temp" onclick="setUpdater(handler_temp)" >Temperature map</a></li>
- <li><a href="#ping" onclick="setUpdater(handler_ping)" >Ping map</a></li>
- </ul>
- <p id="info-content" class="navbar-text"> </p>
- <p id="info-switch" class="navbar-text pull-left"> </p>
- </div><!--/.nav-collapse -->
- </div>
- </div>
- </div>
+ <div class="container-fluid">
+ <div class="panel" style="position: fixed; z-index: 10000;">
+ <div class="span4">
+ <div id="info-switch-parent" style="background: silver">
+ <table class="table" id="info-switch-table"></table>
+ </div>
+ </div>
+ </div><!--/row-->
- <div class="container-fluid">
- <div class="row-fluid">
- <div class="span12">
- <link rel="stylesheet" href="/ping.css">
- <p id="playground">
- <svg id="lines" width="1920" height="1032" style="position: absolute; top: 0; left: 0; z-index: 1">
- </svg>
+ <div class="row-fluid">
+ <div class="span12">
+ <p id="playground"><img src="/tg15-salkart.png" alt="" id="map" style="filter:invert; z-index: 0;"></p>
+ </div>
+ </div>
- <img src="/tg15-salkart.png" alt="" id="map" />
- </p>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <div id="info-legend-box">
- <button id="legend-1"> </button>
- <button id="legend-2"> </button>
- <button id="legend-3"> </button>
- <button id="legend-4"> </button>
- <button id="legend-5"> </button>
- </div>
- <div id="info-switch-parent">
- <table class="table" id="info-switch-table">
- </table>
- </div>
- </div>
- </div><!--/row-->
- </div><!--/.fluid-container-->
- </div>
- <script src="js/bootstrap.min.js"></script>
- <script src="js/nms2-lib.js"></script>
- <script src="js/nms2.js"></script>
- <script>
- // These are used by ping.js, below.
+ <div class="row-fluid">
+ <div class="span12">
+ <div id="info-legend-box">
+ <button id="legend-1"></button> <button id="legend-2"></button> <button id="legend-3"></button> <button id="legend-4"></button> <button id="legend-5"></button>
+ </div>
+ </div>
+ </div>
+ </div><!--/.fluid-container-->
+ <script src="js/bootstrap.min.js" type="text/javascript"></script>
+ <script src="js/nms2-lib.js" type="text/javascript"></script>
+ <script src="js/nms2.js" type="text/javascript"> </script>
+ <script type="text/javascript">
var draw_linknets = true;
var can_edit = false;
</script>
<script type="text/javascript" src="map.js"></script>
- <script>
+ <script type="text/javascript">
updatePorts();
updatePing();
setInterval(updatePorts,5000);
@@ -113,14 +95,19 @@
setInterval(updateSpeed,3000);
url = document.URL;
if (/#ping/.exec(url)) {
- setUpdater(handler_ping);
+ setUpdater(handler_ping);
}else if (/#uplink/.exec(url)) {
- setUpdater(handler_uplinks);
+ setUpdater(handler_uplinks);
} else if (/#temp/.exec(url)) {
- setUpdater(handler_temp);
+ setUpdater(handler_temp);
+ } else if (/#traffic/.exec(url)) {
+ setUpdater(handler_traffic);
} else {
- setUpdater(handler_ping);
+ setUpdater(handler_ping);
}
- </script>
- </body>
+ if (/nightMode/.exec(url)) {
+ toggleNightMode();
+ }
+ </script>
+</body>
</html>
diff --git a/web/nms.gathering.org/nms2/map.js b/web/nms.gathering.org/nms2/map.js
index a51f03d..8aff190 100644
--- a/web/nms.gathering.org/nms2/map.js
+++ b/web/nms.gathering.org/nms2/map.js
@@ -7,6 +7,8 @@ var nms = {
ping_data:undefined,
globalmap:[], // DOM objects for switches
drawn:false, // Set to 'true' when switches are drawn
+ switch_showing:"",
+ night:false,
did_update:false // Set to 'true' after we've done some basic updating
};
@@ -17,19 +19,66 @@ var nms = {
var handler_uplinks = {
updater:uplinkUpdater,
- init:uplinkInit
+ init:uplinkInit,
+ name:"Uplink map"
};
var handler_temp = {
updater:tempUpdater,
- init:tempInit
+ init:tempInit,
+ name:"Temperature map"
};
var handler_ping = {
updater:pingUpdater,
- init:pingInit
+ init:pingInit,
+ name:"IPv4 Ping map"
};
+var handler_traffic = {
+ updater:trafficUpdater,
+ init:trafficInit,
+ name:"Uplink traffic map"
+};
+
+function byteCount(bytes) {
+ var units = ['', 'K', 'M', 'G', 'T', 'P'];
+ i = 0;
+ while (bytes > 1024) {
+ bytes = bytes / 1024;
+ i++;
+ }
+ return bytes.toFixed(1) + units[i];
+}
+
+function toggleNightMode() {
+ var bg = "white";
+ var filter = "invert(0%)";
+ if (!nms.night) {
+ bg = "black";
+ filter = "invert(100%)";
+ nms.night = true;
+ } else {
+ nms.night = false;
+ }
+ var body = document.getElementById("body");
+ body.style.background = bg;
+ var img = document.getElementById("map");
+ img.style.webkitFilter = filter;
+}
+
+/*
+ * Hide switch info-box
+ */
+function hideSwitch()
+{
+ var swtop = document.getElementById("info-switch-parent");
+ var switchele = document.getElementById("info-switch-table");
+ if (switchele != undefined)
+ swtop.removeChild(switchele);
+ nms.switch_showing = "";
+
+}
/*
* Display info on switch "x" in the info-box
*/
@@ -41,9 +90,14 @@ function switchInfo(x)
var tr;
var td1;
var td2;
-
- swtop.removeChild(switchele);
-
+
+ if (nms.switch_showing == x) {
+ hideSwitch();
+ return;
+ } else {
+ hideSwitch();
+ nms.switch_showing = x;
+ }
switchele = document.createElement("table");
switchele.id = "info-switch-table";
switchele.style.zIndex = 100;
@@ -51,7 +105,68 @@ function switchInfo(x)
tr = document.createElement("tr"); td1 = document.createElement("td"); td2 = document.createElement("td");
td1.innerHTML = "Sysname";
- td2.innerHTML = x;
+ td2.innerHTML = x + '<button type="button" style="float: right" onclick="hideSwitch();">X</button>';
+ tr.appendChild(td1); tr.appendChild(td2); switchele.appendChild(tr);
+
+ var speed = 0;
+ var speed2 = 0;
+ for (port in nms.switches_now["switches"][x]["ports"]) {
+ if (nms.switches_now["switches"][x]["ports"] == undefined ||
+ nms.switches_then["switches"][x]["ports"] == undefined) {
+ continue;
+ }
+ if (/ge-0\/0\/44$/.exec(port) ||
+ /ge-0\/0\/45$/.exec(port) ||
+ /ge-0\/0\/46$/.exec(port) ||
+ /ge-0\/0\/47$/.exec(port))
+ {
+ var t = nms.switches_then["switches"][x]["ports"][port];
+ var n = nms.switches_now["switches"][x]["ports"][port];
+ speed += (parseInt(t["ifhcoutoctets"]) - parseInt(n["ifhcoutoctets"])) / (parseInt(t["time"] - n["time"]));
+ speed2 += (parseInt(t["ifhcinoctets"]) - parseInt(n["ifhcinoctets"])) / (parseInt(t["time"] - n["time"]));
+ }
+ }
+
+ tr = document.createElement("tr"); td1 = document.createElement("td"); td2 = document.createElement("td");
+ td1.innerHTML = "Uplink speed (out , port 44,45,46,47)";
+ td2.innerHTML = byteCount(8 * speed) + "b/s";
+ tr.appendChild(td1); tr.appendChild(td2); switchele.appendChild(tr);
+
+ tr = document.createElement("tr"); td1 = document.createElement("td"); td2 = document.createElement("td");
+ td1.innerHTML = "Uplink speed (in , port 44,45,46,47)";
+ td2.innerHTML = byteCount(8 * speed2) + "b/s";
+ tr.appendChild(td1); tr.appendChild(td2); switchele.appendChild(tr);
+
+ speed = 0;
+ for (port in nms.switches_now["switches"][x]["ports"]) {
+ if (nms.switches_now["switches"][x]["ports"] == undefined ||
+ nms.switches_then["switches"][x]["ports"] == undefined) {
+ continue;
+ }
+ var t = nms.switches_then["switches"][x]["ports"][port];
+ var n = nms.switches_now["switches"][x]["ports"][port];
+ speed += (parseInt(t["ifhcinoctets"]) -parseInt(n["ifhcinoctets"])) / (parseInt(t["time"] - n["time"]));
+ }
+
+ tr = document.createElement("tr"); td1 = document.createElement("td"); td2 = document.createElement("td");
+ td1.innerHTML = "Total speed (in)";
+ td2.innerHTML = byteCount(8 * speed) + "b/s";
+ tr.appendChild(td1); tr.appendChild(td2); switchele.appendChild(tr);
+
+ speed = 0;
+ for (port in nms.switches_now["switches"][x]["ports"]) {
+ if (nms.switches_now["switches"][x]["ports"] == undefined ||
+ nms.switches_then["switches"][x]["ports"] == undefined) {
+ continue;
+ }
+ var t = nms.switches_then["switches"][x]["ports"][port];
+ var n = nms.switches_now["switches"][x]["ports"][port];
+ speed += (parseInt(t["ifhcoutoctets"]) -parseInt(n["ifhcoutoctets"])) / (parseInt(t["time"] - n["time"]));
+ }
+
+ tr = document.createElement("tr"); td1 = document.createElement("td"); td2 = document.createElement("td");
+ td1.innerHTML = "Total speed (out)";
+ td2.innerHTML = byteCount(8 * speed) + "b/s";
tr.appendChild(td1); tr.appendChild(td2); switchele.appendChild(tr);
tr = document.createElement("tr"); td1 = document.createElement("td"); td2 = document.createElement("td");
@@ -60,6 +175,11 @@ function switchInfo(x)
tr.appendChild(td1); tr.appendChild(td2); switchele.appendChild(tr);
tr = document.createElement("tr"); td1 = document.createElement("td"); td2 = document.createElement("td");
+ td1.innerHTML = "Latency";
+ td2.innerHTML = nms.ping_data["switches"][x]["latency"];
+ tr.appendChild(td1); tr.appendChild(td2); switchele.appendChild(tr);
+
+ tr = document.createElement("tr"); td1 = document.createElement("td"); td2 = document.createElement("td");
td1.innerHTML = "Temperature";
td2.innerHTML = sw["temp"];
tr.appendChild(td1); tr.appendChild(td2); switchele.appendChild(tr);
@@ -84,6 +204,7 @@ function switchInfo(x)
td2.innerHTML = sw["management"]["poll_frequency"];
tr.appendChild(td1); tr.appendChild(td2); switchele.appendChild(tr);
+
swtop.appendChild(switchele);
}
@@ -107,6 +228,7 @@ function createSwitch(sysname, x, y, zorder, width, height)
s.style.border = '1px solid black';
s.style.padding = "0";
s.style.zIndex = zorder + 100;
+ s.style.cursor = "pointer";
s.addEventListener("click", function(){ switchInfo(sysname); });
s.title = sysname + " - " + nms.switches_now["switches"][sysname]["management"]["ip"];
nms.globalmap[sysname] = s;
@@ -162,7 +284,22 @@ function updateInfo()
*/
function colorSwitch(sysname, color)
{
- nms.globalmap[sysname].style.background = color;
+ if (nms.globalmap[sysname]) {
+ nms.globalmap[sysname].style.background = color;
+ }
+}
+
+/*
+ * Reset switch color to "blue".
+ * Used when changing mode so colors don't linger for switches that are
+ * not explicitly colored by the update handler.
+ */
+function resetSwitches() {
+ if (nms.switches_now) {
+ for (var sw in nms.switches_now["switches"]) {
+ colorSwitch(sw,"blue");
+ }
+ }
}
/*
@@ -171,9 +308,14 @@ function colorSwitch(sysname, color)
*/
function uplinkUpdater()
{
+ if (!nms.switches_now["switches"])
+ return;
for (sw in nms.switches_now["switches"]) {
var uplinks=0;
for (port in nms.switches_now["switches"][sw]["ports"]) {
+ if (!nms.switches_then["switches"][sw]["ports"] ||
+ !nms.switches_now["switches"][sw]["ports"])
+ continue;
if (/ge-0\/0\/44$/.exec(port) ||
/ge-0\/0\/45$/.exec(port) ||
/ge-0\/0\/46$/.exec(port) ||
@@ -201,6 +343,51 @@ function uplinkUpdater()
/*
* Init-function for uplink map
*/
+function trafficInit()
+{
+ setLegend(1,"blue","0 uplink utilization");
+ setLegend(5,"red", "1000Mb/s or more uplink utilization");
+ setLegend(4,"yellow","100Mb/s to 800Mb/s uplink utilization");
+ setLegend(3,"green", "5Mb/s to 100Mb/s uplink utilization");
+ setLegend(2,"white","0 to 5Mb/s uplink utilization");
+}
+
+function trafficUpdater()
+{
+ if (!nms.switches_now["switches"])
+ return;
+ for (sw in nms.switches_now["switches"]) {
+ var speed = 0;
+ for (port in nms.switches_now["switches"][sw]["ports"]) {
+ if (/ge-0\/0\/44$/.exec(port) ||
+ /ge-0\/0\/45$/.exec(port) ||
+ /ge-0\/0\/46$/.exec(port) ||
+ /ge-0\/0\/47$/.exec(port))
+ {
+ var t = nms.switches_then["switches"][sw]["ports"][port];
+ var n = nms.switches_now["switches"][sw]["ports"][port];
+ speed += (parseInt(t["ifhcoutoctets"]) -parseInt(n["ifhcoutoctets"])) / (parseInt(t["time"] - n["time"]));
+ speed += (parseInt(t["ifhcinoctets"]) -parseInt(n["ifhcinoctets"])) / (parseInt(t["time"] - n["time"]));
+ }
+ }
+ var m = 1024 * 1024 / 8;
+ if (speed == 0) {
+ colorSwitch(sw,"blue");
+ } else if (speed > (1000 * m)) {
+ colorSwitch(sw,"red");
+ } else if (speed > (800 * m)) {
+ colorSwitch(sw, "yellow");
+ } else if (speed > (5 * m)) {
+ colorSwitch(sw, "green");
+ } else {
+ colorSwitch(sw, "white");
+ }
+ }
+}
+
+/*
+ * Init-function for uplink map
+ */
function uplinkInit()
{
setLegend(1,"blue","0 uplinks");
@@ -317,8 +504,11 @@ function updateMap()
function setUpdater(fo)
{
nms.updater = undefined;
+ resetSwitches();
fo.init();
nms.updater = fo.updater;
+ var foo = document.getElementById("updater_name");
+ foo.innerHTML = fo.name + " ";
initialUpdate();
if (nms.ping_data && nms.switches_then && nms.switches_now) {
nms.updater();
@@ -405,6 +595,13 @@ function updateSpeed()
console.log("ops");
continue;
}
+ if (!nms.switches_then || !nms.switches_then["switches"] || !nms.switches_then["switches"][sw] || !nms.switches_then["switches"][sw]["ports"]) {
+ continue;
+ }
+ if (!nms.switches_now || !nms.switches_now["switches"] || !nms.switches_now["switches"][sw] || !nms.switches_now["switches"][sw]["ports"]) {
+ continue;
+ }
+
if (!nms.switches_then["switches"][sw]["ports"][port]) {
console.log("ops");
continue;
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 17:53:17 +0000