luci-app-nlbwmon: rewrite display section

 - Move CSS and JS code to external files
 - Use responsive table markup

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

3 files changed, 984 insertions, 989 deletions

diff --git a/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.css b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.css
new file mode 100644
index 0000000000..dd24e5dffc
--- /dev/null
+++ b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.css
@@ -0,0 +1,173 @@
+#chartjs-tooltip {
+	opacity: 0;
+	position: absolute;
+	background: rgba(0, 0, 0, .7);
+	color: white;
+	padding: 3px;
+	border-radius: 3px;
+	transition: all .1s ease;
+	pointer-events: none;
+	transform: translate(-50%, 0);
+	z-index: 20000;
+}
+
+#chartjs-tooltip.above {
+	transform: translate(-50%, -100%);
+}
+
+#chartjs-tooltip.above:before {
+	border: solid;
+	border-color: #111 transparent;
+	border-color: rgba(0, 0, 0, .8) transparent;
+	border-width: 8px 8px 0 8px;
+	bottom: 1em;
+	content: "";
+	display: block;
+	left: 50%;
+	top: 100%;
+	position: absolute;
+	z-index: 99;
+	transform: translate(-50%, 0);
+}
+
+.pie label {
+	font-weight: bold;
+	font-size: 14px;
+	display: block;
+	margin-bottom: 10px;
+	text-align: center;
+}
+
+.kpi ul {
+	list-style: none;
+}
+
+.kpi li {
+	margin: 10px;
+	display: none;
+}
+
+.kpi big {
+	font-weight: bold;
+}
+
+.head {
+	text-align: center;
+	position: relative;
+	display: flex;
+	flex-wrap: wrap;
+	white-space: normal;
+}
+
+.head .pie {
+	min-width: 200px;
+	padding: 5px;
+	flex: 1 1 30%;
+}
+
+.cbi-tooltip .head .pie {
+	min-width: 100px;
+}
+
+.head .kpi {
+	padding: 5px;
+	font-size: smaller;
+	text-align: left;
+	align-self: center;
+	flex: 1 0 33%;
+	min-width: 150px;
+	display: flex;
+	justify-content: center;
+}
+
+.head .kpi ul {
+	margin: 0;
+}
+
+.table .th,
+.table .td {
+	padding: 1px 3px !important;
+	border: 1px solid #ddd;
+}
+
+.table .td > a {
+	display: block;
+}
+
+.table .placeholder .td {
+	border: none;
+}
+
+.table .td.double {
+	padding: 0 !important;
+}
+
+.table .td.double > span {
+	display: block;
+	padding: 1px 3px;
+}
+
+.table .td.double > span:first-child {
+	border-bottom: 1px solid #ddd;
+}
+
+.cbi-tooltip {
+	box-shadow: 0 0 5px #000;
+}
+
+@media screen and (max-width: 992px) {
+	.table .tr {
+		margin-bottom: 10px;
+	}
+
+	.table .th,
+	.table .td, .table .td.double {
+		padding: 1px 3px !important;
+		flex-basis: 50%;
+	}
+
+	.table .td, .table .td::before,
+	.table .th, .table .th::before {
+		text-align: left !important;
+		font-size: 14px;
+		border: none;
+	}
+
+	#host-data .td.hostname {
+		flex-basis: 100%;
+	}
+
+	#ipv6-data .td.double > span {
+		padding: 0;
+		border-bottom: none;
+	}
+
+	#ipv6-data .td.double > span:first-child::before {
+		content: "IPv4: ";
+		font-style: italic;
+		font-size: 13px;
+	}
+
+	#ipv6-data .td.double > span:last-child::before {
+		content: "IPv6: ";
+		font-style: italic;
+		font-size: 13px;
+	}
+
+	.cbi-tooltip {
+		width: 100%;
+		pointer-events: auto;
+		box-shadow: 0 0 10px 5px #000;
+		border-radius: 0;
+	}
+
+	.cbi-tooltip .table .th,
+	.cbi-tooltip .table .td {
+		flex-basis: 16%;
+		min-width: 100px;
+	}
+
+	.head .kpi {
+		font-size: 14px;
+	}
+}
diff --git a/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.js b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.js
new file mode 100644
index 0000000000..e5ae69b3a7
--- /dev/null
+++ b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.js
@@ -0,0 +1,684 @@
+var chartRegistry = {},
+	trafficPeriods = [],
+	trafficData = { columns: [], data: [] },
+	hostNames = {},
+	ouiData = [];
+
+
+function off(elem)
+{
+	var val = [0, 0];
+	do {
+		if (!isNaN(elem.offsetLeft) && !isNaN(elem.offsetTop)) {
+			val[0] += elem.offsetLeft;
+			val[1] += elem.offsetTop;
+		}
+	}
+	while ((elem = elem.offsetParent) != null);
+	return val;
+}
+
+Chart.defaults.global.customTooltips = function(tooltip) {
+	var tooltipEl = document.getElementById('chartjs-tooltip');
+
+	if (!tooltipEl) {
+		tooltipEl = document.createElement('div');
+		tooltipEl.setAttribute('id', 'chartjs-tooltip');
+		document.body.appendChild(tooltipEl);
+	}
+
+	if (!tooltip) {
+		if (tooltipEl.row)
+			tooltipEl.row.style.backgroundColor = '';
+
+		tooltipEl.style.opacity = 0;
+		return;
+	}
+
+	var pos = off(tooltip.chart.canvas);
+
+	tooltipEl.className = tooltip.yAlign;
+	tooltipEl.innerHTML = tooltip.text[0];
+
+	tooltipEl.style.opacity = 1;
+	tooltipEl.style.left = pos[0] + tooltip.x + 'px';
+	tooltipEl.style.top = pos[1] + tooltip.y - tooltip.caretHeight - tooltip.caretPadding + 'px';
+
+	console.debug(tooltip.text);
+
+	var row = findParent(tooltip.text[1], '.tr'),
+	    hue = tooltip.text[2];
+
+	if (row && !isNaN(hue)) {
+		row.style.backgroundColor = 'hsl(%u, 100%%, 80%%)'.format(hue);
+		tooltipEl.row = row;
+	}
+};
+
+Chart.defaults.global.tooltipFontSize = 10;
+Chart.defaults.global.tooltipTemplate = function(tip) {
+	tip.label[0] = tip.label[0].format(tip.value);
+	return tip.label;
+};
+
+function kpi(id, val1, val2, val3)
+{
+	var e = L.dom.elem(id) ? id : document.getElementById(id);
+
+	if (val1 && val2 && val3)
+		e.innerHTML = _('%s, %s and %s').format(val1, val2, val3);
+	else if (val1 && val2)
+		e.innerHTML = _('%s and %s').format(val1, val2);
+	else if (val1)
+		e.innerHTML = val1;
+
+	e.parentNode.style.display = val1 ? 'list-item' : '';
+}
+
+function pie(id, data)
+{
+	var total = data.reduce(function(n, d) { return n + d.value }, 0);
+
+	data.sort(function(a, b) { return b.value - a.value });
+
+	if (total === 0)
+		data = [{
+			value: 1,
+			color: '#cccccc',
+			label: [ _('no traffic') ]
+		}];
+
+	for (var i = 0; i < data.length; i++) {
+		if (!data[i].color) {
+			var hue = 120 / (data.length-1) * i;
+			data[i].color = 'hsl(%u, 80%%, 50%%)'.format(hue);
+			data[i].label.push(hue);
+		}
+	}
+
+	var node = L.dom.elem(id) ? id : document.getElementById(id),
+	    key = L.dom.elem(id) ? id.id : id,
+	    ctx = node.getContext('2d');
+
+	if (chartRegistry.hasOwnProperty(key))
+		chartRegistry[key].destroy();
+
+	chartRegistry[key] = new Chart(ctx).Doughnut(data, {
+		segmentStrokeWidth: 1,
+		percentageInnerCutout: 30
+	});
+
+	return chartRegistry[key];
+}
+
+function query(filter, group, order)
+{
+	var keys = [], columns = {}, records = {}, result = [];
+
+	if (typeof(group) !== 'function' && typeof(group) !== 'object')
+		group = ['mac'];
+
+	for (var i = 0; i < trafficData.columns.length; i++)
+		columns[trafficData.columns[i]] = i;
+
+	for (var i = 0; i < trafficData.data.length; i++) {
+		var record = trafficData.data[i];
+
+		if (typeof(filter) === 'function' && filter(columns, record) !== true)
+			continue;
+
+		var key;
+
+		if (typeof(group) === 'function') {
+			key = group(columns, record);
+		}
+		else {
+			key = [];
+
+			for (var j = 0; j < group.length; j++)
+				if (columns.hasOwnProperty(group[j]))
+					key.push(record[columns[group[j]]]);
+
+			key = key.join(',');
+		}
+
+		if (!records.hasOwnProperty(key)) {
+			var rec = {};
+
+			for (var col in columns)
+				rec[col] = record[columns[col]];
+
+			records[key] = rec;
+			result.push(rec);
+		}
+		else {
+			records[key].conns    += record[columns.conns];
+			records[key].rx_bytes += record[columns.rx_bytes];
+			records[key].rx_pkts  += record[columns.rx_pkts];
+			records[key].tx_bytes += record[columns.tx_bytes];
+			records[key].tx_pkts  += record[columns.tx_pkts];
+		}
+	}
+
+	if (typeof(order) === 'function')
+		result.sort(order);
+
+	return result;
+}
+
+function oui(mac) {
+	var m, l = 0, r = ouiData.length / 3 - 1;
+	var mac1 = parseInt(mac.replace(/[^a-fA-F0-9]/g, ''), 16);
+
+	while (l <= r) {
+		m = l + Math.floor((r - l) / 2);
+
+		var mask = (0xffffffffffff -
+					(Math.pow(2, 48 - ouiData[m * 3 + 1]) - 1));
+
+		var mac1_hi = ((mac1 / 0x10000) & (mask / 0x10000)) >>> 0;
+		var mac1_lo = ((mac1 &  0xffff) & (mask &  0xffff)) >>> 0;
+
+		var mac2 = parseInt(ouiData[m * 3], 16);
+		var mac2_hi = (mac2 / 0x10000) >>> 0;
+		var mac2_lo = (mac2 &  0xffff) >>> 0;
+
+		if (mac1_hi === mac2_hi && mac1_lo === mac2_lo)
+			return ouiData[m * 3 + 2];
+
+		if (mac2_hi > mac1_hi ||
+			(mac2_hi === mac1_hi && mac2_lo > mac1_lo))
+			r = m - 1;
+		else
+			l = m + 1;
+	}
+
+	return null;
+}
+
+
+function fetchData(period)
+{
+	XHR.get(L.url('admin/nlbw/data'), { period: period, group_by: 'family,mac,ip,layer7', order_by: '-rx_bytes,-tx_bytes' }, function(xhr, res) {
+		if (res !== null && typeof(res) === 'object' && typeof(res.columns) === 'object' && typeof(res.data) === 'object')
+			trafficData = res;
+
+		var addrs = query(null, ['ip'], null);
+		var ipAddrs = [];
+
+		for (var i = 0; i < addrs.length; i++)
+			if (ipAddrs.indexOf(addrs[i].ip) < 0)
+				ipAddrs.push(addrs[i].ip);
+
+		renderHostData();
+		renderLayer7Data();
+		renderIPv6Data();
+
+		XHR.get(L.url('admin/nlbw/ptr', ipAddrs.join('/')), null, function(xhr, res) {
+			if (res !== null && typeof(res) === 'object')
+				hostNames = res;
+		});
+	});
+}
+
+function renderPeriods()
+{
+	var sel = document.getElementById('nlbw.period');
+
+	for (var e, i = trafficPeriods.length - 1; e = trafficPeriods[i]; i--) {
+		var d1 = new Date(e);
+		var d2, pd;
+
+		if (i) {
+			d2 = new Date(trafficPeriods[i - 1]);
+			d2.setDate(d2.getDate() - 1);
+			pd = '%04d-%02d-%02d'.format(d1.getFullYear(), d1.getMonth() + 1, d1.getDate());
+		}
+		else {
+			d2 = new Date();
+			pd = '';
+		}
+
+		var opt = document.createElement('option');
+		    opt.setAttribute('data-duration', (d2.getTime() - d1.getTime()) / 1000);
+		    opt.value = pd;
+		    opt.text = '%04d-%02d-%02d - %04d-%02d-%02d'.format(
+				d1.getFullYear(), d1.getMonth() + 1, d1.getDate(),
+				d2.getFullYear(), d2.getMonth() + 1, d2.getDate());
+
+		sel.appendChild(opt);
+	}
+
+	sel.selectedIndex = sel.childNodes.length - 1;
+	sel.style.display = '';
+
+	sel.onchange = function(ev) {
+		L.hideTooltip(ev);
+		fetchData(sel.options[sel.selectedIndex].value);
+	}
+}
+
+function renderHostDetail(tooltip)
+{
+	var key = this.getAttribute('href').substr(1),
+	    col = this.getAttribute('data-col'),
+	    label = this.getAttribute('data-tooltip');
+
+	var detailData = query(
+		function(c, r) {
+			return ((r[c.mac] === key || r[c.ip] === key) &&
+			        (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0));
+		},
+		[col],
+		function(r1, r2) {
+			return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
+		}
+	);
+
+	var rxData = [], txData = [];
+
+	L.dom.content(tooltip, [
+		E('div', { 'class': 'head' }, [
+			E('div', { 'class': 'pie' }, [
+				E('label', _('Download')),
+				E('canvas', { 'id': 'bubble-pie1', 'width': 100, 'height': 100 })
+			]),
+			E('div', { 'class': 'pie' }, [
+				E('label', _('Upload')),
+				E('canvas', { 'id': 'bubble-pie2', 'width': 100, 'height': 100 })
+			]),
+			E('div', { 'class': 'kpi' }, [
+				E('ul', [
+					E('li', _('Hostname: <big id="bubble-hostname">example.org</big>')),
+					E('li', _('Vendor: <big id="bubble-vendor">Example Corp.</big>'))
+				])
+			])
+		]),
+		E('div', { 'class': 'table' }, [
+			E('div', { 'class': 'tr table-titles' }, [
+				E('div', { 'class': 'th' }, label || col),
+				E('div', { 'class': 'th' }, _('Conn.')),
+				E('div', { 'class': 'th' }, _('Down. (Bytes)')),
+				E('div', { 'class': 'th' }, _('Down. (Pkts.)')),
+				E('div', { 'class': 'th' }, _('Up. (Bytes)')),
+				E('div', { 'class': 'th' }, _('Up. (Pkts.)')),
+			])
+		])
+	]);
+
+	var rows = [];
+
+	for (var i = 0; i < detailData.length; i++) {
+		var rec = detailData[i],
+		    cell = E('div', rec[col] || _('other'));
+
+		rows.push([
+			cell,
+			'%1000.2m'.format(rec.conns),
+			'%1024.2mB'.format(rec.rx_bytes),
+			'%1000.2mP'.format(rec.rx_pkts),
+			'%1024.2mB'.format(rec.tx_bytes),
+			'%1000.2mP'.format(rec.tx_pkts)
+		]);
+
+		rxData.push({
+			label: ['%s: %%1024.2mB'.format(rec[col] || _('other')), cell],
+			value: rec.rx_bytes
+		});
+
+		txData.push({
+			label: ['%s: %%1024.2mB'.format(rec[col] || _('other')), cell],
+			value: rec.tx_bytes
+		});
+	}
+
+	cbi_update_table(tooltip.lastElementChild, rows);
+
+	pie(tooltip.querySelector('#bubble-pie1'), rxData);
+	pie(tooltip.querySelector('#bubble-pie2'), txData);
+
+	var mac = key.toUpperCase();
+	var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null;
+
+	if (!name)
+		for (var i = 0; i < detailData.length; i++)
+			if ((name = hostNames[detailData[i].ip]) !== undefined)
+				break;
+
+	if (mac !== '00:00:00:00:00:00') {
+		kpi(tooltip.querySelector('#bubble-hostname'), name);
+		kpi(tooltip.querySelector('#bubble-vendor'), oui(mac));
+	}
+	else {
+		kpi(tooltip.querySelector('#bubble-hostname'));
+		kpi(tooltip.querySelector('#bubble-vendor'));
+	}
+
+	var rect = this.getBoundingClientRect(), x, y;
+
+	if ('ontouchstart' in window || window.innerWidth <= 992) {
+		var vpHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
+		    scrollFrom = window.pageYOffset,
+		    scrollTo = scrollFrom + rect.top - vpHeight * 0.5,
+		    start = null;
+
+		tooltip.style.top = (rect.top + rect.height + window.pageYOffset) + 'px';
+		tooltip.style.left = 0;
+
+		var scrollStep = function(timestamp) {
+			if (!start)
+				start = timestamp;
+
+			var duration = Math.max(timestamp - start, 1);
+			if (duration < 100) {
+				document.body.scrollTop = scrollFrom + (scrollTo - scrollFrom) * (duration / 100);
+				window.requestAnimationFrame(scrollStep);
+			}
+			else {
+				document.body.scrollTop = scrollTo;
+			}
+		};
+
+		window.requestAnimationFrame(scrollStep);
+	}
+	else {
+		x = rect.left + rect.width + window.pageXOffset,
+	    y = rect.top + window.pageYOffset;
+
+		if ((y + tooltip.offsetHeight) > (window.innerHeight + window.pageYOffset))
+			y -= ((y + tooltip.offsetHeight) - (window.innerHeight + window.pageYOffset));
+
+		tooltip.style.top = y + 'px';
+		tooltip.style.left = x + 'px';
+	}
+
+	return false;
+}
+
+function formatHostname(dns)
+{
+	if (dns === undefined || dns === null || dns === '')
+		return '-';
+
+	dns = dns.split('.')[0];
+
+	if (dns.length > 12)
+		return '<span title="%q">%h…</span>'.format(dns, dns.substr(0, 12));
+
+	return '%h'.format(dns);
+}
+
+function renderHostData()
+{
+	var trafData = [], connData = [];
+	var rx_total = 0, tx_total = 0, conn_total = 0;
+
+	var hostData = query(
+		function(c, r) {
+			return (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0);
+		},
+		['mac'],
+		//function(c, r) {
+		//	return (r[c.mac] !== '00:00:00:00:00:00') ? r[c.mac] : r[c.ip];
+		//},
+		function(r1, r2) {
+			return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
+		}
+	);
+
+	var rows = [];
+
+	for (var i = 0; i < hostData.length; i++) {
+		var rec = hostData[i],
+		    mac = rec.mac.toUpperCase(),
+		    key = (mac !== '00:00:00:00:00:00') ? mac : rec.ip,
+		    dns = hostInfo[mac] ? hostInfo[mac].name : null;
+
+		var cell = E('div', formatHostname(dns));
+
+		rows.push([
+			cell,
+			E('a', {
+				'href':         '#' + rec.mac,
+				'data-col':     'ip',
+				'data-tooltip': _('Source IP')
+			}, (mac !== '00:00:00:00:00:00') ? mac : _('other')),
+			E('a', {
+				'href':         '#' + rec.mac,
+				'data-col':     'layer7',
+				'data-tooltip': _('Protocol')
+			}, '%1000.2m'.format(rec.conns)),
+			'%1024.2mB'.format(rec.rx_bytes),
+			'%1000.2mP'.format(rec.rx_pkts),
+			'%1024.2mB'.format(rec.tx_bytes),
+			'%1000.2mP'.format(rec.tx_pkts)
+		]);
+
+		trafData.push({
+			value: rec.rx_bytes + rec.tx_bytes,
+			label: ["%s: %%.2mB".format(key), cell]
+		});
+
+		connData.push({
+			value: rec.conns,
+			label: ["%s: %%.2m".format(key), cell]
+		});
+
+		rx_total += rec.rx_bytes;
+		tx_total += rec.tx_bytes;
+		conn_total += rec.conns;
+	}
+
+	cbi_update_table('#host-data', rows, E('em', [
+		_('No data recorded yet.'), ' ',
+		E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
+	]));
+
+	pie('traf-pie', trafData);
+	pie('conn-pie', connData);
+
+	kpi('rx-total', '%1024.2mB'.format(rx_total));
+	kpi('tx-total', '%1024.2mB'.format(tx_total));
+	kpi('conn-total', '%1000m'.format(conn_total));
+	kpi('host-total', '%u'.format(hostData.length));
+}
+
+function renderLayer7Data()
+{
+	var rxData = [], txData = [];
+	var topConn = [[0],[0],[0]], topRx = [[0],[0],[0]], topTx = [[0],[0],[0]];
+
+	var layer7Data = query(
+		null, ['layer7'],
+		function(r1, r2) {
+			return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
+		}
+	);
+
+	var rows = [];
+
+	for (var i = 0, c = 0; i < layer7Data.length; i++) {
+		var rec = layer7Data[i],
+		    cell = E('div', rec.layer7 || _('other'));
+
+		rows.push([
+			cell,
+			'%1000m'.format(rec.conns),
+			'%1024.2mB'.format(rec.rx_bytes),
+			'%1000.2mP'.format(rec.rx_pkts),
+			'%1024.2mB'.format(rec.tx_bytes),
+			'%1000.2mP'.format(rec.tx_pkts)
+		]);
+
+		rxData.push({
+			value: rec.rx_bytes,
+			label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell]
+		});
+
+		txData.push({
+			value: rec.tx_bytes,
+			label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell]
+		});
+
+		if (rec.layer7) {
+			topRx.push([rec.rx_bytes, rec.layer7]);
+			topTx.push([rec.tx_bytes, rec.layer7]);
+			topConn.push([rec.conns, rec.layer7]);
+		}
+	}
+
+	cbi_update_table('#layer7-data', rows, E('em', [
+		_('No data recorded yet.'), ' ',
+		E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
+	]));
+
+	pie('layer7-rx-pie', rxData);
+	pie('layer7-tx-pie', txData);
+
+	topRx.sort(function(a, b) { return b[0] - a[0] });
+	topTx.sort(function(a, b) { return b[0] - a[0] });
+	topConn.sort(function(a, b) { return b[0] - a[0] });
+
+	kpi('layer7-total', layer7Data.length);
+	kpi('layer7-most-rx', topRx[0][1], topRx[1][1], topRx[2][1]);
+	kpi('layer7-most-tx', topTx[0][1], topTx[1][1], topTx[2][1]);
+	kpi('layer7-most-conn', topConn[0][1], topConn[1][1], topConn[2][1]);
+}
+
+function renderIPv6Data()
+{
+	var col       = { },
+	    rx4_total = 0,
+	    tx4_total = 0,
+	    rx6_total = 0,
+	    tx6_total = 0,
+	    v4_total  = 0,
+	    v6_total  = 0,
+	    ds_total  = 0,
+	    families  = { },
+	    records   = { };
+
+	ipv6Data = query(
+		null, ['family', 'mac'],
+		function(r1, r2) {
+			return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
+		}
+	);
+
+	for (var i = 0, c = 0; i < ipv6Data.length; i++) {
+		var rec = ipv6Data[i],
+		    mac = rec.mac.toUpperCase(),
+		    ip  = rec.ip,
+		    fam = families[mac] || 0,
+		    recs = records[mac] || {};
+
+		if (rec.family == 4) {
+			rx4_total += rec.rx_bytes;
+			tx4_total += rec.tx_bytes;
+			fam |= 1;
+		}
+		else {
+			rx6_total += rec.rx_bytes;
+			tx6_total += rec.tx_bytes;
+			fam |= 2;
+		}
+
+		recs[rec.family] = rec;
+		records[mac] = recs;
+
+		families[mac] = fam;
+	}
+
+	for (var mac in families) {
+		switch (families[mac])
+		{
+		case 3:
+			ds_total++;
+			break;
+
+		case 2:
+			v6_total++;
+			break;
+
+		case 1:
+			v4_total++;
+			break;
+		}
+	}
+
+	var rows = [];
+
+	for (var mac in records) {
+		if (mac === '00:00:00:00:00:00')
+			continue;
+
+		var dns = hostInfo[mac] ? hostInfo[mac].name : null,
+		    rec4 = records[mac][4],
+		    rec6 = records[mac][6];
+
+		rows.push([
+			formatHostname(dns),
+			mac,
+			[ E('span', _('IPv4')),
+			  E('span', _('IPv6')) ],
+			[ E('span', rec4 ? '%1024.2mB'.format(rec4.rx_bytes) : '-'),
+			  E('span', rec6 ? '%1024.2mB'.format(rec6.rx_bytes) : '-') ],
+			[ E('span', rec4 ? '%1000.2mP'.format(rec4.rx_pkts)  : '-'),
+			  E('span', rec6 ? '%1000.2mP'.format(rec6.rx_pkts)  : '-') ],
+			[ E('span', rec4 ? '%1024.2mB'.format(rec4.tx_bytes) : '-'),
+			  E('span', rec6 ? '%1024.2mB'.format(rec6.tx_bytes) : '-') ],
+			[ E('span', rec4 ? '%1000.2mP'.format(rec4.tx_pkts)  : '-'),
+			  E('span', rec6 ? '%1000.2mP'.format(rec6.tx_pkts)  : '-') ]
+		]);
+	}
+
+	cbi_update_table('#ipv6-data', rows, E('em', [
+		_('No data recorded yet.'), ' ',
+		E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
+	]));
+
+	var shareData = [], hostsData = [];
+
+	if (rx4_total > 0 || tx4_total > 0)
+		shareData.push({
+			value: rx4_total + tx4_total,
+			label: ["IPv4: %.2mB"],
+			color: 'hsl(140, 100%, 50%)'
+	        });
+
+	if (rx6_total > 0 || tx6_total > 0)
+		shareData.push({
+			value: rx6_total + tx6_total,
+			label: ["IPv6: %.2mB"],
+			color: 'hsl(180, 100%, 50%)'
+		});
+
+	if (v4_total > 0)
+		hostsData.push({
+			value: v4_total,
+			label: [_('%d IPv4-only hosts')],
+			color: 'hsl(140, 100%, 50%)'
+		});
+
+	if (v6_total > 0)
+		hostsData.push({
+			value: v6_total,
+			label: [_('%d IPv6-only hosts')],
+			color: 'hsl(180, 100%, 50%)'
+		});
+
+	if (ds_total > 0)
+		hostsData.push({
+			value: ds_total,
+			label: [_('%d dual-stack hosts')],
+			color: 'hsl(50, 100%, 50%)'
+		});
+
+	pie('ipv6-share-pie', shareData);
+	pie('ipv6-hosts-pie', hostsData);
+
+	kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total)));
+	kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total)));
+	kpi('ipv6-rx', '%1024.2mB'.format(rx6_total));
+	kpi('ipv6-tx', '%1024.2mB'.format(tx6_total));
+}
diff --git a/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm b/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm
index 616bcc52a1..3c7af928ff 100644
--- a/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm
+++ b/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm
@@ -1,1031 +1,155 @@
 <%#
