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, 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>