luci-mod-status: reimplement index status page as client side view

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

7 files changed, 699 insertions, 224 deletions

diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/10_system.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/10_system.js
new file mode 100644
index 0000000000..8ac7e7cdae
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/10_system.js
@@ -0,0 +1,63 @@
+'use strict';
+'require fs';
+'require rpc';
+
+var callSystemBoard = rpc.declare({
+	object: 'system',
+	method: 'board'
+});
+
+var callSystemInfo = rpc.declare({
+	object: 'system',
+	method: 'info'
+});
+
+return L.Class.extend({
+	title: _('System'),
+
+	load: function() {
+		return Promise.all([
+			L.resolveDefault(callSystemBoard(), {}),
+			L.resolveDefault(callSystemInfo(), {}),
+			fs.lines('/usr/lib/lua/luci/version.lua')
+		]);
+	},
+
+	render: function(data) {
+		var boardinfo   = data[0],
+		    systeminfo  = data[1],
+		    luciversion = data[2];
+
+		luciversion = luciversion.filter(function(l) {
+			return l.match(/^\s*(luciname|luciversion)\s*=/);
+		}).map(function(l) {
+			return l.replace(/^\s*\w+\s*=\s*['"]([^'"]+)['"].*$/, '$1');
+		}).join(' ');
+
+		var fields = [
+			_('Hostname'),         boardinfo.hostname,
+			_('Model'),            boardinfo.model,
+			_('Architecture'),     boardinfo.system,
+			_('Firmware Version'), (L.isObject(boardinfo.release) ? boardinfo.release.description + ' / ' : '') + (luciversion || ''),
+			_('Kernel Version'),   boardinfo.kernel,
+			_('Local Time'),       systeminfo.localtime ? (new Date(systeminfo.localtime * 1000)).toLocaleString() : null,
+			_('Uptime'),           systeminfo.uptime ? '%t'.format(systeminfo.uptime) : null,
+			_('Load Average'),     Array.isArray(systeminfo.load) ? '%.2f, %.2f, %.2f'.format(
+				systeminfo.load[0] / 65535.0,
+				systeminfo.load[1] / 65535.0,
+				systeminfo.load[2] / 65535.0
+			) : null
+		];
+
+		var table = E('div', { 'class': 'table' });
+
+		for (var i = 0; i < fields.length; i += 2) {
+			table.appendChild(E('div', { 'class': 'tr' }, [
+				E('div', { 'class': 'td left', 'width': '33%' }, [ fields[i] ]),
+				E('div', { 'class': 'td left' }, [ (fields[i + 1] != null) ? fields[i + 1] : '?' ])
+			]));
+		}
+
+		return table;
+	}
+});
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/20_memory.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/20_memory.js
new file mode 100644
index 0000000000..9baf0420d7
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/20_memory.js
@@ -0,0 +1,55 @@
+'use strict';
+'require rpc';
+
+var callSystemInfo = rpc.declare({
+	object: 'system',
+	method: 'info'
+});
+
+function progressbar(value, max, byte) {
+	var vn = parseInt(value) || 0,
+	    mn = parseInt(max) || 100,
+	    fv = byte ? String.format('%1024.2mB', value) : value,
+	    fm = byte ? String.format('%1024.2mB', max) : max,
+	    pc = Math.floor((100 / mn) * vn);
+
+	return E('div', {
+		'class': 'cbi-progressbar',
+		'title': '%s / %s (%d%%)'.format(fv, fm, pc)
+	}, E('div', { 'style': 'width:%.2f%%'.format(pc) }));
+}
+
+return L.Class.extend({
+	title: _('Memory'),
+
+	load: function() {
+		return L.resolveDefault(callSystemInfo(), {});
+	},
+
+	render: function(systeminfo) {
+		var mem = L.isObject(systeminfo.memory) ? systeminfo.memory : {},
+		    swap = L.isObject(systeminfo.swap) ? systeminfo.swap : {};
+
+		var fields = [
+			_('Total Available'), (mem.total && mem.free && mem.buffered) ? mem.free + mem.buffered : null,
+			_('Free'),            (mem.total && mem.free) ? mem.free : null,
+			_('Buffered'),        (mem.total && mem.buffered) ? mem.buffered : null
+		];
+
+		if (swap.total > 0)
+			fields.push(_('Swap free'), swap.free);
+
+		var table = E('div', { 'class': 'table' });
+
+		for (var i = 0; i < fields.length; i += 2) {
+			table.appendChild(E('div', { 'class': 'tr' }, [
+				E('div', { 'class': 'td left', 'width': '33%' }, [ fields[i] ]),
+				E('div', { 'class': 'td left' }, [
+					(fields[i + 1] != null) ? progressbar(fields[i + 1], mem.total, true) : '?'
+				])
+			]));
+		}
+
+		return table;
+	}
+});
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/30_network.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/30_network.js
new file mode 100644
index 0000000000..0a7b00e214
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/30_network.js
@@ -0,0 +1,107 @@
+'use strict';
+'require fs';
+'require network';
+
+function progressbar(value, max, byte) {
+	var vn = parseInt(value) || 0,
+	    mn = parseInt(max) || 100,
+	    fv = byte ? String.format('%1024.2mB', value) : value,
+	    fm = byte ? String.format('%1024.2mB', max) : max,
+	    pc = Math.floor((100 / mn) * vn);
+
+	return E('div', {
+		'class': 'cbi-progressbar',
+		'title': '%s / %s (%d%%)'.format(fv, fm, pc)
+	}, E('div', { 'style': 'width:%.2f%%'.format(pc) }));
+}
+
+function renderbox(ifc, ipv6) {
+	var dev = ifc.getL3Device(),
+	    active = (dev && ifc.getProtocol() != 'none'),
+	    addrs = (ipv6 ? ifc.getIP6Addrs() : ifc.getIPAddrs()) || [],
+	    dnssrv = (ipv6 ? ifc.getDNS6Addrs() : ifc.getDNSAddrs()) || [],
+	    expires = (ipv6 ? null : ifc.getExpiry()),
+	    uptime = ifc.getUptime();
+
+	return E('div', { class: 'ifacebox' }, [
+		E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
+			E('strong', ipv6 ? _('IPv6 Upstream') : _('IPv4 Upstream'))),
+		E('div', { class: 'ifacebox-body left' }, [
+			L.itemlist(E('span'), [
+				_('Protocol'), ifc.getI18n() || E('em', _('Not connected')),
+				_('Prefix Delegated'), ipv6 ? ifc.getIP6Prefix() : null,
+				_('Address'), addrs[0],
+				_('Address'), addrs[1],
+				_('Address'), addrs[2],
+				_('Address'), addrs[3],
+				_('Address'), addrs[4],
+				_('Address'), addrs[5],
+				_('Address'), addrs[6],
+				_('Address'), addrs[7],
+				_('Address'), addrs[8],
+				_('Address'), addrs[9],
+				_('Gateway'), ipv6 ? (ifc.getGateway6Addr() || '::') : (ifc.getGatewayAddr() || '0.0.0.0'),
+				_('DNS') + ' 1', dnssrv[0],
+				_('DNS') + ' 2', dnssrv[1],
+				_('DNS') + ' 3', dnssrv[2],
+				_('DNS') + ' 4', dnssrv[3],
+				_('DNS') + ' 5', dnssrv[4],
+				_('Expires'), (expires != null && expires > -1) ? '%t'.format(expires) : null,
+				_('Connected'), (uptime > 0) ? '%t'.format(uptime) : null
+			]),
+			E('div', {}, renderBadge(
+				L.resource('icons/%s.png').format(dev ? dev.getType() : 'ethernet_disabled'), null,
+				_('Device'), dev ? dev.getI18n() : '-',
+				_('MAC-Address'), dev.getMAC())
+			)
+		])
+	]);
+}
+
+return L.Class.extend({
+	title: _('Network'),
+
+	load: function() {
+		return Promise.all([
+			fs.trimmed('/proc/sys/net/netfilter/nf_conntrack_count'),
+			fs.trimmed('/proc/sys/net/netfilter/nf_conntrack_max'),
+			network.getWANNetworks(),
+			network.getWAN6Networks()
+		]);
+	},
+
+	render: function(data) {
+		var ct_count  = +data[0],
+		    ct_max    = +data[1],
+		    wan_nets  = data[2],
+		    wan6_nets = data[3];
+
+		var fields = [
+			_('Active Connections'), ct_max ? ct_count : null
+		];
+
+		var ctstatus = E('div', { 'class': 'table' });
+
+		for (var i = 0; i < fields.length; i += 2) {
+			ctstatus.appendChild(E('div', { 'class': 'tr' }, [
+				E('div', { 'class': 'td left', 'width': '33%' }, [ fields[i] ]),
+				E('div', { 'class': 'td left' }, [
+					(fields[i + 1] != null) ? progressbar(fields[i + 1], ct_max) : '?'
+				])
+			]));
+		}
+
+		var netstatus = E('div', { 'class': 'network-status-table' });
+
+		for (var i = 0; i < wan_nets.length; i++)
+			netstatus.appendChild(renderbox(wan_nets[i], false));
+
+		for (var i = 0; i < wan6_nets.length; i++)
+			netstatus.appendChild(renderbox(wan6_nets[i], true));
+
+		return E([
+			netstatus,
+			ctstatus
+		]);
+	}
+});
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/40_dhcp.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/40_dhcp.js
new file mode 100644
index 0000000000..1a2f70fbfa
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/40_dhcp.js
@@ -0,0 +1,96 @@
+'use strict';
+'require rpc';
+'require network';
+
+var callLuciDHCPLeases = rpc.declare({
+	object: 'luci-rpc',
+	method: 'getDHCPLeases',
+	expect: { '': {} }
+});
+
+return L.Class.extend({
+	title: _('Active DHCP Leases'),
+
+	load: function() {
+		return Promise.all([
+			L.resolveDefault(callLuciDHCPLeases(), {}),
+			network.getHostHints()
+		]);
+	},
+
+	render: function(data) {
+		var leases = Array.isArray(data[0].dhcp_leases) ? data[0].dhcp_leases : [],
+		    leases6 = Array.isArray(data[0].dhcp6_leases) ? data[0].dhcp6_leases : [],
+		    machints = data[1].getMACHints(false);
+
+		var table = E('div', { 'class': 'table' }, [
+			E('div', { 'class': 'tr table-titles' }, [
+				E('div', { 'class': 'th' }, _('Hostname')),
+				E('div', { 'class': 'th' }, _('IPv4-Address')),
+				E('div', { 'class': 'th' }, _('MAC-Address')),
+				E('div', { 'class': 'th' }, _('Leasetime remaining'))
+			])
+		]);
+
+		cbi_update_table(table, leases.map(function(lease) {
+			var exp;
+
+			if (lease.expires === false)
+				exp = E('em', _('unlimited'));
+			else if (lease.expires <= 0)
+				exp = E('em', _('expired'));
+			else
+				exp = '%t'.format(lease.expires);
+
+			return [
+				lease.hostname || '-',
+				lease.ipaddr,
+				lease.macaddr,
+				exp
+			];
+		}), E('em', _('There are no active leases')));
+
+		var table6 = E('div', { 'class': 'table' }, [
+			E('div', { 'class': 'tr table-titles' }, [
+				E('div', { 'class': 'th' }, _('Host')),
+				E('div', { 'class': 'th' }, _('IPv6-Address')),
+				E('div', { 'class': 'th' }, _('DUID')),
+				E('div', { 'class': 'th' }, _('Leasetime remaining'))
+			])
+		]);
+
+		cbi_update_table(table6, leases6.map(function(lease) {
+			var exp;
+
+			if (lease.expires === false)
+				exp = E('em', _('unlimited'));
+			else if (lease.expires <= 0)
+				exp = E('em', _('expired'));
+			else
+				exp = '%t'.format(lease.expires);
+
+			var hint = lease.macaddr ? machints.filter(function(h) { return h[0] == lease.macaddr })[0] : null,
+			    host = null;
+
+			if (hint && lease.hostname && lease.hostname != hint[1] && lease.ip6addr != hint[1])
+				host = '%s (%s)'.format(lease.hostname, hint[1]);
+			else if (lease.hostname)
+				host = lease.hostname;
+			else if (hint)
+				host = hint[1];
+
+			return [
+				host || '-',
+				lease.ip6addr,
+				lease.duid,
+				exp
+			];
+		}), E('em', _('There are no active leases')));
+
+		return E([
+			table,
+			E('h3', _('Active DHCPv6 Leases')),
+			table6
+		]);
+	}
+});
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/50_dsl.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/50_dsl.js
new file mode 100644
index 0000000000..282cafcbaa
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/50_dsl.js
@@ -0,0 +1,56 @@
+'use strict';
+'require rpc';
+
+var callLuciDSLStatus = rpc.declare({
+	object: 'luci-rpc',
+	method: 'getDSLStatus',
+	expect: { '': {} }
+});
+
+function renderbox(dsl) {
+	return E('div', { class: 'ifacebox' }, [
+		E('div', { class: 'ifacebox-head center ' + ((dsl.line_state === 'UP') ? 'active' : '') },
+			E('strong', _('DSL Status'))),
+		E('div', { class: 'ifacebox-body left' }, [
+			L.itemlist(E('span'), [
+				_('Line State'), '%s [0x%x]'.format(dsl.line_state, dsl.line_state_detail),
+				_('Line Mode'), dsl.line_mode_s || '-',
+				_('Line Uptime'), dsl.line_uptime_s || '-',
+				_('Annex'), dsl.annex_s || '-',
+				_('Profile'), dsl.profile_s || '-',
+				_('Data Rate'), '%s/s / %s/s'.format(dsl.data_rate_down_s, dsl.data_rate_up_s),
+				_('Max. Attainable Data Rate (ATTNDR)'), '%s/s / %s/s'.format(dsl.max_data_rate_down_s, dsl.max_data_rate_up_s),
+				_('Latency'), '%s / %s'.format(dsl.latency_num_down, dsl.latency_num_up),
+				_('Line Attenuation (LATN)'), '%.1f dB / %.1f dB'.format(dsl.line_attenuation_down, dsl.line_attenuation_up),
+				_('Signal Attenuation (SATN)'), '%.1f dB / %.1f dB'.format(dsl.signal_attenuation_down, dsl.signal_attenuation_up),
+				_('Noise Margin (SNR)'), '%.1f dB / %.1f dB'.format(dsl.noise_margin_down, dsl.noise_margin_up),
+				_('Aggregate Transmit Power(ACTATP)'), '%.1f dB / %.1f dB'.format(dsl.actatp_down, dsl.actatp_up),
+				_('Forward Error Correction Seconds (FECS)'), '%d / %d'.format(dsl.errors_fecs_near, dsl.errors_fecs_far),
+				_('Errored seconds (ES)'), '%d / %d'.format(dsl.errors_es_near, dsl.errors_es_far),
+				_('Severely Errored Seconds (SES)'), '%d / %d'.format(dsl.errors_ses_near, dsl.errors_ses_far),
+				_('Loss of Signal Seconds (LOSS)'), '%d / %d'.format(dsl.errors_loss_near, dsl.errors_loss_far),
+				_('Unavailable Seconds (UAS)'), '%d / %d'.format(dsl.errors_uas_near, dsl.errors_uas_far),
+				_('Header Error Code Errors (HEC)'), '%d / %d'.format(dsl.errors_hec_near, dsl.errors_hec_far),
+				_('Non Pre-emtive CRC errors (CRC_P)'), '%d / %d'.format(dsl.errors_crc_p_near, dsl.errors_crc_p_far),
+				_('Pre-emtive CRC errors (CRCP_P)'), '%d / %d'.format(dsl.errors_crcp_p_near, dsl.errors_crcp_p_far),
+				_('ATU-C System Vendor ID'), dsl.atuc_vendor_id,
+				_('Power Management Mode'), dsl.power_mode_s
+			])
+		])
+	]);
+}
+
+return L.Class.extend({
+	title: _('DSL'),
+
+	load: function() {
+		return L.resolveDefault(callLuciDSLStatus(), {});
+	},
+
+	render: function(dsl) {
+		if (!dsl.line_state)
+			return null;
+
+		return E('div', { 'id': 'dsl_status_table', 'class': 'network-status-table' }, renderbox(dsl));
+	}
+});
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/60_wifi.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/60_wifi.js
new file mode 100644
index 0000000000..08a2f5de1c
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/60_wifi.js
@@ -0,0 +1,237 @@
+'use strict';
+'require rpc';
+'require network';
+
+function renderbox(radio) {
+	var net0 = radio.networks[0],
+	    chan = net0 ? net0.getChannel() : null,
+	    freq = net0 ? net0.getFrequency() : null,
+	    rate = net0 ? net0.getBitRate() : null,
+	    badges = [];
+
+	for (var i = 0; i < radio.networks.length; i++) {
+		var net = radio.networks[i],
+		    is_assoc = (net.getBSSID() != '00:00:00:00:00:00' && net.getChannel() && !net.isDisabled()),
+		    quality = net.getSignalPercent();
+
+		var icon;
+		if (net.isDisabled())
+			icon = L.resource('icons/signal-none.png');
+		else if (quality <= 0)
+			icon = L.resource('icons/signal-0.png');
+		else if (quality < 25)
+			icon = L.resource('icons/signal-0-25.png');
+		else if (quality < 50)
+			icon = L.resource('icons/signal-25-50.png');
+		else if (quality < 75)
+			icon = L.resource('icons/signal-50-75.png');
+		else
+			icon = L.resource('icons/signal-75-100.png');
+
+		var badge = renderBadge(
+			icon,
+			'%s: %d dBm / %s: %d%%'.format(_('Signal'), net.getSignal(), _('Quality'), quality),
+			_('SSID'), net.getActiveSSID() || '?',
+			_('Mode'), net.getActiveMode(),
+			_('BSSID'), is_assoc ? (net.getActiveBSSID() || '-') : null,
+			_('Encryption'), is_assoc ? net.getActiveEncryption() : null,
+			_('Associations'), is_assoc ? (net.assoclist.length || '-') : null,
+			null, is_assoc ? null : E('em', net.isDisabled() ? _('Wireless is disabled') : _('Wireless is not associated')));
+
+		badge.lastElementChild.style.overflow = 'hidden';
+		badge.lastElementChild.style.textOverflow = 'ellipsis';
+
+		badges.push(badge);
+	}
+
+	return E('div', { class: 'ifacebox' }, [
+		E('div', { class: 'ifacebox-head center ' + (radio.isUp() ? 'active' : '') },
+			E('strong', radio.getName())),
+		E('div', { class: 'ifacebox-body left' }, [
+			L.itemlist(E('span'), [
+				_('Type'), radio.getI18n().replace(/^Generic | Wireless Controller .+$/g, ''),
+				_('Channel'), chan ? '%d (%.3f %s)'.format(chan, freq, _('GHz')) : '-',
+				_('Bitrate'), rate ? '%d %s'.format(rate, _('Mbit/s')) : '-'
+			]),
+			E('div', {}, badges)
+		])
+	]);
+}
+
+function wifirate(rt) {
+	var s = '%.1f %s, %d%s'.format(rt.rate / 1000, _('Mbit/s'), rt.mhz, _('MHz')),
+	    ht = rt.ht, vht = rt.vht,
+		mhz = rt.mhz, nss = rt.nss,
+		mcs = rt.mcs, sgi = rt.short_gi;
+
+	if (ht || vht) {
+		if (vht) s += ', VHT-MCS %d'.format(mcs);
+		if (nss) s += ', VHT-NSS %d'.format(nss);
+		if (ht)  s += ', MCS %s'.format(mcs);
+		if (sgi) s += ', ' + _('Short GI');
+	}
+
+	return s;
+}
+
+return L.Class.extend({
+	title: _('Wireless'),
+
+	handleDelClient: function(ifname, mac, ev) {
+		ev.currentTarget.classList.add('spinning');
+		ev.currentTarget.disabled = true;
+		ev.currentTarget.blur();
+
+		return rpc.declare({
+			object: 'hostapd.%s'.format(ifname),
+			method: 'del_client',
+			params: [ 'addr', 'deauth', 'reason', 'ban_time' ]
+		})(mac, true, 5, 60000);
+	},
+
+	load: function() {
+		return L.resolveDefault(network.getWifiDevices(), []).then(function(devices) {
+			var tasks = [];
+
+			for (var i = 0; i < devices.length; i++)
+				tasks.push(L.resolveDefault(devices[i].getWifiNetworks(), []).then(L.bind(function(r, l) {
+					r.networks = l;
+				}, this, devices[i])));
+
+			return Promise.all(tasks).then(function() {
+				return devices;
+			});
+		}).then(function(devices) {
+			var tasks = [], deauth = {};
+
+			for (var i = 0; i < devices.length; i++) {
+				for (var j = 0; j < devices[i].networks.length; j++) {
+					tasks.push(L.resolveDefault(devices[i].networks[j].getAssocList(), []).then(L.bind(function(n, l) {
+						n.assoclist = l.sort(function(a, b) { return a.mac > b.mac });
+					}, this, devices[i].networks[j])));
+
+					tasks.push(L.resolveDefault(rpc.list('hostapd.%s'.format(devices[i].networks[j].getIfname())), {}).then(L.bind(function(n, l) {
+						for (var k in L.isObject(l) ? l : {})
+							n.supports_deauth = l[k].hasOwnProperty('del_client');
+					}, this, devices[i].networks[j])));
+				}
+			}
+
+			return Promise.all(tasks).then(function() {
+				return network.getHostHints().then(function(hosthints) {
+					return [ devices, hosthints ];
+				});
+			});
+		});
+	},
+
+	render: function(data) {
+		var devices = data[0],
+		    hosthints = data[1];
+
+		var table = E('div', { 'class': 'network-status-table' });
+
+		for (var i = 0; i < devices.length; i++)
+			table.appendChild(renderbox(devices[i]));
+
+		if (!table.lastElementChild)
+			return null;
+
+		var supports_deauth = false;
+
+		for (var i = 0; i < devices.length; i++)
+			for (var j = 0; j < devices[i].networks.length; j++)
+				supports_deauth = supports_deauth || devices[i].networks[j].supports_deauth;
+
+		var assoclist = E('div', { 'class': 'table' }, [
+			E('div', { 'class': 'tr table-titles' }, [
+				E('div', { 'class': 'th nowrap' }, _('Network')),
+				E('div', { 'class': 'th hide-xs' }, _('MAC-Address')),
+				E('div', { 'class': 'th' }, _('Host')),
+				E('div', { 'class': 'th nowrap' }, '%s / %s'.format(_('Signal'), _('Noise'))),
+				E('div', { 'class': 'th nowrap' }, '%s / %s'.format(_('RX Rate'), _('TX Rate'))),
+				supports_deauth ? E('div', { 'class': 'th nowrap right' }, _('Disconnect')) : null
+			])
+		]);
+
+		var rows = [];
+
+		for (var i = 0; i < devices.length; i++) {
+			for (var j = 0; j < devices[i].networks.length; j++) {
+				for (var k = 0; k < devices[i].networks[j].assoclist.length; k++) {
+					var bss = devices[i].networks[j].assoclist[k],
+					    name = hosthints.getHostnameByMACAddr(bss.mac),
+					    ipv4 = hosthints.getIPAddrByMACAddr(bss.mac),
+					    ipv6 = hosthints.getIP6AddrByMACAddr(bss.mac);
+
+					var icon;
+					var q = (-1 * (bss.noise - bss.signal)) / 5;
+					if (q < 1)
+						icon = L.resource('icons/signal-0.png');
+					else if (q < 2)
+						icon = L.resource('icons/signal-0-25.png');
+					else if (q < 3)
+						icon = L.resource('icons/signal-25-50.png');
+					else if (q < 4)
+						icon = L.resource('icons/signal-50-75.png');
+					else
+						icon = L.resource('icons/signal-75-100.png');
+
+					var sig_title, sig_value;
+
+					if (bss.noise) {
+						sig_value = '%d / %d %s'.format(bss.signal, bss.noise, _('dBm'));
+						sig_title = '%s: %d %s / %s: %d %s / %s %d'.format(
+							_('Signal'), bss.signal, _('dBm'),
+							_('Noise'), bss.noise, _('dBm'),
+							_('SNR'), bss.signal - bss.noise);
+					}
+					else {
+						sig_value = '%d %s'.format(bss.signal, _('dBm'));
+						sig_title = '%s: %d %s'.format(_('Signal'), bss.signal, _('dBm'));
+					}
+
+					var hint;
+
+					if (name && ipv4 && ipv6)
+						hint = '%s (%s, %s)'.format(name, ipv4, ipv6);
+					else if (name && (ipv4 || ipv6))
+						hint = '%s (%s)'.format(name, ipv4 || ipv6);
+					else
+						hint = name || ipv4 || ipv6 || '?';
+
+					rows.push([
+						E('span', { 'class': 'ifacebadge', 'title': devices[i].networks[j].getI18n() }, [
+							E('img', { 'src': L.resource('icons/wifi.png') }),
+							' ', devices[i].networks[j].getShortName(),
+							E('small', {}, [ ' (', devices[i].networks[j].getIfname(), ')' ])
+						]),
+						bss.mac,
+						hint,
+						E('span', { 'class': 'ifacebadge', 'title': sig_title }, [
+							E('img', { 'src': icon }),
+							' ', sig_value
+						]),
+						E('span', {}, [
+							E('span', wifirate(bss.rx)),
+							E('br'),
+							E('span', wifirate(bss.tx))
+						]),
+						devices[i].networks[j].supports_deauth ? E('button', {
+							'class': 'cbi-button cbi-button-remove',
+							'click': L.bind(this.handleDelClient, this, devices[i].networks[j].getIfname(), bss.mac)
+						}, [ _('Disconnect') ]) : '-'
+					]);
+				}
+			}
+		}
+
+		cbi_update_table(assoclist, rows, E('em', _('No information available')));
+
+		return E([
+			table,
+			E('h3', _('Associated Stations')),
+			assoclist
+		]);
+	}
+});
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js
index 04a1ab5bd2..bb6947d664 100644
--- a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js
@@ -1,239 +1,100 @@
-function progressbar(query, value, max, byte)
-{
-	var pg = document.querySelector(query),
-	    vn = parseInt(value) || 0,
-	    mn = parseInt(max) || 100,
-	    fv = byte ? String.format('%1024.2mB', value) : value,
-	    fm = byte ? String.format('%1024.2mB', max) : max,
-	    pc = Math.floor((100 / mn) * vn);
-
-	if (pg) {
-		pg.firstElementChild.style.width = pc + '%';
-		pg.setAttribute('title', '%s / %s (%d%%)'.format(fv, fm, pc));
-	}
-}
+'use strict';
+'require fs';
+'require network';
 
