summaryrefslogtreecommitdiffstats
path: root/health-networkstats-html.lsp
blob: 29f2be02fc1cffff4ec9115def827d7fa0959e79 (plain)
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>