aboutsummaryrefslogtreecommitdiffstats
path: root/web/nms-public.gathering.org/old/speedometer/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'web/nms-public.gathering.org/old/speedometer/index.html')
-rw-r--r--web/nms-public.gathering.org/old/speedometer/index.html125
1 files changed, 0 insertions, 125 deletions
diff --git a/web/nms-public.gathering.org/old/speedometer/index.html b/web/nms-public.gathering.org/old/speedometer/index.html
deleted file mode 100644
index ba504cf..0000000
--- a/web/nms-public.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>