- Copyright 2017 Jo-Philipp Wich <jo@mein.io>
+ Copyright 2017-2018 Jo-Philipp Wich <jo@mein.io>
  Licensed to the public under the Apache License 2.0.
 -%>
 
-<% css = [[
-
-	#chartjs-tooltip {
-		opacity: 0;
-		position: absolute;
-		background: rgba(0, 0, 0, .7);
-		color: white;
-		padding: 3px;
-		border-radius: 3px;
-		-webkit-transition: all .1s ease;
-		transition: all .1s ease;
-		pointer-events: none;
-		-webkit-transform: translate(-50%, 0);
-		transform: translate(-50%, 0);
-		z-index: 200;
-	}
-
-	#chartjs-tooltip.above {
-		-webkit-transform: translate(-50%, -100%);
-		transform: translate(-50%, -100%);
-	}
-
-	#chartjs-tooltip.above:before {
-		border: solid;
-		border-color: #111 transparent;
-		border-color: rgba(0, 0, 0, .8) transparent;
-		border-width: 8px 8px 0 8px;
-		bottom: 1em;
-		content: "";
-		display: block;
-		left: 50%;
-		top: 100%;
-		position: absolute;
-		z-index: 99;
-		-webkit-transform: translate(-50%, 0);
-		transform: translate(-50%, 0);
-	}
-
-	table {
-		border: 1px solid #999;
-		border-collapse: collapse;
-		margin: 0 0 2px !important;
-	}
-
-	th, td, table table td {
-		border: 1px solid #999;
-		text-align: right;
-		padding: 1px 3px !important;
-		white-space: nowrap;
-	}
-
-	tbody td {
-		border-bottom-color: #ccc;
-	}
-
-	tbody td[rowspan] {
-		border-bottom-color: #999;
-	}
-
-	tbody tr:last-child td {
-		border-bottom-color: #999;
-	}
-
-
-	.pie {
-		width: 200px;
-		display: inline-block;
-		margin: 20px;
-	}
-
-	.pie label {
-		font-weight: bold;
-		font-size: 14px;
-		display: block;
-		margin-bottom: 10px;
-		text-align: center;
-	}
-
-	.kpi {
-		display: inline-block;
-		margin: 80px 20px 20px;
-		vertical-align: top;
-	}
-
-	.kpi ul {
-		list-style: none;
-	}
-
-	.kpi li {
-		margin: 10px;
-		display: none;
-	}
-
-	.kpi big {
-		font-weight: bold;
-	}
-
-	#detail-bubble {
-		position: absolute;
-		opacity: 0;
-		visibility: hidden;
-	}
-
-	#detail-bubble.in {
-		opacity: 1;
-		visibility: visible;
-		transition: opacity 0.5s;
-	}
-
-	#detail-bubble > div {
-		border: 1px solid #ccc;
-		border-radius: 2px;
-		padding: 5px;
-		background: #fcfcfc;
-	}
-
-	#detail-bubble .head {
-		text-align: center;
-		white-space: nowrap;
-		position: relative;
-	}
-
-	#detail-bubble .head .dismiss {
-		top: 0;
-		right: 0;
-		width: 20px;
-		line-height: 20px;
-		text-align: center;
-		text-decoration: none;
-		font-weight: bold;
-		color: #000;
-		position: absolute;
-		font-size: 20px;
-	}
-
-	#detail-bubble .pie {
-		width: 100px;
-		margin: 5px;
-	}
-
-	#detail-bubble .kpi {
-		margin: 40px 5px 5px;
-		font-size: smaller;
-		text-align: left;
-	}
-
-	#detail-bubble .kpi ul {
-		margin: 0;
-	}
-
-	#bubble-arrow {
-		border: 1px solid #ccc;
-		border-width: 1px 0 0 1px;
-		background: #fcfcfc;
-		width: 15px;
-		height: 15px;
-		position: absolute;
-		left: 0;
-		top: -8px;
-		transform: rotate(45deg);
-		margin: 0 0 0 -8px;
-	}
-
-	tr.active > td {
-		border-bottom: 2px solid red;
-	}
-
-	tr.active > td.active {
-		border: 2px solid red;
-		border-bottom: none;
-	}
-
-	td.detail {
-		border: 2px solid red;
-		border-top: none;
-		opacity: 0;
-		transition: opacity 0.5s;
-	}
-
-	td.detail.in {
-		opacity: 1;
-	}
-
-	th.hostname,
-	td.hostname {
-		text-align: left;
-	}
-
-]] -%>
-
 <%+header%>
 
