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
|
<% local view, viewlibrary, page_info = ... %>
<% require("viewfunctions") %>
<% require("json") %>
<style type="text/css">
#chart table {
width: auto;
}
</style>
<!--[if IE]><script type="text/javascript" src="/js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="/js/jquery-latest.js"></script>
<script type="text/javascript" src="/js/jquery.flot.js"></script>
<script type="text/javascript">
var interval = 1000;
var duration = 60000;
var lastdata = <%= json.encode(view) %>;
var chartdata = <% -- Generate the data structure in Lua and then convert to json
local chartdata = {}
local i=0
for intf in pairs(view.value) do
chartdata[intf.."RX"] = {label=intf.." RX", data={}, color=i}
chartdata[intf.."TX"] = {label=intf.." TX", data={}, color=i+1}
i = i+2
end
io.write( json.encode(chartdata) ) %>;
var ID
function DrawChart(){
var data = [];
$("body").find("input:checked").each(function() {
data.push(chartdata[$(this).attr("name")]);
});
var timestamp = 0;
$.each(chartdata, function(key,val){
if (val.data.length > 0){
timestamp=val.data[0][0];
return false;
}
});
if (timestamp == 0 && lastdata != null) timestamp = lastdata.timestamp*1000;
$.plot(
$("#chart"), data, {legend:{container: $("#legend")}, xaxis:{mode:"time", timeformat:"%H:%M:%S", min:timestamp, max:timestamp+duration}, yaxis:{min:0}});
}
function Update(){
$.ajaxSetup({cache:false});
$.getJSON(
'<%= html.html_escape(page_info.script .. page_info.prefix .. page_info.controller .. "/" .. page_info.action) %>',
{viewtype:'json'},
function(data) {
if (lastdata != null){
if (data.timestamp <= lastdata.timestamp) return false;
var timestamp = data.timestamp * 1000;
var multiplier = 1 / (data.timestamp - lastdata.timestamp);
var shiftcount = null;
$.each(lastdata.value, function(key,val){
chartdata[key+"RX"].data.push([timestamp, (data.value[key].RX.bytes - lastdata.value[key].RX.bytes)*multiplier]);
chartdata[key+"TX"].data.push([timestamp, (data.value[key].TX.bytes - lastdata.value[key].TX.bytes)*multiplier]);
if (shiftcount == null) {
shiftcount = 0;
$.each(chartdata[key+"RX"].data, function(key,val){
if (val[0] < timestamp-duration)
shiftcount += 1;
else
return false;
});
}
for (i=0; i<shiftcount; i++){
chartdata[key+"RX"].data.shift();
chartdata[key+"TX"].data.shift();
}
});
}
lastdata = data;
DrawChart();
}
);
}
function Start(){
lastdata = null;
$.each(chartdata, function(key,val){
val.data = [];
});
Update();
ID = window.setInterval("Update()", interval);
$("#Start").attr("disabled","disabled");
$("#Stop").removeAttr("disabled");
}
function Stop(){
window.clearInterval(ID);
$("#Stop").attr("disabled","disabled");
$("#Start").removeAttr("disabled");
}
$(function (){
$(":checkbox").click(DrawChart);
$("#Start").click(Start);
$("#Stop").click(Stop);
DrawChart();
Start();
});
</script>
<H1>Network Statistics</H1>
Network traffic in bytes/second
<TABLE><TR><TD style="vertical-align:top;">
<div id="chart" style="width:550px; height:300px;"></div></TD>
<TD style="align:left; vertical-align:top; width:140px"><div id="legend" style="margin-left:10px;"></div></TD>
</TR></TABLE>
<DL>
<DT>Display Options</DT>
<DD><TABLE>
<% for intf,val in pairs(view.value) do
local ipaddr = ""
if val.ipaddr then ipaddr = " ("..val.ipaddr..")" end %>
<TR><TD><input type="checkbox" name=<%= html.html_escape(intf).."RX" %> checked="checked"><%= html.html_escape(intf).." RX"..html.html_escape(ipaddr) %></input></TD>
<TD><input type="checkbox" name=<%= html.html_escape(intf).."TX" %> checked="checked"><%= html.html_escape(intf).." TX"..html.html_escape(ipaddr) %></input></TD></TR>
<% end %>
</TABLE></DD>
<DT>Start / Stop</DT>
<DD>
<input TYPE="button" ID="Start" VALUE="Start">
<input TYPE="button" ID="Stop" VALUE="Stop">
</DD>
</DL>
|
