mptcp/openmptcprouter-feeds
1
0
Fork 0
mirror of https://github.com/Ysurac/openmptcprouter-feeds.git synced 2025-02-12 18:41:51 +00:00
Code Issues Releases Wiki Activity

Add MPTCP bandwidth graph

Browse source
This commit is contained in:
Ycarus 2018-03-27 16:22:25 +02:00
parent f358d8f929
commit 8b4c845a9e
3 changed files with 1264 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

402
luci-app-mptcp/htdocs/luci-static/resources/seedrandom.js Normal file
View file

@ -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
);

45
luci-app-mptcp/luasrc/controller/mptcp.lua
View file

@ -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) module("luci.controller.mptcp", package.seeall)
function index() function index()
entry( entry({"admin", "network", "mptcp"}, alias("admin", "network", "mptcp", "settings"), _("MPTCP"))
{"admin", "network", "mptcp"}, entry({"admin", "network", "mptcp", "settings"}, cbi("mptcp"), _("Settings"),2)
cbi("mptcp"), _("MPTCP"), 55) 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 end

820
luci-app-mptcp/luasrc/view/multipath.htm Normal file
View file

@ -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%>