-<script type="text/javascript" src="<%=resource%>/nlbw.chart.min.js"></script>
-<script type="text/javascript">//<![CDATA[
-
-var chartRegistry = {},
-	trafficPeriods = [],
-	trafficData = { columns: [], data: [] },
-	hostNames = {},
-	hostInfo = <%=luci.util.serialize_json(luci.sys.net.host_hints())%>,
-	ouiData = [];
-
-
-function off(elem)
-{
-	var val = [0, 0];
-	do {
-		if (!isNaN(elem.offsetLeft) && !isNaN(elem.offsetTop)) {
-			val[0] += elem.offsetLeft;
-			val[1] += elem.offsetTop;
-		}
-	}
-	while ((elem = elem.offsetParent) != null);
-	return val;
-}
-
-Chart.defaults.global.customTooltips = function(tooltip) {
-	var tooltipEl = document.getElementById('chartjs-tooltip');
-
-	if (!tooltipEl) {
-		tooltipEl = document.createElement('div');
-		tooltipEl.setAttribute('id', 'chartjs-tooltip');
-		document.body.appendChild(tooltipEl);
-	}
-
-	if (!tooltip) {
-		if (tooltipEl.row)
-			tooltipEl.row.style.backgroundColor = '';
-
-		tooltipEl.style.opacity = 0;
-		return;
-	}
-
-	var pos = off(tooltip.chart.canvas);
-
-	tooltipEl.className = tooltip.yAlign;
-	tooltipEl.innerHTML = tooltip.text[0];
-
-	tooltipEl.style.opacity = 1;
-	tooltipEl.style.left = pos[0] + tooltip.x + 'px';
-	tooltipEl.style.top = pos[1] + tooltip.y - tooltip.caretHeight - tooltip.caretPadding + 'px';
-
-	var row = tooltip.text[1],
-	    hue = tooltip.text[2];
-
-	if (row && !isNaN(hue)) {
-		row.style.backgroundColor = 'hsl(%u, 100%%, 80%%)'.format(hue);
-		tooltipEl.row = row;
-	}
-};
-
-Chart.defaults.global.tooltipFontSize = 10;
-Chart.defaults.global.tooltipTemplate = function(tip) {
-	tip.label[0] = tip.label[0].format(tip.value);
-	return tip.label;
-};
-
-function kpi(id, val1, val2, val3)
-{
-	var e = document.getElementById(id);
-
-	if (val1 && val2 && val3)
-		e.innerHTML = '<%:%s, %s and %s%>'.format(val1, val2, val3);
-	else if (val1 && val2)
-		e.innerHTML = '<%:%s and %s%>'.format(val1, val2);
-	else if (val1)
-		e.innerHTML = val1;
-
-	e.parentNode.style.display = val1 ? 'list-item' : '';
-}
-
-function pie(id, data)
-{
-	data.sort(function(a, b) { return b.value - a.value });
-
-	if (data.length === 0 || (data.length === 1 && data[0].value === 0))
-		data[0] = {
-			value: 1,
-			color: '#cccccc',
-			label: [ '<%:no traffic%>' ]
-		};
-
-	for (var i = 0; i < data.length; i++) {
-		if (!data[i].color) {
-			var hue = 120 / (data.length-1) * i;
-			data[i].color = 'hsl(%u, 80%%, 50%%)'.format(hue);
-			data[i].label.push(hue);
-		}
-	}
-
-	var ctx = document.getElementById(id).getContext('2d');
-
-	if (chartRegistry.hasOwnProperty(id))
-		chartRegistry[id].destroy();
-
-	chartRegistry[id] = new Chart(ctx).Doughnut(data, {
-		segmentStrokeWidth: 1,
-		percentageInnerCutout: 30
-	});
-
-	return chartRegistry[id];
-}
-
-function query(filter, group, order)
-{
-	var keys = [], columns = {}, records = {}, result = [];
-
-	if (typeof(group) !== 'function' && typeof(group) !== 'object')
-		group = ['mac'];
-
-	for (var i = 0; i < trafficData.columns.length; i++)
-		columns[trafficData.columns[i]] = i;
-
-	for (var i = 0; i < trafficData.data.length; i++) {
-		var record = trafficData.data[i];
-
-		if (typeof(filter) === 'function' && filter(columns, record) !== true)
-			continue;
-
-		var key;
-
-		if (typeof(group) === 'function') {
-			key = group(columns, record);
-		}
-		else {
-			key = [];
-
-			for (var j = 0; j < group.length; j++)
-				if (columns.hasOwnProperty(group[j]))
-					key.push(record[columns[group[j]]]);
-
-			key = key.join(',');
-		}
-
-		if (!records.hasOwnProperty(key)) {
-			var rec = {};
-
-			for (var col in columns)
-				rec[col] = record[columns[col]];
-
-			records[key] = rec;
-			result.push(rec);
-		}
-		else {
-			records[key].conns    += record[columns.conns];
-			records[key].rx_bytes += record[columns.rx_bytes];
-			records[key].rx_pkts  += record[columns.rx_pkts];
-			records[key].tx_bytes += record[columns.tx_bytes];
-			records[key].tx_pkts  += record[columns.tx_pkts];
-		}
-	}
-
-	if (typeof(order) === 'function')
-		result.sort(order);
-
-	return result;
-}
-
-function oui(mac) {
-	var m, l = 0, r = ouiData.length / 3 - 1;
-	var mac1 = parseInt(mac.replace(/[^a-fA-F0-9]/g, ''), 16);
-
-	while (l <= r) {
-		m = l + Math.floor((r - l) / 2);
-
-		var mask = (0xffffffffffff -
-					(Math.pow(2, 48 - ouiData[m * 3 + 1]) - 1));
-
-		var mac1_hi = ((mac1 / 0x10000) & (mask / 0x10000)) >>> 0;
-		var mac1_lo = ((mac1 &  0xffff) & (mask &  0xffff)) >>> 0;
-
-		var mac2 = parseInt(ouiData[m * 3], 16);
-		var mac2_hi = (mac2 / 0x10000) >>> 0;
-		var mac2_lo = (mac2 &  0xffff) >>> 0;
-
-		if (mac1_hi === mac2_hi && mac1_lo === mac2_lo)
-			return ouiData[m * 3 + 2];
-
-		if (mac2_hi > mac1_hi ||
-			(mac2_hi === mac1_hi && mac2_lo > mac1_lo))
-			r = m - 1;
-		else
-			l = m + 1;
-	}
-
-	return null;
-}
-
-
-function fetchData(period)
-{
-	XHR.get('<%=url("admin/nlbw/data")%>', { period: period, group_by: 'family,mac,ip,layer7', order_by: '-rx_bytes,-tx_bytes' }, function(xhr, res) {
-		if (res !== null && typeof(res) === 'object' && typeof(res.columns) === 'object' && typeof(res.data) === 'object')
-			trafficData = res;
-
-		var addrs = query(null, ['ip'], null);
-		var ipAddrs = [];
-
-		for (var i = 0; i < addrs.length; i++)
-			if (ipAddrs.indexOf(addrs[i].ip) < 0)
-				ipAddrs.push(addrs[i].ip);
-
-		renderHostData();
-		renderLayer7Data();
-		renderIPv6Data();
-
-		XHR.get('<%=url("admin/nlbw/ptr")%>/' + ipAddrs.join('/'), null, function(xhr, res) {
-			if (res !== null && typeof(res) === 'object')
-				hostNames = res;
-		});
-	});
-}
-
-function switchTab(tab)
-{
-	bubbleDismiss();
-
-	return cbi_t_switch('nlbw', tab);
-}
-
-function renderPeriods()
-{
-	var sel = document.getElementById('nlbw.period');
-
-	for (var e, i = trafficPeriods.length - 1; e = trafficPeriods[i]; i--) {
-		var d1 = new Date(e);
-		var d2, pd;
-
-		if (i) {
-			d2 = new Date(trafficPeriods[i - 1]);
-			d2.setDate(d2.getDate() - 1);
-			pd = '%04d-%02d-%02d'.format(d1.getFullYear(), d1.getMonth() + 1, d1.getDate());
-		}
-		else {
-			d2 = new Date();
-			pd = '';
-		}
-
-		var opt = document.createElement('option');
-		    opt.setAttribute('data-duration', (d2.getTime() - d1.getTime()) / 1000);
-		    opt.value = pd;
-		    opt.text = '%04d-%02d-%02d - %04d-%02d-%02d'.format(
-				d1.getFullYear(), d1.getMonth() + 1, d1.getDate(),
-				d2.getFullYear(), d2.getMonth() + 1, d2.getDate());
-
-		sel.appendChild(opt);
-	}
-
-	sel.selectedIndex = sel.childNodes.length - 1;
-	sel.style.display = '';
-
-	sel.onchange = function() {
-		bubbleDismiss();
-		fetchData(sel.options[sel.selectedIndex].value);
-	}
-}
-
-function renderHostDetail()
-{
-	var key = this.getAttribute('href').substr(1),
-	    col = this.getAttribute('data-col'),
-	    label = this.getAttribute('data-label'),
-	    bubble = document.getElementById('detail-bubble'),
-	    arrow = document.getElementById('bubble-arrow'),
-	    table = document.getElementById('bubble-table');
-
-	bubbleDismiss();
-
-	var detailData = query(
-		function(c, r) {
-			return ((r[c.mac] === key || r[c.ip] === key) &&
-			        (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0));
-		},
-		[col],
-		function(r1, r2) {
-			return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
-		}
-	);
-
-	var rxData = [], txData = [];
-
-	table.innerHTML = '<tr>' +
-		'<th>%s</th>'.format(label || col) +
-		'<th><%:Conn.%></th>' +
-		'<th colspan="2"><%:Down. (Bytes / Pkts.)%></th>' +
-		'<th colspan="2"><%:Up. (Bytes / Pkts.)%></th>' +
-	'</tr>';
-
-	for (var i = 0; i < detailData.length; i++) {
-		var rec = detailData[i],
-		    row = table.insertRow(-1);
-
-		row.insertCell(-1).innerHTML = rec[col] || '<%:other%>';
-		row.insertCell(-1).innerHTML = "%1000.2m".format(rec.conns);
-		row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes);
-		row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts);
-		row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes);
-		row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts);
-
-		rxData.push({
-			label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row],
-			value: rec.rx_bytes
-		});
-
-		txData.push({
-			label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row],
-			value: rec.tx_bytes
-		});
-	}
-
-	pie('bubble-pie1', rxData);
-	pie('bubble-pie2', txData);
-
-	var mac = key.toUpperCase();
-	var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null;
-
-	if (!name)
-		for (var i = 0; i < detailData.length; i++)
-			if ((name = hostNames[detailData[i].ip]) !== undefined)
-				break;
+<link rel="stylesheet" href="<%=resource%>/view/nlbw.css" />
 
