2 Copyright 2017 Jo-Philipp Wich <jo@mein.io>
3 Licensed to the public under the Apache License 2.0.
11 background: rgba(0, 0, 0, .7);
15 -webkit-transition: all .1s ease;
16 transition: all .1s ease;
18 -webkit-transform: translate(-50%, 0);
19 transform: translate(-50%, 0);
23 #chartjs-tooltip.above {
24 -webkit-transform: translate(-50%, -100%);
25 transform: translate(-50%, -100%);
28 #chartjs-tooltip.above:before {
30 border-color: #111 transparent;
31 border-color: rgba(0, 0, 0, .8) transparent;
32 border-width: 8px 8px 0 8px;
40 -webkit-transform: translate(-50%, 0);
41 transform: translate(-50%, 0);
45 border: 1px solid #999;
46 border-collapse: collapse;
47 margin: 0 0 2px !important;
50 th, td, table table td {
51 border: 1px solid #999;
53 padding: 1px 3px !important;
58 border-bottom-color: #ccc;
62 border-bottom-color: #999;
65 tbody tr:last-child td {
66 border-bottom-color: #999;
72 display: inline-block;
85 display: inline-block;
86 margin: 80px 20px 20px;
112 transition: opacity 0.5s;
115 #detail-bubble > div {
116 border: 1px solid #ccc;
122 #detail-bubble .head {
128 #detail-bubble .head .dismiss {
134 text-decoration: none;
141 #detail-bubble .pie {
146 #detail-bubble .kpi {
147 margin: 40px 5px 5px;
152 #detail-bubble .kpi ul {
157 border: 1px solid #ccc;
158 border-width: 1px 0 0 1px;
165 transform: rotate(45deg);
170 border-bottom: 2px solid red;
173 tr.active > td.active {
174 border: 2px solid red;
179 border: 2px solid red;
182 transition: opacity 0.5s;
198 <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
199 <script type="text/javascript" src="<%=resource%>/nlbw.chart.min.js"></script>
200 <script type="text/javascript">//<![CDATA[
202 var chartRegistry = {},
204 trafficData = { columns: [], data: [] },
206 hostInfo = <%=luci.util.serialize_json(luci.sys.net.host_hints())%>,
214 if (!isNaN(elem.offsetLeft) && !isNaN(elem.offsetTop)) {
215 val[0] += elem.offsetLeft;
216 val[1] += elem.offsetTop;
219 while ((elem = elem.offsetParent) != null);
223 Chart.defaults.global.customTooltips = function(tooltip) {
224 var tooltipEl = document.getElementById('chartjs-tooltip');
227 tooltipEl = document.createElement('div');
228 tooltipEl.setAttribute('id', 'chartjs-tooltip');
229 document.body.appendChild(tooltipEl);
234 tooltipEl.row.style.backgroundColor = '';
236 tooltipEl.style.opacity = 0;
240 var pos = off(tooltip.chart.canvas);
242 tooltipEl.className = tooltip.yAlign;
243 tooltipEl.innerHTML = tooltip.text[0];
245 tooltipEl.style.opacity = 1;
246 tooltipEl.style.left = pos[0] + tooltip.x + 'px';
247 tooltipEl.style.top = pos[1] + tooltip.y - tooltip.caretHeight - tooltip.caretPadding + 'px';
249 var row = tooltip.text[1],
250 hue = tooltip.text[2];
252 if (row && !isNaN(hue)) {
253 row.style.backgroundColor = 'hsl(%u, 100%%, 80%%)'.format(hue);
258 Chart.defaults.global.tooltipFontSize = 10;
259 Chart.defaults.global.tooltipTemplate = function(tip) {
260 tip.label[0] = tip.label[0].format(tip.value);
264 function kpi(id, val1, val2, val3)
266 var e = document.getElementById(id);
268 if (val1 && val2 && val3)
269 e.innerHTML = '<%:%s, %s and %s%>'.format(val1, val2, val3);
270 else if (val1 && val2)
271 e.innerHTML = '<%:%s and %s%>'.format(val1, val2);
275 e.parentNode.style.display = val1 ? 'list-item' : '';
278 function pie(id, data)
280 data.sort(function(a, b) { return b.value - a.value });
282 if (data.length === 0 || (data.length === 1 && data[0].value === 0))
286 label: [ '<%:no traffic%>' ]
289 for (var i = 0; i < data.length; i++) {
290 if (!data[i].color) {
291 var hue = 120 / (data.length-1) * i;
292 data[i].color = 'hsl(%u, 80%%, 50%%)'.format(hue);
293 data[i].label.push(hue);
297 var ctx = document.getElementById(id).getContext('2d');
299 if (chartRegistry.hasOwnProperty(id))
300 chartRegistry[id].destroy();
302 chartRegistry[id] = new Chart(ctx).Doughnut(data, {
303 segmentStrokeWidth: 1,
304 percentageInnerCutout: 30
307 return chartRegistry[id];
310 function query(filter, group, order)
312 var keys = [], columns = {}, records = {}, result = [];
314 if (typeof(group) !== 'function' && typeof(group) !== 'object')
317 for (var i = 0; i < trafficData.columns.length; i++)
318 columns[trafficData.columns[i]] = i;
320 for (var i = 0; i < trafficData.data.length; i++) {
321 var record = trafficData.data[i];
323 if (typeof(filter) === 'function' && filter(columns, record) !== true)
328 if (typeof(group) === 'function') {
329 key = group(columns, record);
334 for (var j = 0; j < group.length; j++)
335 if (columns.hasOwnProperty(group[j]))
336 key.push(record[columns[group[j]]]);
341 if (!records.hasOwnProperty(key)) {
344 for (var col in columns)
345 rec[col] = record[columns[col]];
351 records[key].conns += record[columns.conns];
352 records[key].rx_bytes += record[columns.rx_bytes];
353 records[key].rx_pkts += record[columns.rx_pkts];
354 records[key].tx_bytes += record[columns.tx_bytes];
355 records[key].tx_pkts += record[columns.tx_pkts];
359 if (typeof(order) === 'function')
366 var m, l = 0, r = ouiData.length / 3 - 1;
367 var mac1 = parseInt(mac.replace(/[^a-fA-F0-9]/g, ''), 16);
370 m = l + Math.floor((r - l) / 2);
372 var mask = (0xffffffffffff -
373 (Math.pow(2, 48 - ouiData[m * 3 + 1]) - 1));
375 var mac1_hi = ((mac1 / 0x10000) & (mask / 0x10000)) >>> 0;
376 var mac1_lo = ((mac1 & 0xffff) & (mask & 0xffff)) >>> 0;
378 var mac2 = parseInt(ouiData[m * 3], 16);
379 var mac2_hi = (mac2 / 0x10000) >>> 0;
380 var mac2_lo = (mac2 & 0xffff) >>> 0;
382 if (mac1_hi === mac2_hi && mac1_lo === mac2_lo)
383 return ouiData[m * 3 + 2];
385 if (mac2_hi > mac1_hi ||
386 (mac2_hi === mac1_hi && mac2_lo > mac1_lo))
396 function fetchData(period)
398 XHR.get('<%=url("admin/nlbw/data")%>', { period: period, group_by: 'family,mac,ip,layer7', order_by: '-rx_bytes,-tx_bytes' }, function(xhr, res) {
399 if (res !== null && typeof(res) === 'object' && typeof(res.columns) === 'object' && typeof(res.data) === 'object')
402 var addrs = query(null, ['ip'], null);
405 for (var i = 0; i < addrs.length; i++)
406 if (ipAddrs.indexOf(addrs[i].ip) < 0)
407 ipAddrs.push(addrs[i].ip);
413 XHR.get('<%=url("admin/nlbw/ptr")%>/' + ipAddrs.join('/'), null, function(xhr, res) {
414 if (res !== null && typeof(res) === 'object')
420 function switchTab(tab)
424 return cbi_t_switch('nlbw', tab);
427 function renderPeriods()
429 var sel = document.getElementById('nlbw.period');
431 for (var e, i = trafficPeriods.length - 1; e = trafficPeriods[i]; i--) {
432 var d1 = new Date(e);
436 d2 = new Date(trafficPeriods[i - 1]);
437 d2.setDate(d2.getDate() - 1);
443 var opt = document.createElement('option');
444 opt.setAttribute('data-duration', (d2.getTime() - d1.getTime()) / 1000);
445 opt.value = '%04d-%02d-%02d'.format(d1.getFullYear(), d1.getMonth() + 1, d1.getDate());
446 opt.text = '%04d-%02d-%02d - %04d-%02d-%02d'.format(
447 d1.getFullYear(), d1.getMonth() + 1, d1.getDate(),
448 d2.getFullYear(), d2.getMonth() + 1, d2.getDate());
450 sel.appendChild(opt);
453 sel.selectedIndex = sel.childNodes.length - 1;
454 sel.style.display = '';
456 sel.onchange = function() {
458 fetchData(sel.options[sel.selectedIndex].value);
462 function renderHostDetail()
464 var key = this.getAttribute('href').substr(1),
465 col = this.getAttribute('data-col'),
466 label = this.getAttribute('data-label'),
467 bubble = document.getElementById('detail-bubble'),
468 arrow = document.getElementById('bubble-arrow'),
469 table = document.getElementById('bubble-table');
473 var detailData = query(
475 return ((r[c.mac] === key || r[c.ip] === key) &&
476 (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0));
480 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
484 var rxData = [], txData = [];
486 table.innerHTML = '<tr>' +
487 '<th>%s</th>'.format(label || col) +
488 '<th><%:Conn.%></th>' +
489 '<th colspan="2"><%:Down. (Bytes / Pkts.)%></th>' +
490 '<th colspan="2"><%:Up. (Bytes / Pkts.)%></th>' +
493 for (var i = 0; i < detailData.length; i++) {
494 var rec = detailData[i],
495 row = table.insertRow(-1);
497 row.insertCell(-1).innerHTML = rec[col] || '<%:other%>';
498 row.insertCell(-1).innerHTML = "%1000.2m".format(rec.conns);
499 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes);
500 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts);
501 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes);
502 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts);
505 label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row],
510 label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row],
515 pie('bubble-pie1', rxData);
516 pie('bubble-pie2', txData);
518 var mac = key.toUpperCase();
519 var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null;
522 for (var i = 0; i < detailData.length; i++)
523 if ((name = hostNames[detailData[i].ip]) !== undefined)
526 if (mac !== '00:00:00:00:00:00') {
527 kpi('bubble-hostname', name);
528 kpi('bubble-vendor', oui(mac));
531 kpi('bubble-hostname');
532 kpi('bubble-vendor');
535 var tr = this.parentNode.parentNode,
539 bubble.style.width = tr.offsetWidth + 'px';
540 bubble.style.left = xy[0] + 'px';
541 bubble.style.top = (xy[1] + tr.offsetHeight) + 'px';
542 arrow.style.left = Math.floor(xy2[0] + this.offsetWidth / 2 - xy[0]) + 'px';
544 bubble.className = 'in';
549 function formatHostname(dns)
551 if (dns === undefined || dns === null || dns === '')
554 dns = dns.split('.')[0];
557 return '<span title="%q">%h…</span>'.format(dns, dns.substr(0, 12));
559 return '%h'.format(dns);
562 function renderHostData()
564 var trafData = [], connData = [];
565 var rx_total = 0, tx_total = 0, conn_total = 0;
566 var table = document.getElementById('host-data');
568 var hostData = query(
570 return (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0);
574 // return (r[c.mac] !== '00:00:00:00:00:00') ? r[c.mac] : r[c.ip];
577 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
581 while (table.rows.length > 1)
584 for (var i = 0; i < hostData.length; i++) {
585 var row = table.insertRow(-1),
586 cell = row.insertCell(-1),
588 mac = rec.mac.toUpperCase(),
589 key = (mac !== '00:00:00:00:00:00') ? mac : rec.ip,
590 dns = hostInfo[mac] ? hostInfo[mac].name : null;
592 var link1 = document.createElement('a');
593 link1.onclick = renderHostDetail;
594 link1.href = '#' + rec.mac;
595 link1.setAttribute('data-col', 'ip');
596 link1.setAttribute('data-label', '<%:Source IP%>');
597 link1.innerHTML = (mac !== '00:00:00:00:00:00') ? mac : '<%:other%>';
599 var link2 = document.createElement('a');
600 link2.onclick = renderHostDetail;
601 link2.href = '#' + rec.mac;
602 link2.setAttribute('data-col', 'layer7');
603 link2.setAttribute('data-label', '<%:Protocol%>');
604 link2.innerHTML = "%1000.2m".format(rec.conns);
606 cell.innerHTML = formatHostname(dns);
607 cell.className = 'hostname';
609 row.insertCell(-1).appendChild(link1);
610 row.insertCell(-1).appendChild(link2);
611 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes);
612 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts);
613 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes);
614 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts);
617 value: rec.rx_bytes + rec.tx_bytes,
618 label: ["%s: %%.2mB".format(key), row]
623 label: ["%s: %%.2m".format(key), row]
626 rx_total += rec.rx_bytes;
627 tx_total += rec.tx_bytes;
628 conn_total += rec.conns;
631 if (table.rows.length === 1) {
632 var cell = table.insertRow(-1).insertCell(-1);
634 cell.setAttribute('colspan', 6);
635 cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
638 pie('traf-pie', trafData);
639 pie('conn-pie', connData);
641 kpi('rx-total', '%1024.2mB'.format(rx_total));
642 kpi('tx-total', '%1024.2mB'.format(tx_total));
643 kpi('conn-total', '%1000m'.format(conn_total));
644 kpi('host-total', '%u'.format(hostData.length));
647 function renderLayer7Data()
649 var rxData = [], txData = [];
650 var topConn = [[0],[0],[0]], topRx = [[0],[0],[0]], topTx = [[0],[0],[0]];
651 var table = document.getElementById('layer7-data');
653 var layer7Data = query(
656 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
660 while (table.rows.length > 1)
663 for (var i = 0, c = 0; i < layer7Data.length; i++) {
664 var rec = layer7Data[i],
665 row = table.insertRow(-1);
669 label: ["%s: %%.2mB".format(rec.layer7 || '<%:other%>'), row]
674 label: ["%s: %%.2mB".format(rec.layer7 || '<%:other%>'), row]
677 row.insertCell(-1).innerHTML = rec.layer7 || '<%:other%>';
678 row.insertCell(-1).innerHTML = "%1000m".format(rec.conns);
679 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes);
680 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts);
681 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes);
682 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts);
685 topRx.push([rec.rx_bytes, rec.layer7]);
686 topTx.push([rec.tx_bytes, rec.layer7]);
687 topConn.push([rec.conns, rec.layer7]);
691 if (table.rows.length === 1) {
692 var cell = table.insertRow(-1).insertCell(-1);
694 cell.setAttribute('colspan', 6);
695 cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
698 pie('layer7-rx-pie', rxData);
699 pie('layer7-tx-pie', txData);
701 topRx.sort(function(a, b) { return b[0] - a[0] });
702 topTx.sort(function(a, b) { return b[0] - a[0] });
703 topConn.sort(function(a, b) { return b[0] - a[0] });
705 kpi('layer7-total', layer7Data.length);
706 kpi('layer7-most-rx', topRx[0][1], topRx[1][1], topRx[2][1]);
707 kpi('layer7-most-tx', topTx[0][1], topTx[1][1], topTx[2][1]);
708 kpi('layer7-most-conn', topConn[0][1], topConn[1][1], topConn[2][1]);
711 function renderIPv6Data()
713 var table = document.getElementById('ipv6-data'),
726 null, ['family', 'mac'],
728 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
732 for (var i = 0, c = 0; i < ipv6Data.length; i++) {
733 var rec = ipv6Data[i],
734 mac = rec.mac.toUpperCase(),
736 fam = families[mac] || 0,
737 recs = records[mac] || {};
739 if (rec.family == 4) {
740 rx4_total += rec.rx_bytes;
741 tx4_total += rec.tx_bytes;
745 rx6_total += rec.rx_bytes;
746 tx6_total += rec.tx_bytes;
750 recs[rec.family] = rec;
756 for (var mac in families) {
757 switch (families[mac])
773 while (table.rows.length > 1)
776 for (var mac in records) {
777 if (mac === '00:00:00:00:00:00')
780 var row = table.insertRow(-1),
781 cell1 = row.insertCell(-1),
782 cell2 = row.insertCell(-1),
783 dns = hostInfo[mac] ? hostInfo[mac].name : null,
784 rec4 = records[mac][4],
785 rec6 = records[mac][6];
787 cell1.setAttribute('rowspan', 2);
788 cell1.innerHTML = formatHostname(dns);
789 cell1.className = 'hostname';
791 cell2.setAttribute('rowspan', 2);
792 cell2.innerHTML = mac;
794 row.insertCell(-1).innerHTML = 'IPv4';
795 row.insertCell(-1).innerHTML = rec4 ? "%1024.2mB".format(rec4.rx_bytes) : '-';
796 row.insertCell(-1).innerHTML = rec4 ? "%1000.2mP".format(rec4.rx_pkts) : '-';
797 row.insertCell(-1).innerHTML = rec4 ? "%1024.2mB".format(rec4.tx_bytes) : '-';
798 row.insertCell(-1).innerHTML = rec4 ? "%1000.2mP".format(rec4.tx_pkts) : '-';
800 row = table.insertRow(-1);
802 row.insertCell(-1).innerHTML = 'IPv6';
803 row.insertCell(-1).innerHTML = rec6 ? "%1024.2mB".format(rec6.rx_bytes) : '-';
804 row.insertCell(-1).innerHTML = rec6 ? "%1000.2mP".format(rec6.rx_pkts) : '-';
805 row.insertCell(-1).innerHTML = rec6 ? "%1024.2mB".format(rec6.tx_bytes) : '-';
806 row.insertCell(-1).innerHTML = rec6 ? "%1000.2mP".format(rec6.tx_pkts) : '-';
809 if (table.rows.length === 1) {
810 var cell = table.insertRow(-1).insertCell(-1);
812 cell.setAttribute('colspan', 7);
813 cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
816 var shareData = [], hostsData = [];
818 if (rx4_total > 0 || tx4_total > 0)
820 value: rx4_total + tx4_total,
821 label: ["IPv4: %.2mB"],
822 color: 'hsl(140, 100%, 50%)'
825 if (rx6_total > 0 || tx6_total > 0)
827 value: rx6_total + tx6_total,
828 label: ["IPv6: %.2mB"],
829 color: 'hsl(180, 100%, 50%)'
835 label: ["<%:%d IPv4-only hosts%>"],
836 color: 'hsl(140, 100%, 50%)'
842 label: ["<%:%d IPv6-only hosts%>"],
843 color: 'hsl(180, 100%, 50%)'
849 label: ["<%:%d dual-stack hosts%>"],
850 color: 'hsl(50, 100%, 50%)'
853 pie('ipv6-share-pie', shareData);
854 pie('ipv6-hosts-pie', hostsData);
856 kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total)));
857 kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total)));
858 kpi('ipv6-rx', '%1024.2mB'.format(rx6_total));
859 kpi('ipv6-tx', '%1024.2mB'.format(tx6_total));
862 function bubbleDismiss()
864 var bubble = document.getElementById('detail-bubble');
866 bubble.className = '';
867 document.body.appendChild(bubble);
875 <h2 name="content"><%:Netlink Bandwidth Monitor%></h2>
877 <div id="detail-bubble">
878 <span id="bubble-arrow"></span>
881 <a class="dismiss" href="#" onclick="this.blur(); return bubbleDismiss()">×</a>
883 <label>Download</label>
884 <canvas id="bubble-pie1" width="100" height="100"></canvas>
887 <label>Upload</label>
888 <canvas id="bubble-pie2" width="100" height="100"></canvas>
892 <li><%_Hostname: <big id="bubble-hostname">example.org</big>%></li>
893 <li><%_Vendor: <big id="bubble-vendor">Example Corp.</big>%></li>
897 <table id="bubble-table"></table>
904 <%:Select accounting period:%>
905 <select id="nlbw.period" style="display:none"></select>
910 <ul class="cbi-tabmenu">
911 <li id="tab.nlbw.traffic" class="cbi-tab"><a href="#" onclick="return switchTab('traffic')"><%:Traffic Distribution%></a></li>
912 <li id="tab.nlbw.layer7" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('layer7')"><%:Application Protocols%></a></li>
913 <li id="tab.nlbw.ipv6" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('ipv6')"><%:IPv6%></a></li>
914 <li id="tab.nlbw.export" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('export')"><%:Export%></a></li>
917 <div class="cbi-section" id="container.nlbw.traffic">
920 <label><%:Traffic / Host%></label>
921 <canvas id="traf-pie" width="200" height="200"></canvas>
925 <label><%:Connections / Host%></label>
926 <canvas id="conn-pie" width="200" height="200"></canvas>
931 <li><%_<big id="host-total">0</big> hosts%></li>
932 <li><%_<big id="rx-total">0</big> download%></li>
933 <li><%_<big id="tx-total">0</big> upload%></li>
934 <li><%_<big id="conn-total">0</big> connections%></li>
938 <table id="host-data">
940 <th width="10%" class="hostname"><%:Host%></th>
941 <th width="5%"><%:MAC%></th>
942 <th width="5%"><%:Connections%></th>
943 <th width="30%" colspan="2"><%:Download (Bytes / Packets)%></th>
944 <th width="30%" colspan="2"><%:Upload (Bytes / Packets)%></th>
949 <div class="cbi-section" id="container.nlbw.layer7" style="display:none">
952 <label><%:Download / Application%></label>
953 <canvas id="layer7-rx-pie" width="200" height="200"></canvas>
957 <label><%:Upload / Application%></label>
958 <canvas id="layer7-tx-pie" width="200" height="200"></canvas>
963 <li><%_<big id="layer7-total">0</big> different application protocols%></li>
964 <li><%_<big id="layer7-most-rx">0</big> cause the most download%></li>
965 <li><%_<big id="layer7-most-tx">0</big> cause the most upload%></li>
966 <li><%_<big id="layer7-most-conn">0</big> cause the most connections%></li>
970 <table id="layer7-data">
972 <th width="20%"><%:Application%></th>
973 <th width="10%"><%:Connections%></th>
974 <th width="30%" colspan="2"><%:Download (Bytes / Packets)%></th>
975 <th width="30%" colspan="2"><%:Upload (Bytes / Packets)%></th>
980 <div class="cbi-section" id="container.nlbw.ipv6" style="display:none">
983 <label><%:IPv4 vs. IPv6%></label>
984 <canvas id="ipv6-share-pie" width="200" height="200"></canvas>
988 <label><%:Dualstack enabled hosts%></label>
989 <canvas id="ipv6-hosts-pie" width="200" height="200"></canvas>
994 <li><%_<big id="ipv6-hosts">0%</big> IPv6 support rate among hosts%></li>
995 <li><%_<big id="ipv6-share">0%</big> of the total traffic is IPv6%></li>
996 <li><%_<big id="ipv6-rx">0B</big> total IPv6 download%></li>
997 <li><%_<big id="ipv6-tx">0B</big> total IPv6 upload%></li>
1001 <table id="ipv6-data">
1003 <th width="10%" class="hostname"><%:Host%></th>
1004 <th width="5%"><%:MAC%></th>
1005 <th width="5%"><%:Family%></th>
1006 <th width="40%" colspan="2"><%:Download (Bytes / Packets)%></th>
1007 <th width="40%" colspan="2"><%:Upload (Bytes / Packets)%></th>
1012 <div class="cbi-section" id="container.nlbw.export" style="display:none">
1014 <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=mac&order_by=-rx,-tx"><%:CSV, grouped by MAC%></a></li>
1015 <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=ip&order_by=-rx,-tx"><%:CSV, grouped by IP%></a></li>
1016 <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=layer7&order_by=-rx,-tx"><%:CSV, grouped by protocol%></a></li>
1017 <li><a href="<%=url('admin/nlbw/data')%>?type=json"><%:JSON dump%></a></li>
1021 <script type="text/javascript">//<![CDATA[
1022 cbi_t_add('nlbw', 'traffic');
1023 cbi_t_add('nlbw', 'layer7');
1024 cbi_t_add('nlbw', 'ipv6');
1025 cbi_t_add('nlbw', 'export');
1027 XHR.get('<%=url("admin/nlbw/list")%>', null, function(xhr, res) {
1029 if (res !== null && typeof(res) === 'object' && res.length > 0) {
1030 trafficPeriods = res;
1034 xhr.open('GET', 'https://raw.githubusercontent.com/jow-/oui-database/master/oui.json', true);
1035 xhr.onreadystatechange = function() {
1036 if (xhr.readyState === 4) {
1037 try { res = JSON.parse(xhr.responseText); }
1038 catch(e) { res = null; }
1040 if (res !== null && typeof(res) === 'object' && (res.length % 3) === 0)
1043 fetchData(trafficPeriods[0]);