diff options
Diffstat (limited to 'web/nms-public.gathering.org/old/speedometer/index.html')
-rw-r--r-- | web/nms-public.gathering.org/old/speedometer/index.html | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/web/nms-public.gathering.org/old/speedometer/index.html b/web/nms-public.gathering.org/old/speedometer/index.html new file mode 100644 index 0000000..ba504cf --- /dev/null +++ b/web/nms-public.gathering.org/old/speedometer/index.html @@ -0,0 +1,125 @@ +<!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> |