luci-mod-status: move index and iptables page JS code into external files

Also adjust the Bootstrap and OpenWrt themes accordingly

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

6 files changed, 482 insertions, 501 deletions

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
new file mode 100644
index 000000000..c2aa3a9b0
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js
@@ -0,0 +1,215 @@
+function progressbar(q, v, m)
+{
+	var pg = document.querySelector(q),
+	    vn = parseInt(v) || 0,
+	    mn = parseInt(m) || 100,
+	    pc = Math.floor((100 / mn) * vn);
+
+	if (pg) {
+		pg.firstElementChild.style.width = pc + '%';
+		pg.setAttribute('title', '%s / %s (%d%%)'.format(v, m, pc));
+	}
+}
+
+function renderBox(title, active, childs) {
+	childs = childs || [];
+	childs.unshift(L.itemlist(E('span'), [].slice.call(arguments, 3)));
+
+	return E('div', { class: 'ifacebox' }, [
+		E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
+			E('strong', title)),
+		E('div', { class: 'ifacebox-body left' }, childs)
+	]);
+}
+
+function renderBadge(icon, title) {
+	return E('span', { class: 'ifacebadge' }, [
+		E('img', { src: icon, title: title || '' }),
+		L.itemlist(E('span'), [].slice.call(arguments, 2))
+	]);
+}
+
+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.ipaddr) ? ifc.ipaddr : '0.0.0.0',
+				_('Netmask'), (ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255',
+				_('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));
+		}
+
+		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.ip6prefix) ? (ifc6.ip6addr || null) : (ifc6.ip6addr || '::'),
+				_('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));
+		}
+
+		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_fec_near, info.dsl.errors_fec_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));
+		}
+
+		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'))));
+				}
+
+				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) / 1024) + ' ' + _('kB'),
+			(info.memory.total / 1024) + ' ' + _('kB'));
+
+		progressbar('#memfree',
+			(info.memory.free / 1024) + ' ' + _('kB'),
+			(info.memory.total / 1024) + ' ' + _('kB'));
+
+		progressbar('#membuff',
+			(info.memory.buffered / 1024) + ' ' + _('kB'),
+			(info.memory.total / 1024) + ' ' + _('kB'));
+
+		progressbar('#swaptotal',
+			(info.swap.free / 1024) + ' ' + _('kB'),
+			(info.swap.total / 1024) + ' ' + _('kB'));
+
+		progressbar('#swapfree',
+			(info.swap.free / 1024) + ' ' + _('kB'),
+			(info.swap.total / 1024) + ' ' + _('kB'));
+
+		progressbar('#conns',
+			info.conncount, info.connmax);
+
+	}
+);
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/iptables.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/iptables.js
new file mode 100644
index 000000000..39ddab397
--- /dev/null
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/iptables.js
@@ -0,0 +1,253 @@
+var table_names = [ 'Filter', 'NAT', 'Mangle', 'Raw' ],
+    current_mode = document.querySelector('.cbi-tab[data-mode="6"]') ? 6 : 4;
+
+function create_table_section(table)
+{
+	var idiv = document.getElementById('iptables'),
+	    tdiv = idiv.querySelector('[data-table="%s"]'.format(table)),
+	    title = '%s: %s'.format(_('Table'), table);
+
+	if (!tdiv) {
+		tdiv = E('div', { 'data-table': table }, [
+			E('h3', {}, title),
+			E('div')
+		]);
+
+		if (idiv.firstElementChild.nodeName.toLowerCase() === 'p')
+			idiv.removeChild(idiv.firstElementChild);
+
+		var added = false, thisIdx = table_names.indexOf(table);
+
+		idiv.querySelectorAll('[data-table]').forEach(function(child) {
+			var childIdx = table_names.indexOf(child.getAttribute('data-table'));
+
+			if (added === false && childIdx > thisIdx) {
+				idiv.insertBefore(tdiv, child);
+				added = true;
+			}
+		});
+
+		if (added === false)
+			idiv.appendChild(tdiv);
+	}
+
+	return tdiv.lastElementChild;
+}
+
+function create_chain_section(table, chain, policy, packets, bytes, references)
+{
+	var tdiv = create_table_section(table),
+	    cdiv = tdiv.querySelector('[data-chain="%s"]'.format(chain)),
+	    title;
+
+	if (policy)
+		title = '%s <em>%s</em> <span>(%s: <em>%s</em>, %d %s, %.2mB %s)</span>'
+			.format(_('Chain'), chain, _('Policy'), policy, packets, _('Packets'), bytes, _('Traffic'));
+	else
+		title = '%s <em>%s</em> <span class="references">(%d %s)</span>'
+			.format(_('Chain'), chain, references, _('References'));
+
+	if (!cdiv) {
+		cdiv = E('div', { 'data-chain': chain }, [
+			E('h4', { 'id': 'rule_%s_%s'.format(table.toLowerCase(), chain) }, title),
+			E('div', { 'class': 'table' }, [
+				E('div', { 'class': 'tr table-titles' }, [
+					E('div', { 'class': 'th center' }, _('Pkts.')),
+					E('div', { 'class': 'th center' }, _('Traffic')),
+					E('div', { 'class': 'th' }, _('Target')),
+					E('div', { 'class': 'th' }, _('Prot.')),
+					E('div', { 'class': 'th' }, _('In')),
+					E('div', { 'class': 'th' }, _('Out')),
+					E('div', { 'class': 'th' }, _('Source')),
+					E('div', { 'class': 'th' }, _('Destination')),
+					E('div', { 'class': 'th' }, _('Options')),
+					E('div', { 'class': 'th' }, _('Comment'))
+				])
+			])
+		]);
+
+		tdiv.appendChild(cdiv);
+	}
+	else {
+		cdiv.firstElementChild.innerHTML = title;
+	}
+
+	return cdiv.lastElementChild;
+}
+
+function update_chain_section(chaintable, rows)
+{
+	if (!chaintable)
+		return;
+
+	cbi_update_table(chaintable, rows, _('No rules in this chain.'));
+
+	if (rows.length === 0 &&
+	    document.querySelector('form > [data-hide-empty="true"]'))
+		chaintable.parentNode.style.display = 'none';
+	else
+		chaintable.parentNode.style.display = '';
+
+	chaintable.parentNode.setAttribute('data-empty', rows.length === 0);
+}
+
+function hide_empty(btn)
+{
+	var hide = (btn.getAttribute('data-hide-empty') === 'false');
+
+	btn.setAttribute('data-hide-empty', hide);
+	btn.value = hide ? _('Show empty chains') : _('Hide empty chains');
+	btn.blur();
+
+	document.querySelectorAll('[data-chain][data-empty="true"]')
+		.forEach(function(chaintable) {
+			chaintable.style.display = hide ? 'none' : '';
+		});
+}
+
+function jump_target(ev)
+{
+	var link = ev.target,
+	    table = findParent(link, '[data-table]').getAttribute('data-table'),
+	    chain = link.textContent,
+	    num = +link.getAttribute('data-num'),
+	    elem = document.getElementById('rule_%s_%s'.format(table.toLowerCase(), chain));
+
+	if (elem) {
+		(document.documentElement || document.body.parentNode || document.body).scrollTop = elem.offsetTop - 40;
+		elem.classList.remove('flash');
+		void elem.offsetWidth;
+		elem.classList.add('flash');
+
+		if (num) {
+			var rule = elem.nextElementSibling.childNodes[num];
+			if (rule) {
+				rule.classList.remove('flash');
+				void rule.offsetWidth;
+				rule.classList.add('flash');
+			}
+		}
+	}
+}
+
+function parse_output(table, s)
+{
+	var current_chain = null;
+	var current_rules = [];
+	var seen_chains = {};
+	var chain_refs = {};
+	var re = /([^\n]*)\n/g;
+	var m, m2;
+
+	while ((m = re.exec(s)) != null) {
+		if (m[1].match(/^Chain (.+) \(policy (\w+) (\d+) packets, (\d+) bytes\)$/)) {
+			var chain = RegExp.$1,
+			    policy = RegExp.$2,
+			    packets = +RegExp.$3,
+			    bytes = +RegExp.$4;
+
+			update_chain_section(current_chain, current_rules);
+
+			seen_chains[chain] = true;
+			current_chain = create_chain_section(table, chain, policy, packets, bytes);
+			current_rules = [];
+		}
+		else if (m[1].match(/^Chain (.+) \((\d+) references\)$/)) {
+			var chain = RegExp.$1,
+			    references = +RegExp.$2;
+
+			update_chain_section(current_chain, current_rules);
+
+			seen_chains[chain] = true;
+			current_chain = create_chain_section(table, chain, null, null, null, references);
+			current_rules = [];
+		}
+		else if (m[1].match(/^num /)) {
+			continue;
+		}
+		else if ((m2 = m[1].match(/^(\d+) +(\d+) +(\d+) +(.*?) +(\S+) +(\S*) +(\S+) +(\S+) +([a-f0-9:.]+\/\d+) +([a-f0-9:.]+\/\d+) +(.+)$/)) !== null) {
+			var num = +m2[1],
+			    pkts = +m2[2],
+			    bytes = +m2[3],
+			    target = m2[4],
+			    proto = m2[5],
+			    indev = m2[7],
+			    outdev = m2[8],
+			    srcnet = m2[9],
+			    dstnet = m2[10],
+			    options = m2[11] || '-',
+			    comment = '-';
+
+			options = options.trim().replace(/(?:^| )\/\* (.+) \*\//,
+				function(m1, m2) {
+					comment = m2.replace(/^!fw3(: |$)/, '').trim() || '-';
+					return '';
+				}) || '-';
+
+			current_rules.push([
+				'%.2m'.format(pkts).nobr(),
+				'%.2mB'.format(bytes).nobr(),
+				target ? '<span class="target">%s</span>'.format(target) : '-',
+				proto,
+				(indev !== '*') ? '<span class="ifacebadge">%s</span>'.format(indev) : '*',
+				(outdev !== '*') ? '<span class="ifacebadge">%s</span>'.format(outdev) : '*',
+				srcnet,
+				dstnet,
+				options,
+				comment
+			]);
+
+			if (target) {
+				chain_refs[target] = chain_refs[target] || [];
+				chain_refs[target].push([ current_chain, num ]);
+			}
+		}
+	}
+
+	update_chain_section(current_chain, current_rules);
+
+	document.querySelectorAll('[data-table="%s"] [data-chain]'.format(table))
+		.forEach(function(cdiv) {
+			if (!seen_chains[cdiv.getAttribute('data-chain')]) {
+				cdiv.parentNode.removeChild(cdiv);
+				return;
+			}
+
+			cdiv.querySelectorAll('.target').forEach(function(tspan) {
+				if (seen_chains[tspan.textContent]) {
+					tspan.classList.add('jump');
+					tspan.addEventListener('click', jump_target);
+				}
+			});
+
+			cdiv.querySelectorAll('.references').forEach(function(rspan) {
+				var refs = chain_refs[cdiv.getAttribute('data-chain')];
+				if (refs && refs.length) {
+					rspan.classList.add('cbi-tooltip-container');
+					rspan.appendChild(E('small', { 'class': 'cbi-tooltip ifacebadge', 'style': 'top:1em; left:auto' }, [ E('ul') ]));
+
+					refs.forEach(function(ref) {
+						var chain = ref[0].parentNode.getAttribute('data-chain'),
+						    num = ref[1];
+
+						rspan.lastElementChild.lastElementChild.appendChild(E('li', {}, [
+							_('Chain'), ' ',
+							E('span', {
+								'class': 'jump',
+								'data-num': num,
+								'onclick': 'jump_target(event)'
+							}, chain),
+							', %s #%d'.format(_('Rule'), num)
+						]));
+					});
+				}
+			});
+		});
+}
+
+table_names.forEach(function(table) {
+	L.poll(5, L.url('admin/status/iptables_dump', current_mode, table.toLowerCase()), null,
+		function (xhr) {
+			parse_output(table, xhr.responseText);
+		});
+});
diff --git a/modules/luci-mod-status/luasrc/view/admin_status/index.htm b/modules/luci-mod-status/luasrc/view/admin_status/index.htm
index b98ba76f8..b11956a8a 100644
--- a/modules/luci-mod-status/luasrc/view/admin_status/index.htm
+++ b/modules/luci-mod-status/luasrc/view/admin_status/index.htm
@@ -1,6 +1,6 @@
 <%#
  Copyright 2008 Steven Barth <steven@midlink.org>