-	if (mac !== '00:00:00:00:00:00') {
-		kpi('bubble-hostname', name);
-		kpi('bubble-vendor', oui(mac));
-	}
-	else {
-		kpi('bubble-hostname');
-		kpi('bubble-vendor');
-	}
-
-	var tr = this.parentNode.parentNode,
-	    xy = off(tr),
-	    xy2 = off(this);
-
-	bubble.style.width = tr.offsetWidth + 'px';
-	bubble.style.left = xy[0] + 'px';
-	bubble.style.top = (xy[1] + tr.offsetHeight) + 'px';
-	arrow.style.left = Math.floor(xy2[0] + this.offsetWidth / 2 - xy[0]) + 'px';
-
-	bubble.className = 'in';
-
-	return false;
-}
-
-function formatHostname(dns)
-{
-	if (dns === undefined || dns === null || dns === '')
-		return '-';
-
-	dns = dns.split('.')[0];
-
-	if (dns.length > 12)
-		return '<span title="%q">%h…</span>'.format(dns, dns.substr(0, 12));
-
-	return '%h'.format(dns);
-}
-
-function renderHostData()
-{
-	var trafData = [], connData = [];
-	var rx_total = 0, tx_total = 0, conn_total = 0;
-	var table = document.getElementById('host-data');
-
-	var hostData = query(
-		function(c, r) {
-			return (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0);
-		},
-		['mac'],
-		//function(c, r) {
-		//	return (r[c.mac] !== '00:00:00:00:00:00') ? r[c.mac] : r[c.ip];
-		//},
-		function(r1, r2) {
-			return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
-		}
-	);
-
-	while (table.rows.length > 1)
-		table.deleteRow(1);
-
-	for (var i = 0; i < hostData.length; i++) {
-		var row = table.insertRow(-1),
-		    cell = row.insertCell(-1),
-		    rec = hostData[i],
-		    mac = rec.mac.toUpperCase(),
-		    key = (mac !== '00:00:00:00:00:00') ? mac : rec.ip,
-		    dns = hostInfo[mac] ? hostInfo[mac].name : null;
-
-		var link1 = document.createElement('a');
-		    link1.onclick = renderHostDetail;
-		    link1.href = '#' + rec.mac;
-		    link1.setAttribute('data-col', 'ip');
-		    link1.setAttribute('data-label', '<%:Source IP%>');
-		    link1.innerHTML = (mac !== '00:00:00:00:00:00') ? mac : '<%:other%>';
-
-		var link2 = document.createElement('a');
-		    link2.onclick = renderHostDetail;
-		    link2.href = '#' + rec.mac;
-		    link2.setAttribute('data-col', 'layer7');
-		    link2.setAttribute('data-label', '<%:Protocol%>');
-		    link2.innerHTML = "%1000.2m".format(rec.conns);
-
-		cell.innerHTML = formatHostname(dns);
-		cell.className = 'hostname';
-
-		row.insertCell(-1).appendChild(link1);
-		row.insertCell(-1).appendChild(link2);
-		row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes);
-		row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts);
-		row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes);
-		row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts);
-
-		trafData.push({
-			value: rec.rx_bytes + rec.tx_bytes,
-			label: ["%s: %%.2mB".format(key), row]
-		});
-
-		connData.push({
-			value: rec.conns,
-			label: ["%s: %%.2m".format(key), row]
-		});
-
-		rx_total += rec.rx_bytes;
-		tx_total += rec.tx_bytes;
-		conn_total += rec.conns;
-	}
-
-	if (table.rows.length === 1) {
-		var cell = table.insertRow(-1).insertCell(-1);
-
-		cell.setAttribute('colspan', 6);
-		cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
-	}
-
-	pie('traf-pie', trafData);
-	pie('conn-pie', connData);
-
-	kpi('rx-total', '%1024.2mB'.format(rx_total));
-	kpi('tx-total', '%1024.2mB'.format(tx_total));
-	kpi('conn-total', '%1000m'.format(conn_total));
-	kpi('host-total', '%u'.format(hostData.length));
-}
-
-function renderLayer7Data()
-{
-	var rxData = [], txData = [];
-	var topConn = [[0],[0],[0]], topRx = [[0],[0],[0]], topTx = [[0],[0],[0]];
-	var table = document.getElementById('layer7-data');
-
-	var layer7Data = query(
-		null, ['layer7'],
-		function(r1, r2) {
-			return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
-		}
-	);
-
-	while (table.rows.length > 1)
-		table.deleteRow(1);
-
-	for (var i = 0, c = 0; i < layer7Data.length; i++) {
-		var rec = layer7Data[i],
-		    row = table.insertRow(-1);
-
-		rxData.push({
-			value: rec.rx_bytes,
-			label: ["%s: %%.2mB".format(rec.layer7 || '<%:other%>'), row]
-		});
-
-		txData.push({
-			value: rec.tx_bytes,
-			label: ["%s: %%.2mB".format(rec.layer7 || '<%:other%>'), row]
-		});
-
-		row.insertCell(-1).innerHTML = rec.layer7 || '<%:other%>';
-		row.insertCell(-1).innerHTML = "%1000m".format(rec.conns);
-		row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes);
-		row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts);
-		row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes);
-		row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts);
-
-		if (rec.layer7) {
-			topRx.push([rec.rx_bytes, rec.layer7]);
-			topTx.push([rec.tx_bytes, rec.layer7]);
-			topConn.push([rec.conns, rec.layer7]);
-		}
-	}
-
-	if (table.rows.length === 1) {
-		var cell = table.insertRow(-1).insertCell(-1);
-
-		cell.setAttribute('colspan', 6);
-		cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
-	}
-
-	pie('layer7-rx-pie', rxData);
-	pie('layer7-tx-pie', txData);
-
-	topRx.sort(function(a, b) { return b[0] - a[0] });
-	topTx.sort(function(a, b) { return b[0] - a[0] });
-	topConn.sort(function(a, b) { return b[0] - a[0] });
-
-	kpi('layer7-total', layer7Data.length);
-	kpi('layer7-most-rx', topRx[0][1], topRx[1][1], topRx[2][1]);
-	kpi('layer7-most-tx', topTx[0][1], topTx[1][1], topTx[2][1]);
-	kpi('layer7-most-conn', topConn[0][1], topConn[1][1], topConn[2][1]);
-}
-
-function renderIPv6Data()
-{
-	var table     = document.getElementById('ipv6-data'),
-	    col       = { },
-	    rx4_total = 0,
-	    tx4_total = 0,
-	    rx6_total = 0,
-	    tx6_total = 0,
-	    v4_total  = 0,
-	    v6_total  = 0,
-	    ds_total  = 0,
-	    families  = { },
-	    records   = { };
-
-	ipv6Data = query(
-		null, ['family', 'mac'],
-		function(r1, r2) {
-			return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
-		}
-	);
-
-	for (var i = 0, c = 0; i < ipv6Data.length; i++) {
-		var rec = ipv6Data[i],
-		    mac = rec.mac.toUpperCase(),
-		    ip  = rec.ip,
-		    fam = families[mac] || 0,
-		    recs = records[mac] || {};
-
-		if (rec.family == 4) {
-			rx4_total += rec.rx_bytes;
-			tx4_total += rec.tx_bytes;
-			fam |= 1;
-		}
-		else {
-			rx6_total += rec.rx_bytes;
-			tx6_total += rec.tx_bytes;
-			fam |= 2;
-		}
-
-		recs[rec.family] = rec;
-		records[mac] = recs;
-
-		families[mac] = fam;
-	}
-
-	for (var mac in families) {
-		switch (families[mac])
-		{
-		case 3:
-			ds_total++;
-			break;
-
-		case 2:
-			v6_total++;
-			break;
-
-		case 1:
-			v4_total++;
-			break;
-		}
-	}
-
-	while (table.rows.length > 1)
-		table.deleteRow(1);
-
-	for (var mac in records) {
-		if (mac === '00:00:00:00:00:00')
-			continue;
-
-		var row = table.insertRow(-1),
-		    cell1 = row.insertCell(-1),
-		    cell2 = row.insertCell(-1),
-		    dns = hostInfo[mac] ? hostInfo[mac].name : null,
-		    rec4 = records[mac][4],
-		    rec6 = records[mac][6];
-
-		cell1.setAttribute('rowspan', 2);
-		cell1.innerHTML = formatHostname(dns);
-		cell1.className = 'hostname';
-
-		cell2.setAttribute('rowspan', 2);
-		cell2.innerHTML = mac;
-
-		row.insertCell(-1).innerHTML = 'IPv4';
-		row.insertCell(-1).innerHTML = rec4 ? "%1024.2mB".format(rec4.rx_bytes) : '-';
-		row.insertCell(-1).innerHTML = rec4 ? "%1000.2mP".format(rec4.rx_pkts)  : '-';
-		row.insertCell(-1).innerHTML = rec4 ? "%1024.2mB".format(rec4.tx_bytes) : '-';
-		row.insertCell(-1).innerHTML = rec4 ? "%1000.2mP".format(rec4.tx_pkts)  : '-';
-
-		row = table.insertRow(-1);
-
-		row.insertCell(-1).innerHTML = 'IPv6';
-		row.insertCell(-1).innerHTML = rec6 ? "%1024.2mB".format(rec6.rx_bytes) : '-';
-		row.insertCell(-1).innerHTML = rec6 ? "%1000.2mP".format(rec6.rx_pkts)  : '-';
-		row.insertCell(-1).innerHTML = rec6 ? "%1024.2mB".format(rec6.tx_bytes) : '-';
-		row.insertCell(-1).innerHTML = rec6 ? "%1000.2mP".format(rec6.tx_pkts)  : '-';
-	}
-
-	if (table.rows.length === 1) {
-		var cell = table.insertRow(-1).insertCell(-1);
-
-		cell.setAttribute('colspan', 7);
-		cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
-	}
-
-	var shareData = [], hostsData = [];
-
-	if (rx4_total > 0 || tx4_total > 0)
-		shareData.push({
-			value: rx4_total + tx4_total,
-			label: ["IPv4: %.2mB"],
-			color: 'hsl(140, 100%, 50%)'
-	        });
-
-	if (rx6_total > 0 || tx6_total > 0)
-		shareData.push({
-			value: rx6_total + tx6_total,
-			label: ["IPv6: %.2mB"],
-			color: 'hsl(180, 100%, 50%)'
-		});
-
-	if (v4_total > 0)
-		hostsData.push({
-			value: v4_total,
-			label: ["<%:%d IPv4-only hosts%>"],
-			color: 'hsl(140, 100%, 50%)'
-		});
-
-	if (v6_total > 0)
-		hostsData.push({
-			value: v6_total,
-			label: ["<%:%d IPv6-only hosts%>"],
-			color: 'hsl(180, 100%, 50%)'
-		});
-
-	if (ds_total > 0)
-		hostsData.push({
-			value: ds_total,
-			label: ["<%:%d dual-stack hosts%>"],
-			color: 'hsl(50, 100%, 50%)'
-		});
-
-	pie('ipv6-share-pie', shareData);
-	pie('ipv6-hosts-pie', hostsData);
-
-	kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total)));
-	kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total)));
-	kpi('ipv6-rx', '%1024.2mB'.format(rx6_total));
-	kpi('ipv6-tx', '%1024.2mB'.format(tx6_total));
-}
-
-function bubbleDismiss()
-{
-	var bubble = document.getElementById('detail-bubble');
-
-	bubble.className = '';
-	document.body.appendChild(bubble);
-
-	return false;
-}
+<script type="text/javascript" src="<%=resource%>/nlbw.chart.min.js"></script>
+<script type="text/javascript" src="<%=resource%>/view/nlbw.js"></script>
 
