Add MPTCP bandwidth graph

luci-app-mptcp/htdocs/luci-static/resources/seedrandom.js

@@ -0,0 +1,402 @@
+/**
+
+seedrandom.js
+=============
+
+Seeded random number generator for Javascript.
+
+version 2.3.10
+Author: David Bau
+Date: 2014 Sep 20
+
+Can be used as a plain script, a node.js module or an AMD module.
+
+Script tag usage
+----------------
+
+<script src=//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.3.10/seedrandom.min.js>
+</script>
+
+// Sets Math.random to a PRNG initialized using the given explicit seed.
+Math.seedrandom('hello.');
+console.log(Math.random());          // Always 0.9282578795792454
+console.log(Math.random());          // Always 0.3752569768646784
+
+// Sets Math.random to an ARC4-based PRNG that is autoseeded using the
+// current time, dom state, and other accumulated local entropy.
+// The generated seed string is returned.
+Math.seedrandom();
+console.log(Math.random());          // Reasonably unpredictable.
+
+// Seeds using the given explicit seed mixed with accumulated entropy.
+Math.seedrandom('added entropy.', { entropy: true });
+console.log(Math.random());          // As unpredictable as added entropy.
+
+// Use "new" to create a local prng without altering Math.random.
+var myrng = new Math.seedrandom('hello.');
+console.log(myrng());                // Always 0.9282578795792454
+
+
+Node.js usage
+-------------
+
+npm install seedrandom
+
+// Local PRNG: does not affect Math.random.
+var seedrandom = require('seedrandom');
+var rng = seedrandom('hello.');
+console.log(rng());                  // Always 0.9282578795792454
+
+// Autoseeded ARC4-based PRNG.
+rng = seedrandom();
+console.log(rng());                  // Reasonably unpredictable.
+
+// Global PRNG: set Math.random.
+seedrandom('hello.', { global: true });
+console.log(Math.random());          // Always 0.9282578795792454
+
+// Mixing accumulated entropy.
+rng = seedrandom('added entropy.', { entropy: true });
+console.log(rng());                  // As unpredictable as added entropy.
+
+
+Require.js usage
+----------------
+
+Similar to node.js usage:
+
+bower install seedrandom
+
+require(['seedrandom'], function(seedrandom) {
+  var rng = seedrandom('hello.');
+  console.log(rng());                  // Always 0.9282578795792454
+});
+
+
+Network seeding
+---------------
+
+<script src=//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.3.10/seedrandom.min.js>
+</script>
+
+<!-- Seeds using urandom bits from a server. -->
+<script src=//jsonlib.appspot.com/urandom?callback=Math.seedrandom">
+</script>
+
+<!-- Seeds mixing in random.org bits -->
+<script>
+(function(x, u, s){
+  try {
+    // Make a synchronous request to random.org.
+    x.open('GET', u, false);
+    x.send();
+    s = unescape(x.response.trim().replace(/^|\s/g, '%'));
+  } finally {
+    // Seed with the response, or autoseed on failure.
+    Math.seedrandom(s, !!s);
+  }
+})(new XMLHttpRequest, 'https://www.random.org/integers/' +
+  '?num=256&min=0&max=255&col=1&base=16&format=plain&rnd=new');
+</script>
+
+Reseeding using user input
+--------------------------
+
+var seed = Math.seedrandom();        // Use prng with an automatic seed.
+document.write(Math.random());       // Pretty much unpredictable x.
+
+var rng = new Math.seedrandom(seed); // A new prng with the same seed.
+document.write(rng());               // Repeat the 'unpredictable' x.
+
+function reseed(event, count) {      // Define a custom entropy collector.
+  var t = [];
+  function w(e) {
+    t.push([e.pageX, e.pageY, +new Date]);
+    if (t.length &lt; count) { return; }
+    document.removeEventListener(event, w);
+    Math.seedrandom(t, { entropy: true });
+  }
+  document.addEventListener(event, w);
+}
+reseed('mousemove', 100);            // Reseed after 100 mouse moves.
+
+The "pass" option can be used to get both the prng and the seed.
+The following returns both an autoseeded prng and the seed as an object,
+without mutating Math.random:
+
+var obj = Math.seedrandom(null, { pass: function(prng, seed) {
+  return { random: prng, seed: seed };
+}});
+
+
+Version notes
+-------------
+
+The random number sequence is the same as version 1.0 for string seeds.
+* Version 2.0 changed the sequence for non-string seeds.
+* Version 2.1 speeds seeding and uses window.crypto to autoseed if present.
+* Version 2.2 alters non-crypto autoseeding to sweep up entropy from plugins.
+* Version 2.3 adds support for "new", module loading, and a null seed arg.
+* Version 2.3.1 adds a build environment, module packaging, and tests.
+* Version 2.3.4 fixes bugs on IE8, and switches to MIT license.
+* Version 2.3.6 adds a readable options object argument.
+* Version 2.3.10 adds support for node.js crypto (contributed by ctd1500).
+
+The standard ARC4 key scheduler cycles short keys, which means that
+seedrandom('ab') is equivalent to seedrandom('abab') and 'ababab'.
+Therefore it is a good idea to add a terminator to avoid trivial
+equivalences on short string seeds, e.g., Math.seedrandom(str + '\0').
+Starting with version 2.0, a terminator is added automatically for
+non-string seeds, so seeding with the number 111 is the same as seeding
+with '111\0'.
+
+When seedrandom() is called with zero args or a null seed, it uses a
+seed drawn from the browser crypto object if present.  If there is no
+crypto support, seedrandom() uses the current time, the native rng,
+and a walk of several DOM objects to collect a few bits of entropy.
+
+Each time the one- or two-argument forms of seedrandom are called,
+entropy from the passed seed is accumulated in a pool to help generate
+future seeds for the zero- and two-argument forms of seedrandom.
+
+On speed - This javascript implementation of Math.random() is several
+times slower than the built-in Math.random() because it is not native
+code, but that is typically fast enough.  Some details (timings on
+Chrome 25 on a 2010 vintage macbook):
+
+* seeded Math.random()          - avg less than 0.0002 milliseconds per call
+* seedrandom('explicit.')       - avg less than 0.2 milliseconds per call
+* seedrandom('explicit.', true) - avg less than 0.2 milliseconds per call
+* seedrandom() with crypto      - avg less than 0.2 milliseconds per call
+
+Autoseeding without crypto is somewhat slower, about 20-30 milliseconds on
+a 2012 windows 7 1.5ghz i5 laptop, as seen on Firefox 19, IE 10, and Opera.
+Seeded rng calls themselves are fast across these browsers, with slowest
+numbers on Opera at about 0.0005 ms per seeded Math.random().
+
+
+LICENSE (MIT)
+-------------
+
+Copyright 2014 David Bau.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+*/
+
+/**
+ * All code is in an anonymous closure to keep the global namespace clean.
+ */
+(function (
+    global, pool, math, width, chunks, digits, module, define, rngname) {
+
+//
+// The following constants are related to IEEE 754 limits.
+//
+var startdenom = math.pow(width, chunks),
+    significance = math.pow(2, digits),
+    overflow = significance * 2,
+    mask = width - 1,
+    nodecrypto;
+
+//
+// seedrandom()
+// This is the seedrandom function described above.
+//
+var impl = math['seed' + rngname] = function(seed, options, callback) {
+  var key = [];
+  options = (options == true) ? { entropy: true } : (options || {});
+
+  // Flatten the seed string or build one from local entropy if needed.
+  var shortseed = mixkey(flatten(
+    options.entropy ? [seed, tostring(pool)] :
+    (seed == null) ? autoseed() : seed, 3), key);
+
+  // Use the seed to initialize an ARC4 generator.
+  var arc4 = new ARC4(key);
+
+  // Mix the randomness into accumulated entropy.
+  mixkey(tostring(arc4.S), pool);
+
+  // Calling convention: what to return as a function of prng, seed, is_math.
+  return (options.pass || callback ||
+      // If called as a method of Math (Math.seedrandom()), mutate Math.random
+      // because that is how seedrandom.js has worked since v1.0.  Otherwise,
+      // it is a newer calling convention, so return the prng directly.
+      function(prng, seed, is_math_call) {
+        if (is_math_call) { math[rngname] = prng; return seed; }
+        else return prng;
+      })(
+
+  // This function returns a random double in [0, 1) that contains
+  // randomness in every bit of the mantissa of the IEEE 754 value.
+  function() {
+    var n = arc4.g(chunks),             // Start with a numerator n < 2 ^ 48
+        d = startdenom,                 //   and denominator d = 2 ^ 48.
+        x = 0;                          //   and no 'extra last byte'.
+    while (n < significance) {          // Fill up all significant digits by
+      n = (n + x) * width;              //   shifting numerator and
+      d *= width;                       //   denominator and generating a
+      x = arc4.g(1);                    //   new least-significant-byte.
+    }
+    while (n >= overflow) {             // To avoid rounding up, before adding
+      n /= 2;                           //   last byte, shift everything
+      d /= 2;                           //   right using integer math until
+      x >>>= 1;                         //   we have exactly the desired bits.
+    }
+    return (n + x) / d;                 // Form the number within [0, 1).
+  }, shortseed, 'global' in options ? options.global : (this == math));
+};
+
+//
+// ARC4
+//
+// An ARC4 implementation.  The constructor takes a key in the form of
+// an array of at most (width) integers that should be 0 <= x < (width).
+//
+// The g(count) method returns a pseudorandom integer that concatenates
+// the next (count) outputs from ARC4.  Its return value is a number x
+// that is in the range 0 <= x < (width ^ count).
+//
+/** @constructor */
+function ARC4(key) {
+  var t, keylen = key.length,
+      me = this, i = 0, j = me.i = me.j = 0, s = me.S = [];
+
+  // The empty key [] is treated as [0].
+  if (!keylen) { key = [keylen++]; }
+
+  // Set up S using the standard key scheduling algorithm.
+  while (i < width) {
+    s[i] = i++;
+  }
+  for (i = 0; i < width; i++) {
+    s[i] = s[j = mask & (j + key[i % keylen] + (t = s[i]))];
+    s[j] = t;
+  }
+
+  // The "g" method returns the next (count) outputs as one number.
+  (me.g = function(count) {
+    // Using instance members instead of closure state nearly doubles speed.
+    var t, r = 0,
+        i = me.i, j = me.j, s = me.S;
+    while (count--) {
+      t = s[i = mask & (i + 1)];
+      r = r * width + s[mask & ((s[i] = s[j = mask & (j + t)]) + (s[j] = t))];
+    }
+    me.i = i; me.j = j;
+    return r;
+    // For robust unpredictability, the function call below automatically
+    // discards an initial batch of values.  This is called RC4-drop[256].
+    // See http://google.com/search?q=rsa+fluhrer+response&btnI
+  })(width);
+}
+
+//
+// flatten()
+// Converts an object tree to nested arrays of strings.
+//
+function flatten(obj, depth) {
+  var result = [], typ = (typeof obj), prop;
+  if (depth && typ == 'object') {
+    for (prop in obj) {
+      try { result.push(flatten(obj[prop], depth - 1)); } catch (e) {}
+    }
+  }
+  return (result.length ? result : typ == 'string' ? obj : obj + '\0');
+}
+
+//
+// mixkey()
+// Mixes a string seed into a key that is an array of integers, and
+// returns a shortened string seed that is equivalent to the result key.
+//
+function mixkey(seed, key) {
+  var stringseed = seed + '', smear, j = 0;
+  while (j < stringseed.length) {
+    key[mask & j] =
+      mask & ((smear ^= key[mask & j] * 19) + stringseed.charCodeAt(j++));
+  }
+  return tostring(key);
+}
+
+//
+// autoseed()
+// Returns an object for autoseeding, using window.crypto if available.
+//
+/** @param {Uint8Array|Navigator=} seed */
+function autoseed(seed) {
+  try {
+    if (nodecrypto) return tostring(nodecrypto.randomBytes(width));
+    global.crypto.getRandomValues(seed = new Uint8Array(width));
+    return tostring(seed);
+  } catch (e) {
+    return [+new Date, global, (seed = global.navigator) && seed.plugins,
+      global.screen, tostring(pool)];
+  }
+}
+
+//
+// tostring()
+// Converts an array of charcodes to a string
+//
+function tostring(a) {
+  return String.fromCharCode.apply(0, a);
+}
+
+//
+// When seedrandom.js is loaded, we immediately mix a few bits
+// from the built-in RNG into the entropy pool.  Because we do
+// not want to interfere with deterministic PRNG state later,
+// seedrandom will not call math.random on its own again after
+// initialization.
+//
+mixkey(math[rngname](), pool);
+
+//
+// Nodejs and AMD support: export the implementation as a module using
+// either convention.
+//
+if (module && module.exports) {
+  module.exports = impl;
+  try {
+    // When in node.js, try using crypto package for autoseeding.
+    nodecrypto = require('crypto');
+  } catch (ex) {}
+} else if (define && define.amd) {
+  define(function() { return impl; });
+}
+
+//
+// Node.js native crypto support.
+//
+
+// End anonymous scope, and pass initial values.
+})(
+  this,   // global window object
+  [],     // pool: entropy pool starts empty
+  Math,   // math: package containing random, pow, and seedrandom
+  256,    // width: each RC4 output is 0 <= x < 256
+  6,      // chunks: at least six RC4 outputs for each double
+  52,     // digits: there are 52 significant digits in a double
+  (typeof module) == 'object' && module,    // present in node.js
+  (typeof define) == 'function' && define,  // present with an AMD loader
+  'random'// rngname: name for Math.random and Math.seedrandom
+);