-function renderBox(title, active, childs) {
-	childs = childs || [];
-	childs.unshift(L.itemlist(E('span'), [].slice.call(arguments, 3)));
+function invokeIncludesLoad(includes) {
+	var tasks = [], has_load = false;
 
-	return E('div', { class: 'ifacebox' }, [
-		E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
-			E('strong', title)),
-		E('div', { class: 'ifacebox-body left' }, childs)
-	]);
-}
+	for (var i = 0; i < includes.length; i++) {
+		if (typeof(includes[i].load) == 'function') {
+			tasks.push(includes[i].load());
+			has_load = true;
+		}
+		else {
+			tasks.push(null);
+		}
+	}
 
-function renderBadge(icon, title) {
-	return E('span', { class: 'ifacebadge' }, [
-		E('img', { src: icon, title: title || '' }),
-		L.itemlist(E('span'), [].slice.call(arguments, 2))
-	]);
+	return has_load ? Promise.all(tasks) : Promise.resolve(null);
 }
 
-L.poll(5, L.location(), { status: 1 },
-	function(x, info)
-	{
-		var us = document.getElementById('upstream_status_table');
-
-		while (us.lastElementChild)
-			us.removeChild(us.lastElementChild);
-
-		var wan_list = info.wan || [];
-
-		for (var i = 0; i < wan_list.length; i++) {
-			var ifc = wan_list[i];
-
-			us.appendChild(renderBox(
-				_('IPv4 Upstream'),
-				(ifc.ifname && ifc.proto != 'none'),
-				[ E('div', {}, renderBadge(
-				L.resource('icons/%s.png').format((ifc && ifc.type) ? ifc.type : 'ethernet_disabled'), null,
-				_('Device'), ifc ? (ifc.name || ifc.ifname || '-') : '-',
-				_('MAC-Address'), (ifc && ifc.ether) ? ifc.mac : null)) ],
-				_('Protocol'), ifc.i18n || E('em', _('Not connected')),
-				_('Address'), (ifc.ipaddrs) ? ifc.ipaddrs[0] : null,
-				_('Address'), (ifc.ipaddrs) ? ifc.ipaddrs[1] : null,
-				_('Address'), (ifc.ipaddrs) ? ifc.ipaddrs[2] : null,
-				_('Address'), (ifc.ipaddrs) ? ifc.ipaddrs[3] : null,
-				_('Address'), (ifc.ipaddrs) ? ifc.ipaddrs[4] : null,
-				_('Address'), (ifc.ipaddrs) ? ifc.ipaddrs[5] : null,
-				_('Address'), (ifc.ipaddrs) ? ifc.ipaddrs[6] : null,
-				_('Address'), (ifc.ipaddrs) ? ifc.ipaddrs[7] : null,
-				_('Address'), (ifc.ipaddrs) ? ifc.ipaddrs[8] : null,
-				_('Address'), (ifc.ipaddrs) ? ifc.ipaddrs[9] : null,
-				_('Gateway'), (ifc.gwaddr) ? ifc.gwaddr : '0.0.0.0',
-				_('DNS') + ' 1', (ifc.dns) ? ifc.dns[0] : null,
-				_('DNS') + ' 2', (ifc.dns) ? ifc.dns[1] : null,
-				_('DNS') + ' 3', (ifc.dns) ? ifc.dns[2] : null,
-				_('DNS') + ' 4', (ifc.dns) ? ifc.dns[3] : null,
-				_('DNS') + ' 5', (ifc.dns) ? ifc.dns[4] : null,
-				_('Expires'), (ifc.expires > -1) ? '%t'.format(ifc.expires) : null,
-				_('Connected'), (ifc.uptime > 0) ? '%t'.format(ifc.uptime) : null));
-		}
+function startPolling(includes, containers) {
+	var step = function() {
+		return network.flushCache().then(function() {
+			return invokeIncludesLoad(includes);
+		}).then(function(results) {
+			for (var i = 0; i < includes.length; i++) {
+				var content = null;
 
-		var wan6_list = info.wan6 || [];
-
-		for (var i = 0; i < wan6_list.length; i++) {
-			var ifc6 = wan6_list[i];
-
-			us.appendChild(renderBox(
-				_('IPv6 Upstream'),
-				(ifc6.ifname && ifc6.proto != 'none'),
-				[ E('div', {}, renderBadge(
-					L.resource('icons/%s.png').format(ifc6.type || 'ethernet_disabled'), null,
-					_('Device'), ifc6 ? (ifc6.name || ifc6.ifname || '-') : '-',
-					_('MAC-Address'), (ifc6 && ifc6.ether) ? ifc6.mac : null)) ],
-				_('Protocol'), ifc6.i18n ? (ifc6.i18n + (ifc6.proto === 'dhcp' && ifc6.ip6prefix ? '-PD' : '')) : E('em', _('Not connected')),
-				_('Prefix Delegated'), ifc6.ip6prefix,
-				_('Address'), (ifc6.ip6addrs) ? ifc6.ip6addrs[0] : null,
-				_('Address'), (ifc6.ip6addrs) ? ifc6.ip6addrs[1] : null,
-				_('Address'), (ifc6.ip6addrs) ? ifc6.ip6addrs[2] : null,
-				_('Address'), (ifc6.ip6addrs) ? ifc6.ip6addrs[3] : null,
-				_('Address'), (ifc6.ip6addrs) ? ifc6.ip6addrs[4] : null,
-				_('Address'), (ifc6.ip6addrs) ? ifc6.ip6addrs[5] : null,
-				_('Address'), (ifc6.ip6addrs) ? ifc6.ip6addrs[6] : null,
-				_('Address'), (ifc6.ip6addrs) ? ifc6.ip6addrs[7] : null,
-				_('Address'), (ifc6.ip6addrs) ? ifc6.ip6addrs[8] : null,
-				_('Address'), (ifc6.ip6addrs) ? ifc6.ip6addrs[9] : null,
-				_('Gateway'), (ifc6.gw6addr) ? ifc6.gw6addr : '::',
-				_('DNS') + ' 1', (ifc6.dns) ? ifc6.dns[0] : null,
-				_('DNS') + ' 2', (ifc6.dns) ? ifc6.dns[1] : null,
-				_('DNS') + ' 3', (ifc6.dns) ? ifc6.dns[2] : null,
-				_('DNS') + ' 4', (ifc6.dns) ? ifc6.dns[3] : null,
-				_('DNS') + ' 5', (ifc6.dns) ? ifc6.dns[4] : null,
-				_('Connected'), (ifc6.uptime > 0) ? '%t'.format(ifc6.uptime) : null));
-		}
+				if (typeof(includes[i].render) == 'function')
+					content = includes[i].render(results ? results[i] : null);
+				else if (includes[i].content != null)
+					content = includes[i].content;
 
-		var ds = document.getElementById('dsl_status_table');
-		if (ds) {
-			while (ds.lastElementChild)
-				ds.removeChild(ds.lastElementChild);
-
-			ds.appendChild(renderBox(
-				_('DSL Status'),
-				(info.dsl.line_state === 'UP'), [ ],
-				_('Line State'), '%s [0x%x]'.format(info.dsl.line_state, info.dsl.line_state_detail),
-				_('Line Mode'), info.dsl.line_mode_s || '-',
-				_('Line Uptime'), info.dsl.line_uptime_s || '-',
-				_('Annex'), info.dsl.annex_s || '-',
-				_('Profile'), info.dsl.profile_s || '-',
-				_('Data Rate'), '%s/s / %s/s'.format(info.dsl.data_rate_down_s, info.dsl.data_rate_up_s),
-				_('Max. Attainable Data Rate (ATTNDR)'), '%s/s / %s/s'.format(info.dsl.max_data_rate_down_s, info.dsl.max_data_rate_up_s),
-				_('Latency'), '%s / %s'.format(info.dsl.latency_num_down, info.dsl.latency_num_up),
-				_('Line Attenuation (LATN)'), '%.1f dB / %.1f dB'.format(info.dsl.line_attenuation_down, info.dsl.line_attenuation_up),
-				_('Signal Attenuation (SATN)'), '%.1f dB / %.1f dB'.format(info.dsl.signal_attenuation_down, info.dsl.signal_attenuation_up),
-				_('Noise Margin (SNR)'), '%.1f dB / %.1f dB'.format(info.dsl.noise_margin_down, info.dsl.noise_margin_up),
-				_('Aggregate Transmit Power(ACTATP)'), '%.1f dB / %.1f dB'.format(info.dsl.actatp_down, info.dsl.actatp_up),
-				_('Forward Error Correction Seconds (FECS)'), '%d / %d'.format(info.dsl.errors_fecs_near, info.dsl.errors_fecs_far),
-				_('Errored seconds (ES)'), '%d / %d'.format(info.dsl.errors_es_near, info.dsl.errors_es_far),
-				_('Severely Errored Seconds (SES)'), '%d / %d'.format(info.dsl.errors_ses_near, info.dsl.errors_ses_far),
-				_('Loss of Signal Seconds (LOSS)'), '%d / %d'.format(info.dsl.errors_loss_near, info.dsl.errors_loss_far),
-				_('Unavailable Seconds (UAS)'), '%d / %d'.format(info.dsl.errors_uas_near, info.dsl.errors_uas_far),
-				_('Header Error Code Errors (HEC)'), '%d / %d'.format(info.dsl.errors_hec_near, info.dsl.errors_hec_far),
-				_('Non Pre-emtive CRC errors (CRC_P)'), '%d / %d'.format(info.dsl.errors_crc_p_near, info.dsl.errors_crc_p_far),
-				_('Pre-emtive CRC errors (CRCP_P)'), '%d / %d'.format(info.dsl.errors_crcp_p_near, info.dsl.errors_crcp_p_far),
-				_('ATU-C System Vendor ID'), info.dsl.atuc_vendor_id,
-				_('Power Management Mode'), info.dsl.power_mode_s));
-		}
+				if (content != null) {
+					containers[i].parentNode.style.display = '';
+					containers[i].parentNode.classList.add('fade-in');
 
-		var ws = document.getElementById('wifi_status_table');
-		if (ws)
-		{
-			while (ws.lastElementChild)
-				ws.removeChild(ws.lastElementChild);
-
-			for (var didx = 0; didx < info.wifinets.length; didx++)
-			{
-				var dev = info.wifinets[didx];
-				var net0 = (dev.networks && dev.networks[0]) ? dev.networks[0] : {};
-				var vifs = [];
-
-				for (var nidx = 0; nidx < dev.networks.length; nidx++)
-				{
-					var net = dev.networks[nidx];
-					var is_assoc = (net.bssid != '00:00:00:00:00:00' && net.channel && !net.disabled);
-
-					var icon;
-					if (net.disabled)
-						icon = L.resource('icons/signal-none.png');
-					else if (net.quality <= 0)
-						icon = L.resource('icons/signal-0.png');
-					else if (net.quality < 25)
-						icon = L.resource('icons/signal-0-25.png');
-					else if (net.quality < 50)
-						icon = L.resource('icons/signal-25-50.png');
-					else if (net.quality < 75)
-						icon = L.resource('icons/signal-50-75.png');
-					else
-						icon = L.resource('icons/signal-75-100.png');
-
-					vifs.push(renderBadge(
-						icon,
-						'%s: %d dBm / %s: %d%%'.format(_('Signal'), net.signal, _('Quality'), net.quality),
-						_('SSID'), E('a', { href: net.link }, [ net.ssid || '?' ]),
-						_('Mode'), net.mode,
-						_('BSSID'), is_assoc ? (net.bssid || '-') : null,
-						_('Encryption'), is_assoc ? net.encryption : null,
-						_('Associations'), is_assoc ? (net.num_assoc || '-') : null,
-						null, is_assoc ? null : E('em', net.disabled ? _('Wireless is disabled') : _('Wireless is not associated'))));
+					L.dom.content(containers[i], content);
 				}
-
-				ws.appendChild(renderBox(
-					dev.device, dev.up || net0.up,
-					[ E('div', vifs) ],
-					_('Type'), dev.name.replace(/^Generic | Wireless Controller .+$/g, ''),
-					_('Channel'), net0.channel ? '%d (%.3f %s)'.format(net0.channel, net0.frequency, _('GHz')) : '-',
-					_('Bitrate'), net0.bitrate ? '%d %s'.format(net0.bitrate, _('Mbit/s')) : '-'));
 			}
 
-			if (!ws.lastElementChild)
-				ws.appendChild(E('em', _('No information available')));
-		}
-
-		var e;
-
-		if (e = document.getElementById('localtime'))
-			e.innerHTML = info.localtime;
-
-		if (e = document.getElementById('uptime'))
-			e.innerHTML = String.format('%t', info.uptime);
-
-		if (e = document.getElementById('loadavg'))
-			e.innerHTML = String.format(
-				'%.02f, %.02f, %.02f',
-				info.loadavg[0] / 65535.0,
-				info.loadavg[1] / 65535.0,
-				info.loadavg[2] / 65535.0
-			);
-
-		progressbar('#memtotal',
-			info.memory.free + info.memory.buffered,
-			info.memory.total,
-			true);
-
-		progressbar('#memfree',
-			info.memory.free,
-			info.memory.total,
-			true);
-
-		progressbar('#membuff',
-			info.memory.buffered,
-			info.memory.total,
-			true);
+			var ssi = document.querySelector('div.includes');
+			if (ssi) {
+				ssi.style.display = '';
+				ssi.classList.add('fade-in');
+			}
+		});
+	};
 
-		progressbar('#swaptotal',
-			info.swap.free,
-			info.swap.total,
-			true);
+	return step().then(function() {
+		L.Poll.add(step);
+	});
+}
 
-		progressbar('#swapfree',
-			info.swap.free,
-			info.swap.total,
-			true);
+return L.view.extend({
+	load: function() {
+		return L.resolveDefault(fs.list('/www' + L.resource('view/status/include')), []).then(function(entries) {
+			return Promise.all(entries.filter(function(e) {
+				return (e.type == 'file' && e.name.match(/\.js$/));
+			}).map(function(e) {
+				return 'view.status.include.' + e.name.replace(/\.js$/, '');
+			}).sort().map(function(n) {
+				return L.require(n);
+			}));
+		});
+	},
+
+	render: function(includes) {
+		var rv = E([]), containers = [];
+
+		for (var i = 0; i < includes.length; i++) {
+			var title = null;
+
+			if (includes[i].title != null)
+				title = includes[i].title;
+			else
+				title = String(includes[i]).replace(/^\[ViewStatusInclude\d+_(.+)Class\]$/,
+					function(m, n) { return n.replace(/(^|_)(.)/g,
+						function(m, s, c) { return (s ? ' ' : '') + c.toUpperCase() })
+					});
+
+			var container = E('div');
+
+			rv.appendChild(E('div', { 'class': 'cbi-section', 'style': 'display:none' }, [
+				E('h3', title),
+				container
+			]));
+
+			containers.push(container);
+		}
 
-		progressbar('#conns',
-			info.conncount, info.connmax, false);
+		return startPolling(includes, containers).then(function() {
+			return rv;
+		});
+	},
 
-	}
-);
+	handleSaveApply: null,
+	handleSave: null,
+	handleReset: null
+});