1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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>
|