+<h2 name="content"><%:Netlink Bandwidth Monitor%></h2>
 
-//]]></script>
+<p>
+	<%:Select accounting period:%>
+	<select id="nlbw.period" style="display:none"></select>
+</p>
 
-<h2 name="content"><%:Netlink Bandwidth Monitor%></h2>
+<hr />
 
-<div id="detail-bubble">
-	<span id="bubble-arrow"></span>
-	<div>
+<div>
+	<div class="cbi-section" data-tab="traffic" data-tab-title="<%:Traffic Distribution%>">
 		<div class="head">
-			<a class="dismiss" href="#" onclick="this.blur(); return bubbleDismiss()">×</a>
 			<div class="pie">
-				<label>Download</label>
-				<canvas id="bubble-pie1" width="100" height="100"></canvas>
+				<label><%:Traffic / Host%></label>
+				<canvas id="traf-pie" width="200" height="200"></canvas>
 			</div>
+
 			<div class="pie">
-				<label>Upload</label>
-				<canvas id="bubble-pie2" width="100" height="100"></canvas>
+				<label><%:Connections / Host%></label>
+				<canvas id="conn-pie" width="200" height="200"></canvas>
 			</div>
+
 			<div class="kpi">
 				<ul>
-					<li><%_Hostname: <big id="bubble-hostname">example.org</big>%></li>
-					<li><%_Vendor: <big id="bubble-vendor">Example Corp.</big>%></li>
+					<li><%_<big id="host-total">0</big> hosts%></li>
+					<li><%_<big id="rx-total">0</big> download%></li>
+					<li><%_<big id="tx-total">0</big> upload%></li>
+					<li><%_<big id="conn-total">0</big> connections%></li>
 				</ul>
 			</div>
 		</div>