- Copyright 2008-2011 Jo-Philipp Wich <jow@openwrt.org>
+ Copyright 2008-2018 Jo-Philipp Wich <jo@mein.io>
  Licensed to the public under the Apache License 2.0.
 -%>
 
@@ -131,248 +131,6 @@
 
 <%+header%>
 
-<script type="text/javascript">//<![CDATA[
-	function progressbar(q, v, m)
-	{
-		var pg = document.querySelector(q),
-		    vn = parseInt(v) || 0,
-		    mn = parseInt(m) || 100,
-		    pc = Math.floor((100 / mn) * vn);
-
-		if (pg) {
-			pg.firstElementChild.style.width = pc + '%';
-			pg.setAttribute('title', '%s / %s (%d%%)'.format(v, m, pc));
-		}
-	}
-
-	function labelList(items, offset) {
-		var rv = [ ];
-
-		for (var i = offset || 0; i < items.length; i += 2) {
-			var label = items[i],
-			    value = items[i+1];
-
-			if (value === undefined || value === null)
-				continue;
-
-			if (label)
-				rv.push(E('strong', [label, ': ']));
-
-			rv.push(value, E('br'));
-		}
-
-		return rv;
-	}
-
-	function renderBox(title, active, childs) {
-		childs = childs || [];
-		childs.unshift(E('span', labelList(arguments, 3)));
-
-		return E('div', { class: 'ifacebox' }, [
-			E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
-				E('strong', title)),
-			E('div', { class: 'ifacebox-body left' }, childs)
-		]);
-	}
-
-	function renderBadge(icon, title) {
-		return E('span', { class: 'ifacebadge' }, [
-			E('img', { src: icon, title: title || '' }),
-			E('span', labelList(arguments, 2))
-		]);
-	}
-
-	XHR.poll(5, '<%=REQUEST_URI%>', { 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(
-					'<%=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.ipaddr) ? ifc.ipaddr : '0.0.0.0',
-					'<%:Netmask%>', (ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255',
-					'<%: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));
-			}
-
-			<% if has_ipv6 then %>
-			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(
-						'<%=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.ip6prefix) ? (ifc6.ip6addr || null) : (ifc6.ip6addr || '::'),
-					'<%: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));
-			}
-			<% end %>
-
-			<% if has_dsl then %>
-				var ds = document.getElementById('dsl_status_table');
-
-				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_fec_near, info.dsl.errors_fec_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));
-			<% end %>
-
-			<% if has_wifi then %>
-			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 = "<%=resource%>/icons/signal-none.png";
-						else if (net.quality <= 0)
-							icon = "<%=resource%>/icons/signal-0.png";
-						else if (net.quality < 25)
-							icon = "<%=resource%>/icons/signal-0-25.png";
-						else if (net.quality < 50)
-							icon = "<%=resource%>/icons/signal-25-50.png";
-						else if (net.quality < 75)
-							icon = "<%=resource%>/icons/signal-50-75.png";
-						else
-							icon = "<%=resource%>/icons/signal-75-100.png";
-
-						vifs.push(renderBadge(
-							icon,
-							'<%:Signal%>: %d dBm / <%:Quality%>: %d%%'.format(net.signal, 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%>')));
-					}
-
-					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 <%:GHz%>)'.format(net0.channel, net0.frequency) : '-',
-						'<%:Bitrate%>', net0.bitrate ? '%d <%:Mbit/s%>'.format(net0.bitrate) : '-'));
-				}
-
-				if (!ws.lastElementChild)
-					ws.appendChild(E('<em><%:No information available%></em>'));
-			}
-			<% end %>
-
-			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) / 1024) + " <%:kB%>",
-				(info.memory.total / 1024) + " <%:kB%>");
-
-			progressbar('#memfree',
-				(info.memory.free / 1024) + " <%:kB%>",
-				(info.memory.total / 1024) + " <%:kB%>");
-
-			progressbar('#membuff',
-				(info.memory.buffered / 1024) + " <%:kB%>",
-				(info.memory.total / 1024) + " <%:kB%>");
-
-			progressbar('#swaptotal',
-				(info.swap.free / 1024) + " <%:kB%>",
-				(info.swap.total / 1024) + " <%:kB%>");
-
-			progressbar('#swapfree',
-				(info.swap.free / 1024) + " <%:kB%>",
-				(info.swap.total / 1024) + " <%:kB%>");
-
-			progressbar('#conns',
-				info.conncount, info.connmax);
-
-		}
-	);
-//]]></script>
-
 <h2 name="content"><%:Status%></h2>
 
 <div class="cbi-section">