luci-app-mptcp/luasrc/controller/mptcp.lua

@@ -1,7 +1,46 @@
+-- Copyright 2008 Steven Barth <steven@midlink.org>
+-- Copyright 2011 Jo-Philipp Wich <jow@openwrt.org>
+-- Copyright 2018 Ycarus (Yannick Chabanois) <ycarus@zugaina.org>
+-- Licensed to the public under the Apache License 2.0.
+
 module("luci.controller.mptcp", package.seeall)
 
 function index()
-  entry(
-    {"admin", "network", "mptcp"},
-    cbi("mptcp"), _("MPTCP"), 55)
+	entry({"admin", "network", "mptcp"}, alias("admin", "network", "mptcp", "settings"), _("MPTCP"))
+	entry({"admin", "network", "mptcp", "settings"}, cbi("mptcp"), _("Settings"),2)
+	entry({"admin", "network", "mptcp", "bandwidth"}, template("multipath"), _("Bandwidth"), 3).leaf = true
+	entry({"admin", "network", "mptcp", "multipath_bandwidth"}, call("multipath_bandwidth")).leaf = true
+	entry({"admin", "network", "mptcp", "interface_bandwidth"}, call("interface_bandwidth")).leaf = true
+end
+
+function interface_bandwidth(iface)
+	luci.http.prepare_content("application/json")
+	local bwc = io.popen("luci-bwc -i %q 2>/dev/null" % iface)
+	if bwc then
+		luci.http.write("[")
+		while true do
+			local ln = bwc:read("*l")
+			if not ln then break end
+			luci.http.write(ln)
+		end
+		luci.http.write("]")
+		bwc:close()
+	end
+end
+
+function multipath_bandwidth()
+	local result = { };
+	local uci = luci.model.uci.cursor()
+
+	for _, dev in luci.util.vspairs(luci.sys.net.devices()) do
+		if dev ~= "lo" then
+			local multipath = uci:get("network", dev, "multipath")
+			if multipath == "on" or multipath == "master" or multipath == "backup" or multipath == "handover" then
+				result[dev] = "[" .. string.gsub((luci.sys.exec("luci-bwc -i %q 2>/dev/null" % dev)), '[\r\n]', '') .. "]"
+			end
+		end
+	end
+
+	luci.http.prepare_content("application/json")
+	luci.http.write_json(result)
 end