-		<table id="bubble-table"></table>
+		<div class="table" id="host-data">
+			<div class="tr table-titles">
+				<div class="th left hostname"><%:Host%></div>
+				<div class="th right"><%:MAC%></div>
+				<div class="th right"><%:Connections%></div>
+				<div class="th right"><%:Download (Bytes)%></div>
+				<div class="th right"><%:Download (Packets)%></div>
+				<div class="th right"><%:Upload (Bytes)%></div>
+				<div class="th right"><%:Upload (Packets)%></div>
+			</div>
+			<div class="tr placeholder">
+				<div class="td">
+					<em class="spinning"><%:Collecting data...%></em>
+				</div>
+			</div>
+		</div>
 	</div>
-</div>
 
-<hr />
-
-<p>
-	<%:Select accounting period:%>
-	<select id="nlbw.period" style="display:none"></select>
-</p>
-
-<hr />
-
-<ul class="cbi-tabmenu">
-	<li id="tab.nlbw.traffic" class="cbi-tab"><a href="#" onclick="return switchTab('traffic')"><%:Traffic Distribution%></a></li>
-	<li id="tab.nlbw.layer7" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('layer7')"><%:Application Protocols%></a></li>
-	<li id="tab.nlbw.ipv6" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('ipv6')"><%:IPv6%></a></li>
-	<li id="tab.nlbw.export" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('export')"><%:Export%></a></li>
-</ul>
+	<div class="cbi-section" data-tab="layer7" data-tab-title="<%:Application Protocols%>">
+		<div class="head">
+			<div class="pie">
+				<label><%:Download / Application%></label>
+				<canvas id="layer7-rx-pie" width="200" height="200"></canvas>
+			</div>
 
