<% local view, viewlibrary, page_info, session = ... %> <% json = require("json") %> <% htmlviewfunctions = require("htmlviewfunctions") %> <% html = require("acf.html") %> <% -- 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 { width: auto; } </style> <!--[if IE]><script nonce="NONCE_PLACEHOLDER" type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/excanvas.js"></script><![endif]--> <script nonce="NONCE_PLACEHOLDER" type="text/javascript"> if (typeof jQuery == 'undefined') { document.write('<script nonce="NONCE_PLACEHOLDER" type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery-latest.js"><\/script>'); } </script> <script nonce="NONCE_PLACEHOLDER" type="text/javascript"> if (typeof $.plot == 'undefined') { document.write('<script nonce="NONCE_PLACEHOLDER" type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery.flot.js"><\/script>'); } </script> <script nonce="NONCE_PLACEHOLDER" type="text/javascript"> if (typeof $.plot.formatDate == 'undefined') { document.write('<script nonce="NONCE_PLACEHOLDER" type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery.flot.time.js"><\/script>'); } </script> <script nonce="NONCE_PLACEHOLDER" 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 = {} 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 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:{show:false}, 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> <% local header_level = htmlviewfunctions.displaysectionstart(view, page_info) %> <p>Network traffic in bytes/second</p> <div id="chart" style="width:680px; height:300px;"></div> <% htmlviewfunctions.displayitemstart() %> Display Options <% htmlviewfunctions.displayitemmiddle() %> <table class="tablesorter"><thead> <tr><th>Interface</th><th>IP Address</th><th colspan="2">RX</th><th colspan="2">TX</th></tr> </thead><tbody> <% 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="width:14px;height:10px;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="width:14px;height:10px;border:1px solid #ccc;padding:1px"><div style="width:14px;height:10px;background-color:<%= rgb[i][2] %>;overflow:hidden"></div></div></td></tr> <% end %> </tbody></table> <% htmlviewfunctions.displayitemend() %> <% htmlviewfunctions.displayitemstart() %> Start / Stop <% htmlviewfunctions.displayitemmiddle() %> <input class="submit" type="button" id="Start" value="Start"> <input class="submit" type="button" id="Stop" value="Stop"> <% htmlviewfunctions.displayitemend() %> <% --[[ -- 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> <% --]] %> <% htmlviewfunctions.displaysectionend(header_level) %>