diff options
Diffstat (limited to 'web/nms.gathering.org/old/speedometer/index.html')
-rw-r--r-- | web/nms.gathering.org/old/speedometer/index.html | 125 |
1 files changed, 0 insertions, 125 deletions
diff --git a/web/nms.gathering.org/old/speedometer/index.html b/web/nms.gathering.org/old/speedometer/index.html deleted file mode 100644 index ba504cf..0000000 --- a/web/nms.gathering.org/old/speedometer/index.html +++ /dev/null @@ -1,125 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset=utf-8 /> - <title></title> - <link rel="stylesheet" type="text/css" href="default.css" /> - <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> - - - - <!-- Load c3.css --> - <link href="c3-master/c3.css" rel="stylesheet" type="text/css"> - - <!-- Load d3.js and c3.js --> - <script src="http://d3js.org/d3.v3.min.js"></script> - <script src="c3-master/c3.min.js"></script> - <script src="nms-tmp.js"></script> - - <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> - - </head> - <body> - <div id="ruler"></div> - <div id="container"> - <h1 id="title">Aggregated internal traffic</h1> - - <div id="data"></div> - - <h1 align="center" id="text-bandwidth" data-used_bw='0'></h1> - <a href="#" id="switch" data-mode="edge_ports">Switch view to <span>total aggregated</span></a> - <br><br> - <div style="margin-left: 800px;" id="logs"></div> - </div><!-- /#container --> - <script> - - - - $(function(){ - $('#switch').click(function(e) { - e.preventDefault(); - if($(this).attr('data-mode') == 'tot_agg'){ - // mode = 'tot_agg'; - $('#switch span').text('total aggregated'); - console.log('switched to edge ports'); - $(this).attr('data-mode', 'edge_ports'); - }else{ - // mode = 'edge_ports'; - $('#switch span').text('edge ports'); - - console.log('switched to total aggregated'); - $(this).attr('data-mode', 'tot_agg'); - } - }); - - /* - Configures and draws the speedometer - */ - var chart = c3.generate({ - bindto: '#data', - data: { - columns: [ - ['data', 0] - ], - type: 'gauge' - }, - interaction: { enabled: false }, - transition: { duration: 0 }, - gauge: { - label: { - format: function(value, ratio) { - // return value; - x = 8 * parseInt($('#text-bandwidth').attr('data-used_bw')) / 1024 / 1024; - return x.toPrecision(4) + ' Gbps'; - }, - show: false // to turn off the min/max labels. - }, - width: 30, - min: 0, - max: 80 - }, - color: { - pattern: ['#54CD41', '#CEFF04', '#FFB404', '#FF0000'], // the three color levels for the percentage values. - threshold: { values: [20, 40, 60, 80] } - }, - size: { height: 600 } - }); - - var maxspeed=15*8; // 40GB (total internet capacity) * bits in a byte = 320Gbit/s - does not make much sense, but we have to use a "max speed" - - - /* - Update graph every 3 seconds - */ - setInterval(function () { - mode = $('#switch').attr('data-mode'); - - console.log('updates graph - mode: ' + mode); - - myspeed = 8 * bandwidth / 1024 / 1024; - if (myspeed > maxspeed) { - maxspeed = myspeed; - } - - update = 100 * myspeed / maxspeed; - - chart.load({ - columns: [['data', update]] - }); - - var foo = document.getElementById(""); - if(mode = 'tot_agg'){ - $('#text-speed').text('aggregated traffic'); - }else{ - $('#text-speed').text('edge ports traffic'); - } - - $("#logs").text('avg. last hour: ' + (get_bytes_avg_1h(parseInt($('#switch').attr('data-mode')))/128/1024/1024).toPrecision(4) + 'Gbps'); - }, 5000); - - setInterval(fetch_switch_data,2000); - setInterval(update_bandwidth,1000); - }); - </script> - </body> -</html> |