From fdce990b90f21f6925795d1f788f3e87bcdd0400 Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Mon, 20 Apr 2020 17:55:39 +0200 Subject: luci-app-nlbwmon: convert to client side JS Signed-off-by: Jo-Philipp Wich --- .../luci-static/resources/view/nlbw/display.js | 980 +++++++++++++++++++++ 1 file changed, 980 insertions(+) create mode 100644 applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js (limited to 'applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js') diff --git a/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js new file mode 100644 index 0000000000..1bf6687822 --- /dev/null +++ b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js @@ -0,0 +1,980 @@ +'use strict'; +'require view'; +'require network'; +'require request'; +'require fs'; +'require ui'; +'require rpc'; +'require dom'; + +var callNetworkRrdnsLookup = rpc.declare({ + object: 'network.rrdns', + method: 'lookup', + params: [ 'addrs', 'timeout', 'limit' ], + expect: { '': {} } +}); + +var chartRegistry = {}, + trafficPeriods = [], + trafficData = { columns: [], data: [] }, + hostNames = {}, + hostInfo = {}, + ouiData = []; + +return view.extend({ + load: function() { + return Promise.all([ + this.loadHosts(), + this.loadPeriods(), + this.loadData(), + this.loadOUI() + ]); + }, + + loadHosts: function() { + return L.resolveDefault(network.getHostHints()).then(function(res) { + if (res) { + var hints = res.getMACHints(); + + for (var i = 0; i < hints.length; i++) { + hostInfo[hints[i][0]] = { + name: res.getHostnameByMACAddr(hints[i][0]), + ipv6: res.getIP6AddrByMACAddr(hints[i][0]), + ipv4: res.getIPAddrByMACAddr(hints[i][0]) + }; + } + } + }); + }, + + loadOUI: function() { + var url = 'https://raw.githubusercontent.com/jow-/oui-database/master/oui.json'; + + return L.resolveDefault(request.get(url, { cache: true }), []).then(function(res) { + res = res.json(); + + if (Array.isArray(res)) + ouiData = res; + }); + }, + + loadPeriods: function() { + return L.resolveDefault(fs.exec_direct('/usr/libexec/nlbwmon-action', [ 'periods' ], 'json')).then(function(res) { + if (L.isObject(res) && Array.isArray(res.periods)) + trafficPeriods = res.periods; + }); + }, + + loadData: function(period) { + var args = [ 'download', '-g', 'family,mac,ip,layer7', '-o', '-rx_bytes,-tx_bytes' ]; + + if (period) + args.push('-t', period); + + return fs.exec_direct('/usr/libexec/nlbwmon-action', args, 'json').then(L.bind(function(res) { + if (!L.isObject(res) || !Array.isArray(res.columns) || !Array.isArray(res.data)) + throw new Error(_('Malformed data received')); + + trafficData = res; + + var addrs = this.query(null, [ 'ip' ], null), + ipAddrs = []; + + for (var i = 0; i < addrs.length; i++) + if (ipAddrs.indexOf(addrs[i].ip) < 0) + ipAddrs.push(addrs[i].ip); + + if (ipAddrs.length) + return L.resolveDefault(callNetworkRrdnsLookup(ipAddrs, 1000, 1000), {}).then(function(res) { + hostNames = res; + }); + }, this)).catch(function(err) { + ui.addNotification(null, _('Unable to fetch traffic statistic data: %s').format(err.message)); + }); + }, + + off: function(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; + }, + + kpi: function(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' : ''; + }, + + pie: function(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]; + }, + + oui: function(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; + }, + + query: function(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; + }, + + renderPeriods: function() { + if (!trafficPeriods.length) + return E([]); + + var choices = {}, + keys = []; + + for (var e, i = trafficPeriods.length - 1; e = trafficPeriods[i]; i--) { + var ymd1 = e.split(/-/); + var d1 = new Date(+ymd1[0], +ymd1[1] - 1, +ymd1[2]); + var ymd2, d2, pd; + + if (i) { + ymd2 = trafficPeriods[i - 1].split(/-/); + d2 = new Date(+ymd2[0], +ymd2[1] - 1, +ymd2[2]); + d2.setDate(d2.getDate() - 1); + pd = e; + } + else { + d2 = new Date(); + pd = '-'; + } + + keys.push(pd); + choices[pd] = '%04d-%02d-%02d - %04d-%02d-%02d'.format( + d1.getFullYear(), d1.getMonth() + 1, d1.getDate(), + d2.getFullYear(), d2.getMonth() + 1, d2.getDate() + ); + } + + var dropdown = new ui.Dropdown('-', choices, { sort: keys, optional: false }).render(); + + dropdown.addEventListener('cbi-dropdown-change', ui.createHandlerFn(this, function(ev) { + ui.hideTooltip(ev); + + var period = ev.detail.value.value != '-' ? ev.detail.value.value : null; + + return this.loadData(period).then(L.bind(function() { + this.renderHostData(); + this.renderLayer7Data(); + this.renderIPv6Data(); + }, this)); + })); + + return E([], [ + E('p', [ _('Select accounting period:'), ' ', dropdown ]), + E('hr') + ]); + }, + + formatHostname: function(dns) { + if (dns === undefined || dns === null || dns === '') + return '-'; + + dns = dns.split('.')[0]; + + if (dns.length > 12) + return '%h…'.format(dns, dns.substr(0, 12)); + + return '%h'.format(dns); + }, + + renderHostData: function() { + var trafData = [], connData = []; + var rx_total = 0, tx_total = 0, conn_total = 0; + + var hostData = this.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', this.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': '#', + 'click': ui.createHandlerFn(this, 'handleCommit') + }, _('Force reload…')) + ])); + + this.pie('traf-pie', trafData); + this.pie('conn-pie', connData); + + this.kpi('rx-total', '%1024.2mB'.format(rx_total)); + this.kpi('tx-total', '%1024.2mB'.format(tx_total)); + this.kpi('conn-total', '%1000m'.format(conn_total)); + this.kpi('host-total', '%u'.format(hostData.length)); + }, + + renderLayer7Data: function() { + var rxData = [], txData = []; + var topConn = [[0],[0],[0]], topRx = [[0],[0],[0]], topTx = [[0],[0],[0]]; + + var layer7Data = this.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…')) + ])); + + this.pie('layer7-rx-pie', rxData); + this.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] }); + + this.kpi('layer7-total', layer7Data.length); + this.kpi('layer7-most-rx', topRx[0][1], topRx[1][1], topRx[2][1]); + this.kpi('layer7-most-tx', topTx[0][1], topTx[1][1], topTx[2][1]); + this.kpi('layer7-most-conn', topConn[0][1], topConn[1][1], topConn[2][1]); + }, + + renderIPv6Data: function() { + 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 = { }; + + var ipv6Data = this.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([ + this.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%)' + }); + + this.pie('ipv6-share-pie', shareData); + this.pie('ipv6-hosts-pie', hostsData); + + this.kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total))); + this.kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total))); + this.kpi('ipv6-rx', '%1024.2mB'.format(rx6_total)); + this.kpi('ipv6-tx', '%1024.2mB'.format(tx6_total)); + }, + + renderHostDetail: function(node, tooltip) { + var key = node.getAttribute('href').substr(1), + col = node.getAttribute('data-col'), + label = node.getAttribute('data-tooltip'); + + var detailData = this.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 = []; + + 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: example.org')), + E('li', _('Vendor: Example Corp.')) + ]) + ]) + ]), + 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); + + this.pie(tooltip.querySelector('#bubble-pie1'), rxData); + this.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') { + this.kpi(tooltip.querySelector('#bubble-hostname'), name); + this.kpi(tooltip.querySelector('#bubble-vendor'), this.oui(mac)); + } + else { + this.kpi(tooltip.querySelector('#bubble-hostname')); + this.kpi(tooltip.querySelector('#bubble-vendor')); + } + + var rect = node.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; + }, + + setupCharts: function() { + Chart.defaults.global.customTooltips = L.bind(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 = this.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 = 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; + } + }, this); + + Chart.defaults.global.tooltipFontSize = 10; + Chart.defaults.global.tooltipTemplate = function(tip) { + tip.label[0] = tip.label[0].format(tip.value); + return tip.label; + }; + + this.renderHostData(); + this.renderLayer7Data(); + this.renderIPv6Data(); + }, + + handleDownload: function(type, group, order) { + var args = [ 'download', '-f', type ]; + + if (group) + args.push('-g', group); + + if (order) + args.push('-o', order); + + return fs.exec_direct('/usr/libexec/nlbwmon-action', args, 'blob').then(function(blob) { + var data = blob.slice(0, blob.size, (type == 'csv') ? 'text/csv' : 'application/json'), + name = 'nlbwmon-data.%s'.format(type), + url = window.URL.createObjectURL(data), + link = E('a', { 'style': 'display:none', 'href': url, 'download': name }); + + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + window.URL.revokeObjectURL(url); + }).catch(function(err) { + ui.addNotification(null, E('p', [ _('Failed to download traffic data: %s').format(err.message) ])); + }); + }, + + handleCommit: function() { + return fs.exec('/usr/libexec/nlbwmon-action', [ 'commit' ]).then(function(res) { + if (res.code != 0) + throw new Error(res.stderr || res.stdout); + + window.location.reload(true); + }).catch(function(err) { + ui.addNotification(null, E('p', [ _('Failed to commit database: %s').format(err.message) ])); + }); + }, + + render: function() { + document.addEventListener('tooltip-open', L.bind(function(ev) { + this.renderHostDetail(ev.detail.target, ev.target); + }, this)); + + if ('ontouchstart' in window) { + document.addEventListener('touchstart', function(ev) { + var tooltip = document.querySelector('.cbi-tooltip'); + if (tooltip === ev.target || tooltip.contains(ev.target)) + return; + + ui.hideTooltip(ev); + }); + } + + var node = E([], [ + E('link', { 'rel': 'stylesheet', 'href': L.resource('view/nlbw.css') }), + E('script', { + 'type': 'text/javascript', + 'src': L.resource('nlbw.chart.min.js'), + 'load': L.bind(this.setupCharts, this) + }), + + E('h2', [ _('Netlink Bandwidth Monitor') ]), + this.renderPeriods(), + + E('div', [ + E('div', { 'class': 'cbi-section', 'data-tab': 'traffic', 'data-tab-title': _('Traffic Distribution') }, [ + E('div', { 'class': 'head' }, [ + E('div', { 'class': 'pie' }, [ + E('label', [ _('Traffic / Host') ]), + E('canvas', { 'id': 'traf-pie', 'width': 200, 'height': 200 }) + ]), + + E('div', { 'class': 'pie' }, [ + E('label', [ _('Connections / Host') ]), + E('canvas', { 'id': 'conn-pie', 'width': 200, 'height': 200 }) + ]), + + E('div', { 'class': 'kpi' }, [ + E('ul', [ + E('li', _('0 hosts')), + E('li', _('0 download')), + E('li', _('0 upload')), + E('li', _('0 connections')) + ]) + ]) + ]), + + E('div', { 'class': 'table', 'id': 'host-data' }, [ + E('div', { 'class': 'tr table-titles' }, [ + E('div', { 'class': 'th left hostname' }, [ _('Host') ]), + E('div', { 'class': 'th right' }, [ _('MAC') ]), + E('div', { 'class': 'th right' }, [ _('Connections') ]), + E('div', { 'class': 'th right' }, [ _('Download (Bytes)') ]), + E('div', { 'class': 'th right' }, [ _('Download (Packets)') ]), + E('div', { 'class': 'th right' }, [ _('Upload (Bytes)') ]), + E('div', { 'class': 'th right' }, [ _('Upload (Packets)') ]), + ]), + E('div', { 'class': 'tr placeholder' }, [ + E('div', { 'class': 'td' }, [ + E('em', { 'class': 'spinning' }, [ _('Collecting data...') ]) + ]) + ]) + ]) + ]), + + E('div', { 'class': 'cbi-section', 'data-tab': 'layer7', 'data-tab-title': _('Application Protocols') }, [ + E('div', { 'class': 'head' }, [ + E('div', { 'class': 'pie' }, [ + E('label', [ _('Download / Application') ]), + E('canvas', { 'id': 'layer7-rx-pie', 'width': 200, 'height': 200 }) + ]), + + E('div', { 'class': 'pie' }, [ + E('label', [ _('Upload / Application') ]), + E('canvas', { 'id': 'layer7-tx-pie', 'width': 200, 'height': 200 }) + ]), + + E('div', { 'class': 'kpi' }, [ + E('ul', [ + E('li', _('0 different application protocols')), + E('li', _('0 cause the most download')), + E('li', _('0 cause the most upload')), + E('li', _('0 cause the most connections')) + ]) + ]) + ]), + + E('div', { 'class': 'table', 'id': 'layer7-data' }, [ + E('div', { 'class': 'tr table-titles' }, [ + E('div', { 'class': 'th left' }, [ _('Application') ]), + E('div', { 'class': 'th right' }, [ _('Connections') ]), + E('div', { 'class': 'th right' }, [ _('Download (Bytes)') ]), + E('div', { 'class': 'th right' }, [ _('Download (Packets)') ]), + E('div', { 'class': 'th right' }, [ _('Upload (Bytes)') ]), + E('div', { 'class': 'th right' }, [ _('Upload (Packets)') ]), + ]), + E('div', { 'class': 'tr placeholder' }, [ + E('div', { 'class': 'td' }, [ + E('em', { 'class': 'spinning' }, [ _('Collecting data...') ]) + ]) + ]) + ]) + ]), + + E('div', { 'class': 'cbi-section', 'data-tab': 'ipv6', 'data-tab-title': _('IPv6') }, [ + E('div', { 'class': 'head' }, [ + E('div', { 'class': 'pie' }, [ + E('label', [ _('IPv4 vs. IPv6') ]), + E('canvas', { 'id': 'ipv6-share-pie', 'width': 200, 'height': 200 }) + ]), + + E('div', { 'class': 'pie' }, [ + E('label', [ _('Dualstack enabled hosts') ]), + E('canvas', { 'id': 'ipv6-hosts-pie', 'width': 200, 'height': 200 }) + ]), + + E('div', { 'class': 'kpi' }, [ + E('ul', [ + E('li', _('0% IPv6 support rate among hosts')), + E('li', _('0% of the total traffic is IPv6')), + E('li', _('0B total IPv6 download')), + E('li', _('0B total IPv6 upload')) + ]) + ]) + ]), + + E('div', { 'class': 'table', 'id': 'ipv6-data' }, [ + E('div', { 'class': 'tr table-titles' }, [ + E('div', { 'class': 'th left' }, [ _('Host') ]), + E('div', { 'class': 'th right' }, [ _('MAC') ]), + E('div', { 'class': 'th double right hide-xs' }, [ _('Family') ]), + E('div', { 'class': 'th double right' }, [ _('Download (Bytes)') ]), + E('div', { 'class': 'th double right' }, [ _('Download (Packets)') ]), + E('div', { 'class': 'th double right' }, [ _('Upload (Bytes)') ]), + E('div', { 'class': 'th double right' }, [ _('Upload (Packets)') ]), + ]), + E('div', { 'class': 'tr placeholder' }, [ + E('div', { 'class': 'td' }, [ + E('em', { 'class': 'spinning' }, [ _('Collecting data...') ]) + ]) + ]) + ]) + ]), + + E('div', { 'class': 'cbi-section', 'data-tab': 'export', 'data-tab-title': _('Export') }, [ + E('ul', [ + E('li', [ + E('a', { + 'href': '#', + 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'mac', '-rx,-tx') + }, [ _('CSV, grouped by MAC') ]) + ]), + E('li', [ + E('a', { + 'href': '#', + 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'ip', '-rx,-tx') + }, [ _('CSV, grouped by IP') ]) + ]), + E('li', [ + E('a', { + 'href': '#', + 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'layer7', '-rx,-tx') + }, [ _('CSV, grouped by protocol') ]) + ]), + E('li', [ + E('a', { + 'href': '#', + 'click': ui.createHandlerFn(this, 'handleDownload', 'json', null, null) + }, [ _('JSON dump') ]) + ]) + ]) + ]) + ]) + ]); + + ui.tabs.initTabGroup(node.lastElementChild.childNodes); + + return node; + }, + + handleSave: null, + handleSaveApply: null, + handleReset: null +}); -- cgit v1.2.3