-<div class="cbi-section" id="container.nlbw.traffic">
-	<div>
-		<div class="pie">
-			<label><%:Traffic / Host%></label>
-			<canvas id="traf-pie" width="200" height="200"></canvas>
-		</div>
+			<div class="pie">
+				<label><%:Upload / Application%></label>
+				<canvas id="layer7-tx-pie" width="200" height="200"></canvas>
+			</div>
 
-		<div class="pie">
-			<label><%:Connections / Host%></label>
-			<canvas id="conn-pie" width="200" height="200"></canvas>
+			<div class="kpi">
+				<ul>
+					<li><%_<big id="layer7-total">0</big> different application protocols%></li>
+					<li><%_<big id="layer7-most-rx">0</big> cause the most download%></li>
+					<li><%_<big id="layer7-most-tx">0</big> cause the most upload%></li>
+					<li><%_<big id="layer7-most-conn">0</big> cause the most connections%></li>
+				</ul>
+			</div>
 		</div>
-
-		<div class="kpi">
-			<ul>
-				<li><%_<big id="host-total">0</big> hosts%></li>
-				<li><%_<big id="rx-total">0</big> download%></li>
-				<li><%_<big id="tx-total">0</big> upload%></li>
-				<li><%_<big id="conn-total">0</big> connections%></li>
-			</ul>
+		<div class="table" id="layer7-data">
+			<div class="tr table-titles">
+				<div class="th left"><%:Application%></div>
+				<div class="th right"><%:Connections%></div>
+				<div class="th right"><%:Download (Bytes)%></div>
+				<div class="th right"><%:Download (Packets)%></div>
+				<div class="th right"><%:Upload (Bytes)%></div>
+				<div class="th right"><%:Upload (Packets)%></div>
+			</div>
+			<div class="tr placeholder">
+				<div class="td">
+					<em class="spinning"><%:Collecting data...%></em>
+				</div>
+			</div>
 		</div>
 	</div>
