--- /dev/null
+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));
+}
<%#
- 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&group_by=mac&order_by=-rx,-tx"><%:CSV, grouped by MAC%></a></li>
- <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=ip&order_by=-rx,-tx"><%:CSV, grouped by IP%></a></li>
- <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=layer7&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&group_by=mac&order_by=-rx,-tx"><%:CSV, grouped by MAC%></a></li>
+ <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=ip&order_by=-rx,-tx"><%:CSV, grouped by IP%></a></li>
+ <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=layer7&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;
};
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%>
projects / project / luci.git / commitdiff