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 for (var i =
0; i < data.length; i++) {
283 if (!data[i].color) {
284 var hue =
120 / (data.length-
1) * i;
285 data[i].color = 'hsl(%u,
80%%,
50%%)'.format(hue);
286 data[i].label.push(hue);
290 var ctx = document.getElementById(id).getContext('
2d');
292 if (chartRegistry.hasOwnProperty(id))
293 chartRegistry[id].destroy();
295 chartRegistry[id] = new Chart(ctx).Doughnut(data, {
296 segmentStrokeWidth:
1,
297 percentageInnerCutout:
30
300 return chartRegistry[id];
303 function query(filter, group, order)
305 var keys = [], columns = {}, records = {}, result = [];
307 if (typeof(group) !== 'function' && typeof(group) !== 'object')
310 for (var i =
0; i < trafficData.columns.length; i++)
311 columns[trafficData.columns[i]] = i;
313 for (var i =
0; i < trafficData.data.length; i++) {
314 var record = trafficData.data[i];
316 if (typeof(filter) === 'function' && filter(columns, record) !== true)
321 if (typeof(group) === 'function') {
322 key = group(columns, record);
327 for (var j =
0; j < group.length; j++)
328 if (columns.hasOwnProperty(group[j]))
329 key.push(record[columns[group[j]]]);
334 if (!records.hasOwnProperty(key)) {
337 for (var col in columns)
338 rec[col] = record[columns[col]];
344 records[key].conns += record[columns.conns];
345 records[key].rx_bytes += record[columns.rx_bytes];
346 records[key].rx_pkts += record[columns.rx_pkts];
347 records[key].tx_bytes += record[columns.tx_bytes];
348 records[key].tx_pkts += record[columns.tx_pkts];
352 if (typeof(order) === 'function')
359 var m, l =
0, r = ouiData.length /
3 -
1;
360 var mac1 = parseInt(mac.replace(/[^a-fA-F0-
9]/g, ''),
16);
363 m = l + Math.floor((r - l) /
2);
365 var mask = (
0xffffffffffff -
366 (Math.pow(
2,
48 - ouiData[m *
3 +
1]) -
1));
368 var mac1_hi = ((mac1 /
0x10000) & (mask /
0x10000))
>>> 0;
369 var mac1_lo = ((mac1 &
0xffff) & (mask &
0xffff))
>>> 0;
371 var mac2 = parseInt(ouiData[m *
3],
16);
372 var mac2_hi = (mac2 /
0x10000)
>>> 0;
373 var mac2_lo = (mac2 &
0xffff)
>>> 0;
375 if (mac1_hi === mac2_hi && mac1_lo === mac2_lo)
376 return ouiData[m *
3 +
2];
378 if (mac2_hi
> mac1_hi ||
379 (mac2_hi === mac1_hi && mac2_lo
> mac1_lo))
389 function fetchData(period)
391 XHR.get('<%=url(
"admin/nlbw/data")%
>', { period: period, group_by: 'family,mac,ip,layer7', order_by: '-rx_bytes,-tx_bytes' }, function(xhr, res) {
392 if (res !== null && typeof(res) === 'object' && typeof(res.columns) === 'object' && typeof(res.data) === 'object')
395 var addrs = query(null, ['ip'], null);
398 for (var i =
0; i < addrs.length; i++)
399 if (ipAddrs.indexOf(addrs[i].ip) <
0)
400 ipAddrs.push(addrs[i].ip);
406 XHR.get('<%=url(
"admin/nlbw/ptr")%
>/' + ipAddrs.join('/'), null, function(xhr, res) {
407 if (res !== null && typeof(res) === 'object')
413 function switchTab(tab)
417 return cbi_t_switch('nlbw', tab);
420 function renderPeriods()
422 var sel = document.getElementById('nlbw.period');
424 for (var e, i = trafficPeriods.length -
1; e = trafficPeriods[i]; i--) {
425 var d1 = new Date(e);
429 d2 = new Date(trafficPeriods[i -
1]);
430 d2.setDate(d2.getDate() -
1);
436 var opt = document.createElement('option');
437 opt.setAttribute('data-duration', (d2.getTime() - d1.getTime()) /
1000);
438 opt.value = '%
04d-%
02d-%
02d'.format(d1.getFullYear(), d1.getMonth() +
1, d1.getDate());
439 opt.text = '%
04d-%
02d-%
02d - %
04d-%
02d-%
02d'.format(
440 d1.getFullYear(), d1.getMonth() +
1, d1.getDate(),
441 d2.getFullYear(), d2.getMonth() +
1, d2.getDate());
443 sel.appendChild(opt);
446 sel.selectedIndex = sel.childNodes.length -
1;
447 sel.style.display = '';
449 sel.onchange = function() {
451 fetchData(sel.options[sel.selectedIndex].value);
455 function renderHostDetail()
457 var key = this.getAttribute('href').substr(
1),
458 col = this.getAttribute('data-col'),
459 label = this.getAttribute('data-label'),
460 bubble = document.getElementById('detail-bubble'),
461 arrow = document.getElementById('bubble-arrow'),
462 table = document.getElementById('bubble-table');
466 var detailData = query(
468 return ((r[c.mac] === key || r[c.ip] === key) &&
469 (r[c.rx_bytes]
> 0 || r[c.tx_bytes]
> 0));
473 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
477 var rxData = [], txData = [], rxEmpty = true, txEmpty = true;
479 table.innerHTML = '
<tr>' +
480 '
<th>%s
</th>'.format(label || col) +
481 '
<th><%:Conn.%
></th>' +
482 '
<th colspan=
"2"><%:Down. (Bytes / Pkts.)%
></th>' +
483 '
<th colspan=
"2"><%:Up. (Bytes / Pkts.)%
></th>' +
486 for (var i =
0; i < detailData.length; i++) {
487 var rec = detailData[i],
488 row = table.insertRow(-
1);
490 row.insertCell(-
1).innerHTML = rec[col] || '<%:other%
>';
491 row.insertCell(-
1).innerHTML =
"%1000.2m".format(rec.conns);
492 row.insertCell(-
1).innerHTML =
"%1024.2mB".format(rec.rx_bytes);
493 row.insertCell(-
1).innerHTML =
"%1000.2mP".format(rec.rx_pkts);
494 row.insertCell(-
1).innerHTML =
"%1024.2mB".format(rec.tx_bytes);
495 row.insertCell(-
1).innerHTML =
"%1000.2mP".format(rec.tx_pkts);
498 label: ['%s: %%
1024.2mB'.format(rec[col] || '<%:other%
>'), row],
503 label: ['%s: %%
1024.2mB'.format(rec[col] || '<%:other%
>'), row],
516 rxData[
0].color = '#cccccc';
517 rxData[
0].label[
0] = '<%:no traffic%
>';
522 txData[
0].color = '#cccccc';
523 txData[
0].label[
0] = '<%:no traffic%
>';
526 pie('bubble-pie1', rxData);
527 pie('bubble-pie2', txData);
529 var mac = key.toUpperCase();
530 var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null;
533 for (var i =
0; i < detailData.length; i++)
534 if ((name = hostNames[detailData[i].ip]) !== undefined)
537 if (mac !== '
00:
00:
00:
00:
00:
00') {
538 kpi('bubble-hostname', name);
539 kpi('bubble-vendor', oui(mac));
542 kpi('bubble-hostname');
543 kpi('bubble-vendor');
546 var tr = this.parentNode.parentNode,
550 bubble.style.width = tr.offsetWidth + 'px';
551 bubble.style.left = xy[
0] + 'px';
552 bubble.style.top = (xy[
1] + tr.offsetHeight) + 'px';
553 arrow.style.left = Math.floor(xy2[
0] + this.offsetWidth /
2 - xy[
0]) + 'px';
555 bubble.className = 'in';
560 function formatHostname(dns)
562 if (dns === undefined || dns === null || dns === '')
565 dns = dns.split('.')[
0];
568 return '
<span title=
"%q">%h…
</span>'.format(dns, dns.substr(
0,
12));
570 return '%h'.format(dns);
573 function renderHostData()
575 var trafData = [], connData = [];
576 var rx_total =
0, tx_total =
0, conn_total =
0;
577 var table = document.getElementById('host-data');
579 var hostData = query(
581 return (r[c.rx_bytes]
> 0 || r[c.tx_bytes]
> 0);
585 // return (r[c.mac] !== '
00:
00:
00:
00:
00:
00') ? r[c.mac] : r[c.ip];
588 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
592 while (table.rows.length
> 1)
595 for (var i =
0; i < hostData.length; i++) {
596 var row = table.insertRow(-
1),
597 cell = row.insertCell(-
1),
599 mac = rec.mac.toUpperCase(),
600 key = (mac !== '
00:
00:
00:
00:
00:
00') ? mac : rec.ip,
601 dns = hostInfo[mac] ? hostInfo[mac].name : null;
603 var link1 = document.createElement('a');
604 link1.onclick = renderHostDetail;
605 link1.href = '#' + rec.mac;
606 link1.setAttribute('data-col', 'ip');
607 link1.setAttribute('data-label', '<%:Source IP%
>');
608 link1.innerHTML = (mac !== '
00:
00:
00:
00:
00:
00') ? mac : '<%:other%
>';
610 var link2 = document.createElement('a');
611 link2.onclick = renderHostDetail;
612 link2.href = '#' + rec.mac;
613 link2.setAttribute('data-col', 'layer7');
614 link2.setAttribute('data-label', '<%:Protocol%
>');
615 link2.innerHTML =
"%1000.2m".format(rec.conns);
617 cell.innerHTML = formatHostname(dns);
618 cell.className = 'hostname';
620 row.insertCell(-
1).appendChild(link1);
621 row.insertCell(-
1).appendChild(link2);
622 row.insertCell(-
1).innerHTML =
"%1024.2mB".format(rec.rx_bytes);
623 row.insertCell(-
1).innerHTML =
"%1000.2mP".format(rec.rx_pkts);
624 row.insertCell(-
1).innerHTML =
"%1024.2mB".format(rec.tx_bytes);
625 row.insertCell(-
1).innerHTML =
"%1000.2mP".format(rec.tx_pkts);
628 value: rec.rx_bytes + rec.tx_bytes,
629 label: [
"%s: %%.2mB".format(key), row]
634 label: [
"%s: %%.2m".format(key), row]
637 rx_total += rec.rx_bytes;
638 tx_total += rec.tx_bytes;
639 conn_total += rec.conns;
642 pie('traf-pie', trafData);
643 pie('conn-pie', connData);
645 kpi('rx-total', '%
1024.2mB'.format(rx_total));
646 kpi('tx-total', '%
1024.2mB'.format(tx_total));
647 kpi('conn-total', '%
1000m'.format(conn_total));
648 kpi('host-total', '%u'.format(hostData.length));
651 function renderLayer7Data()
653 var rxData = [], txData = [];
654 var topConn = [[
0],[
0],[
0]], topRx = [[
0],[
0],[
0]], topTx = [[
0],[
0],[
0]];
655 var table = document.getElementById('layer7-data');
657 var layer7Data = query(
660 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
664 while (table.rows.length
> 1)
667 for (var i =
0, c =
0; i < layer7Data.length; i++) {
668 var rec = layer7Data[i],
669 row = table.insertRow(-
1);
673 label: [
"%s: %%.2mB".format(rec.layer7 || '<%:other%
>'), row]
678 label: [
"%s: %%.2mB".format(rec.layer7 || '<%:other%
>'), row]
681 row.insertCell(-
1).innerHTML = rec.layer7 || '<%:other%
>';
682 row.insertCell(-
1).innerHTML =
"%1000m".format(rec.conns);
683 row.insertCell(-
1).innerHTML =
"%1024.2mB".format(rec.rx_bytes);
684 row.insertCell(-
1).innerHTML =
"%1000.2mP".format(rec.rx_pkts);
685 row.insertCell(-
1).innerHTML =
"%1024.2mB".format(rec.tx_bytes);
686 row.insertCell(-
1).innerHTML =
"%1000.2mP".format(rec.tx_pkts);
689 topRx.push([rec.rx_bytes, rec.layer7]);
690 topTx.push([rec.tx_bytes, rec.layer7]);
691 topConn.push([rec.conns, rec.layer7]);
695 pie('layer7-rx-pie', rxData);
696 pie('layer7-tx-pie', txData);
698 topRx.sort(function(a, b) { return b[
0] - a[
0] });
699 topTx.sort(function(a, b) { return b[
0] - a[
0] });
700 topConn.sort(function(a, b) { return b[
0] - a[
0] });
702 kpi('layer7-total', layer7Data.length);
703 kpi('layer7-most-rx', topRx[
0][
1], topRx[
1][
1], topRx[
2][
1]);
704 kpi('layer7-most-tx', topTx[
0][
1], topTx[
1][
1], topTx[
2][
1]);
705 kpi('layer7-most-conn', topConn[
0][
1], topConn[
1][
1], topConn[
2][
1]);
708 function renderIPv6Data()
710 var table = document.getElementById('ipv6-data'),
723 null, ['family', 'mac'],
725 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
729 for (var i =
0, c =
0; i < ipv6Data.length; i++) {
730 var rec = ipv6Data[i],
731 mac = rec.mac.toUpperCase(),
733 fam = families[mac] ||
0,
734 recs = records[mac] || {};
736 if (rec.family ==
4) {
737 rx4_total += rec.rx_bytes;
738 tx4_total += rec.tx_bytes;
742 rx6_total += rec.rx_bytes;
743 tx6_total += rec.tx_bytes;
747 recs[rec.family] = rec;
753 for (var mac in families) {
754 switch (families[mac])
770 while (table.rows.length
> 1)
773 for (var mac in records) {
774 if (mac === '
00:
00:
00:
00:
00:
00')
777 var tbd = document.createElement('tbody'),
778 row = tbd.insertRow(-
1),
779 cell1 = row.insertCell(-
1),
780 cell2 = row.insertCell(-
1),
781 dns = hostInfo[mac] ? hostInfo[mac].name : null,
782 rec4 = records[mac][
4],
783 rec6 = records[mac][
6];
785 cell1.setAttribute('rowspan',
2);
786 cell1.innerHTML = formatHostname(dns);
787 cell1.className = 'hostname';
789 cell2.setAttribute('rowspan',
2);
790 cell2.innerHTML = mac;
792 row.insertCell(-
1).innerHTML = 'IPv4';
793 row.insertCell(-
1).innerHTML = rec4 ?
"%1024.2mB".format(rec4.rx_bytes) : '-';
794 row.insertCell(-
1).innerHTML = rec4 ?
"%1000.2mP".format(rec4.rx_pkts) : '-';
795 row.insertCell(-
1).innerHTML = rec4 ?
"%1024.2mB".format(rec4.tx_bytes) : '-';
796 row.insertCell(-
1).innerHTML = rec4 ?
"%1000.2mP".format(rec4.tx_pkts) : '-';
798 row = tbd.insertRow(-
1);
800 row.insertCell(-
1).innerHTML = 'IPv6';
801 row.insertCell(-
1).innerHTML = rec6 ?
"%1024.2mB".format(rec6.rx_bytes) : '-';
802 row.insertCell(-
1).innerHTML = rec6 ?
"%1000.2mP".format(rec6.rx_pkts) : '-';
803 row.insertCell(-
1).innerHTML = rec6 ?
"%1024.2mB".format(rec6.tx_bytes) : '-';
804 row.insertCell(-
1).innerHTML = rec6 ?
"%1000.2mP".format(rec6.tx_pkts) : '-';
806 table.appendChild(tbd);
809 pie('ipv6-share-pie', [{
810 value: rx4_total + tx4_total,
811 label: [
"IPv4: %.2mB"],
812 color: 'hsl(
140,
100%,
50%)'
814 value: rx6_total + tx6_total,
815 label: [
"IPv6: %.2mB"],
816 color: 'hsl(
180,
100%,
50%)'
819 pie('ipv6-hosts-pie', [{
821 label: [
"<%:%d IPv4-only hosts%>"],
822 color: 'hsl(
140,
100%,
50%)'
825 label: [
"<%:%d IPv6-only hosts%>"],
826 color: 'hsl(
180,
100%,
50%)'
829 label: [
"<%:%d dual-stack hosts%>"],
830 color: 'hsl(
50,
100%,
50%)'
833 kpi('ipv6-hosts', '%
.2f%%'.format(
100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total)));
834 kpi('ipv6-share', '%
.2f%%'.format(
100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total)));
835 kpi('ipv6-rx', '%
1024.2mB'.format(rx6_total));
836 kpi('ipv6-tx', '%
1024.2mB'.format(tx6_total));
839 function bubbleDismiss()
841 var bubble = document.getElementById('detail-bubble');
843 bubble.className = '';
844 document.body.appendChild(bubble);
852 <h2 name=
"content"><%:Netlink Bandwidth Monitor%
></h2>
854 <div id=
"detail-bubble">
855 <span id=
"bubble-arrow"></span>
858 <a class=
"dismiss" href=
"#" onclick=
"this.blur(); return bubbleDismiss()">×
</a>
860 <label>Download
</label>
861 <canvas id=
"bubble-pie1" width=
"100" height=
"100"></canvas>
864 <label>Upload
</label>
865 <canvas id=
"bubble-pie2" width=
"100" height=
"100"></canvas>
869 <li><%_Hostname:
<big id=
"bubble-hostname">example.org
</big>%
></li>
870 <li><%_Vendor:
<big id=
"bubble-vendor">Example Corp.
</big>%
></li>
874 <table id=
"bubble-table"></table>
881 <%:Select accounting period:%
>
882 <select id=
"nlbw.period" style=
"display:none"></select>
887 <ul class=
"cbi-tabmenu">
888 <li id=
"tab.nlbw.traffic" class=
"cbi-tab"><a href=
"#" onclick=
"return switchTab('traffic')"><%:Traffic Distribution%
></a></li>
889 <li id=
"tab.nlbw.layer7" class=
"cbi-tab-disabled"><a href=
"#" onclick=
"return switchTab('layer7')"><%:Application Protocols%
></a></li>
890 <li id=
"tab.nlbw.ipv6" class=
"cbi-tab-disabled"><a href=
"#" onclick=
"return switchTab('ipv6')"><%:IPv6%
></a></li>
891 <li id=
"tab.nlbw.export" class=
"cbi-tab-disabled"><a href=
"#" onclick=
"return switchTab('export')"><%:Export%
></a></li>
894 <div class=
"cbi-section" id=
"container.nlbw.traffic">
897 <label><%:Traffic / Host%
></label>
898 <canvas id=
"traf-pie" width=
"200" height=
"200"></canvas>
902 <label><%:Connections / Host%
></label>
903 <canvas id=
"conn-pie" width=
"200" height=
"200"></canvas>
908 <li><%_
<big id=
"host-total">0</big> hosts%
></li>
909 <li><%_
<big id=
"rx-total">0</big> download%
></li>
910 <li><%_
<big id=
"tx-total">0</big> upload%
></li>
911 <li><%_
<big id=
"conn-total">0</big> connections%
></li>
915 <table id=
"host-data">
917 <th width=
"10%" class=
"hostname"><%:Host%
></th>
918 <th width=
"5%"><%:MAC%
></th>
919 <th width=
"5%"><%:Connections%
></th>
920 <th width=
"30%" colspan=
"2"><%:Download (Bytes / Packets)%
></th>
921 <th width=
"30%" colspan=
"2"><%:Upload (Bytes / Packets)%
></th>
926 <div class=
"cbi-section" id=
"container.nlbw.layer7" style=
"display:none">
929 <label><%:Download / Application%
></label>
930 <canvas id=
"layer7-rx-pie" width=
"200" height=
"200"></canvas>
934 <label><%:Upload / Application%
></label>
935 <canvas id=
"layer7-tx-pie" width=
"200" height=
"200"></canvas>
940 <li><%_
<big id=
"layer7-total">0</big> different application protocols%
></li>
941 <li><%_
<big id=
"layer7-most-rx">0</big> cause the most download%
></li>
942 <li><%_
<big id=
"layer7-most-tx">0</big> cause the most upload%
></li>
943 <li><%_
<big id=
"layer7-most-conn">0</big> cause the most connections%
></li>
947 <table id=
"layer7-data">
949 <th width=
"20%"><%:Application%
></th>
950 <th width=
"10%"><%:Connections%
></th>
951 <th width=
"30%" colspan=
"2"><%:Download (Bytes / Packets)%
></th>
952 <th width=
"30%" colspan=
"2"><%:Upload (Bytes / Packets)%
></th>
957 <div class=
"cbi-section" id=
"container.nlbw.ipv6" style=
"display:none">
960 <label><%:IPv4 vs. IPv6%
></label>
961 <canvas id=
"ipv6-share-pie" width=
"200" height=
"200"></canvas>
965 <label><%:Dualstack enabled hosts%
></label>
966 <canvas id=
"ipv6-hosts-pie" width=
"200" height=
"200"></canvas>
971 <li><%_
<big id=
"ipv6-hosts">0%
</big> IPv6 support rate among hosts%
></li>
972 <li><%_
<big id=
"ipv6-share">0%
</big> of the total traffic is IPv6%
></li>
973 <li><%_
<big id=
"ipv6-rx">0B
</big> total IPv6 download%
></li>
974 <li><%_
<big id=
"ipv6-tx">0B
</big> total IPv6 upload%
></li>
978 <table id=
"ipv6-data">
980 <th width=
"10%" class=
"hostname"><%:Host%
></th>
981 <th width=
"5%"><%:MAC%
></th>
982 <th width=
"5%"><%:Family%
></th>
983 <th width=
"40%" colspan=
"2"><%:Download (Bytes / Packets)%
></th>
984 <th width=
"40%" colspan=
"2"><%:Upload (Bytes / Packets)%
></th>
989 <div class=
"cbi-section" id=
"container.nlbw.export" style=
"display:none">
991 <li><a href=
"<%=url('admin/nlbw/data')%>?type=csv&group_by=mac&order_by=-rx,-tx"><%:CSV, grouped by MAC%
></a></li>
992 <li><a href=
"<%=url('admin/nlbw/data')%>?type=csv&group_by=ip&order_by=-rx,-tx"><%:CSV, grouped by IP%
></a></li>
993 <li><a href=
"<%=url('admin/nlbw/data')%>?type=csv&group_by=layer7&order_by=-rx,-tx"><%:CSV, grouped by protocol%
></a></li>
994 <li><a href=
"<%=url('admin/nlbw/data')%>?type=json"><%:JSON dump%
></a></li>
998 <script type=
"text/javascript">//<![CDATA[
999 cbi_t_add('nlbw', 'traffic');
1000 cbi_t_add('nlbw', 'layer7');
1001 cbi_t_add('nlbw', 'ipv6');
1002 cbi_t_add('nlbw', 'export');
1004 XHR.get('<%=url(
"admin/nlbw/list")%
>', null, function(xhr, res) {
1006 if (res !== null && typeof(res) === 'object' && res.length
> 0) {
1007 trafficPeriods = res;
1011 xhr.open('GET', 'https://raw.githubusercontent.com/jow-/oui-database/master/oui.json', true);
1012 xhr.onreadystatechange = function() {
1013 if (xhr.readyState ===
4) {
1014 try { res = JSON.parse(xhr.responseText); }
1015 catch(e) { res = null; }
1017 if (res !== null && typeof(res) === 'object' && (res.length %
3) ===
0)
1020 fetchData(trafficPeriods[
0]);