@@ -470,4 +228,6 @@
 	end
 -%>
 
+<script type="text/javascript" src="<%=resource%>/view/status/index.js"></script>
+
 <%+footer%>
diff --git a/modules/luci-mod-status/luasrc/view/admin_status/iptables.htm b/modules/luci-mod-status/luasrc/view/admin_status/iptables.htm
index 50defac90..89f229f3b 100644
--- a/modules/luci-mod-status/luasrc/view/admin_status/iptables.htm
+++ b/modules/luci-mod-status/luasrc/view/admin_status/iptables.htm
@@ -41,265 +41,16 @@
 	}
 </style>
 
-<script type="text/javascript">//<![CDATA[
-	var table_names = [ 'Filter', 'NAT', 'Mangle', 'Raw' ];
-
-	function create_table_section(table)
-	{
-		var idiv = document.getElementById('iptables'),
-		    tdiv = idiv.querySelector('[data-table="%s"]'.format(table)),
-		    title = '<%:Table%>: %s'.format(table);
-
-		if (!tdiv) {
-			tdiv = E('div', { 'data-table': table }, [
-				E('h3', {}, title),
-				E('div')
-			]);
-
-			if (idiv.firstElementChild.nodeName.toLowerCase() === 'p')
-				idiv.removeChild(idiv.firstElementChild);
-
-			var added = false, thisIdx = table_names.indexOf(table);
-
-			idiv.querySelectorAll('[data-table]').forEach(function(child) {
-				var childIdx = table_names.indexOf(child.getAttribute('data-table'));
-
-				if (added === false && childIdx > thisIdx) {
-					idiv.insertBefore(tdiv, child);
-					added = true;
-				}
-			});
-
-			if (added === false)
-				idiv.appendChild(tdiv);
-		}
-
-		return tdiv.lastElementChild;
-	}
-
-	function create_chain_section(table, chain, policy, packets, bytes, references)
-	{
-		var tdiv = create_table_section(table),
-		    cdiv = tdiv.querySelector('[data-chain="%s"]'.format(chain)),
-		    title;
-
-		if (policy)
-			title = '<%:Chain%> <em>%s</em> <span>(<%:Policy%>: <em>%s</em>, %d <%:Packets%>, %.2mB <%:Traffic%>)</span>'.format(chain, policy, packets, bytes);
-		else
-			title = '<%:Chain%> <em>%s</em> <span class="references">(%d <%:References%>)</span>'.format(chain, references);
-
-		if (!cdiv) {
-			cdiv = E('div', { 'data-chain': chain }, [
-				E('h4', { 'id': 'rule_%s_%s'.format(table.toLowerCase(), chain) }, title),
-				E('div', { 'class': 'table' }, [
-					E('div', { 'class': 'tr table-titles' }, [
-						E('div', { 'class': 'th center' }, '<%:Pkts.%>'),
-						E('div', { 'class': 'th center' }, '<%:Traffic%>'),
-						E('div', { 'class': 'th' }, '<%:Target%>'),
-						E('div', { 'class': 'th' }, '<%:Prot.%>'),
-						E('div', { 'class': 'th' }, '<%:In%>'),
-						E('div', { 'class': 'th' }, '<%:Out%>'),
-						E('div', { 'class': 'th' }, '<%:Source%>'),
-						E('div', { 'class': 'th' }, '<%:Destination%>'),
-						E('div', { 'class': 'th' }, '<%:Options%>'),
-						E('div', { 'class': 'th' }, '<%:Comment%>')
-					])
-				])
-			]);
-
-			tdiv.appendChild(cdiv);
-		}
-		else {
-			cdiv.firstElementChild.innerHTML = title;
-		}
-
-		return cdiv.lastElementChild;
-	}
-
-	function update_chain_section(chaintable, rows)
-	{
-		if (!chaintable)
-			return;
-
-		cbi_update_table(chaintable, rows, '<%:No rules in this chain.%>');
-
-		if (rows.length === 0 &&
-		    document.querySelector('form > [data-hide-empty="true"]'))
-			chaintable.parentNode.style.display = 'none';
-		else
-			chaintable.parentNode.style.display = '';
-
-		chaintable.parentNode.setAttribute('data-empty', rows.length === 0);
-	}
-
-	function hide_empty(btn)
-	{
-		var hide = (btn.getAttribute('data-hide-empty') === 'false');
-
-		btn.setAttribute('data-hide-empty', hide);
-		btn.value = hide ? '<%:Show empty chains%>' : '<%:Hide empty chains%>';
-		btn.blur();
-
-		document.querySelectorAll('[data-chain][data-empty="true"]')
-			.forEach(function(chaintable) {
-				chaintable.style.display = hide ? 'none' : '';
-			});
-	}
-
-	function jump_target(ev)
-	{
-		var link = ev.target,
-		    table = findParent(link, '[data-table]').getAttribute('data-table'),
-		    chain = link.textContent,
-		    num = +link.getAttribute('data-num'),
-		    elem = document.getElementById('rule_%s_%s'.format(table.toLowerCase(), chain));
-
-		if (elem) {
-			(document.documentElement || document.body.parentNode || document.body).scrollTop = elem.offsetTop - 40;
-			elem.classList.remove('flash');
-			void elem.offsetWidth;
-			elem.classList.add('flash');
-
-			if (num) {
-				var rule = elem.nextElementSibling.childNodes[num];
-				if (rule) {
-					rule.classList.remove('flash');
-					void rule.offsetWidth;
-					rule.classList.add('flash');
-				}
-			}
-		}
-	}
-
-	function parse_output(table, s)
-	{
-		var current_chain = null;
-		var current_rules = [];
-		var seen_chains = {};
-		var chain_refs = {};
-		var re = /([^\n]*)\n/g;
-		var m, m2;
-
-		while ((m = re.exec(s)) != null) {
-			if (m[1].match(/^Chain (.+) \(policy (\w+) (\d+) packets, (\d+) bytes\)$/)) {
-				var chain = RegExp.$1,
-				    policy = RegExp.$2,
-				    packets = +RegExp.$3,
-				    bytes = +RegExp.$4;
-
-				update_chain_section(current_chain, current_rules);
-
-				seen_chains[chain] = true;
-				current_chain = create_chain_section(table, chain, policy, packets, bytes);
-				current_rules = [];
-			}
-			else if (m[1].match(/^Chain (.+) \((\d+) references\)$/)) {
-				var chain = RegExp.$1,
-				    references = +RegExp.$2;
-
-				update_chain_section(current_chain, current_rules);
-
-				seen_chains[chain] = true;
-				current_chain = create_chain_section(table, chain, null, null, null, references);
-				current_rules = [];
-			}
-			else if (m[1].match(/^num /)) {
-				continue;
-			}
-			else if ((m2 = m[1].match(/^(\d+) +(\d+) +(\d+) +(.*?) +(\S+) +(\S*) +(\S+) +(\S+) +([a-f0-9:.]+\/\d+) +([a-f0-9:.]+\/\d+) +(.+)$/)) !== null) {
-				var num = +m2[1],
-				    pkts = +m2[2],
-				    bytes = +m2[3],
-				    target = m2[4],
-				    proto = m2[5],
-				    indev = m2[7],
-				    outdev = m2[8],
-				    srcnet = m2[9],
-				    dstnet = m2[10],
-				    options = m2[11] || '-',
-				    comment = '-';
-
-				options = options.trim().replace(/(?:^| )\/\* (.+) \*\//,
-					function(m1, m2) {
-						comment = m2.replace(/^!fw3(: |$)/, '').trim() || '-';
-						return '';
-					}) || '-';
-
-				current_rules.push([
-					'%.2m'.format(pkts).nobr(),
-					'%.2mB'.format(bytes).nobr(),
-					target ? '<span class="target">%s</span>'.format(target) : '-',
-					proto,
-					(indev !== '*') ? '<span class="ifacebadge">%s</span>'.format(indev) : '*',
-					(outdev !== '*') ? '<span class="ifacebadge">%s</span>'.format(outdev) : '*',
-					srcnet,
-					dstnet,
-					options,
-					comment
-				]);
-
-				if (target) {
-					chain_refs[target] = chain_refs[target] || [];
-					chain_refs[target].push([ current_chain, num ]);
-				}
-			}
-		}
-
-		update_chain_section(current_chain, current_rules);
-
-		document.querySelectorAll('[data-table="%s"] [data-chain]'.format(table))
-			.forEach(function(cdiv) {
-				if (!seen_chains[cdiv.getAttribute('data-chain')]) {
-					cdiv.parentNode.removeChild(cdiv);
-					return;
-				}
-
-				cdiv.querySelectorAll('.target').forEach(function(tspan) {
-					if (seen_chains[tspan.textContent]) {
-						tspan.classList.add('jump');
-						tspan.addEventListener('click', jump_target);
-					}
-				});
-
-				cdiv.querySelectorAll('.references').forEach(function(rspan) {
-					var refs = chain_refs[cdiv.getAttribute('data-chain')];
-					if (refs && refs.length) {
-						rspan.classList.add('cbi-tooltip-container');
-						rspan.appendChild(E('small', { 'class': 'cbi-tooltip ifacebadge', 'style': 'top:1em; left:auto' }, [ E('ul') ]));
-
-						refs.forEach(function(ref) {
-							var chain = ref[0].parentNode.getAttribute('data-chain'),
-							    num = ref[1];
-
-							rspan.lastElementChild.lastElementChild.appendChild(E('li', {}, [
-								'<%:Chain%> ',
-								E('span', {
-									'class': 'jump',
-									'data-num': num,
-									'onclick': 'jump_target(event)'
-								}, chain),
-								', <%:Rule%> #%d'.format(num)
-							]));
-						});
-					}
-				});
-			});
-	}
-
-	table_names.forEach(function(table) {
-		XHR.poll(5, '<%=url("admin/status/iptables_dump", tostring(mode))%>/' + table.toLowerCase(), null,
-			function (xhr) {
-				parse_output(table, xhr.responseText);
-			});
-	});
-//]]></script>
-
 <h2 name="content"><%:Firewall Status%></h2>
 
 <% if has_ip6tables then %>
 <ul class="cbi-tabmenu">
