aboutsummaryrefslogtreecommitdiffstats
path: root/web/nms.gathering.org/nms2/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'web/nms.gathering.org/nms2/index.html')
-rw-r--r--web/nms.gathering.org/nms2/index.html438
1 files changed, 0 insertions, 438 deletions
diff --git a/web/nms.gathering.org/nms2/index.html b/web/nms.gathering.org/nms2/index.html
deleted file mode 100644
index 7d49c33..0000000
--- a/web/nms.gathering.org/nms2/index.html
+++ /dev/null
@@ -1,438 +0,0 @@
-<!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>-->
-
- <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;
- }
-
- #canvas {
- background-image: url('http://nms.tg15.gathering.org/tg15-salkart.png');
- }
-
- #tooltip {
- position: absolute;
- left: 110px;
- top: 110px;
- border: 1px solid #FF0000;
- }
- </style>
-
- <!-- 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]-->
-
- <script type="text/javascript">
- $(document).ready(function() {
-
- var switches = {};
- var selectedSwitch = null;
- var selectedPort = null;
- var mapSize = null;
-
- var activeHover = null;
-
- /* Bind: drop-down::switch-list -> onChange()
- -------------------------------------------- */
- $('#switch-list').change(function() {
- selectedSwitch = $("#switch-list option:selected").text();
- updatePortList();
- //sumPorts(selectedSwitch);
- });
-
- /* Bind: drop-down::port-list -> onChange();
- ------------------------------------------- */
- $('#port-list').change(function() {
- selectedPort = $("#port-list option:selected").text();
- showPortdata();
- });
-
- $("#canvas").mousemove(function( event ) {
- var x = event.pageX-$('#canvas').offset().left;
- var y = event.pageY-$('#canvas').offset().top;
- jQuery.each(switches, function(_switch, data) {
- var sx = parseInt(data['x']);
- var sy = parseInt(data['y']);
- if (x>=sx && y>=sy && x <= sx+data['width'] && y <= sy+data['height']) {
- $('#tooltip').css({backgroundColor: '#c2c2c2', bawidth: '100px', height: 'auto', visibility: 'visible', left: x+5, top: y-5});
- $('#tooltip').html(_switch + '<br>');
-
- activeHover = _switch;
- /*
- $('#tooltip').qtip({ // Grab some elements to apply the tooltip to
- position: { type: 'absolute'},
- position: { adjust: { x: 100, y: 100 } },
- content: {
- text: 'My common piece of text here'
- }
- })
- */
- return true;
- } else { activeHover = null; }
- });
- });
-
- /* ------------ Functions below -------------- */
-
- function byteCount(bytes) {
- var units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
- i = 0;
- while (bytes > 1024) { bytes = bytes / 1024; i++; }
- return bytes.toFixed(1) + units[i];
- }
-
- function sum(arr) {
- arr.reduce(
- function(prev,current){
- return +(current[1]) + prev;
- }, 0
- );
- }
-
- function hslToRgb(h, s, l){
- var r, g, b;
-
- if(s == 0){
- r = g = b = l; // achromatic
- }else{
- var hue2rgb = function hue2rgb(p, q, t){
- if(t < 0) t += 1;
- if(t > 1) t -= 1;
- if(t < 1/6) return p + (q - p) * 6 * t;
- if(t < 1/2) return q;
- if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
- return p;
- }
-
- var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
- var p = 2 * l - q;
- r = hue2rgb(p, q, h + 1/3);
- g = hue2rgb(p, q, h);
- b = hue2rgb(p, q, h - 1/3);
- }
-
- return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
- }
-
- function rgbToHsl(r, g, b){
- r /= 255, g /= 255, b /= 255;
- var max = Math.max(r, g, b), min = Math.min(r, g, b);
- var h, s, l = (max + min) / 2;
-
- if(max == min){
- h = s = 0; // achromatic
- }else{
- var d = max - min;
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
- switch(max){
- case r: h = (g - b) / d + (g < b ? 6 : 0); break;
- case g: h = (b - r) / d + 2; break;
- case b: h = (r - g) / d + 4; break;
- }
- h /= 6;
- }
-
- return [h, s, l];
- }
-
- function numberToColorHsl(i) {
- // as the function expects a value between 0 and 1, and red = 0° and green = 120°
- // we convert the input to the appropriate hue value
- var hue = i * 1.2 / 360;
- // we convert hsl to rgb (saturation 100%, lightness 50%)
- var rgb = hslToRgb(hue, 1, .5);
- // we format to css value and return
- return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
- }
-
-
-
- function sumPorts(_switch) {
- var totalIn = 0;
- var totalOut = 0;
- var avgTotalIn = [];
- var avgTotalOut = [];
- var foundUplinks = 0;
-
- if (_switch in switches && 'ports' in switches[_switch] ) {
- jQuery.each(switches[_switch]['ports'], function(port, portdata) {
- if ('history' in portdata && $.inArray(port, ['ge-0/0/44', 'ge-0/0/45', 'ge-0/0/46', 'ge-0/0/47']) > -1) {
- var timeframe = parseInt(portdata['time'])-parseInt(portdata['history']['time']);
-
- // byte == 1 octett
- In = (parseInt(portdata['ifhcinoctets']) - parseInt(portdata['history']['ifhcinoctets'])) / timeframe;
- Out = (parseInt(portdata['ifhcoutoctets']) - parseInt(portdata['history']['ifhcoutoctets'])) / timeframe;
-
- if (In > 0 || Out > 0) {
- totalIn += In;
- avgTotalIn.push(In);
-
- totalOut += Out;
- avgTotalOut.push(Out);
-
- foundUplinks++;
- }
- }
- });
-
- if (totalIn > 0 && totalOut > 0) {
- var avgIn = sum(avgTotalIn)/avgTotalIn.length;
- var avgOut = sum(avgTotalOut)/avgTotalOut.length;
-
- switches[_switch]['average'] = {IN: avgIn, OUT: avgOut};
- switches[_switch]['load'] = {IN: totalIn/foundUplinks, OUT: totalOut/foundUplinks};
- }
- }
- }
-
- function showPortdata() {
- if(selectedSwitch && selectedPort) {
- var portdata = switches[selectedSwitch]['ports'][selectedPort];
- var timeframe = parseInt(portdata['time'])-parseInt(portdata['history']['time']);
-
- // byte == 1 octett
- inPerSec = (parseInt(portdata['ifhcinoctets']) - parseInt(portdata['history']['ifhcinoctets'])) / timeframe;
- outPerSec = (parseInt(portdata['ifhcoutoctets']) - parseInt(portdata['history']['ifhcoutoctets'])) / timeframe;
-
- $('#switchinfo').val('');
- $('#switchinfo').val($('#switchinfo').val() + 'IN: ' + byteCount(inPerSec) + '/s\n');
- $('#switchinfo').val($('#switchinfo').val() + 'Out: ' + byteCount(outPerSec) + '/s\n');
-
- //jQuery.each(switches[selectedSwitch]['ports'][selectedPort], function(key, val) {
- // $('#switchinfo').val($('#switchinfo').val() + inPerSec + '\n');
- //});
-
- console.log(switches);
- }
- }
-
- function updatePortList() {
- if(selectedSwitch) {
- $('#port-list').empty()
- jQuery.each(switches[selectedSwitch]['ports'], function(port, val) {
- $('#port-list').append(
- $('<option></option>').val(port).html(port)
- );
- });
- }
- }
-
- function updateSwitchList() {
- jQuery.each(switches, function(_switch, val) {
- found = false;
- $('#switch-list option').each(function(){
- if (this.value == _switch) {
- found = true;
- return false;
- }
- });
-
- if (!found) {
- $('#switch-list').append(
- $('<option></option>').val(_switch).html(_switch)
- );
- }
- });
-
- // var firstItem = $('#switch-list')[0][0].value;
- selectedSwitch = $("#switch-list option:selected").text();
-
- updatePortList();
- selectedPort = $("#port-list option:selected").text();
-
- showPortdata();
- }
-
- Object.size = function(obj) {
- var size = 0, key;
- for (key in obj) {
- if (obj.hasOwnProperty(key)) size++;
- }
- return size;
- };
-
- function refreshInfra(func) {
- /* Note:
- These ajax-requests are chained in their own success
- because the "inside ajax" can not be run before the predecessor
- is completed. This is because the nested ajax-calls loops over
- data that will otherwise not be found.
- */
-
- /* Background: Update switchlist
- ------------------------------- */
- $.ajax({
- type: "GET",
- url: "/switches-json2.pl",
- dataType: "text",
- success: function (data, textStatus, jqXHR) {
- decoded = JSON.parse(data);
- jQuery.each(decoded['switches'], function(_switch, val) {
- switches[_switch] = val;
- switches[_switch]['speed'] = 125000000; // 1Gbit In bytes! BYYYYTE!!! Geez louise!
- });
- console.log(switches);
- /* Background: Update live port-data/port-list
- --------------------------------------------- */
- $.ajax({
- type: "GET",
- url: "/port-state.pl",
- dataType: "text",
- success: function (data, textStatus, jqXHR) {
- var switchdata = JSON.parse(data);
- jQuery.each(switchdata, function(_switch, val) {
- switches[_switch]['ports'] = {};
-
- jQuery.each(val['ports'], function(port, val) {
- switches[_switch]['ports'][port] = val;
- });
- });
- /* Background: Update port-history
- --------------------------------- */
- $.ajax({
- type: "GET",
- url: "/port-state.pl?time=5m",
- dataType: "text",
- success: function (data, textStatus, jqXHR) {
- var switchdata = JSON.parse(data);
- jQuery.each(switchdata, function(_switch, val) {
- jQuery.each(val['ports'], function(port, val) {
- switches[_switch]['ports'][port]['history'] = val;
- });
- });
- if(typeof func != 'undefined')
- func();
- }
- })
- }
- });
- }
- });
- }
-
- function randint(min, max) {
- return Math.floor(Math.random() * (max - min)) + min;
- }
-
- Array.max = function( array ){
- return Math.max.apply( Math, array );
- };
-
- window.addEventListener('resize', resizeCanvas, false);
-
- function drawMap() {
- if (Object.size(switches) > 0) {
- var c = $("#canvas")[0];
- var ctx = c.getContext("2d");
- ctx.clearRect(0, 0, c.width, c.height);
- jQuery.each(switches, function(_switch, data) {
- sumPorts(_switch);
- if("load" in switches[_switch]) {
- var perc = 100.0/parseInt(data['speed']);
- var throughput = Array.max([switches[_switch]['load']['IN'], switches[_switch]['load']['OUT']]);
- var percentage = throughput*perc;
- ctx.fillStyle=numberToColorHsl( 100-percentage );
- ctx.fillRect(parseInt(data['x']), parseInt(data['y']), data['width'], data['height']);
- }
- });
- if(activeHover) {
- ctx.beginPath();
- ctx.moveTo(parseInt(switches[activeHover]['x']), parseInt(switches[activeHover]['y']));
- ctx.lineTo(switches[activeHover]['width'], switches[activeHover]['height']);
- ctx.stroke();
- }
- }
- }
- function resizeCanvas() {
- canvas.width = mapSize[0];
- canvas.height = mapSize[1];
-
- var ref = window.setInterval(function() { drawMap(); }, 50);
- }
-
- function init() {
- var url = $('#canvas').css('background-image').slice(4, -1);
-
- var bgImg = $('<img />');
- bgImg.hide();
- bgImg.bind('load', function()
- {
- mapSize = [$(this).width(), $(this).height()];
- // After we've loaded the map into a hidden <img> to measure the size
- // we can resize the canvas accordingly. The resize function contains all our draw stuff.
- resizeCanvas();
- });
- $('body').append(bgImg);
- bgImg.attr('src', url);
-
- // Fire only once, with a parameter to update the switch-list.
- // This will flicker the drop-down once but giving us a function
- // to refresh "infra" in the background retrieving data in real time without affecting the UI.
- refreshInfra(updateSwitchList);
- }
- init();
-
- });
- </script>
-
- <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 class="active"id="nav-param"><a href="#params" onclick="showSwitches()">Show Switches</a></li>
- <li id="nav-home"><a href="#about" onclick="showHome()">About</a></li>
- </ul>
- </div><!--/.nav-collapse -->
- </div>
- </div>
- </div>
-
- <div class="container-fluid">
- <div class="row-fluid">
- <div class="span12">
- <div class="input-append">
- <select id="switch-list"></select>
- <select id="port-list"></select>
- <br>
-
- <!--<textarea id="switchinfo" rows=20 cols=80 class="input-block-level"> </textarea>-->
- <canvas id="canvas"></canvas>
- </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>
-
- <div id="tooltip"></div>
- </body>
-</html>
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-27 07:04:25 +0000