Added dynamic network activity page to health controller.

git-svn-id: svn://svn.alpinelinux.org/acf/alpine-baselayout/trunk@1452 ab2d0c66-481e-0410-8bed-d214d4d58bed

1 files changed, 115 insertions, 0 deletions

diff --git a/health-networkstats-html.lsp b/health-networkstats-html.lsp
new file mode 100644
index 0000000..e994afb
--- /dev/null
+++ b/health-networkstats-html.lsp
@@ -0,0 +1,115 @@
+<% 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:{position:"ne", backgroundOpacity:0}, xaxis:{mode:"time", timeformat:"%H:%M:%S", min:timestamp, max:timestamp+duration}, yaxis:{min:0}});
+	}
+	function Update(){
+		$.getJSON(
+			'<%= 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>
+<div id="chart" style="WIDTH: 600px; HEIGHT: 300px"></div>
+<DL>
+<DT>Display Options</DT>
+<% for intf,val in pairs(view.value) do
+	local ipaddr = ""
+	if val.ipaddr then ipaddr = " ("..val.ipaddr..")" end %>
+	<DD><input type="checkbox" name=<%= intf.."RX" %> checked="checked"><%= intf.." RX"..ipaddr %></input></DD>
+	<DD><input type="checkbox" name=<%= intf.."TX" %> checked="checked"><%= intf.." TX"..ipaddr %></input></DD>
+<% end %>
+<DT>Start / Stop</DT>
+<DD>
+<input TYPE="button" ID="Start" VALUE="Start">
+<input TYPE="button" ID="Stop" VALUE="Stop">
+</DD>
+</DL>