luci-base, luci-mod-status: convert realtime stats to client side views

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

4 files changed, 1363 insertions, 0 deletions

diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/bandwidth.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/bandwidth.js
new file mode 100644
index 0000000000..0565490b9d
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/bandwidth.js
@@ -0,0 +1,311 @@
+'use strict';
+'require rpc';
+'require network';
+
+var callLuciRealtimeStats = rpc.declare({
+	object: 'luci',
+	method: 'getRealtimeStats',
+	params: [ 'mode', 'device' ],
+	expect: { result: [] }
+});
+
+var graphPolls = [],
+    pollInterval = 3;
+
+Math.log2 = Math.log2 || function(x) { return Math.log(x) * Math.LOG2E; };
+
+function rate(n, br) {
+	n = (n || 0).toFixed(2);
+	return [ '%1024.2mbit/s'.format(n * 8), br ? E('br') : ' ', '(%1024.2mB/s)'.format(n) ]
+}
+
+return L.view.extend({
+	load: function() {
+		return Promise.all([
+			this.loadSVG(L.resource('bandwidth.svg')),
+			network.getDevices()
+		]);
+	},
+
+	updateGraph: function(ifname, svg, lines, cb) {
+		var G = svg.firstElementChild;
+
+		var view = document.querySelector('#view');
+
+		var width  = view.offsetWidth - 2;
+		var height = 300 - 2;
+		var step   = 5;
+
+		var data_wanted = Math.floor(width / step);
+
+		var data_values = [],
+		    line_elements = [];
+
+		for (var i = 0; i < lines.length; i++)
+			if (lines[i] != null)
+				data_values.push([]);
+
+		var info = {
+			line_current: [],
+			line_average: [],
+			line_peak:    []
+		};
+
+		/* prefill datasets */
+		for (var i = 0; i < data_values.length; i++)
+			for (var j = 0; j < data_wanted; j++)
+					data_values[i][j] = 0;
+
+		/* plot horizontal time interval lines */
+		for (var i = width % (step * 60); i < width; i += step * 60) {
+			var line = document.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 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+				text.setAttribute('x', i + 5);
+				text.setAttribute('y', 15);
+				text.setAttribute('style', 'fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
+				text.appendChild(document.createTextNode(Math.round((width - i) / step / 60) + 'm'));
+
+			G.appendChild(line);
+			G.appendChild(text);
+		}
+
+		info.interval = pollInterval;
+		info.timeframe = data_wanted / 60;
+
+		graphPolls.push({
+			ifname: ifname,
+			svg:    svg,
+			lines:  lines,
+			cb:     cb,
+			info:   info,
+			width:  width,
+			height: height,
+			step:   step,
+			values: data_values,
+			timestamp: 0,
+			fill: 1
+		});
+	},
+
+	pollData: function() {
+		L.Poll.add(L.bind(function() {
+			var tasks = [];
+
+			for (var i = 0; i < graphPolls.length; i++) {
+				var ctx = graphPolls[i];
+				tasks.push(L.resolveDefault(callLuciRealtimeStats('interface', ctx.ifname), []));
+			}
+
+			return Promise.all(tasks).then(L.bind(function(datasets) {
+				for (var gi = 0; gi < graphPolls.length; gi++) {
+					var ctx = graphPolls[gi],
+					    data = datasets[gi],
+					    values = ctx.values,
+					    lines = ctx.lines,
+					    info = ctx.info;
+
+					var data_scale = 0;
+					var data_wanted = Math.floor(ctx.width / ctx.step);
+					var last_timestamp = NaN;
+
+					for (var i = 0, di = 0; di < lines.length; di++) {
+						if (lines[di] == null)
+							continue;
+
+						var multiply = (lines[di].multiply != null) ? lines[di].multiply : 1,
+						    offset = (lines[di].offset != null) ? lines[di].offset : 0;
+
+						for (var j = ctx.timestamp ? 0 : 1; j < data.length; j++) {
+							/* skip overlapping entries */
+							if (data[j][0] <= ctx.timestamp)
+								continue;
+
+							if (i == 0) {
+								ctx.fill++;
+								last_timestamp = data[j][0];
+							}
+
+							if (lines[di].counter) {
+								/* normalize difference against time interval */
+								if (j > 0) {
+									var time_delta = data[j][0] - data[j - 1][0];
+									if (time_delta) {
+										info.line_current[i] = (data[j][di + 1] * multiply - data[j - 1][di + 1] * multiply) / time_delta;
+										info.line_current[i] -= Math.min(info.line_current[i], offset);
+										values[i].push(info.line_current[i]);
+									}
+								}
+							}
+							else {
+								info.line_current[i] = data[j][di + 1] * multiply;
+								info.line_current[i] -= Math.min(info.line_current[i], offset);
+								values[i].push(info.line_current[i]);
+							}
+						}
+
+						i++;
+					}
+
+					/* cut off outdated entries */
+					ctx.fill = Math.min(ctx.fill, data_wanted);
+
+					for (var i = 0; i < values.length; i++) {
+						var len = values[i].length;
+						values[i] = values[i].slice(len - data_wanted, len);
+
+						/* find peaks, averages */
+						info.line_peak[i] = NaN;
+						info.line_average[i] = 0;
+
+						for (var j = 0; j < values[i].length; j++) {
+							info.line_peak[i] = isNaN(info.line_peak[i]) ? values[i][j] : Math.max(info.line_peak[i], values[i][j]);
+							info.line_average[i] += values[i][j];
+						}
+
+						info.line_average[i] = info.line_average[i] / ctx.fill;
+					}
+
+					info.peak = Math.max.apply(Math, info.line_peak);
+
+					/* remember current timestamp, calculate horizontal scale */
+					if (!isNaN(last_timestamp))
+						ctx.timestamp = last_timestamp;
+
+					var size = Math.floor(Math.log2(info.peak)),
+					    div = Math.pow(2, size - (size % 10)),
+					    mult = info.peak / div,
+					    mult = (mult < 5) ? 2 : ((mult < 50) ? 10 : ((mult < 500) ? 100 : 1000));
+
+					info.peak = info.peak + (mult * div) - (info.peak % (mult * div));
+
+					data_scale = ctx.height / info.peak;
+
+					/* plot data */
+					for (var i = 0, di = 0; di < lines.length; di++) {
+						if (lines[di] == null)
+							continue;
+
+						var el = ctx.svg.firstElementChild.getElementById(lines[di].line),
+						    pt = '0,' + ctx.height,
+						    y = 0;
+
+						if (!el)
+							continue;
+
+						for (var j = 0; j < values[i].length; j++) {
+							var x = j * ctx.step;
+
+							y = ctx.height - Math.floor(values[i][j] * data_scale);
+							//y -= Math.floor(y % (1 / data_scale));
+
+							pt += ' ' + x + ',' + y;
+						}
+
+						pt += ' ' + ctx.width + ',' + y + ' ' + ctx.width + ',' + ctx.height;
+
+						el.setAttribute('points', pt);
+
+						i++;
+					}
+
+					info.label_25 = 0.25 * info.peak;
+					info.label_50 = 0.50 * info.peak;
+					info.label_75 = 0.75 * info.peak;
+
+					if (typeof(ctx.cb) == 'function')
+						ctx.cb(ctx.svg, info);
+				}
+			}, this));
+		}, this), pollInterval);
+	},
+
+	loadSVG: function(src) {
+		return L.Request.get(src).then(function(response) {
+			if (!response.ok)
+				throw new Error(response.statusText);
+
+			return E('div', {
+				'style': 'width:100%;height:300px;border:1px solid #000;background:#fff'
+			}, response.text());
+		});
+	},
+
+	render: function(data) {
+		var svg = data[0],
+		    devs = data[1];
+
+		var v = E('div', {}, E('div'));
+
+		for (var i = 0; i < devs.length; i++) {
+			var ifname = devs[i].getName();
+
+			if (!ifname)
+				continue;
+
+			var csvg = svg.cloneNode(true);
+
+			v.firstElementChild.appendChild(E('div', { 'data-tab': ifname, 'data-tab-title': ifname }, [
+				csvg,
+				E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
+				E('br'),
+
+				E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
+					E('div', { 'class': 'tr' }, [
+						E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('Inbound:') ])),
+						E('div', { 'class': 'td', 'id': 'rx_bw_cur' }, rate(0, true)),
+
+						E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+						E('div', { 'class': 'td', 'id': 'rx_bw_avg' }, rate(0, true)),
+
+						E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+						E('div', { 'class': 'td', 'id': 'rx_bw_peak' }, rate(0, true))
+					]),
+					E('div', { 'class': 'tr' }, [
+						E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('Outbound:') ])),
+						E('div', { 'class': 'td', 'id': 'tx_bw_cur' }, rate(0, true)),
+
+						E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+						E('div', { 'class': 'td', 'id': 'tx_bw_avg' }, rate(0, true)),
+
+						E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+						E('div', { 'class': 'td', 'id': 'tx_bw_peak' }, rate(0, true))
+					])
+				])
+			]));
+
+			this.updateGraph(ifname, csvg, [ { line: 'rx', counter: true }, null, { line: 'tx', counter: true } ], function(svg, info) {
+				var G = svg.firstElementChild, tab = svg.parentNode;
+
+				G.getElementById('label_25').firstChild.data = rate(info.label_25).join('');
+				G.getElementById('label_50').firstChild.data = rate(info.label_50).join('');
+				G.getElementById('label_75').firstChild.data = rate(info.label_75).join('');
+
+				tab.querySelector('#scale').firstChild.data = _('(%d minute window, %d second interval)').format(info.timeframe, info.interval);
+
+				L.dom.content(tab.querySelector('#rx_bw_cur'), rate(info.line_current[0], true));
+				L.dom.content(tab.querySelector('#rx_bw_avg'), rate(info.line_average[0], true));
+				L.dom.content(tab.querySelector('#rx_bw_peak'), rate(info.line_peak[0], true));
+
+				L.dom.content(tab.querySelector('#tx_bw_cur'), rate(info.line_current[1], true));
+				L.dom.content(tab.querySelector('#tx_bw_avg'), rate(info.line_average[1], true));
+				L.dom.content(tab.querySelector('#tx_bw_peak'), rate(info.line_peak[1], true));
+			});
+		}
+
+		L.ui.tabs.initTabGroup(v.firstElementChild.childNodes);
+
+		this.pollData();
+
+		return v;
+	},
+
+	handleSaveApply: null,
+	handleSave: null,
+	handleReset: null
+});
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/connections.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/connections.js
new file mode 100644
index 0000000000..96dee1db77
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/connections.js
@@ -0,0 +1,423 @@
+'use strict';
+'require rpc';
+
+var callLuciRealtimeStats = rpc.declare({
+	object: 'luci',
+	method: 'getRealtimeStats',
+	params: [ 'mode', 'device' ],
+	expect: { result: [] }
+});
+
+var callLuciConntrackList = rpc.declare({
+	object: 'luci',
+	method: 'getConntrackList',
+	expect: { result: [] }
+});
+
+var callNetworkRrdnsLookup = rpc.declare({
+	object: 'network.rrdns',
+	method: 'lookup',
+	params: [ 'addrs', 'timeout', 'limit' ],
+	expect: { '': {} }
+});
+
+var graphPolls = [],
+    pollInterval = 3,
+    dns_cache = {},
+    enableLookups = false;
+
+var recheck_lookup_queue = {};
+
+Math.log2 = Math.log2 || function(x) { return Math.log(x) * Math.LOG2E; };
+
+return L.view.extend({
+	load: function() {
+		return Promise.all([
+			this.loadSVG(L.resource('connections.svg'))
+		]);
+	},
+
+	updateGraph: function(svg, lines, cb) {
+		var G = svg.firstElementChild;
+
+		var view = document.querySelector('#view');
+
+		var width  = view.offsetWidth - 2;
+		var height = 300 - 2;
+		var step   = 5;
+
+		var data_wanted = Math.floor(width / step);
+
+		var data_values = [],
+		    line_elements = [];
+
+		for (var i = 0; i < lines.length; i++)
+			if (lines[i] != null)
+				data_values.push([]);
+
+		var info = {
+			line_current: [],
+			line_average: [],
+			line_peak:    []
+		};
+
+		/* prefill datasets */
+		for (var i = 0; i < data_values.length; i++)
+			for (var j = 0; j < data_wanted; j++)
+					data_values[i][j] = 0;
+
+		/* plot horizontal time interval lines */
+		for (var i = width % (step * 60); i < width; i += step * 60) {
+			var line = document.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 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+				text.setAttribute('x', i + 5);
+				text.setAttribute('y', 15);
+				text.setAttribute('style', 'fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
+				text.appendChild(document.createTextNode(Math.round((width - i) / step / 60) + 'm'));
+
+			G.appendChild(line);
+			G.appendChild(text);
+		}
+
+		info.interval = pollInterval;
+		info.timeframe = data_wanted / 60;
+
+		graphPolls.push({
+			svg:    svg,
+			lines:  lines,
+			cb:     cb,
+			info:   info,
+			width:  width,
+			height: height,
+			step:   step,
+			values: data_values,
+			timestamp: 0,
+			fill: 1
+		});
+	},
+
+	updateConntrack: function(conn) {
+		var lookup_queue = [ ];
+		var rows = [];
+
+		conn.sort(function(a, b) {
+			return b.bytes - a.bytes;
+		});
+
+		for (var i = 0; i < conn.length; i++)
+		{
+			var c  = conn[i];
+
+			if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1') ||
+				(c.src == '::1'       && c.dst == '::1'))
+				continue;
+
+			if (!dns_cache[c.src] && lookup_queue.indexOf(c.src) == -1)
+				lookup_queue.push(c.src);
+
+			if (!dns_cache[c.dst] && lookup_queue.indexOf(c.dst) == -1)
+				lookup_queue.push(c.dst);
+
+			var src = dns_cache[c.src] || (c.layer3 == 'ipv6' ? '[' + c.src + ']' : c.src);
+			var dst = dns_cache[c.dst] || (c.layer3 == 'ipv6' ? '[' + c.dst + ']' : c.dst);
+
+			rows.push([
+				c.layer3.toUpperCase(),
+				c.layer4.toUpperCase(),
+				c.hasOwnProperty('sport') ? (src + ':' + c.sport) : src,
+				c.hasOwnProperty('dport') ? (dst + ':' + c.dport) : dst,
+				'%1024.2mB (%d %s)'.format(c.bytes, c.packets, _('Pkts.'))
+			]);
+		}
+
+		cbi_update_table('#connections', rows, E('em', _('No information available')));
+
+		if (enableLookups && lookup_queue.length > 0) {
+			var reduced_lookup_queue = lookup_queue;
+
+			if (lookup_queue.length > 100)
+				reduced_lookup_queue = lookup_queue.slice(0, 100);
+
+			callNetworkRrdnsLookup(reduced_lookup_queue, 5000, 1000).then(function(replies) {
+				for (var index in reduced_lookup_queue) {
+					var address = reduced_lookup_queue[index];
+
+					if (!address)
+						continue;
+
+					if (replies[address]) {
+						dns_cache[address] = replies[address];
+						lookup_queue.splice(reduced_lookup_queue.indexOf(address), 1);
+						continue;
+					}
+
+					if (recheck_lookup_queue[address] > 2) {
+						dns_cache[address] = (address.match(/:/)) ? '[' + address + ']' : address;
+						lookup_queue.splice(index, 1);
+					}
+					else {
+						recheck_lookup_queue[address] = (recheck_lookup_queue[address] || 0) + 1;
+					}
+				}
+
+				var btn = document.querySelector('.btn.toggle-lookups');
+				if (btn) {
+					btn.firstChild.data = enableLookups ? _('Disable DNS lookups') : _('Enable DNS lookups');
+					btn.classList.remove('spinning');
+					btn.disabled = false;
+				}
+			});
+		}
+	},
+
+	pollData: function() {
+		L.Poll.add(L.bind(function() {
+			var tasks = [
+				L.resolveDefault(callLuciConntrackList(), [])
+			];
+
+			for (var i = 0; i < graphPolls.length; i++) {
+				var ctx = graphPolls[i];
+				tasks.push(L.resolveDefault(callLuciRealtimeStats('conntrack'), []));
+			}
+
+			return Promise.all(tasks).then(L.bind(function(datasets) {
+				this.updateConntrack(datasets[0]);
+
+				for (var gi = 0; gi < graphPolls.length; gi++) {
+					var ctx = graphPolls[gi],
+					    data = datasets[gi + 1],
+					    values = ctx.values,
+					    lines = ctx.lines,
+					    info = ctx.info;
+
+					var data_scale = 0;
+					var data_wanted = Math.floor(ctx.width / ctx.step);
+					var last_timestamp = NaN;
+
+					for (var i = 0, di = 0; di < lines.length; di++) {
+						if (lines[di] == null)
+							continue;
+
+						var multiply = (lines[di].multiply != null) ? lines[di].multiply : 1,
+						    offset = (lines[di].offset != null) ? lines[di].offset : 0;
+
+						for (var j = ctx.timestamp ? 0 : 1; j < data.length; j++) {
+							/* skip overlapping entries */
+							if (data[j][0] <= ctx.timestamp)
+								continue;
+
+							if (i == 0) {
+								ctx.fill++;
+								last_timestamp = data[j][0];
+							}
+
+							info.line_current[i] = data[j][di + 1] * multiply;
+							info.line_current[i] -= Math.min(info.line_current[i], offset);
+							values[i].push(info.line_current[i]);
+						}
+
+						i++;
+					}
+
+					/* cut off outdated entries */
+					ctx.fill = Math.min(ctx.fill, data_wanted);
+
+					for (var i = 0; i < values.length; i++) {
+						var len = values[i].length;
+						values[i] = values[i].slice(len - data_wanted, len);
+
+						/* find peaks, averages */
+						info.line_peak[i] = NaN;
+						info.line_average[i] = 0;
+
+						for (var j = 0; j < values[i].length; j++) {
+							info.line_peak[i] = isNaN(info.line_peak[i]) ? values[i][j] : Math.max(info.line_peak[i], values[i][j]);
+							info.line_average[i] += values[i][j];
+						}
+
+						info.line_average[i] = info.line_average[i] / ctx.fill;
+					}
+
+					info.peak = Math.max.apply(Math, info.line_peak);
+
+					/* remember current timestamp, calculate horizontal scale */
+					if (!isNaN(last_timestamp))
+						ctx.timestamp = last_timestamp;
+
+					var size = Math.floor(Math.log2(info.peak)),
+					    div = Math.pow(2, size - (size % 10)),
+					    mult = info.peak / div,
+					    mult = (mult < 5) ? 2 : ((mult < 50) ? 10 : ((mult < 500) ? 100 : 1000));
+
+					info.peak = info.peak + (mult * div) - (info.peak % (mult * div));
+
+					data_scale = ctx.height / info.peak;
+
+					/* plot data */
+					for (var i = 0, di = 0; di < lines.length; di++) {
+						if (lines[di] == null)
+							continue;
+
+						var el = ctx.svg.firstElementChild.getElementById(lines[di].line),
+						    pt = '0,' + ctx.height,
+						    y = 0;
+
+						if (!el)
+							continue;
+
+						for (var j = 0; j < values[i].length; j++) {
+							var x = j * ctx.step;
+
+							y = ctx.height - Math.floor(values[i][j] * data_scale);
+							//y -= Math.floor(y % (1 / data_scale));
+
+							pt += ' ' + x + ',' + y;
+						}
+
+						pt += ' ' + ctx.width + ',' + y + ' ' + ctx.width + ',' + ctx.height;
+
+						el.setAttribute('points', pt);
+
+						i++;
+					}
+
+					info.label_25 = 0.25 * info.peak;
+					info.label_50 = 0.50 * info.peak;
+					info.label_75 = 0.75 * info.peak;
+
+					if (typeof(ctx.cb) == 'function')
+						ctx.cb(ctx.svg, info);
+				}
+			}, this));
+		}, this), pollInterval);
+	},
+
+	loadSVG: function(src) {
+		return L.Request.get(src).then(function(response) {
+			if (!response.ok)
+				throw new Error(response.statusText);
+
+			return E('div', {
+				'style': 'width:100%;height:300px;border:1px solid #000;background:#fff'
+			}, response.text());
+		});
+	},
+
+	render: function(data) {
+		var svg = data[0];
+
+		var v = E([], [
+			svg,
+			E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
+			E('br'),
+
+			E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
+				E('div', { 'class': 'tr' }, [
+					E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('UDP:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_udp_cur' }, [ '0' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_udp_avg' }, [ '0' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_udp_peak' }, [ '0' ])
+				]),
+				E('div', { 'class': 'tr' }, [
+					E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('TCP:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_tcp_cur' }, [ '0' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_tcp_avg' }, [ '0' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_tcp_peak' }, [ '0' ])
+				]),
+				E('div', { 'class': 'tr' }, [
+					E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid red' }, [ _('Other:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_otr_cur' }, [ '0' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_otr_avg' }, [ '0' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_otr_peak' }, [ '0' ])
+				])
+			]),
+
+			E('div', { 'class': 'right' }, [
+				E('button', {
+					'class': 'btn toggle-lookups',
+					'click': function(ev) {
+						if (!enableLookups) {
+							ev.currentTarget.classList.add('spinning');
+							ev.currentTarget.disabled = true;
+							enableLookups = true;
+						}
+						else {
+							ev.currentTarget.firstChild.data = _('Enable DNS lookups');
+							enableLookups = false;
+						}
+
+						this.blur();
+					}
+				}, [ enableLookups ? _('Disable DNS lookups') : _('Enable DNS lookups') ])
+			]),
+
+			E('br'),
+
+			E('div', { 'class': 'cbi-section-node' }, [
+				E('div', { 'class': 'table', 'id': 'connections' }, [
+					E('div', { 'class': 'tr table-titles' }, [
+						E('div', { 'class': 'th col-2 hide-xs' }, [ _('Network') ]),
+						E('div', { 'class': 'th col-2' }, [ _('Protocol') ]),
+						E('div', { 'class': 'th col-7' }, [ _('Source') ]),
+						E('div', { 'class': 'th col-7' }, [ _('Destination') ]),
+						E('div', { 'class': 'th col-4' }, [ _('Transfer') ])
+					]),
+					E('div', { 'class': 'tr placeholder' }, [
+						E('div', { 'class': 'td' }, [
+							E('em', {}, [ _('Collecting data...') ])
+						])
+					])
+				])
+			])
+		]);
+
+		this.updateGraph(svg, [ { line: 'udp' }, { line: 'tcp' }, { line: 'other' } ], function(svg, info) {
+			var G = svg.firstElementChild, tab = svg.parentNode;
+
+			G.getElementById('label_25').firstChild.data = '%d'.format(info.label_25);
+			G.getElementById('label_50').firstChild.data = '%d'.format(info.label_50);
+			G.getElementById('label_75').firstChild.data = '%d'.format(info.label_75);
+
+			tab.querySelector('#scale').firstChild.data = _('(%d minute window, %d second interval)').format(info.timeframe, info.interval);
+
+			tab.querySelector('#lb_udp_cur').firstChild.data = '%d'.format(info.line_current[0]);
+			tab.querySelector('#lb_udp_avg').firstChild.data = '%d'.format(info.line_average[0]);
+			tab.querySelector('#lb_udp_peak').firstChild.data = '%d'.format(info.line_peak[0]);
+
+			tab.querySelector('#lb_tcp_cur').firstChild.data = '%d'.format(info.line_current[1]);
+			tab.querySelector('#lb_tcp_avg').firstChild.data = '%d'.format(info.line_average[1]);
+			tab.querySelector('#lb_tcp_peak').firstChild.data = '%d'.format(info.line_peak[1]);
+
+			tab.querySelector('#lb_otr_cur').firstChild.data = '%d'.format(info.line_current[2]);
+			tab.querySelector('#lb_otr_avg').firstChild.data = '%d'.format(info.line_average[2]);
+			tab.querySelector('#lb_otr_peak').firstChild.data = '%d'.format(info.line_peak[2]);
+		});
+
+		this.pollData();
+
+		return v;
+	},
+
+	handleSaveApply: null,
+	handleSave: null,
+	handleReset: null
+});
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/load.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/load.js
new file mode 100644
index 0000000000..a1ed43478d
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/load.js
@@ -0,0 +1,290 @@
+'use strict';
+'require rpc';
+
+var callLuciRealtimeStats = rpc.declare({
+	object: 'luci',
+	method: 'getRealtimeStats',
+	params: [ 'mode', 'device' ],
+	expect: { result: [] }
+});
+
+var graphPolls = [],
+    pollInterval = 3;
+
+Math.log2 = Math.log2 || function(x) { return Math.log(x) * Math.LOG2E; };
+
+return L.view.extend({
+	load: function() {
+		return Promise.all([
+			this.loadSVG(L.resource('load.svg'))
+		]);
+	},
+
+	updateGraph: function(svg, lines, cb) {
+		var G = svg.firstElementChild;
+
+		var view = document.querySelector('#view');
+
+		var width  = view.offsetWidth - 2;
+		var height = 300 - 2;
+		var step   = 5;
+
+		var data_wanted = Math.floor(width / step);
+
+		var data_values = [],
+		    line_elements = [];
+
+		for (var i = 0; i < lines.length; i++)
+			if (lines[i] != null)
+				data_values.push([]);
+
+		var info = {
+			line_current: [],
+			line_average: [],
+			line_peak:    []
+		};
+
+		/* prefill datasets */
+		for (var i = 0; i < data_values.length; i++)
+			for (var j = 0; j < data_wanted; j++)
+					data_values[i][j] = 0;
+
+		/* plot horizontal time interval lines */
+		for (var i = width % (step * 60); i < width; i += step * 60) {
+			var line = document.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 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+				text.setAttribute('x', i + 5);
+				text.setAttribute('y', 15);
+				text.setAttribute('style', 'fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
+				text.appendChild(document.createTextNode(Math.round((width - i) / step / 60) + 'm'));
+
+			G.appendChild(line);
+			G.appendChild(text);
+		}
+
+		info.interval = pollInterval;
+		info.timeframe = data_wanted / 60;
+
+		graphPolls.push({
+			svg:    svg,
+			lines:  lines,
+			cb:     cb,
+			info:   info,
+			width:  width,
+			height: height,
+			step:   step,
+			values: data_values,
+			timestamp: 0,
+			fill: 1
+		});
+	},
+
+	pollData: function() {
+		L.Poll.add(L.bind(function() {
+			var tasks = [];
+
+			for (var i = 0; i < graphPolls.length; i++) {
+				var ctx = graphPolls[i];
+				tasks.push(L.resolveDefault(callLuciRealtimeStats('load'), []));
+			}
+
+			return Promise.all(tasks).then(L.bind(function(datasets) {
+				for (var gi = 0; gi < graphPolls.length; gi++) {
+					var ctx = graphPolls[gi],
+					    data = datasets[gi],
+					    values = ctx.values,
+					    lines = ctx.lines,
+					    info = ctx.info;
+
+					var data_scale = 0;
+					var data_wanted = Math.floor(ctx.width / ctx.step);
+					var last_timestamp = NaN;
+
+					for (var i = 0, di = 0; di < lines.length; di++) {
+						if (lines[di] == null)
+							continue;
+
+						var multiply = (lines[di].multiply != null) ? lines[di].multiply : 1,
+						    offset = (lines[di].offset != null) ? lines[di].offset : 0;
+
+						for (var j = ctx.timestamp ? 0 : 1; j < data.length; j++) {
+							/* skip overlapping entries */
+							if (data[j][0] <= ctx.timestamp)
+								continue;
+
+							if (i == 0) {
+								ctx.fill++;
+								last_timestamp = data[j][0];
+							}
+
+							info.line_current[i] = data[j][di + 1] * multiply;
+							info.line_current[i] -= Math.min(info.line_current[i], offset);
+							values[i].push(info.line_current[i]);
+						}
+
+						i++;
+					}
+
+					/* cut off outdated entries */
+					ctx.fill = Math.min(ctx.fill, data_wanted);
+
+					for (var i = 0; i < values.length; i++) {
+						var len = values[i].length;
+						values[i] = values[i].slice(len - data_wanted, len);
+
+						/* find peaks, averages */
+						info.line_peak[i] = NaN;
+						info.line_average[i] = 0;
+
+						for (var j = 0; j < values[i].length; j++) {
+							info.line_peak[i] = isNaN(info.line_peak[i]) ? values[i][j] : Math.max(info.line_peak[i], values[i][j]);
+							info.line_average[i] += values[i][j];
+						}
+
+						info.line_average[i] = info.line_average[i] / ctx.fill;
+					}
+
+					info.peak = Math.max.apply(Math, info.line_peak);
+
+					/* remember current timestamp, calculate horizontal scale */
+					if (!isNaN(last_timestamp))
+						ctx.timestamp = last_timestamp;
+
+					var size = Math.floor(Math.log2(info.peak)),
+					    div = Math.pow(2, size - (size % 10)),
+					    mult = info.peak / div,
+					    mult = (mult < 5) ? 2 : ((mult < 50) ? 10 : ((mult < 500) ? 100 : 1000));
+
+					info.peak = info.peak + (mult * div) - (info.peak % (mult * div));
+
+					data_scale = ctx.height / info.peak;
+
+					/* plot data */
+					for (var i = 0, di = 0; di < lines.length; di++) {
+						if (lines[di] == null)
+							continue;
+
+						var el = ctx.svg.firstElementChild.getElementById(lines[di].line),
+						    pt = '0,' + ctx.height,
+						    y = 0;
+
+						if (!el)
+							continue;
+
+						for (var j = 0; j < values[i].length; j++) {
+							var x = j * ctx.step;
+
+							y = ctx.height - Math.floor(values[i][j] * data_scale);
+							//y -= Math.floor(y % (1 / data_scale));
+
+							pt += ' ' + x + ',' + y;
+						}
+
+						pt += ' ' + ctx.width + ',' + y + ' ' + ctx.width + ',' + ctx.height;
+
+						el.setAttribute('points', pt);
+
+						i++;
+					}
+
+					info.label_25 = 0.25 * info.peak;
+					info.label_50 = 0.50 * info.peak;
+					info.label_75 = 0.75 * info.peak;
+
+					if (typeof(ctx.cb) == 'function')
+						ctx.cb(ctx.svg, info);
+				}
+			}, this));
+		}, this), pollInterval);
+	},
+
+	loadSVG: function(src) {
+		return L.Request.get(src).then(function(response) {
+			if (!response.ok)
+				throw new Error(response.statusText);
+
+			return E('div', {
+				'style': 'width:100%;height:300px;border:1px solid #000;background:#fff'
+			}, response.text());
+		});
+	},
+
+	render: function(data) {
+		var svg = data[0];
+
+		var v = E([], [
+			svg,
+			E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
+			E('br'),
+
+			E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
+				E('div', { 'class': 'tr' }, [
+					E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #f00' }, [ _('1 Minute Load:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_load01_cur' }, [ '0.00' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_load01_avg' }, [ '0.00' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_load01_peak' }, [ '0.00' ])
+				]),
+				E('div', { 'class': 'tr' }, [
+					E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #f60' }, [ _('5 Minute Load:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_load05_cur' }, [ '0.00' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_load05_avg' }, [ '0.00' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_load05_peak' }, [ '0.00' ])
+				]),
+				E('div', { 'class': 'tr' }, [
+					E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #fa0' }, [ _('15 Minute Load:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_load15_cur' }, [ '0.00' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_load15_avg' }, [ '0.00' ]),
+
+					E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+					E('div', { 'class': 'td', 'id': 'lb_load15_peak' }, [ '0.00' ])
+				])
+			])
+		]);
+
+		this.updateGraph(svg, [ { line: 'load01' }, { line: 'load05' }, { line: 'load15' } ], function(svg, info) {
+			var G = svg.firstElementChild, tab = svg.parentNode;
+
+			G.getElementById('label_25').firstChild.data = '%.2f'.format(info.label_25 / 100);
+			G.getElementById('label_50').firstChild.data = '%.2f'.format(info.label_50 / 100);
+			G.getElementById('label_75').firstChild.data = '%.2f'.format(info.label_75 / 100);
+
+			tab.querySelector('#scale').firstChild.data = _('(%d minute window, %d second interval)').format(info.timeframe, info.interval);
+
+			tab.querySelector('#lb_load01_cur').firstChild.data = '%.2f'.format(info.line_current[0] / 100);
+			tab.querySelector('#lb_load01_avg').firstChild.data = '%.2f'.format(info.line_average[0] / 100);
+			tab.querySelector('#lb_load01_peak').firstChild.data = '%.2f'.format(info.line_peak[0] / 100);
+
+			tab.querySelector('#lb_load05_cur').firstChild.data = '%.2f'.format(info.line_current[1] / 100);
+			tab.querySelector('#lb_load05_avg').firstChild.data = '%.2f'.format(info.line_average[1] / 100);
+			tab.querySelector('#lb_load05_peak').firstChild.data = '%.2f'.format(info.line_peak[1] / 100);
+
+			tab.querySelector('#lb_load15_cur').firstChild.data = '%.2f'.format(info.line_current[2] / 100);
+			tab.querySelector('#lb_load15_avg').firstChild.data = '%.2f'.format(info.line_average[2] / 100);
+			tab.querySelector('#lb_load15_peak').firstChild.data = '%.2f'.format(info.line_peak[2] / 100);
+		});
+
+		this.pollData();
+
+		return v;
+	},
+
+	handleSaveApply: null,
+	handleSave: null,
+	handleReset: null
+});
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/wireless.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/wireless.js
new file mode 100644
index 0000000000..45dd54a883
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/wireless.js
@@ -0,0 +1,339 @@
+'use strict';
+'require rpc';
+'require network';
+
+var callLuciRealtimeStats = rpc.declare({
+	object: 'luci',
+	method: 'getRealtimeStats',
+	params: [ 'mode', 'device' ],
+	expect: { result: [] }
+});
+
+var graphPolls = [],
+    pollInterval = 3;
+
+Math.log2 = Math.log2 || function(x) { return Math.log(x) * Math.LOG2E; };
+
+return L.view.extend({
+	load: function() {
+		return Promise.all([
+			this.loadSVG(L.resource('wireless.svg')),
+			this.loadSVG(L.resource('wifirate.svg')),
+			network.getWifiDevices().then(function(radios) {
+				var tasks = [], all_networks = [];
+
+				for (var i = 0; i < radios.length; i++)
+					tasks.push(radios[i].getWifiNetworks().then(function(networks) {
+						all_networks.push.apply(all_networks, networks);
+					}));
+
+				return Promise.all(tasks).then(function() {
+					return all_networks;
+				});
+			})
+		]);
+	},
+
+	updateGraph: function(ifname, svg, lines, cb) {
+		var G = svg.firstElementChild;
+
+		var view = document.querySelector('#view');
+
+		var width  = view.offsetWidth - 2;
+		var height = 300 - 2;
+		var step   = 5;
+
+		var data_wanted = Math.floor(width / step);
+
+		var data_values = [],
+		    line_elements = [];
+
+		for (var i = 0; i < lines.length; i++)
+			if (lines[i] != null)
+				data_values.push([]);
+
+		var info = {
+			line_current: [],
+			line_average: [],
+			line_peak:    []
+		};
+
+		/* prefill datasets */
+		for (var i = 0; i < data_values.length; i++)
+			for (var j = 0; j < data_wanted; j++)
+					data_values[i][j] = 0;
+
+		/* plot horizontal time interval lines */
+		for (var i = width % (step * 60); i < width; i += step * 60) {
+			var line = document.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 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+				text.setAttribute('x', i + 5);
+				text.setAttribute('y', 15);
+				text.setAttribute('style', 'fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
+				text.appendChild(document.createTextNode(Math.round((width - i) / step / 60) + 'm'));
+
+			G.appendChild(line);
+			G.appendChild(text);
+		}
+
+		info.interval = pollInterval;
+		info.timeframe = data_wanted / 60;
+
+		graphPolls.push({
+			ifname: ifname,
+			svg:    svg,
+			lines:  lines,
+			cb:     cb,
+			info:   info,
+			width:  width,
+			height: height,
+			step:   step,
+			values: data_values,
+			timestamp: 0,
+			fill: 1
+		});
+	},
+
+	pollData: function() {
+		L.Poll.add(L.bind(function() {
+			var tasks = [];
+
+			for (var i = 0; i < graphPolls.length; i++) {
+				var ctx = graphPolls[i];
+				tasks.push(L.resolveDefault(callLuciRealtimeStats('wireless', ctx.ifname), []));
+			}
+
+			return Promise.all(tasks).then(L.bind(function(datasets) {
+				for (var gi = 0; gi < graphPolls.length; gi++) {
+					var ctx = graphPolls[gi],
+					    data = datasets[gi],
+					    values = ctx.values,
+					    lines = ctx.lines,
+					    info = ctx.info;
+
+					var data_scale = 0;
+					var data_wanted = Math.floor(ctx.width / ctx.step);
+					var last_timestamp = NaN;
+
+					for (var i = 0, di = 0; di < lines.length; di++) {
+						if (lines[di] == null)
+							continue;
+
+						var multiply = (lines[di].multiply != null) ? lines[di].multiply : 1,
+						    offset = (lines[di].offset != null) ? lines[di].offset : 0;
+
+						for (var j = ctx.timestamp ? 0 : 1; j < data.length; j++) {
+							/* skip overlapping entries */
+							if (data[j][0] <= ctx.timestamp)
+								continue;
+
+							if (i == 0) {
+								ctx.fill++;
+								last_timestamp = data[j][0];
+							}
+
+							info.line_current[i] = data[j][di + 1] * multiply;
+							info.line_current[i] -= Math.min(info.line_current[i], offset);
+							values[i].push(info.line_current[i]);
+						}
+
+						i++;
+					}
+
+					/* cut off outdated entries */
+					ctx.fill = Math.min(ctx.fill, data_wanted);
+
+					for (var i = 0; i < values.length; i++) {
+						var len = values[i].length;
+						values[i] = values[i].slice(len - data_wanted, len);
+
+						/* find peaks, averages */
+						info.line_peak[i] = NaN;
+						info.line_average[i] = 0;
+
+						for (var j = 0; j < values[i].length; j++) {
+							info.line_peak[i] = isNaN(info.line_peak[i]) ? values[i][j] : Math.max(info.line_peak[i], values[i][j]);
+							info.line_average[i] += values[i][j];
+						}
+
+						info.line_average[i] = info.line_average[i] / ctx.fill;
+					}
+
+					info.peak = Math.max.apply(Math, info.line_peak);
+
+					/* remember current timestamp, calculate horizontal scale */
+					if (!isNaN(last_timestamp))
+						ctx.timestamp = last_timestamp;
+
+					var size = Math.floor(Math.log2(info.peak)),
+					    div = Math.pow(2, size - (size % 10)),
+					    mult = info.peak / div,
+					    mult = (mult < 5) ? 2 : ((mult < 50) ? 10 : ((mult < 500) ? 100 : 1000));
+
+					info.peak = info.peak + (mult * div) - (info.peak % (mult * div));
+
+					data_scale = ctx.height / info.peak;
+
+					/* plot data */
+					for (var i = 0, di = 0; di < lines.length; di++) {
+						if (lines[di] == null)
+							continue;
+
+						var el = ctx.svg.firstElementChild.getElementById(lines[di].line),
+						    pt = '0,' + ctx.height,
+						    y = 0;
+
+						if (!el)
+							continue;
+
+						for (var j = 0; j < values[i].length; j++) {
+							var x = j * ctx.step;
+
+							y = ctx.height - Math.floor(values[i][j] * data_scale);
+							//y -= Math.floor(y % (1 / data_scale));
+
+							pt += ' ' + x + ',' + y;
+						}
+
+						pt += ' ' + ctx.width + ',' + y + ' ' + ctx.width + ',' + ctx.height;
+
+						el.setAttribute('points', pt);
+
+						i++;
+					}
+
+					info.label_25 = 0.25 * info.peak;
+					info.label_50 = 0.50 * info.peak;
+					info.label_75 = 0.75 * info.peak;
+
+					if (typeof(ctx.cb) == 'function')
+						ctx.cb(ctx.svg, info);
+				}
+			}, this));
+		}, this), pollInterval);
+	},
+
+	loadSVG: function(src) {
+		return L.Request.get(src).then(function(response) {
+			if (!response.ok)
+				throw new Error(response.statusText);
+
+			return E('div', {
+				'style': 'width:100%;height:300px;border:1px solid #000;background:#fff'
+			}, response.text());
+		});
+	},
+
+	render: function(data) {
+		var svg1 = data[0],
+		    svg2 = data[1],
+		    wifidevs = data[2];
+
+		var v = E('div', {}, E('div'));
+
+		for (var i = 0; i < wifidevs.length; i++) {
+			var ifname = wifidevs[i].getIfname();
+
+			if (!ifname)
+				continue;
+
+			var csvg1 = svg1.cloneNode(true),
+			    csvg2 = svg2.cloneNode(true);
+
+			v.firstElementChild.appendChild(E('div', { 'data-tab': ifname, 'data-tab-title': ifname }, [
+				csvg1,
+				E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
+				E('br'),
+
+				E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
+					E('div', { 'class': 'tr' }, [
+						E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('Signal:') ])),
+						E('div', { 'class': 'td', 'id': 'rssi_bw_cur' }, [ '0 ' + _('dBm') ]),
+
+						E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+						E('div', { 'class': 'td', 'id': 'rssi_bw_avg' }, [ '0 ' + _('dBm') ]),
+
+						E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+						E('div', { 'class': 'td', 'id': 'rssi_bw_peak' }, [ '0 ' + _('dBm') ])
+					]),
+					E('div', { 'class': 'tr' }, [
+						E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid red' }, [ _('Noise:') ])),
+						E('div', { 'class': 'td', 'id': 'noise_bw_cur' }, [ '0 ' + _('dBm') ]),
+
+						E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+						E('div', { 'class': 'td', 'id': 'noise_bw_avg' }, [ '0 ' + _('dBm') ]),
+
+						E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+						E('div', { 'class': 'td', 'id': 'noise_bw_peak' }, [ '0 ' + _('dBm') ])
+					])
+				]),
+				E('br'),
+
+				csvg2,
+				E('div', { 'class': 'right' }, E('small', { 'id': 'scale2' }, '-')),
+				E('br'),
+
+				E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
+					E('div', { 'class': 'tr' }, [
+						E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('Phy Rate:') ])),
+						E('div', { 'class': 'td', 'id': 'rate_bw_cur' }, [ '0 MBit/s' ]),
+
+						E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+						E('div', { 'class': 'td', 'id': 'rate_bw_avg' }, [ '0 MBit/s' ]),
+
+						E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+						E('div', { 'class': 'td', 'id': 'rate_bw_peak' }, [ '0 MBit/s' ])
+					])
+				])
+			]));
+
+			this.updateGraph(ifname, csvg1, [ null, { line: 'rssi', offset: 155 }, { line: 'noise', offset: 155 } ], function(svg, info) {
+				var G = svg.firstElementChild, tab = svg.parentNode;
+
+				G.getElementById('label_25').firstChild.data = '%d %s'.format(info.label_25 - 100, _('dBm'));
+				G.getElementById('label_50').firstChild.data = '%d %s'.format(info.label_50 - 100, _('dBm'));
+				G.getElementById('label_75').firstChild.data = '%d %s'.format(info.label_75 - 100, _('dBm'));
+
+				tab.querySelector('#scale').firstChild.data = _('(%d minute window, %d second interval)').format(info.timeframe, info.interval);
+
+				tab.querySelector('#rssi_bw_cur').firstChild.data = '%d %s'.format(info.line_current[0] - 100, _('dBm'));
+				tab.querySelector('#rssi_bw_avg').firstChild.data = '%d %s'.format(info.line_average[0] - 100, _('dBm'));
+				tab.querySelector('#rssi_bw_peak').firstChild.data = '%d %s'.format(info.line_peak[0] - 100, _('dBm'));
+
+				tab.querySelector('#noise_bw_cur').firstChild.data = '%d %s'.format(info.line_current[1] - 100, _('dBm'));
+				tab.querySelector('#noise_bw_avg').firstChild.data = '%d %s'.format(info.line_average[1] - 100, _('dBm'));
+				tab.querySelector('#noise_bw_peak').firstChild.data = '%d %s'.format(info.line_peak[1] - 100, _('dBm'));
+			});
+
+			this.updateGraph(ifname, csvg2, [ { line: 'rate', multiply: 0.001 } ], function(svg, info) {
+				var G = svg.firstElementChild, tab = svg.parentNode;
+
+				G.getElementById('label_25').firstChild.data = '%.2f %s'.format(info.label_25, _('MBit/s'));
+				G.getElementById('label_50').firstChild.data = '%.2f %s'.format(info.label_50, _('MBit/s'));
+				G.getElementById('label_75').firstChild.data = '%.2f %s'.format(info.label_75, _('MBit/s'));
+
+				tab.querySelector('#scale2').firstChild.data = _('(%d minute window, %d second interval)').format(info.timeframe, info.interval);
+
+				tab.querySelector('#rate_bw_cur').firstChild.data = '%d %s'.format(info.line_current[0], _('Mbit/s'));
+				tab.querySelector('#rate_bw_avg').firstChild.data = '%d %s'.format(info.line_average[0], _('Mbit/s'));
+				tab.querySelector('#rate_bw_peak').firstChild.data = '%d %s'.format(info.line_peak[0], _('Mbit/s'));
+			});
+		}
+
+		L.ui.tabs.initTabGroup(v.firstElementChild.childNodes);
+
+		this.pollData();
+
+		return v;
+	},
+
+	handleSaveApply: null,
+	handleSave: null,
+	handleReset: null
+});