luci-app-nlbwmon: improve initial view
[project/luci.git] / applications / luci-app-nlbwmon / luasrc / view / nlbw / display.htm
1 <%#
2  Copyright 2017 Jo-Philipp Wich <jo@mein.io>
3  Licensed to the public under the Apache License 2.0.
4 -%>
5
6 <% css = [[
7
8         #chartjs-tooltip {
9                 opacity: 0;
10                 position: absolute;
11                 background: rgba(0, 0, 0, .7);
12                 color: white;
13                 padding: 3px;
14                 border-radius: 3px;
15                 -webkit-transition: all .1s ease;
16                 transition: all .1s ease;
17                 pointer-events: none;
18                 -webkit-transform: translate(-50%, 0);
19                 transform: translate(-50%, 0);
20                 z-index: 200;
21         }
22
23         #chartjs-tooltip.above {
24                 -webkit-transform: translate(-50%, -100%);
25                 transform: translate(-50%, -100%);
26         }
27
28         #chartjs-tooltip.above:before {
29                 border: solid;
30                 border-color: #111 transparent;
31                 border-color: rgba(0, 0, 0, .8) transparent;
32                 border-width: 8px 8px 0 8px;
33                 bottom: 1em;
34                 content: "";
35                 display: block;
36                 left: 50%;
37                 top: 100%;
38                 position: absolute;
39                 z-index: 99;
40                 -webkit-transform: translate(-50%, 0);
41                 transform: translate(-50%, 0);
42         }
43
44         table {
45                 border: 1px solid #999;
46                 border-collapse: collapse;
47                 margin: 0 0 2px !important;
48         }
49
50         th, td, table table td {
51                 border: 1px solid #999;
52                 text-align: right;
53                 padding: 1px 3px !important;
54                 white-space: nowrap;
55         }
56
57         tbody td {
58                 border-bottom-color: #ccc;
59         }
60
61         tbody td[rowspan] {
62                 border-bottom-color: #999;
63         }
64
65         tbody tr:last-child td {
66                 border-bottom-color: #999;
67         }
68
69
70         .pie {
71                 width: 200px;
72                 display: inline-block;
73                 margin: 20px;
74         }
75
76         .pie label {
77                 font-weight: bold;
78                 font-size: 14px;
79                 display: block;
80                 margin-bottom: 10px;
81                 text-align: center;
82         }
83
84         .kpi {
85                 display: inline-block;
86                 margin: 80px 20px 20px;
87                 vertical-align: top;
88         }
89
90         .kpi ul {
91                 list-style: none;
92         }
93
94         .kpi li {
95                 margin: 10px;
96                 display: none;
97         }
98
99         .kpi big {
100                 font-weight: bold;
101         }
102
103         #detail-bubble {
104                 position: absolute;
105                 opacity: 0;
106                 visibility: hidden;
107         }
108
109         #detail-bubble.in {
110                 opacity: 1;
111                 visibility: visible;
112                 transition: opacity 0.5s;
113         }
114
115         #detail-bubble > div {
116                 border: 1px solid #ccc;
117                 border-radius: 2px;
118                 padding: 5px;
119                 background: #fcfcfc;
120         }
121
122         #detail-bubble .head {
123                 text-align: center;
124                 white-space: nowrap;
125                 position: relative;
126         }
127
128         #detail-bubble .head .dismiss {
129                 top: 0;
130                 right: 0;
131                 width: 20px;
132                 line-height: 20px;
133                 text-align: center;
134                 text-decoration: none;
135                 font-weight: bold;
136                 color: #000;
137                 position: absolute;
138                 font-size: 20px;
139         }
140
141         #detail-bubble .pie {
142                 width: 100px;
143                 margin: 5px;
144         }
145
146         #detail-bubble .kpi {
147                 margin: 40px 5px 5px;
148                 font-size: smaller;
149                 text-align: left;
150         }
151
152         #detail-bubble .kpi ul {
153                 margin: 0;
154         }
155
156         #bubble-arrow {
157                 border: 1px solid #ccc;
158                 border-width: 1px 0 0 1px;
159                 background: #fcfcfc;
160                 width: 15px;
161                 height: 15px;
162                 position: absolute;
163                 left: 0;
164                 top: -8px;
165                 transform: rotate(45deg);
166                 margin: 0 0 0 -8px;
167         }
168
169         tr.active > td {
170                 border-bottom: 2px solid red;
171         }
172
173         tr.active > td.active {
174                 border: 2px solid red;
175                 border-bottom: none;
176         }
177
178         td.detail {
179                 border: 2px solid red;
180                 border-top: none;
181                 opacity: 0;
182                 transition: opacity 0.5s;
183         }
184
185         td.detail.in {
186                 opacity: 1;
187         }
188
189         th.hostname,
190         td.hostname {
191                 text-align: left;
192         }
193
194 ]] -%>
195
196 <%+header%>
197
198 <script type="text/javascript" src="<%=resource%>/cbi.js?v=git-17.211.60529-fd6f892"></script>
199 <script type="text/javascript" src="<%=resource%>/nlbw.chart.min.js?v=git-17.211.60529-fd6f892"></script>
200 <script type="text/javascript">//<![CDATA[
201
202 var chartRegistry = {},
203         trafficPeriods = [],
204         trafficData = { columns: [], data: [] },
205         hostNames = {},
206         hostInfo = <%=luci.util.serialize_json(luci.sys.net.host_hints())%>,
207         ouiData = [];
208
209
210 function off(elem)
211 {
212         var val = [0, 0];
213         do {
214                 if (!isNaN(elem.offsetLeft) && !isNaN(elem.offsetTop)) {
215                         val[0] += elem.offsetLeft;
216                         val[1] += elem.offsetTop;
217                 }
218         }
219         while ((elem = elem.offsetParent) != null);
220         return val;
221 }
222
223 Chart.defaults.global.customTooltips = function(tooltip) {
224         var tooltipEl = document.getElementById('chartjs-tooltip');
225
226         if (!tooltipEl) {
227                 tooltipEl = document.createElement('div');
228                 tooltipEl.setAttribute('id', 'chartjs-tooltip');
229                 document.body.appendChild(tooltipEl);
230         }
231
232         if (!tooltip) {
233                 if (tooltipEl.row)
234                         tooltipEl.row.style.backgroundColor = '';
235
236                 tooltipEl.style.opacity = 0;
237                 return;
238         }
239
240         var pos = off(tooltip.chart.canvas);
241
242         tooltipEl.className = tooltip.yAlign;
243         tooltipEl.innerHTML = tooltip.text[0];
244
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';
248
249         var row = tooltip.text[1],
250             hue = tooltip.text[2];
251
252         if (row && !isNaN(hue)) {
253                 row.style.backgroundColor = 'hsl(%u, 100%%, 80%%)'.format(hue);
254                 tooltipEl.row = row;
255         }
256 };
257
258 Chart.defaults.global.tooltipFontSize = 10;
259 Chart.defaults.global.tooltipTemplate = function(tip) {
260         tip.label[0] = tip.label[0].format(tip.value);
261         return tip.label;
262 };
263
264 function kpi(id, val1, val2, val3)
265 {
266         var e = document.getElementById(id);
267
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);
272         else if (val1)
273                 e.innerHTML = val1;
274
275         e.parentNode.style.display = val1 ? 'list-item' : '';
276 }
277
278 function pie(id, data)
279 {
280         data.sort(function(a, b) { return b.value - a.value });
281
282         if (data.length === 0 || (data.length === 1 && data[0].value === 0))
283                 data[0] = {
284                         value: 1,
285                         color: '#cccccc',
286                         label: [ '<%:no traffic%>' ]
287                 };
288
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);
294                 }
295         }
296
297         var ctx = document.getElementById(id).getContext('2d');
298
299         if (chartRegistry.hasOwnProperty(id))
300                 chartRegistry[id].destroy();
301
302         chartRegistry[id] = new Chart(ctx).Doughnut(data, {
303                 segmentStrokeWidth: 1,
304                 percentageInnerCutout: 30
305         });
306
307         return chartRegistry[id];
308 }
309
310 function query(filter, group, order)
311 {
312         var keys = [], columns = {}, records = {}, result = [];
313
314         if (typeof(group) !== 'function' && typeof(group) !== 'object')
315                 group = ['mac'];
316
317         for (var i = 0; i < trafficData.columns.length; i++)
318                 columns[trafficData.columns[i]] = i;
319
320         for (var i = 0; i < trafficData.data.length; i++) {
321                 var record = trafficData.data[i];
322
323                 if (typeof(filter) === 'function' && filter(columns, record) !== true)
324                         continue;
325
326                 var key;
327
328                 if (typeof(group) === 'function') {
329                         key = group(columns, record);
330                 }
331                 else {
332                         key = [];
333
334                         for (var j = 0; j < group.length; j++)
335                                 if (columns.hasOwnProperty(group[j]))
336                                         key.push(record[columns[group[j]]]);
337
338                         key = key.join(',');
339                 }
340
341                 if (!records.hasOwnProperty(key)) {
342                         var rec = {};
343
344                         for (var col in columns)
345                                 rec[col] = record[columns[col]];
346
347                         records[key] = rec;
348                         result.push(rec);
349                 }
350                 else {
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];
356                 }
357         }
358
359         if (typeof(order) === 'function')
360                 result.sort(order);
361
362         return result;
363 }
364
365 function oui(mac) {
366         var m, l = 0, r = ouiData.length / 3 - 1;
367         var mac1 = parseInt(mac.replace(/[^a-fA-F0-9]/g, ''), 16);
368
369         while (l <= r) {
370                 m = l + Math.floor((r - l) / 2);
371
372                 var mask = (0xffffffffffff -
373                                         (Math.pow(2, 48 - ouiData[m * 3 + 1]) - 1));
374
375                 var mac1_hi = ((mac1 / 0x10000) & (mask / 0x10000)) >>> 0;
376                 var mac1_lo = ((mac1 &  0xffff) & (mask &  0xffff)) >>> 0;
377
378                 var mac2 = parseInt(ouiData[m * 3], 16);
379                 var mac2_hi = (mac2 / 0x10000) >>> 0;
380                 var mac2_lo = (mac2 &  0xffff) >>> 0;
381
382                 if (mac1_hi === mac2_hi && mac1_lo === mac2_lo)
383                         return ouiData[m * 3 + 2];
384
385                 if (mac2_hi > mac1_hi ||
386                         (mac2_hi === mac1_hi && mac2_lo > mac1_lo))
387                         r = m - 1;
388                 else
389                         l = m + 1;
390         }
391
392         return null;
393 }
394
395
396 function fetchData(period)
397 {
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')
400                         trafficData = res;
401
402                 var addrs = query(null, ['ip'], null);
403                 var ipAddrs = [];
404
405                 for (var i = 0; i < addrs.length; i++)
406                         if (ipAddrs.indexOf(addrs[i].ip) < 0)
407                                 ipAddrs.push(addrs[i].ip);
408
409                 renderHostData();
410                 renderLayer7Data();
411                 renderIPv6Data();
412
413                 XHR.get('<%=url("admin/nlbw/ptr")%>/' + ipAddrs.join('/'), null, function(xhr, res) {
414                         if (res !== null && typeof(res) === 'object')
415                                 hostNames = res;
416                 });
417         });
418 }
419
420 function switchTab(tab)
421 {
422         bubbleDismiss();
423
424         return cbi_t_switch('nlbw', tab);
425 }
426
427 function renderPeriods()
428 {
429         var sel = document.getElementById('nlbw.period');
430
431         for (var e, i = trafficPeriods.length - 1; e = trafficPeriods[i]; i--) {
432                 var d1 = new Date(e);
433                 var d2;
434
435                 if (i) {
436                         d2 = new Date(trafficPeriods[i - 1]);
437                         d2.setDate(d2.getDate() - 1);
438                 }
439                 else {
440                         d2 = new Date();
441                 }
442
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());
449
450                 sel.appendChild(opt);
451         }
452
453         sel.selectedIndex = sel.childNodes.length - 1;
454         sel.style.display = '';
455
456         sel.onchange = function() {
457                 bubbleDismiss();
458                 fetchData(sel.options[sel.selectedIndex].value);
459         }
460 }
461
462 function renderHostDetail()
463 {
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');
470
471         bubbleDismiss();
472
473         var detailData = query(
474                 function(c, r) {
475                         return ((r[c.mac] === key || r[c.ip] === key) &&
476                                 (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0));
477                 },
478                 [col],
479                 function(r1, r2) {
480                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
481                 }
482         );
483
484         var rxData = [], txData = [];
485
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>' +
491         '</tr>';
492
493         for (var i = 0; i < detailData.length; i++) {
494                 var rec = detailData[i],
495                     row = table.insertRow(-1);
496
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);
503
504                 rxData.push({
505                         label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row],
506                         value: rec.rx_bytes
507                 });
508
509                 txData.push({
510                         label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row],
511                         value: rec.tx_bytes
512                 });
513         }
514
515         pie('bubble-pie1', rxData);
516         pie('bubble-pie2', txData);
517
518         var mac = key.toUpperCase();
519         var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null;
520
521         if (!name)
522                 for (var i = 0; i < detailData.length; i++)
523                         if ((name = hostNames[detailData[i].ip]) !== undefined)
524                                 break;
525
526         if (mac !== '00:00:00:00:00:00') {
527                 kpi('bubble-hostname', name);
528                 kpi('bubble-vendor', oui(mac));
529         }
530         else {
531                 kpi('bubble-hostname');
532                 kpi('bubble-vendor');
533         }
534
535         var tr = this.parentNode.parentNode,
536             xy = off(tr),
537             xy2 = off(this);
538
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';
543
544         bubble.className = 'in';
545
546         return false;
547 }
548
549 function formatHostname(dns)
550 {
551         if (dns === undefined || dns === null || dns === '')
552                 return '-';
553
554         dns = dns.split('.')[0];
555
556         if (dns.length > 12)
557                 return '<span title="%q">%h…</span>'.format(dns, dns.substr(0, 12));
558
559         return '%h'.format(dns);
560 }
561
562 function renderHostData()
563 {
564         var trafData = [], connData = [];
565         var rx_total = 0, tx_total = 0, conn_total = 0;
566         var table = document.getElementById('host-data');
567
568         var hostData = query(
569                 function(c, r) {
570                         return (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0);
571                 },
572                 ['mac'],
573                 //function(c, r) {
574                 //      return (r[c.mac] !== '00:00:00:00:00:00') ? r[c.mac] : r[c.ip];
575                 //},
576                 function(r1, r2) {
577                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
578                 }
579         );
580
581         while (table.rows.length > 1)
582                 table.deleteRow(1);
583
584         for (var i = 0; i < hostData.length; i++) {
585                 var row = table.insertRow(-1),
586                     cell = row.insertCell(-1),
587                     rec = hostData[i],
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;
591
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%>';
598
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);
605
606                 cell.innerHTML = formatHostname(dns);
607                 cell.className = 'hostname';
608
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);
615
616                 trafData.push({
617                         value: rec.rx_bytes + rec.tx_bytes,
618                         label: ["%s: %%.2mB".format(key), row]
619                 });
620
621                 connData.push({
622                         value: rec.conns,
623                         label: ["%s: %%.2m".format(key), row]
624                 });
625
626                 rx_total += rec.rx_bytes;
627                 tx_total += rec.tx_bytes;
628                 conn_total += rec.conns;
629         }
630
631         if (table.rows.length === 1) {
632                 var cell = table.insertRow(-1).insertCell(-1);
633
634                 cell.setAttribute('colspan', 6);
635                 cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
636         }
637
638         pie('traf-pie', trafData);
639         pie('conn-pie', connData);
640
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));
645 }
646
647 function renderLayer7Data()
648 {
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');
652
653         var layer7Data = query(
654                 null, ['layer7'],
655                 function(r1, r2) {
656                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
657                 }
658         );
659
660         while (table.rows.length > 1)
661                 table.deleteRow(1);
662
663         for (var i = 0, c = 0; i < layer7Data.length; i++) {
664                 var rec = layer7Data[i],
665                     row = table.insertRow(-1);
666
667                 rxData.push({
668                         value: rec.rx_bytes,
669                         label: ["%s: %%.2mB".format(rec.layer7 || '<%:other%>'), row]
670                 });
671
672                 txData.push({
673                         value: rec.tx_bytes,
674                         label: ["%s: %%.2mB".format(rec.layer7 || '<%:other%>'), row]
675                 });
676
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);
683
684                 if (rec.layer7) {
685                         topRx.push([rec.rx_bytes, rec.layer7]);
686                         topTx.push([rec.tx_bytes, rec.layer7]);
687                         topConn.push([rec.conns, rec.layer7]);
688                 }
689         }
690
691         if (table.rows.length === 1) {
692                 var cell = table.insertRow(-1).insertCell(-1);
693
694                 cell.setAttribute('colspan', 6);
695                 cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
696         }
697
698         pie('layer7-rx-pie', rxData);
699         pie('layer7-tx-pie', txData);
700
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] });
704
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]);
709 }
710
711 function renderIPv6Data()
712 {
713         var table     = document.getElementById('ipv6-data'),
714             col       = { },
715             rx4_total = 0,
716             tx4_total = 0,
717             rx6_total = 0,
718             tx6_total = 0,
719             v4_total  = 0,
720             v6_total  = 0,
721             ds_total  = 0,
722             families  = { },
723             records   = { };
724
725         ipv6Data = query(
726                 null, ['family', 'mac'],
727                 function(r1, r2) {
728                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
729                 }
730         );
731
732         for (var i = 0, c = 0; i < ipv6Data.length; i++) {
733                 var rec = ipv6Data[i],
734                     mac = rec.mac.toUpperCase(),
735                     ip  = rec.ip,
736                     fam = families[mac] || 0,
737                     recs = records[mac] || {};
738
739                 if (rec.family == 4) {
740                         rx4_total += rec.rx_bytes;
741                         tx4_total += rec.tx_bytes;
742                         fam |= 1;
743                 }
744                 else {
745                         rx6_total += rec.rx_bytes;
746                         tx6_total += rec.tx_bytes;
747                         fam |= 2;
748                 }
749
750                 recs[rec.family] = rec;
751                 records[mac] = recs;
752
753                 families[mac] = fam;
754         }
755
756         for (var mac in families) {
757                 switch (families[mac])
758                 {
759                 case 3:
760                         ds_total++;
761                         break;
762
763                 case 2:
764                         v6_total++;
765                         break;
766
767                 case 1:
768                         v4_total++;
769                         break;
770                 }
771         }
772
773         while (table.rows.length > 1)
774                 table.deleteRow(1);
775
776         for (var mac in records) {
777                 if (mac === '00:00:00:00:00:00')
778                         continue;
779
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];
786
787                 cell1.setAttribute('rowspan', 2);
788                 cell1.innerHTML = formatHostname(dns);
789                 cell1.className = 'hostname';
790
791                 cell2.setAttribute('rowspan', 2);
792                 cell2.innerHTML = mac;
793
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)  : '-';
799
800                 row = table.insertRow(-1);
801
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)  : '-';
807         }
808
809         if (table.rows.length === 1) {
810                 var cell = table.insertRow(-1).insertCell(-1);
811
812                 cell.setAttribute('colspan', 7);
813                 cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
814         }
815
816         var shareData = [], hostsData = [];
817
818         if (rx4_total > 0 || tx4_total > 0)
819                 shareData.push({
820                         value: rx4_total + tx4_total,
821                         label: ["IPv4: %.2mB"],
822                         color: 'hsl(140, 100%, 50%)'
823                 });
824
825         if (rx6_total > 0 || tx6_total > 0)
826                 shareData.push({
827                         value: rx6_total + tx6_total,
828                         label: ["IPv6: %.2mB"],
829                         color: 'hsl(180, 100%, 50%)'
830                 });
831
832         if (v4_total > 0)
833                 hostsData.push({
834                         value: v4_total,
835                         label: ["<%:%d IPv4-only hosts%>"],
836                         color: 'hsl(140, 100%, 50%)'
837                 });
838
839         if (v6_total > 0)
840                 hostsData.push({
841                         value: v6_total,
842                         label: ["<%:%d IPv6-only hosts%>"],
843                         color: 'hsl(180, 100%, 50%)'
844                 });
845
846         if (ds_total > 0)
847                 hostsData.push({
848                         value: ds_total,
849                         label: ["<%:%d dual-stack hosts%>"],
850                         color: 'hsl(50, 100%, 50%)'
851                 });
852
853         pie('ipv6-share-pie', shareData);
854         pie('ipv6-hosts-pie', hostsData);
855
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));
860 }
861
862 function bubbleDismiss()
863 {
864         var bubble = document.getElementById('detail-bubble');
865
866         bubble.className = '';
867         document.body.appendChild(bubble);
868
869         return false;
870 }
871
872
873 //]]></script>
874
875 <h2 name="content"><%:Netlink Bandwidth Monitor%></h2>
876
877 <div id="detail-bubble">
878         <span id="bubble-arrow"></span>
879         <div>
880                 <div class="head">
881                         <a class="dismiss" href="#" onclick="this.blur(); return bubbleDismiss()">×</a>
882                         <div class="pie">
883                                 <label>Download</label>
884                                 <canvas id="bubble-pie1" width="100" height="100"></canvas>
885                         </div>
886                         <div class="pie">
887                                 <label>Upload</label>
888                                 <canvas id="bubble-pie2" width="100" height="100"></canvas>
889                         </div>
890                         <div class="kpi">
891                                 <ul>
892                                         <li><%_Hostname: <big id="bubble-hostname">example.org</big>%></li>
893                                         <li><%_Vendor: <big id="bubble-vendor">Example Corp.</big>%></li>
894                                 </ul>
895                         </div>
896                 </div>
897                 <table id="bubble-table"></table>
898         </div>
899 </div>
900
901 <hr>
902
903 <p>
904         <%:Select accounting period:%>
905         <select id="nlbw.period" style="display:none"></select>
906 </p>
907
908 <hr>
909
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>
915 </ul>
916
917 <div class="cbi-section" id="container.nlbw.traffic">
918         <div>
919                 <div class="pie">
920                         <label><%:Traffic / Host%></label>
921                         <canvas id="traf-pie" width="200" height="200"></canvas>
922                 </div>
923
924                 <div class="pie">
925                         <label><%:Connections / Host%></label>
926                         <canvas id="conn-pie" width="200" height="200"></canvas>
927                 </div>
928
929                 <div class="kpi">
930                         <ul>
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>
935                         </ul>
936                 </div>
937         </div>
938         <table id="host-data">
939                 <tr>
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>
945                 </tr>
946         </table>
947 </div>
948
949 <div class="cbi-section" id="container.nlbw.layer7" style="display:none">
950         <div>
951                 <div class="pie">
952                         <label><%:Download / Application%></label>
953                         <canvas id="layer7-rx-pie" width="200" height="200"></canvas>
954                 </div>
955
956                 <div class="pie">
957                         <label><%:Upload / Application%></label>
958                         <canvas id="layer7-tx-pie" width="200" height="200"></canvas>
959                 </div>
960
961                 <div class="kpi">
962                         <ul>
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>
967                         </ul>
968                 </div>
969         </div>
970         <table id="layer7-data">
971                 <tr>
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>
976                 </tr>
977         </table>
978 </div>
979
980 <div class="cbi-section" id="container.nlbw.ipv6" style="display:none">
981         <div>
982                 <div class="pie">
983                         <label><%:IPv4 vs. IPv6%></label>
984                         <canvas id="ipv6-share-pie" width="200" height="200"></canvas>
985                 </div>
986
987                 <div class="pie">
988                         <label><%:Dualstack enabled hosts%></label>
989                         <canvas id="ipv6-hosts-pie" width="200" height="200"></canvas>
990                 </div>
991
992                 <div class="kpi">
993                         <ul>
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>
998                         </ul>
999                 </div>
1000         </div>
1001         <table id="ipv6-data">
1002                 <tr>
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>
1008                 </tr>
1009         </table>
1010 </div>
1011
1012 <div class="cbi-section" id="container.nlbw.export" style="display:none">
1013         <ul>
1014                 <li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=mac&#38;order_by=-rx,-tx"><%:CSV, grouped by MAC%></a></li>
1015                 <li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=ip&#38;order_by=-rx,-tx"><%:CSV, grouped by IP%></a></li>
1016                 <li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=layer7&#38;order_by=-rx,-tx"><%:CSV, grouped by protocol%></a></li>
1017                 <li><a href="<%=url('admin/nlbw/data')%>?type=json"><%:JSON dump%></a></li>
1018         </ul>
1019 </div>
1020
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');
1026
1027         XHR.get('<%=url("admin/nlbw/list")%>', null, function(xhr, res) {
1028
1029                 if (res !== null && typeof(res) === 'object' && res.length > 0) {
1030                         trafficPeriods = res;
1031                         renderPeriods();
1032                 }
1033
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; }
1039
1040                                 if (res !== null && typeof(res) === 'object' && (res.length % 3) === 0)
1041                                         ouiData = res;
1042
1043                                 fetchData(trafficPeriods[0]);
1044                         }
1045                 };
1046                 xhr.send(null);
1047         });
1048 //]]></script>
1049
1050 <%+footer%>