luci-app-mptcp/luasrc/view/multipath.htm

@@ -0,0 +1,820 @@
+<%
+-- Copyright 2010 Jo-Philipp Wich (jow@openwrt.org)
+-- Copyright 2015 OVH (OverTheBox@ovh.net)
+-- Simon Lelievre (simon.lelievre@corp.ovh.com)
+-- Sebastien Duponcheel (sebastien.duponcheel@ovh.net)
+--
+-- This file is part of OverTheBox for OpenWrt.
+--
+--    OverTheBox is free software: you can redistribute it and/or modify
+--    it under the terms of the GNU General Public License as published by
+--    the Free Software Foundation, either version 3 of the License, or
+--    (at your option) any later version.
+--
+--    OverTheBox is distributed in the hope that it will be useful,
+--    but WITHOUT ANY WARRANTY; without even the implied warranty of
+--    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+--    GNU General Public License for more details.
+--
+--    You should have received a copy of the GNU General Public License
+--    along with OverTheBox.  If not, see (http://www.gnu.org/licenses/)
+-%>
+<%-
+	local ntm = require "luci.model.network".init()
+	local uci = require "luci.model.uci".cursor()
+
+	local dev
+	local devices = { "all" }
+	for _, dev in luci.util.vspairs(luci.sys.net.devices()) do
+		if dev ~= "lo" and not ntm:ignore_interface(dev) then
+			local multipath = uci:get("network", dev, "multipath")
+			if multipath == "on" or multipath == "master" or multipath == "backup" or multipath == "handover" then
+				devices[#devices+1] = dev
+			end
+		end
+	end
+
+	local curdev = luci.dispatcher.context.requestpath
+	curdev = curdev[#curdev] ~= "multipath" and curdev[#curdev] or devices[1]
+
+-%>
+
+<%+header%>
+
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+<script type="text/javascript" src="<%=resource%>/seedrandom.js"></script>
+<script type="text/javascript">//<![CDATA[
+
+	function stringToColour(str) {
+		if(str == "free1")
+			return "FireBrick";
+		if(str == "ovh1")
+			return "DeepSkyBlue";
+		if(str == "ovh2")
+			return "LightGreen";
+        if(str == "if1")
+            return "PaleGreen";
+        if(str == "if2")
+            return "PowderBlue";
+        if(str == "if3")
+            return "Salmon";
+        if(str == "if4")
+            return "SeaGreen";
+        if(str == "if5")
+            return "PaleTurquoise";
+        // Generate a color folowing the name
+        Math.seedrandom(str);
+        var rand = Math.random() * Math.pow(255,3);
+        Math.seedrandom(); // don't leave a non-random seed in the generator
+        for (var i = 0, colour = "#"; i < 3; colour += ("00" + ((rand >> i++ * 8) & 0xFF).toString(16)).slice(-2));
+        return colour;
+	}
+
+	function bandwidth_label(bytes, br)
+	{
+		var uby = '<%:kB/s%>';
+		var kby = (bytes / 1024);
+
+		if (kby >= 1024)
+		{
+			uby = '<%:MB/s%>';
+			kby = kby / 1024;
+		}
+
+		var ubi = '<%:kbit/s%>';
+		var kbi = (bytes * 8 / 1024);
+
+		if (kbi >= 1024)
+		{
+			ubi = '<%:Mbit/s%>';
+			kbi = kbi / 1024;
+		}
+
+		return String.format("%f %s%s(%f %s)",
+			kbi.toFixed(2), ubi,
+			br ? '<br />' : ' ',
+			kby.toFixed(2), uby
+		);
+	}
+
+<% if curdev == "all" then %>
+	var all = true;
+	var bwxhr = new XHR();
+
+	var Gdn;
+	var Gup;
+
+	var TIME = 0;
+	var RXB  = 1;
+	var RXP  = 2;
+	var TXB  = 3;
+	var TXP  = 4;
+
+	var width  = 760;
+	var height = 300;
+	var step   = 5;
+
+	var data_wanted = Math.floor(width / step);
+
+	var data_fill   = 0;
+	var data_stamp  = 0;
+
+	var label_25;
+	var label_50;
+	var label_75;
+
+	var label_scale;
+
+	var def;
+	var dnPolygons 	= {};
+	var dndata	= {};
+        var upPolygons 	= {};
+	var updata  	= {};
+
+	/* wait for SVG */
+	window.setTimeout(
+		function() {
+			var dnsvg = document.getElementById('dnsvg');
+                        var upsvg = document.getElementById('upsvg');
+
+			try {
+				Gdn = dnsvg.getSVGDocument ? dnsvg.getSVGDocument() : dnsvg.contentDocument;
+                                Gup = upsvg.getSVGDocument ? upsvg.getSVGDocument() : upsvg.contentDocument;
+			}
+			catch(e) {
+				Gdn = document.embeds['dnsvg'].getSVGDocument();
+				Gup = document.embeds['upsvg'].getSVGDocument();
+			}
+
+			if (!Gdn || !Gup)
+			{
+				window.setTimeout(arguments.callee, 1000);
+			}
+			else
+			{
+				/* find sizes */
+				width       = dnsvg.offsetWidth  - 2;
+				height      = dnsvg.offsetHeight - 2;
+				data_wanted = Math.ceil(width / step);
+
+				/* prefill datasets
+				for (var i = 0; i < data_wanted; i++)
+				{
+					data_tx[i] = 0;
+				}
+				*/
+
+				/* find svg elements */
+				labeldn_25 = Gdn.getElementById('label_25');
+				labeldn_50 = Gdn.getElementById('label_50');
+				labeldn_75 = Gdn.getElementById('label_75');
+
+                                labelup_25 = Gup.getElementById('label_25');
+                                labelup_50 = Gup.getElementById('label_50');
+                                labelup_75 = Gup.getElementById('label_75');
+
+				
+
+				/*
+				label_rx_cur  = document.getElementById('rx_bw_cur');
+				label_rx_avg  = document.getElementById('rx_bw_avg');
+				label_rx_peak = document.getElementById('rx_bw_peak');
+
+				label_tx_cur  = document.getElementById('tx_bw_cur');
+				label_tx_avg  = document.getElementById('tx_bw_avg');
+				label_tx_peak = document.getElementById('tx_bw_peak');
+				*/
+
+				labeldn_scale   = document.getElementById('dnscale');
+                                labelup_scale   = document.getElementById('upscale');
+
+				/* plot horizontal time interval lines */
+				for (var i = width % (step * 60); i < width; i += step * 60)
+				{
+					var linedn = Gdn.createElementNS('http://www.w3.org/2000/svg', 'line');
+						linedn.setAttribute('x1', i);
+						linedn.setAttribute('y1', 0);
+						linedn.setAttribute('x2', i);
+						linedn.setAttribute('y2', '100%');
+						linedn.setAttribute('style', 'stroke:black;stroke-width:0.1');
+
+					var textdn = Gdn.createElementNS('http://www.w3.org/2000/svg', 'text');
+						textdn.setAttribute('x', i + 5);
+						textdn.setAttribute('y', 15);
+						textdn.setAttribute('style', 'fill:#999999; font-size:9pt');
+						textdn.appendChild(Gdn.createTextNode(Math.round((width - i) / step / 60) + 'm'));
+
+					labeldn_25.parentNode.appendChild(linedn);
+					labeldn_25.parentNode.appendChild(textdn);
+
+                                        var lineup = Gup.createElementNS('http://www.w3.org/2000/svg', 'line');
+                                                lineup.setAttribute('x1', i);
+                                                lineup.setAttribute('y1', 0);
+                                                lineup.setAttribute('x2', i);
+                                                lineup.setAttribute('y2', '100%');
+                                                lineup.setAttribute('style', 'stroke:black;stroke-width:0.1');
+
+                                        var textup = Gup.createElementNS('http://www.w3.org/2000/svg', 'text');
+                                                textup.setAttribute('x', i + 5);
+                                                textup.setAttribute('y', 15);
+                                                textup.setAttribute('style', 'fill:#999999; font-size:9pt');
+                                                textup.appendChild(Gup.createTextNode(Math.round((width - i) / step / 60) + 'm'));
+
+                                        labelup_25.parentNode.appendChild(lineup);
+                                        labelup_25.parentNode.appendChild(textup);
+
+				}
+
+				labeldn_scale.innerHTML = String.format('<%:(%d minutes window, %d seconds interval)%>', 3, data_wanted / 60);
+                                labelup_scale.innerHTML = String.format('<%:(%d minutes window, %d seconds interval)%>', 3, data_wanted / 60);
+
+					/* render datasets, start update interval */
+					XHR.poll(3, '<%=build_url("admin/network/mptcp/multipath_bandwidth", all)%>', null,
+					function(x, dataarray)
+					{
+						var data_max_dnl   = 0;
+						var data_max_upl   = 0;
+						var data_scale_dnl = 0;
+						var data_scale_upl = 0;
+
+						var data_rx_avg = 0;
+						var data_tx_avg = 0;
+
+						var data_rx_peak = 0;
+						var data_tx_peak = 0;
+
+						var data = {};
+
+						for(var itf in dataarray)
+						{
+							// convert json string to json object
+							data[itf] = JSON.parse(dataarray[itf]);
+							// Create lines for each interfaces
+							var color = stringToColour(itf);
+							if(typeof dnPolygons[itf] != "object")
+							{
+								// Create a new polygon to draw the bandwith
+								var dnline = Gdn.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+								dnline.setAttributeNS(null, 'id', 'rx_' + itf);
+								dnline.setAttributeNS(null, 'style', 'fill:' + color + ';fill-opacity:0.4;stroke:black;stroke-width:0.1');
+								Gdn.getElementById('rx').parentNode.appendChild(dnline);
+
+								dnPolygons[itf] = Gdn.getElementById('rx_' + itf);
+				                                /* prefill datasets */
+								dndata[itf] = [ ];
+				                                for (var i = 0; i < data_wanted; i++)
+				                                {
+				                                        dndata[itf][i] = 0;
+				                                }
+								// Create legend for this connextion
+								var table = document.getElementById('download_stats');
+								var tr = table.insertRow();
+								tr.setAttribute('id', itf + '_download');
+								// Create cells of the table
+								var itflabel = tr.insertCell(0);
+								// Crete itf legend
+								var strong = document.createElement('strong')
+								strong.appendChild(document.createTextNode(itf));
+								strong.setAttribute('style', 'border-bottom:2px solid ' + color);
+								itflabel.appendChild(strong);
+								// Create label for stats
+								tr.insertCell(1).appendChild(document.createTextNode('<%:Current:%>'));
+								var itfcur   = tr.insertCell(2);
+								itfcur.setAttribute('id', itf + '_download_cur');
+								itfcur.appendChild(document.createTextNode('<%:Current:%> 0 <%:kbit/s%> (0 <%:kB/s%>)'));
+								tr.insertCell(3).appendChild(document.createTextNode('<%:Average:%>'));
+								var itfavg   = tr.insertCell(4);
+								itfavg.setAttribute('id', itf + '_download_avg');
+								itfavg.appendChild(document.createTextNode('<%:Average:%> 0 <%:kbit/s%> (0 <%:kB/s%>)'));
+								tr.insertCell(5).appendChild(document.createTextNode('<%:Peak:%>'));
+								var itfpeak  = tr.insertCell(6);
+								itfpeak.setAttribute('id', itf + '_download_peak');
+								itfpeak.appendChild(document.createTextNode('<%:Peak:%> 0 <%:kbit/s%> (0 <%:kB/s%>)'));
+							}
+							if(typeof upPolygons[itf] != "object")
+							{
+                                                                var upline = Gup.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+                                                                upline.setAttributeNS(null, 'id', 'tx_' + itf);
+								upline.setAttributeNS(null, 'style', 'fill:' + color + ';fill-opacity:0.4;stroke:black;stroke-width:0.1');
+								Gup.getElementById('tx').parentNode.appendChild(upline);
+
+                                                                upPolygons[itf] = Gup.getElementById('tx_' + itf);
+                                                                /* prefill datasets */
+								updata[itf] = [ ];
+                                                                for (var i = 0; i < data_wanted; i++)
+                                                                {
+                                                                        updata[itf][i] = 0;
+                                                                }
+                                                                // Create legend for this connextion
+                                                                var table = document.getElementById('upload_stats');
+                                                                var tr = table.insertRow();
+                                                                tr.setAttribute('id', itf + '_upload');
+                                                                // Create cells of the table
+                                                                var itflabel = tr.insertCell(0);
+                                                                // Crete itf legend
+                                                                var strong = document.createElement('strong')
+                                                                strong.appendChild(document.createTextNode(itf));
+                                                                strong.setAttribute('style', 'border-bottom:2px solid ' + color);
+                                                                itflabel.appendChild(strong);
+								// Create label for stats
+								tr.insertCell(1).appendChild(document.createTextNode('<%:Current:%>'));
+                                                                var itfcur   = tr.insertCell(2);
+                                                                itfcur.setAttribute('id', itf + '_upload_cur');
+                                                                itfcur.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
+								tr.insertCell(3).appendChild(document.createTextNode('<%:Average:%>'));
+                                                                var itfavg   = tr.insertCell(4);
+                                                                itfavg.setAttribute('id', itf + '_upload_avg');
+                                                                itfavg.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
+								tr.insertCell(5).appendChild(document.createTextNode('<%:Peak:%>'));
+                                                                var itfpeak  = tr.insertCell(6);
+                                                                itfpeak.setAttribute('id', itf + '_upload_peak');
+                                                                itfpeak.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
+							}
+						}
+
+						for (var itf in data)
+						{
+							for (var i = data_stamp ? 0 : 1; i < data[itf].length; i++)
+							{
+								/* skip overlapping entries */
+								if (data[itf][i][TIME] <= data_stamp)
+									continue;
+
+								/* normalize difference against time interval */
+								if (i > 0)
+								{
+									var time_delta = data[itf][i][TIME] - data[itf][i-1][TIME];
+									if (time_delta)
+									{
+										dndata[itf].push((data[itf][i][RXB] - data[itf][i-1][RXB]) / time_delta);
+										updata[itf].push((data[itf][i][TXB] - data[itf][i-1][TXB]) / time_delta);
+									}
+								}
+							}
+							/* cut off outdated entries */
+							dndata[itf] = dndata[itf].slice(dndata[itf].length - data_wanted, dndata[itf].length);
+							updata[itf] = updata[itf].slice(updata[itf].length - data_wanted, updata[itf].length);
+						}
+						
+						/* remember current timestamp, calculate horizontal scale */
+						for (var itf in data)
+						{
+							for (var i = 0; i < data[itf].length; i++)
+								data_stamp = Math.max(data_stamp, data[itf][data[itf].length-1][TIME]);
+						}
+
+						var el = Gdn.getElementById('rx').parentNode;
+
+						// intialize upline and downline datas for download and upload
+						var uplineDnl 	= { };
+						var downlineDnl	= { };
+                                                var uplineUpl   = { };
+                                                var downlineUpl = { };
+						// fetch upline and downline datas
+						var toadditf = [ ];
+						for (var itf in data)
+						{
+							uplineDnl[itf] 	= [ ];
+							downlineDnl[itf]= [ ];
+                                                        uplineUpl[itf]  = [ ];
+                                                        downlineUpl[itf]= [ ];
+							// build point sets
+							var data_tx_avg;
+							var data_rx_avg;
+							var data_rx_peak = 0;
+							var data_tx_peak = 0;
+							for (var i = 0; i < dndata[itf].length; i++)
+							{
+								var rx_bot=0;
+								var tx_bot=0;
+								for(var j=0; j < toadditf.length; j++)
+								{
+									rx_bot += dndata[toadditf[j]][i];
+									tx_bot += updata[toadditf[j]][i];
+								}
+								// set upline of the interface
+								uplineDnl[itf][i] = dndata[itf][i] + rx_bot;
+								data_rx_peak = Math.max(data_rx_peak, dndata[itf][i]);
+								data_max_dnl = Math.max(data_max_dnl, uplineDnl[itf][i]);
+								uplineUpl[itf][i] = updata[itf][i] + tx_bot;
+								data_tx_peak = Math.max(data_tx_peak, updata[itf][i]);
+								data_max_upl = Math.max(data_max_upl, uplineUpl[itf][i]);
+
+	                                                        if (i > 0)
+	                                                        {
+	                                                                data_rx_avg = (data_rx_avg + dndata[itf][i]) / 2;
+	                                                                data_tx_avg = (data_tx_avg + updata[itf][i]) / 2;
+	                                                        }
+	                                                        else
+	                                                        {
+	                                                                data_rx_avg = dndata[itf][i];
+	                                                                data_tx_avg = updata[itf][i];
+	                                                        }
+
+								if(toadditf.length)
+								{
+									downlineDnl[itf][i] = uplineDnl[toadditf[toadditf.length-1]][i];
+									downlineUpl[itf][i] = uplineUpl[toadditf[toadditf.length-1]][i];
+								}
+							}
+							toadditf.push(itf);
+							// Update stats labels
+							if(document.getElementById(itf + '_download_cur'))
+							{
+								var label = document.getElementById(itf + '_download_cur');
+								label.innerHTML = bandwidth_label(dndata[itf][dndata[itf].length-1], true);
+							}
+                                                        if(document.getElementById(itf + '_upload_cur'))
+                                                        {
+								var label = document.getElementById(itf + '_upload_cur');
+								label.innerHTML = bandwidth_label(updata[itf][updata[itf].length-1], true);
+							}
+							if(label = document.getElementById(itf + '_download_avg'))
+                                                        {
+								label.innerHTML = bandwidth_label(data_rx_avg, true);
+                                                        }
+                                                        if(label = document.getElementById(itf + '_upload_avg'))
+                                                        {
+								label.innerHTML = bandwidth_label(data_tx_avg, true);
+							}
+							if(document.getElementById(itf + '_download_peak'))
+                                                        {
+								var label = document.getElementById(itf + '_download_peak');
+								label.innerHTML = bandwidth_label(data_rx_peak, true);
+                                                        }
+							if(document.getElementById(itf + '_upload_peak'))
+                                                        {
+								var label = document.getElementById(itf + '_upload_peak');
+								label.innerHTML = bandwidth_label(data_tx_peak, true);
+							}
+						}
+						data_scale_upl = height / (data_max_upl * 1.1);
+						data_scale_dnl = height / (data_max_dnl * 1.1);
+
+						for (var itf in uplineDnl)
+						{
+							var y_rx = 0;
+							var y_tx = 0;
+
+							/* plot data */
+							var pt_rx = '0,' + height;
+							var pt_tx = '0,' + height;
+
+							// draw polygon	
+							for (var i = 0; i < uplineDnl[itf].length; i++)
+							{
+								var x = i * step;
+
+								y_rx = height - Math.floor((uplineDnl[itf][i]) * data_scale_dnl);
+								y_tx = height - Math.floor((uplineUpl[itf][i]) * data_scale_upl);
+
+								pt_rx += ' ' + x + ',' + y_rx;
+								pt_tx += ' ' + x + ',' + y_tx;
+							}
+                                                        // draw last tangant point in upline graph
+                                                        pt_rx += ' ' + width + ',' + y_rx;
+                                                        pt_rx += ' ' + width + ',' + height;
+
+                                                        pt_tx += ' ' + width + ',' + y_tx;
+                                                        pt_tx += ' ' + width + ',' + height;
+
+                                                        for (var i = downlineDnl[itf].length - 1; i >= 0; i--)
+                                                        {
+                                                                var x = i * step;
+
+                                                                y_rx = height - Math.floor((downlineDnl[itf][i] - 10) * data_scale_dnl);
+                                                                y_tx = height - Math.floor((downlineUpl[itf][i] - 10) * data_scale_upl);
+                                                                // recreate tangant point in bottom line graph
+                                                                if(i == downlineDnl[itf].length - 1)
+                                                                {
+                                                                        pt_rx += ' ' + width + ',' + height;
+                                                                        pt_rx += ' ' + width + ',' + y_rx;
+
+                                                                        pt_tx += ' ' + width + ',' + height;
+                                                                        pt_tx += ' ' + width + ',' + y_tx;
+                                                                }
+
+                                                                pt_rx += ' ' + x + ',' + y_rx;
+                                                                pt_tx += ' ' + x + ',' + y_tx;
+                                                        }
+                                                        // go back to right bottom corner to correctly fill polyline
+                                                        pt_tx += ' ' + 0 + ',' + height;
+                                                        pt_tx += ' ' + width + ',' + height;
+                                                        pt_rx += ' ' + 0 + ',' + height;
+                                                        pt_rx += ' ' + width + ',' + height;
+
+							// Draw polygon
+							dnPolygons[itf].setAttribute('points', pt_rx);
+							upPolygons[itf].setAttribute('points', pt_tx);
+
+							labeldn_25.firstChild.data = bandwidth_label(1.1 * 0.25 * data_max_dnl);
+							labeldn_50.firstChild.data = bandwidth_label(1.1 * 0.50 * data_max_dnl);
+							labeldn_75.firstChild.data = bandwidth_label(1.1 * 0.75 * data_max_dnl);
+
+                                                        labelup_25.firstChild.data = bandwidth_label(1.1 * 0.25 * data_max_upl);
+                                                        labelup_50.firstChild.data = bandwidth_label(1.1 * 0.50 * data_max_upl);
+                                                        labelup_75.firstChild.data = bandwidth_label(1.1 * 0.75 * data_max_upl);
+						}
+					}
+				);
+		            }
+	                }, 1000
+<% else %>
+	var bwxhr = new XHR();
+
+	var G;
+	var TIME = 0;
+	var RXB  = 1;
+	var RXP  = 2;
+	var TXB  = 3;
+	var TXP  = 4;
+
+	var width  = 760;
+	var height = 300;
+	var step   = 5;
+
+	var data_wanted = Math.floor(width / step);
+	var data_fill   = 0;
+	var data_stamp  = 0;
+
+	var data_rx = [ ];
+	var data_tx = [ ];
+
+	var line_rx;
+	var line_tx;
+
+	var label_25;
+	var label_50;
+	var label_75;
+
+	var label_rx_cur;
+	var label_rx_avg;
+	var label_rx_peak;
+
+	var label_tx_cur;
+	var label_tx_avg;
+	var label_tx_peak;
+
+	var label_scale;
+
+
+	function bandwidth_label(bytes, br)
+	{
+		var uby = '<%:kB/s%>';
+		var kby = (bytes / 1024);
+
+		if (kby >= 1024)
+		{
+			uby = '<%:MB/s%>';
+			kby = kby / 1024;
+		}
+
+		var ubi = '<%:kbit/s%>';
+		var kbi = (bytes * 8 / 1024);
+
+		if (kbi >= 1024)
+		{
+			ubi = '<%:Mbit/s%>';
+			kbi = kbi / 1024;
+		}
+
+		return String.format("%f %s%s(%f %s)",
+			kbi.toFixed(2), ubi,
+			br ? '<br />' : ' ',
+			kby.toFixed(2), uby
+		);
+	}
+
+	/* wait for SVG */
+	window.setTimeout(
+		function() {
+			var svg = document.getElementById('bwsvg');
+
+			try {
+				G = svg.getSVGDocument
+					? svg.getSVGDocument() : svg.contentDocument;
+			}
+			catch(e) {
+				G = document.embeds['bwsvg'].getSVGDocument();
+			}
+
+			if (!G)
+			{
+				window.setTimeout(arguments.callee, 1000);
+			}
+			else
+			{
+				/* find sizes */
+				width       = svg.offsetWidth  - 2;
+				height      = svg.offsetHeight - 2;
+				data_wanted = Math.ceil(width / step);
+
+				/* prefill datasets */
+				for (var i = 0; i < data_wanted; i++)
+				{
+					data_rx[i] = 0;
+					data_tx[i] = 0;
+				}
+
+				/* find svg elements */
+				line_rx = G.getElementById('rx');
+				line_tx = G.getElementById('tx');
+
+				label_25 = G.getElementById('label_25');
+				label_50 = G.getElementById('label_50');
+				label_75 = G.getElementById('label_75');
+
+				label_rx_cur  = document.getElementById('rx_bw_cur');
+				label_rx_avg  = document.getElementById('rx_bw_avg');
+				label_rx_peak = document.getElementById('rx_bw_peak');
+
+				label_tx_cur  = document.getElementById('tx_bw_cur');
+				label_tx_avg  = document.getElementById('tx_bw_avg');
+				label_tx_peak = document.getElementById('tx_bw_peak');
+
+				label_scale   = document.getElementById('scale');
+
+				/* plot horizontal time interval lines */
+				for (var i = width % (step * 60); i < width; i += step * 60)
+				{
+					var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
+						line.setAttribute('x1', i);
+						line.setAttribute('y1', 0);
+						line.setAttribute('x2', i);
+						line.setAttribute('y2', '100%');
+						line.setAttribute('style', 'stroke:black;stroke-width:0.1');
+
+					var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
+						text.setAttribute('x', i + 5);
+						text.setAttribute('y', 15);
+						text.setAttribute('style', 'fill:#999999; font-size:9pt');
+						text.appendChild(G.createTextNode(Math.round((width - i) / step / 60) + 'm'));
+
+					label_25.parentNode.appendChild(line);
+					label_25.parentNode.appendChild(text);
+				}
+
+				label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 3);
+
+				/* render datasets, start update interval */
+				XHR.poll(3, '<%=build_url("admin/network/mptcp/interface_bandwidth", curdev)%>', null,
+					function(x, data)
+					{
+						var data_max   = 0;
+						var data_scale = 0;
+
+						var data_rx_avg = 0;
+						var data_tx_avg = 0;
+
+						var data_rx_peak = 0;
+						var data_tx_peak = 0;
+
+						for (var i = data_stamp ? 0 : 1; i < data.length; i++)
+						{
+							/* skip overlapping entries */
+							if (data[i][TIME] <= data_stamp)
+								continue;
+
+							/* normalize difference against time interval */
+							if (i > 0)
+							{
+								var time_delta = data[i][TIME] - data[i-1][TIME];
+								if (time_delta)
+								{
+									data_rx.push((data[i][RXB] - data[i-1][RXB]) / time_delta);
+									data_tx.push((data[i][TXB] - data[i-1][TXB]) / time_delta);
+								}
+							}
+						}
+
+						/* cut off outdated entries */
+						data_rx = data_rx.slice(data_rx.length - data_wanted, data_rx.length);
+						data_tx = data_tx.slice(data_tx.length - data_wanted, data_tx.length);
+
+						/* find peak */
+						for (var i = 0; i < data_rx.length; i++)
+						{
+							data_max = Math.max(data_max, data_rx[i]);
+							data_max = Math.max(data_max, data_tx[i]);
+
+							data_rx_peak = Math.max(data_rx_peak, data_rx[i]);
+							data_tx_peak = Math.max(data_tx_peak, data_tx[i]);
+
+							if (i > 0)
+							{
+								data_rx_avg = (data_rx_avg + data_rx[i]) / 2;
+								data_tx_avg = (data_tx_avg + data_tx[i]) / 2;
+							}
+							else
+							{
+								data_rx_avg = data_rx[i];
+								data_tx_avg = data_tx[i];
+							}
+						}
+
+						/* remember current timestamp, calculate horizontal scale */
+						data_stamp = data[data.length-1][TIME];
+						data_scale = height / (data_max * 1.1);
+
+
+						/* plot data */
+						var pt_rx = '0,' + height;
+						var pt_tx = '0,' + height;
+
+						var y_rx = 0;
+						var y_tx = 0;
+
+						for (var i = 0; i < data_rx.length; i++)
+						{
+							var x = i * step;
+
+							y_rx = height - Math.floor(data_rx[i] * data_scale);
+							y_tx = height - Math.floor(data_tx[i] * data_scale);
+
+							pt_rx += ' ' + x + ',' + y_rx;
+							pt_tx += ' ' + x + ',' + y_tx;
+						}
+
+						pt_rx += ' ' + width + ',' + y_rx + ' ' + width + ',' + height;
+						pt_tx += ' ' + width + ',' + y_tx + ' ' + width + ',' + height;
+
+
+						line_rx.setAttribute('points', pt_rx);
+						line_tx.setAttribute('points', pt_tx);
+
+						label_25.firstChild.data = bandwidth_label(1.1 * 0.25 * data_max);
+						label_50.firstChild.data = bandwidth_label(1.1 * 0.50 * data_max);
+						label_75.firstChild.data = bandwidth_label(1.1 * 0.75 * data_max);
+
+						label_rx_cur.innerHTML = bandwidth_label(data_rx[data_rx.length-1], true);
+						label_tx_cur.innerHTML = bandwidth_label(data_tx[data_tx.length-1], true);
+
+						label_rx_avg.innerHTML = bandwidth_label(data_rx_avg, true);
+						label_tx_avg.innerHTML = bandwidth_label(data_tx_avg, true);
+
+						label_rx_peak.innerHTML = bandwidth_label(data_rx_peak, true);
+						label_tx_peak.innerHTML = bandwidth_label(data_tx_peak, true);
+					}
+				);
+			}
+		}, 1000
+<% end %>
+	);
+//]]></script>
+
+<h2><a id="content" name="content"><%:Realtime Traffic%></a></h2>
+
+<ul class="cbi-tabmenu">
+	<% for _, dev in ipairs(devices) do %>
+		<li class="cbi-tab<%= dev == curdev and "" or "-disabled" %>"><a href="<%=pcdata(dev)%>"><%=pcdata(dev)%></a></li>
+	<% end %>
+</ul>
+
+<% if curdev == "all" then %>
+
+<strong><%:Download:%></strong>
+<embed id="dnsvg" style="width:100%; height:300px; border:1px solid #000000; background-color:#FFFFFF" src="<%=resource%>/bandwidth.svg" />
+<div style="text-align:right"><small id="dnscale">-</small></div>
+<table style="width:100%; table-layout:fixed" cellspacing="5" id="download_stats">
+</table>
+
+<strong><%:Upload:%></strong>
+<embed id="upsvg" style="width:100%; height:300px; border:1px solid #000000; background-color:#FFFFFF" src="<%=resource%>/bandwidth.svg" />
+<div style="text-align:right"><small id="upscale">-</small></div>
+<table style="width:100%; table-layout:fixed" cellspacing="5" id="upload_stats">
+</table>
+<br />
+
+<% else %>
+
+<embed id="bwsvg" style="width:100%; height:300px; border:1px solid #000000; background-color:#FFFFFF" src="<%=resource%>/bandwidth.svg" />
+<div style="text-align:right"><small id="scale">-</small></div>
+<br />
+
+<table style="width:100%; table-layout:fixed" cellspacing="5">
+	<tr>
+		<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Inbound:%></strong></td>
+		<td id="rx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
+
+		<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
+		<td id="rx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
+
+		<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
+		<td id="rx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
+	</tr>
+	<tr>
+		<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Outbound:%></strong></td>
+		<td id="tx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
+
+		<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
+		<td id="tx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
+
+		<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
+		<td id="tx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
+	</tr>
+</table>
+
+<% end %>
+
+
+<%+footer%>