-	<li class="cbi-tab<%= mode ~= 4 and "-disabled" %>"><a href="<%=url("admin/status/iptables/4")%>"><%:IPv4 Firewall%></a></li>
-	<li class="cbi-tab<%= mode ~= 6 and "-disabled" %>"><a href="<%=url("admin/status/iptables/6")%>"><%:IPv6 Firewall%></a></li>
+	<li data-mode="4" class="cbi-tab<%= mode ~= 4 and "-disabled" %>">
+		<a href="<%=url("admin/status/iptables/4")%>"><%:IPv4 Firewall%></a>
+	</li>
+	<li data-mode="6" class="cbi-tab<%= mode ~= 6 and "-disabled" %>">
+		<a href="<%=url("admin/status/iptables/6")%>"><%:IPv6 Firewall%></a>
+	</li>
 </ul>
 <% end %>
 
@@ -314,7 +65,9 @@
 </div>
 
 <div id="iptables">
-	<p><em><%:Collecting data...%></em></p>
+	<p><em class="spinning"><%:Collecting data...%></em></p>
 </div>
 
+<script type="text/javascript" src="<%=resource%>/view/status/iptables.js"></script>
+
 <%+footer%>
diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index bb0a0987d..2322a7385 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -1993,7 +1993,7 @@ table table td,
 	margin: -.125em;
 }
 
-#dsl_status_table .ifacebox-body > span > strong {
+#dsl_status_table .ifacebox-body span > strong {
 	display: inline-block;
 	min-width: 35%;
 }
diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
index 4203f0362..f6ea9645f 100644
--- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -1511,7 +1511,7 @@ select + .cbi-button {
 	margin: .5em 0 0 0;
 }
 
-#dsl_status_table .ifacebox-body > span > strong {
+#dsl_status_table .ifacebox-body span > strong {
 	display: inline-block;
 	min-width: 35%;
 }