-	<table id="host-data">
-		<tr>
-			<th width="10%" class="hostname"><%:Host%></th>
-			<th width="5%"><%:MAC%></th>
-			<th width="5%"><%:Connections%></th>
-			<th width="30%" colspan="2"><%:Download (Bytes / Packets)%></th>
-			<th width="30%" colspan="2"><%:Upload (Bytes / Packets)%></th>
-		</tr>
-	</table>
-</div>
-
-<div class="cbi-section" id="container.nlbw.layer7" style="display:none">
-	<div>
-		<div class="pie">
-			<label><%:Download / Application%></label>
-			<canvas id="layer7-rx-pie" width="200" height="200"></canvas>
-		</div>
-
-		<div class="pie">
-			<label><%:Upload / Application%></label>
-			<canvas id="layer7-tx-pie" width="200" height="200"></canvas>
-		</div>
 
-		<div class="kpi">
-			<ul>
-				<li><%_<big id="layer7-total">0</big> different application protocols%></li>
-				<li><%_<big id="layer7-most-rx">0</big> cause the most download%></li>
-				<li><%_<big id="layer7-most-tx">0</big> cause the most upload%></li>
-				<li><%_<big id="layer7-most-conn">0</big> cause the most connections%></li>
-			</ul>
-		</div>
-	</div>
-	<table id="layer7-data">
-		<tr>
-			<th width="20%"><%:Application%></th>
-			<th width="10%"><%:Connections%></th>
-			<th width="30%" colspan="2"><%:Download (Bytes / Packets)%></th>
-			<th width="30%" colspan="2"><%:Upload (Bytes / Packets)%></th>
-		</tr>
-	</table>
-</div>
+	<div class="cbi-section" data-tab="ipv6" data-tab-title="<%:IPv6%>">
+		<div class="head">
+			<div class="pie">
+				<label><%:IPv4 vs. IPv6%></label>
+				<canvas id="ipv6-share-pie" width="200" height="200"></canvas>
+			</div>
 
-<div class="cbi-section" id="container.nlbw.ipv6" style="display:none">
-	<div>
-		<div class="pie">
-			<label><%:IPv4 vs. IPv6%></label>
-			<canvas id="ipv6-share-pie" width="200" height="200"></canvas>
-		</div>
+			<div class="pie">
+				<label><%:Dualstack enabled hosts%></label>
+				<canvas id="ipv6-hosts-pie" width="200" height="200"></canvas>
+			</div>
 
-		<div class="pie">
-			<label><%:Dualstack enabled hosts%></label>
-			<canvas id="ipv6-hosts-pie" width="200" height="200"></canvas>
+			<div class="kpi">
+				<ul>
+					<li><%_<big id="ipv6-hosts">0%</big> IPv6 support rate among hosts%></li>
+					<li><%_<big id="ipv6-share">0%</big> of the total traffic is IPv6%></li>
+					<li><%_<big id="ipv6-rx">0B</big> total IPv6 download%></li>
+					<li><%_<big id="ipv6-tx">0B</big> total IPv6 upload%></li>
+				</ul>
+			</div>
 		</div>
-
-		<div class="kpi">
-			<ul>
-				<li><%_<big id="ipv6-hosts">0%</big> IPv6 support rate among hosts%></li>
-				<li><%_<big id="ipv6-share">0%</big> of the total traffic is IPv6%></li>
-				<li><%_<big id="ipv6-rx">0B</big> total IPv6 download%></li>
-				<li><%_<big id="ipv6-tx">0B</big> total IPv6 upload%></li>
-			</ul>
+		<div class="table" id="ipv6-data">
+			<div class="tr table-titles">
+				<div class="th left"><%:Host%></div>
+				<div class="th right"><%:MAC%></div>
+				<div class="th double right hide-xs"><%:Family%></div>
+				<div class="th double right"><%:Download (Bytes)%></div>
+				<div class="th double right"><%:Download (Packets)%></div>
+				<div class="th double right"><%:Upload (Bytes)%></div>
+				<div class="th double right"><%:Upload (Packets)%></div>
+			</div>
+			<div class="tr placeholder">
+				<div class="td">
+					<em class="spinning"><%:Collecting data...%></em>
+				</div>
+			</div>
 		</div>
 	</div>
-	<table id="ipv6-data">
-		<tr>
-			<th width="10%" class="hostname"><%:Host%></th>
-			<th width="5%"><%:MAC%></th>
-			<th width="5%"><%:Family%></th>
-			<th width="40%" colspan="2"><%:Download (Bytes / Packets)%></th>
-			<th width="40%" colspan="2"><%:Upload (Bytes / Packets)%></th>
-		</tr>
-	</table>
-</div>
 
-<div class="cbi-section" id="container.nlbw.export" style="display:none">
-	<ul>
-		<li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=mac&#38;order_by=-rx,-tx"><%:CSV, grouped by MAC%></a></li>
-		<li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=ip&#38;order_by=-rx,-tx"><%:CSV, grouped by IP%></a></li>
-		<li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=layer7&#38;order_by=-rx,-tx"><%:CSV, grouped by protocol%></a></li>
-		<li><a href="<%=url('admin/nlbw/data')%>?type=json"><%:JSON dump%></a></li>
-	</ul>
+	<div class="cbi-section" data-tab="export" data-tab-title="<%:Export%>">
+		<ul>
+			<li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=mac&#38;order_by=-rx,-tx"><%:CSV, grouped by MAC%></a></li>
+			<li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=ip&#38;order_by=-rx,-tx"><%:CSV, grouped by IP%></a></li>
+			<li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=layer7&#38;order_by=-rx,-tx"><%:CSV, grouped by protocol%></a></li>
+			<li><a href="<%=url('admin/nlbw/data')%>?type=json"><%:JSON dump%></a></li>
+		</ul>
+	</div>
 </div>
 
 <script type="text/javascript">//<![CDATA[
-	cbi_t_add('nlbw', 'traffic');
-	cbi_t_add('nlbw', 'layer7');
-	cbi_t_add('nlbw', 'ipv6');
-	cbi_t_add('nlbw', 'export');
+	var hostInfo = <%=luci.util.serialize_json(luci.sys.net.host_hints())%>;
 
-	XHR.get('<%=url("admin/nlbw/list")%>', null, function(xhr, res) {
+	XHR.get(L.url('admin/nlbw/list'), null, function(xhr, res) {
 
 		if (res !== null && typeof(res) === 'object' && res.length > 0) {
 			trafficPeriods = res;
@@ -1046,6 +170,20 @@ function bubbleDismiss()
 		};
 		xhr.send(null);
 	});
+
+	document.addEventListener('tooltip-open', function(ev) {
+		renderHostDetail.call(ev.detail.target, ev.target);
+	});
+
+	if ('ontouchstart' in window) {
+		document.addEventListener('touchstart', function(ev) {
+			var tooltip = document.querySelector('.cbi-tooltip');
+			if (tooltip === ev.target || tooltip.contains(ev.target))
+				return;
+
+			L.hideTooltip(ev);
+		});
+	}
 //]]></script>
 
 <%+footer%>