Modified network stats again to combine legend with checkboxes, and sorted by interface name. Makes chart larger again, but have to pre-define colors.

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

1 files changed, 51 insertions, 18 deletions

diff --git a/health-networkstats-html.lsp b/health-networkstats-html.lsp
index 29f2be0..888a73e 100644
--- a/health-networkstats-html.lsp
+++ b/health-networkstats-html.lsp
@@ -1,6 +1,35 @@
 <% local view, viewlibrary, page_info = ... %>
 <% require("viewfunctions") %>
 <% require("json") %>
+<%
+	-- Table of colors
+	local rgb = {
+		{"rgb(0,192,128)","rgb(64,255,192)"},
+		{"rgb(128,0,192)","rgb(192,64,255)"},
+		{"rgb(0,128,192)","rgb(64,192,255)"},
+		{"rgb(192,0,128)","rgb(255,64,192)"},
+		{"rgb(128,192,0)","rgb(192,255,64)"},
+		{"rgb(192,128,0)","rgb(255,192,64)"},
+		{"rgb(0,0,0)","rgb(128,128,128)"},
+		{"rgb(128,0,0)","rgb(192,64,64)"},
+		{"rgb(0,128,0)","rgb(64,192,64)"},
+		{"rgb(0,0,128)","rgb(64,64,192)"},
+		{"rgb(128,128,0)","rgb(192,192,64)"},
+		{"rgb(0,128,128)","rgb(64,192,192)"},
+		{"rgb(128,0,128)","rgb(192,64,192)"},
+		{"rgb(192,192,192)","rgb(255,255,255)"},
+		{"rgb(192,128,128)","rgb(255,192,192)"},
+		{"rgb(128,192,128)","rgb(192,255,192)"},
+		{"rgb(128,128,192)","rgb(192,192,255)"},
+		{"rgb(192,128,192)","rgb(255,192,255)"},
+		{"rgb(128,192,192)","rgb(192,255,255)"},
+		{"rgb(192,192,128)","rgb(255,255,192)"},
+	}
+
+	local interfaces = {}
+	for intf in pairs(view.value) do table.insert(interfaces, intf) end
+	table.sort(interfaces)
+%>
 
 <style type="text/css">
 	#chart table {
@@ -16,11 +45,9 @@
 	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
+			for i,intf in ipairs(interfaces) do
+				chartdata[intf.."RX"] = {label=intf.." RX", data={}, color=rgb[i][1]}
+				chartdata[intf.."TX"] = {label=intf.." TX", data={}, color=rgb[i][2]}
 			end
 			io.write( json.encode(chartdata) ) %>;
 	var ID
@@ -38,7 +65,7 @@
 		});
 		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}});
+			$("#chart"), data, {legend:{show:false}, xaxis:{mode:"time", timeformat:"%H:%M:%S", min:timestamp, max:timestamp+duration}, yaxis:{min:0}});
 	}
 	function Update(){
 		$.ajaxSetup({cache:false});
@@ -100,21 +127,18 @@
 
 <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>
-
+<div id="chart" style="width:680px; height:300px;"></div>
 
 <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>
+<DD><TABLE style="width:auto;">
+<TR><TD><B>Interface</B></TD><TD><B>IP Address</B></TD><TD colspan="2" style="text-align:center;"><B>RX</B></TD><TD colspan="2" style="text-align:center;"><B>TX</B></TD></TR>
+<% for i,intf in ipairs(interfaces) do %>
+	<TR><TD><%= html.html_escape(intf) %></TD><TD><%= html.html_escape(view.value[intf].ipaddr) %></TD>
+	<TD><INPUT type="checkbox" name="<%= html.html_escape(intf) %>RX" checked="checked"></TD>
+	<TD><DIV style="border:1px solid #ccc;padding:1px"><DIV style="width:14px;height:10px;background-color:<%= rgb[i][1] %>;overflow:hidden"></DIV></DIV></TD>
+	<TD><INPUT type="checkbox" name=<%= html.html_escape(intf) %>TX checked="checked"></TD>
+	<TD><DIV style="border:1px solid #ccc;padding:1px"><DIV style="width:14px;height:10px;background-color:<%= rgb[i][2] %>;overflow:hidden"></DIV></DIV></TD></TR>
 <% end %>
 </TABLE></DD>
 <DT>Start / Stop</DT>
@@ -123,3 +147,12 @@ Network traffic in bytes/second
 <input TYPE="button" ID="Stop" VALUE="Stop">
 </DD>
 </DL>
+
+<% --[[ -- display table of colors %>
+<TABLE style="width:auto;">
+<% for i=1,#rgb do %>
+<TR><TD><DIV style="border:1px solid #ccc;padding:1px"><DIV style="width:14px;height:10px;background-color:<%= rgb[i][1] %>;overflow:hidden"></DIV></DIV></TD>
+<TD><DIV style="border:1px solid #ccc;padding:1px"><DIV style="width:14px;height:10px;background-color:<%= rgb[i][2] %>;overflow:hidden"></DIV></DIV></TD></TR>
+<% end %>
+</TABLE>
+<% --]] %>