projects / project / luci.git / blob
? search:
summary | shortlog | log | commit | commitdiff | tree
history | raw | HEAD
luci-app-nlbwmon: gracefully handle failing oui db download
[project/luci.git] / applications / luci-app-nlbwmon / htdocs / luci-static / resources / view / nlbw / display.js
1 'use strict';
2 'require view';
3 'require network';
4 'require request';
5 'require fs';
6 'require ui';
7 'require rpc';
8 'require dom';
9
10 var callNetworkRrdnsLookup = rpc.declare({
11 object: 'network.rrdns',
12 method: 'lookup',
13 params: [ 'addrs', 'timeout', 'limit' ],
14 expect: { '': {} }
15 });
16
17 var chartRegistry = {},
18 trafficPeriods = [],
19 trafficData = { columns: [], data: [] },
20 hostNames = {},
21 hostInfo = {},
22 ouiData = [];
23
24 return view.extend({
25 load: function() {
26 return Promise.all([
27 this.loadHosts(),
28 this.loadPeriods(),
29 this.loadData(),
30 this.loadOUI()
31 ]);
32 },
33
34 loadHosts: function() {
35 return L.resolveDefault(network.getHostHints()).then(function(res) {
36 if (res) {
37 var hints = res.getMACHints();
38
39 for (var i = 0; i < hints.length; i++) {
40 hostInfo[hints[i][0]] = {
41 name: res.getHostnameByMACAddr(hints[i][0]),
42 ipv6: res.getIP6AddrByMACAddr(hints[i][0]),
43 ipv4: res.getIPAddrByMACAddr(hints[i][0])
44 };
45 }
46 }
47 });
48 },
49
50 loadOUI: function() {
51 var url = 'https://raw.githubusercontent.com/jow-/oui-database/master/oui.json';
52
53 return L.resolveDefault(request.get(url, { cache: true })).then(function(res) {
54 res = res ? res.json() : [];
55
56 if (Array.isArray(res))
57 ouiData = res;
58 });
59 },
60
61 loadPeriods: function() {
62 return L.resolveDefault(fs.exec_direct('/usr/libexec/nlbwmon-action', [ 'periods' ], 'json')).then(function(res) {
63 if (L.isObject(res) && Array.isArray(res.periods))
64 trafficPeriods = res.periods;
65 });
66 },
67
68 loadData: function(period) {
69 var args = [ 'download', '-g', 'family,mac,ip,layer7', '-o', '-rx_bytes,-tx_bytes' ];
70
71 if (period)
72 args.push('-t', period);
73
74 return fs.exec_direct('/usr/libexec/nlbwmon-action', args, 'json').then(L.bind(function(res) {
75 if (!L.isObject(res) || !Array.isArray(res.columns) || !Array.isArray(res.data))
76 throw new Error(_('Malformed data received'));
77
78 trafficData = res;
79
80 var addrs = this.query(null, [ 'ip' ], null),
81 ipAddrs = [];
82
83 for (var i = 0; i < addrs.length; i++)
84 if (ipAddrs.indexOf(addrs[i].ip) < 0)
85 ipAddrs.push(addrs[i].ip);
86
87 if (ipAddrs.length)
88 return L.resolveDefault(callNetworkRrdnsLookup(ipAddrs, 1000, 1000), {}).then(function(res) {
89 hostNames = res;
90 });
91 }, this)).catch(function(err) {
92 ui.addNotification(null, _('Unable to fetch traffic statistic data: %s').format(err.message));
93 });
94 },
95
96 off: function(elem) {
97 var val = [0, 0];
98 do {
99 if (!isNaN(elem.offsetLeft) && !isNaN(elem.offsetTop)) {
100 val[0] += elem.offsetLeft;
101 val[1] += elem.offsetTop;
102 }
103 }
104 while ((elem = elem.offsetParent) != null);
105 return val;
106 },
107
108 kpi: function(id, val1, val2, val3) {
109 var e = L.dom.elem(id) ? id : document.getElementById(id);
110
111 if (val1 && val2 && val3)
112 e.innerHTML = _('%s, %s and %s').format(val1, val2, val3);
113 else if (val1 && val2)
114 e.innerHTML = _('%s and %s').format(val1, val2);
115 else if (val1)
116 e.innerHTML = val1;
117
118 e.parentNode.style.display = val1 ? 'list-item' : '';
119 },
120
121 pie: function(id, data) {
122 var total = data.reduce(function(n, d) { return n + d.value }, 0);
123
124 data.sort(function(a, b) { return b.value - a.value });
125
126 if (total === 0)
127 data = [{
128 value: 1,
129 color: '#cccccc',
130 label: [ _('no traffic') ]
131 }];
132
133 for (var i = 0; i < data.length; i++) {
134 if (!data[i].color) {
135 var hue = 120 / (data.length-1) * i;
136 data[i].color = 'hsl(%u, 80%%, 50%%)'.format(hue);
137 data[i].label.push(hue);
138 }
139 }
140
141 var node = L.dom.elem(id) ? id : document.getElementById(id),
142 key = L.dom.elem(id) ? id.id : id,
143 ctx = node.getContext('2d');
144
145 if (chartRegistry.hasOwnProperty(key))
146 chartRegistry[key].destroy();
147
148 chartRegistry[key] = new Chart(ctx).Doughnut(data, {
149 segmentStrokeWidth: 1,
150 percentageInnerCutout: 30
151 });
152
153 return chartRegistry[key];
154 },
155
156 oui: function(mac) {
157 var m, l = 0, r = ouiData.length / 3 - 1;
158 var mac1 = parseInt(mac.replace(/[^a-fA-F0-9]/g, ''), 16);
159
160 while (l <= r) {
161 m = l + Math.floor((r - l) / 2);
162
163 var mask = (0xffffffffffff -
164 (Math.pow(2, 48 - ouiData[m * 3 + 1]) - 1));
165
166 var mac1_hi = ((mac1 / 0x10000) & (mask / 0x10000)) >>> 0;
167 var mac1_lo = ((mac1 & 0xffff) & (mask & 0xffff)) >>> 0;
168
169 var mac2 = parseInt(ouiData[m * 3], 16);
170 var mac2_hi = (mac2 / 0x10000) >>> 0;
171 var mac2_lo = (mac2 & 0xffff) >>> 0;
172
173 if (mac1_hi === mac2_hi && mac1_lo === mac2_lo)
174 return ouiData[m * 3 + 2];
175
176 if (mac2_hi > mac1_hi ||
177 (mac2_hi === mac1_hi && mac2_lo > mac1_lo))
178 r = m - 1;
179 else
180 l = m + 1;
181 }
182
183 return null;
184 },
185
186 query: function(filter, group, order) {
187 var keys = [], columns = {}, records = {}, result = [];
188
189 if (typeof(group) !== 'function' && typeof(group) !== 'object')
190 group = ['mac'];
191
192 for (var i = 0; i < trafficData.columns.length; i++)
193 columns[trafficData.columns[i]] = i;
194
195 for (var i = 0; i < trafficData.data.length; i++) {
196 var record = trafficData.data[i];
197
198 if (typeof(filter) === 'function' && filter(columns, record) !== true)
199 continue;
200
201 var key;
202
203 if (typeof(group) === 'function') {
204 key = group(columns, record);
205 }
206 else {
207 key = [];
208
209 for (var j = 0; j < group.length; j++)
210 if (columns.hasOwnProperty(group[j]))
211 key.push(record[columns[group[j]]]);
212
213 key = key.join(',');
214 }
215
216 if (!records.hasOwnProperty(key)) {
217 var rec = {};
218
219 for (var col in columns)
220 rec[col] = record[columns[col]];
221
222 records[key] = rec;
223 result.push(rec);
224 }
225 else {
226 records[key].conns += record[columns.conns];
227 records[key].rx_bytes += record[columns.rx_bytes];
228 records[key].rx_pkts += record[columns.rx_pkts];
229 records[key].tx_bytes += record[columns.tx_bytes];
230 records[key].tx_pkts += record[columns.tx_pkts];
231 }
232 }
233
234 if (typeof(order) === 'function')
235 result.sort(order);
236
237 return result;
238 },
239
240 renderPeriods: function() {
241 if (!trafficPeriods.length)
242 return E([]);
243
244 var choices = {},
245 keys = [];
246
247 for (var e, i = trafficPeriods.length - 1; e = trafficPeriods[i]; i--) {
248 var ymd1 = e.split(/-/);
249 var d1 = new Date(+ymd1[0], +ymd1[1] - 1, +ymd1[2]);
250 var ymd2, d2, pd;
251
252 if (i) {
253 ymd2 = trafficPeriods[i - 1].split(/-/);
254 d2 = new Date(+ymd2[0], +ymd2[1] - 1, +ymd2[2]);
255 d2.setDate(d2.getDate() - 1);
256 pd = e;
257 }
258 else {
259 d2 = new Date();
260 pd = '-';
261 }
262
263 keys.push(pd);
264 choices[pd] = '%04d-%02d-%02d - %04d-%02d-%02d'.format(
265 d1.getFullYear(), d1.getMonth() + 1, d1.getDate(),
266 d2.getFullYear(), d2.getMonth() + 1, d2.getDate()
267 );
268 }
269
270 var dropdown = new ui.Dropdown('-', choices, { sort: keys, optional: false }).render();
271
272 dropdown.addEventListener('cbi-dropdown-change', ui.createHandlerFn(this, function(ev) {
273 ui.hideTooltip(ev);
274
275 var period = ev.detail.value.value != '-' ? ev.detail.value.value : null;
276
277 return this.loadData(period).then(L.bind(function() {
278 this.renderHostData();
279 this.renderLayer7Data();
280 this.renderIPv6Data();
281 }, this));
282 }));
283
284 return E([], [
285 E('p', [ _('Select accounting period:'), ' ', dropdown ]),
286 E('hr')
287 ]);
288 },
289
290 formatHostname: function(dns) {
291 if (dns === undefined || dns === null || dns === '')
292 return '-';
293
294 dns = dns.split('.')[0];
295
296 if (dns.length > 12)
297 return '<span title="%q">%h…</span>'.format(dns, dns.substr(0, 12));
298
299 return '%h'.format(dns);
300 },
301
302 renderHostData: function() {
303 var trafData = [], connData = [];
304 var rx_total = 0, tx_total = 0, conn_total = 0;
305
306 var hostData = this.query(
307 function(c, r) {
308 return (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0);
309 },
310 ['mac'],
311 //function(c, r) {
312 // return (r[c.mac] !== '00:00:00:00:00:00') ? r[c.mac] : r[c.ip];
313 //},
314 function(r1, r2) {
315 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
316 }
317 );
318
319 var rows = [];
320
321 for (var i = 0; i < hostData.length; i++) {
322 var rec = hostData[i],
323 mac = rec.mac.toUpperCase(),
324 key = (mac !== '00:00:00:00:00:00') ? mac : rec.ip,
325 dns = hostInfo[mac] ? hostInfo[mac].name : null;
326
327 var cell = E('div', this.formatHostname(dns));
328
329 rows.push([
330 cell,
331 E('a', {
332 'href': '#' + rec.mac,
333 'data-col': 'ip',
334 'data-tooltip': _('Source IP')
335 }, (mac !== '00:00:00:00:00:00') ? mac : _('other')),
336 E('a', {
337 'href': '#' + rec.mac,
338 'data-col': 'layer7',
339 'data-tooltip': _('Protocol')
340 }, '%1000.2m'.format(rec.conns)),
341 '%1024.2mB'.format(rec.rx_bytes),
342 '%1000.2mP'.format(rec.rx_pkts),
343 '%1024.2mB'.format(rec.tx_bytes),
344 '%1000.2mP'.format(rec.tx_pkts)
345 ]);
346
347 trafData.push({
348 value: rec.rx_bytes + rec.tx_bytes,
349 label: ["%s: %%.2mB".format(key), cell]
350 });
351
352 connData.push({
353 value: rec.conns,
354 label: ["%s: %%.2m".format(key), cell]
355 });
356
357 rx_total += rec.rx_bytes;
358 tx_total += rec.tx_bytes;
359 conn_total += rec.conns;
360 }
361
362 cbi_update_table('#host-data', rows, E('em', [
363 _('No data recorded yet.'), ' ',
364 E('a', {
365 'href': '#',
366 'click': ui.createHandlerFn(this, 'handleCommit')
367 }, _('Force reload…'))
368 ]));
369
370 this.pie('traf-pie', trafData);
371 this.pie('conn-pie', connData);
372
373 this.kpi('rx-total', '%1024.2mB'.format(rx_total));
374 this.kpi('tx-total', '%1024.2mB'.format(tx_total));
375 this.kpi('conn-total', '%1000m'.format(conn_total));
376 this.kpi('host-total', '%u'.format(hostData.length));
377 },
378
379 renderLayer7Data: function() {
380 var rxData = [], txData = [];
381 var topConn = [[0],[0],[0]], topRx = [[0],[0],[0]], topTx = [[0],[0],[0]];
382
383 var layer7Data = this.query(
384 null, ['layer7'],
385 function(r1, r2) {
386 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
387 }
388 );
389
390 var rows = [];
391
392 for (var i = 0, c = 0; i < layer7Data.length; i++) {
393 var rec = layer7Data[i],
394 cell = E('div', rec.layer7 || _('other'));
395
396 rows.push([
397 cell,
398 '%1000m'.format(rec.conns),
399 '%1024.2mB'.format(rec.rx_bytes),
400 '%1000.2mP'.format(rec.rx_pkts),
401 '%1024.2mB'.format(rec.tx_bytes),
402 '%1000.2mP'.format(rec.tx_pkts)
403 ]);
404
405 rxData.push({
406 value: rec.rx_bytes,
407 label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell]
408 });
409
410 txData.push({
411 value: rec.tx_bytes,
412 label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell]
413 });
414
415 if (rec.layer7) {
416 topRx.push([rec.rx_bytes, rec.layer7]);
417 topTx.push([rec.tx_bytes, rec.layer7]);
418 topConn.push([rec.conns, rec.layer7]);
419 }
420 }
421
422 cbi_update_table('#layer7-data', rows, E('em', [
423 _('No data recorded yet.'), ' ',
424 E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
425 ]));
426
427 this.pie('layer7-rx-pie', rxData);
428 this.pie('layer7-tx-pie', txData);
429
430 topRx.sort(function(a, b) { return b[0] - a[0] });
431 topTx.sort(function(a, b) { return b[0] - a[0] });
432 topConn.sort(function(a, b) { return b[0] - a[0] });
433
434 this.kpi('layer7-total', layer7Data.length);
435 this.kpi('layer7-most-rx', topRx[0][1], topRx[1][1], topRx[2][1]);
436 this.kpi('layer7-most-tx', topTx[0][1], topTx[1][1], topTx[2][1]);
437 this.kpi('layer7-most-conn', topConn[0][1], topConn[1][1], topConn[2][1]);
438 },
439
440 renderIPv6Data: function() {
441 var col = { },
442 rx4_total = 0,
443 tx4_total = 0,
444 rx6_total = 0,
445 tx6_total = 0,
446 v4_total = 0,
447 v6_total = 0,
448 ds_total = 0,
449 families = { },
450 records = { };
451
452 var ipv6Data = this.query(
453 null, ['family', 'mac'],
454 function(r1, r2) {
455 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
456 }
457 );
458
459 for (var i = 0, c = 0; i < ipv6Data.length; i++) {
460 var rec = ipv6Data[i],
461 mac = rec.mac.toUpperCase(),
462 ip = rec.ip,
463 fam = families[mac] || 0,
464 recs = records[mac] || {};
465
466 if (rec.family == 4) {
467 rx4_total += rec.rx_bytes;
468 tx4_total += rec.tx_bytes;
469 fam |= 1;
470 }
471 else {
472 rx6_total += rec.rx_bytes;
473 tx6_total += rec.tx_bytes;
474 fam |= 2;
475 }
476
477 recs[rec.family] = rec;
478 records[mac] = recs;
479
480 families[mac] = fam;
481 }
482
483 for (var mac in families) {
484 switch (families[mac])
485 {
486 case 3:
487 ds_total++;
488 break;
489
490 case 2:
491 v6_total++;
492 break;
493
494 case 1:
495 v4_total++;
496 break;
497 }
498 }
499
500 var rows = [];
501
502 for (var mac in records) {
503 if (mac === '00:00:00:00:00:00')
504 continue;
505
506 var dns = hostInfo[mac] ? hostInfo[mac].name : null,
507 rec4 = records[mac][4],
508 rec6 = records[mac][6];
509
510 rows.push([
511 this.formatHostname(dns),
512 mac,
513 [ E('span', _('IPv4')),
514 E('span', _('IPv6')) ],
515 [ E('span', rec4 ? '%1024.2mB'.format(rec4.rx_bytes) : '-'),
516 E('span', rec6 ? '%1024.2mB'.format(rec6.rx_bytes) : '-') ],
517 [ E('span', rec4 ? '%1000.2mP'.format(rec4.rx_pkts) : '-'),
518 E('span', rec6 ? '%1000.2mP'.format(rec6.rx_pkts) : '-') ],
519 [ E('span', rec4 ? '%1024.2mB'.format(rec4.tx_bytes) : '-'),
520 E('span', rec6 ? '%1024.2mB'.format(rec6.tx_bytes) : '-') ],
521 [ E('span', rec4 ? '%1000.2mP'.format(rec4.tx_pkts) : '-'),
522 E('span', rec6 ? '%1000.2mP'.format(rec6.tx_pkts) : '-') ]
523 ]);
524 }
525
526 cbi_update_table('#ipv6-data', rows, E('em', [
527 _('No data recorded yet.'), ' ',
528 E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
529 ]));
530
531 var shareData = [], hostsData = [];
532
533 if (rx4_total > 0 || tx4_total > 0)
534 shareData.push({
535 value: rx4_total + tx4_total,
536 label: ["IPv4: %.2mB"],
537 color: 'hsl(140, 100%, 50%)'
538 });
539
540 if (rx6_total > 0 || tx6_total > 0)
541 shareData.push({
542 value: rx6_total + tx6_total,
543 label: ["IPv6: %.2mB"],
544 color: 'hsl(180, 100%, 50%)'
545 });
546
547 if (v4_total > 0)
548 hostsData.push({
549 value: v4_total,
550 label: [_('%d IPv4-only hosts')],
551 color: 'hsl(140, 100%, 50%)'
552 });
553
554 if (v6_total > 0)
555 hostsData.push({
556 value: v6_total,
557 label: [_('%d IPv6-only hosts')],
558 color: 'hsl(180, 100%, 50%)'
559 });
560
561 if (ds_total > 0)
562 hostsData.push({
563 value: ds_total,
564 label: [_('%d dual-stack hosts')],
565 color: 'hsl(50, 100%, 50%)'
566 });
567
568 this.pie('ipv6-share-pie', shareData);
569 this.pie('ipv6-hosts-pie', hostsData);
570
571 this.kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total)));
572 this.kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total)));
573 this.kpi('ipv6-rx', '%1024.2mB'.format(rx6_total));
574 this.kpi('ipv6-tx', '%1024.2mB'.format(tx6_total));
575 },
576
577 renderHostDetail: function(node, tooltip) {
578 var key = node.getAttribute('href').substr(1),
579 col = node.getAttribute('data-col'),
580 label = node.getAttribute('data-tooltip');
581
582 var detailData = this.query(
583 function(c, r) {
584 return ((r[c.mac] === key || r[c.ip] === key) &&
585 (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0));
586 },
587 [col],
588 function(r1, r2) {
589 return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
590 }
591 );
592
593 var rxData = [], txData = [];
594
595 dom.content(tooltip, [
596 E('div', { 'class': 'head' }, [
597 E('div', { 'class': 'pie' }, [
598 E('label', _('Download')),
599 E('canvas', { 'id': 'bubble-pie1', 'width': 100, 'height': 100 })
600 ]),
601 E('div', { 'class': 'pie' }, [
602 E('label', _('Upload')),
603 E('canvas', { 'id': 'bubble-pie2', 'width': 100, 'height': 100 })
604 ]),
605 E('div', { 'class': 'kpi' }, [
606 E('ul', [
607 E('li', _('Hostname: <big id="bubble-hostname">example.org</big>')),
608 E('li', _('Vendor: <big id="bubble-vendor">Example Corp.</big>'))
609 ])
610 ])
611 ]),
612 E('div', { 'class': 'table' }, [
613 E('div', { 'class': 'tr table-titles' }, [
614 E('div', { 'class': 'th' }, label || col),
615 E('div', { 'class': 'th' }, _('Conn.')),
616 E('div', { 'class': 'th' }, _('Down. (Bytes)')),
617 E('div', { 'class': 'th' }, _('Down. (Pkts.)')),
618 E('div', { 'class': 'th' }, _('Up. (Bytes)')),
619 E('div', { 'class': 'th' }, _('Up. (Pkts.)')),
620 ])
621 ])
622 ]);
623
624 var rows = [];
625
626 for (var i = 0; i < detailData.length; i++) {
627 var rec = detailData[i],
628 cell = E('div', rec[col] || _('other'));
629
630 rows.push([
631 cell,
632 '%1000.2m'.format(rec.conns),
633 '%1024.2mB'.format(rec.rx_bytes),
634 '%1000.2mP'.format(rec.rx_pkts),
635 '%1024.2mB'.format(rec.tx_bytes),
636 '%1000.2mP'.format(rec.tx_pkts)
637 ]);
638
639 rxData.push({
640 label: ['%s: %%1024.2mB'.format(rec[col] || _('other')), cell],
641 value: rec.rx_bytes
642 });
643
644 txData.push({
645 label: ['%s: %%1024.2mB'.format(rec[col] || _('other')), cell],
646 value: rec.tx_bytes
647 });
648 }
649
650 cbi_update_table(tooltip.lastElementChild, rows);
651
652 this.pie(tooltip.querySelector('#bubble-pie1'), rxData);
653 this.pie(tooltip.querySelector('#bubble-pie2'), txData);
654
655 var mac = key.toUpperCase();
656 var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null;
657
658 if (!name)
659 for (var i = 0; i < detailData.length; i++)
660 if ((name = hostNames[detailData[i].ip]) !== undefined)
661 break;
662
663 if (mac !== '00:00:00:00:00:00') {
664 this.kpi(tooltip.querySelector('#bubble-hostname'), name);
665 this.kpi(tooltip.querySelector('#bubble-vendor'), this.oui(mac));
666 }
667 else {
668 this.kpi(tooltip.querySelector('#bubble-hostname'));
669 this.kpi(tooltip.querySelector('#bubble-vendor'));
670 }
671
672 var rect = node.getBoundingClientRect(), x, y;
673
674 if ('ontouchstart' in window || window.innerWidth <= 992) {
675 var vpHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
676 scrollFrom = window.pageYOffset,
677 scrollTo = scrollFrom + rect.top - vpHeight * 0.5,
678 start = null;
679
680 tooltip.style.top = (rect.top + rect.height + window.pageYOffset) + 'px';
681 tooltip.style.left = 0;
682
683 var scrollStep = function(timestamp) {
684 if (!start)
685 start = timestamp;
686
687 var duration = Math.max(timestamp - start, 1);
688 if (duration < 100) {
689 document.body.scrollTop = scrollFrom + (scrollTo - scrollFrom) * (duration / 100);
690 window.requestAnimationFrame(scrollStep);
691 }
692 else {
693 document.body.scrollTop = scrollTo;
694 }
695 };
696
697 window.requestAnimationFrame(scrollStep);
698 }
699 else {
700 x = rect.left + rect.width + window.pageXOffset,
701 y = rect.top + window.pageYOffset;
702
703 if ((y + tooltip.offsetHeight) > (window.innerHeight + window.pageYOffset))
704 y -= ((y + tooltip.offsetHeight) - (window.innerHeight + window.pageYOffset));
705
706 tooltip.style.top = y + 'px';
707 tooltip.style.left = x + 'px';
708 }
709
710 return false;
711 },
712
713 setupCharts: function() {
714 Chart.defaults.global.customTooltips = L.bind(function(tooltip) {
715 var tooltipEl = document.getElementById('chartjs-tooltip');
716
717 if (!tooltipEl) {
718 tooltipEl = document.createElement('div');
719 tooltipEl.setAttribute('id', 'chartjs-tooltip');
720 document.body.appendChild(tooltipEl);
721 }
722
723 if (!tooltip) {
724 if (tooltipEl.row)
725 tooltipEl.row.style.backgroundColor = '';
726
727 tooltipEl.style.opacity = 0;
728 return;
729 }
730
731 var pos = this.off(tooltip.chart.canvas);
732
733 tooltipEl.className = tooltip.yAlign;
734 tooltipEl.innerHTML = tooltip.text[0];
735
736 tooltipEl.style.opacity = 1;
737 tooltipEl.style.left = pos[0] + tooltip.x + 'px';
738 tooltipEl.style.top = pos[1] + tooltip.y - tooltip.caretHeight - tooltip.caretPadding + 'px';
739
740 var row = findParent(tooltip.text[1], '.tr'),
741 hue = tooltip.text[2];
742
743 if (row && !isNaN(hue)) {
744 row.style.backgroundColor = 'hsl(%u, 100%%, 80%%)'.format(hue);
745 tooltipEl.row = row;
746 }
747 }, this);
748
749 Chart.defaults.global.tooltipFontSize = 10;
750 Chart.defaults.global.tooltipTemplate = function(tip) {
751 tip.label[0] = tip.label[0].format(tip.value);
752 return tip.label;
753 };
754
755 this.renderHostData();
756 this.renderLayer7Data();
757 this.renderIPv6Data();
758 },
759
760 handleDownload: function(type, group, order) {
761 var args = [ 'download', '-f', type ];
762
763 if (group)
764 args.push('-g', group);
765
766 if (order)
767 args.push('-o', order);
768
769 return fs.exec_direct('/usr/libexec/nlbwmon-action', args, 'blob').then(function(blob) {
770 var data = blob.slice(0, blob.size, (type == 'csv') ? 'text/csv' : 'application/json'),
771 name = 'nlbwmon-data.%s'.format(type),
772 url = window.URL.createObjectURL(data),
773 link = E('a', { 'style': 'display:none', 'href': url, 'download': name });
774
775 document.body.appendChild(link);
776 link.click();
777 document.body.removeChild(link);
778 window.URL.revokeObjectURL(url);
779 }).catch(function(err) {
780 ui.addNotification(null, E('p', [ _('Failed to download traffic data: %s').format(err.message) ]));
781 });
782 },
783
784 handleCommit: function() {
785 return fs.exec('/usr/libexec/nlbwmon-action', [ 'commit' ]).then(function(res) {
786 if (res.code != 0)
787 throw new Error(res.stderr || res.stdout);
788
789 window.location.reload(true);
790 }).catch(function(err) {
791 ui.addNotification(null, E('p', [ _('Failed to commit database: %s').format(err.message) ]));
792 });
793 },
794
795 render: function() {
796 document.addEventListener('tooltip-open', L.bind(function(ev) {
797 this.renderHostDetail(ev.detail.target, ev.target);
798 }, this));
799
800 if ('ontouchstart' in window) {
801 document.addEventListener('touchstart', function(ev) {
802 var tooltip = document.querySelector('.cbi-tooltip');
803 if (tooltip === ev.target || tooltip.contains(ev.target))
804 return;
805
806 ui.hideTooltip(ev);
807 });
808 }
809
810 var node = E([], [
811 E('link', { 'rel': 'stylesheet', 'href': L.resource('view/nlbw.css') }),
812 E('script', {
813 'type': 'text/javascript',
814 'src': L.resource('nlbw.chart.min.js'),
815 'load': L.bind(this.setupCharts, this)
816 }),
817
818 E('h2', [ _('Netlink Bandwidth Monitor') ]),
819 this.renderPeriods(),
820
821 E('div', [
822 E('div', { 'class': 'cbi-section', 'data-tab': 'traffic', 'data-tab-title': _('Traffic Distribution') }, [
823 E('div', { 'class': 'head' }, [
824 E('div', { 'class': 'pie' }, [
825 E('label', [ _('Traffic / Host') ]),
826 E('canvas', { 'id': 'traf-pie', 'width': 200, 'height': 200 })
827 ]),
828
829 E('div', { 'class': 'pie' }, [
830 E('label', [ _('Connections / Host') ]),
831 E('canvas', { 'id': 'conn-pie', 'width': 200, 'height': 200 })
832 ]),
833
834 E('div', { 'class': 'kpi' }, [
835 E('ul', [
836 E('li', _('<big id="host-total">0</big> hosts')),
837 E('li', _('<big id="rx-total">0</big> download')),
838 E('li', _('<big id="tx-total">0</big> upload')),
839 E('li', _('<big id="conn-total">0</big> connections'))
840 ])
841 ])
842 ]),
843
844 E('div', { 'class': 'table', 'id': 'host-data' }, [
845 E('div', { 'class': 'tr table-titles' }, [
846 E('div', { 'class': 'th left hostname' }, [ _('Host') ]),
847 E('div', { 'class': 'th right' }, [ _('MAC') ]),
848 E('div', { 'class': 'th right' }, [ _('Connections') ]),
849 E('div', { 'class': 'th right' }, [ _('Download (Bytes)') ]),
850 E('div', { 'class': 'th right' }, [ _('Download (Packets)') ]),
851 E('div', { 'class': 'th right' }, [ _('Upload (Bytes)') ]),
852 E('div', { 'class': 'th right' }, [ _('Upload (Packets)') ]),
853 ]),
854 E('div', { 'class': 'tr placeholder' }, [
855 E('div', { 'class': 'td' }, [
856 E('em', { 'class': 'spinning' }, [ _('Collecting data...') ])
857 ])
858 ])
859 ])
860 ]),
861
862 E('div', { 'class': 'cbi-section', 'data-tab': 'layer7', 'data-tab-title': _('Application Protocols') }, [
863 E('div', { 'class': 'head' }, [
864 E('div', { 'class': 'pie' }, [
865 E('label', [ _('Download / Application') ]),
866 E('canvas', { 'id': 'layer7-rx-pie', 'width': 200, 'height': 200 })
867 ]),
868
869 E('div', { 'class': 'pie' }, [
870 E('label', [ _('Upload / Application') ]),
871 E('canvas', { 'id': 'layer7-tx-pie', 'width': 200, 'height': 200 })
872 ]),
873
874 E('div', { 'class': 'kpi' }, [
875 E('ul', [
876 E('li', _('<big id="layer7-total">0</big> different application protocols')),
877 E('li', _('<big id="layer7-most-rx">0</big> cause the most download')),
878 E('li', _('<big id="layer7-most-tx">0</big> cause the most upload')),
879 E('li', _('<big id="layer7-most-conn">0</big> cause the most connections'))
880 ])
881 ])
882 ]),
883
884 E('div', { 'class': 'table', 'id': 'layer7-data' }, [
885 E('div', { 'class': 'tr table-titles' }, [
886 E('div', { 'class': 'th left' }, [ _('Application') ]),
887 E('div', { 'class': 'th right' }, [ _('Connections') ]),
888 E('div', { 'class': 'th right' }, [ _('Download (Bytes)') ]),
889 E('div', { 'class': 'th right' }, [ _('Download (Packets)') ]),
890 E('div', { 'class': 'th right' }, [ _('Upload (Bytes)') ]),
891 E('div', { 'class': 'th right' }, [ _('Upload (Packets)') ]),
892 ]),
893 E('div', { 'class': 'tr placeholder' }, [
894 E('div', { 'class': 'td' }, [
895 E('em', { 'class': 'spinning' }, [ _('Collecting data...') ])
896 ])
897 ])
898 ])
899 ]),
900
901 E('div', { 'class': 'cbi-section', 'data-tab': 'ipv6', 'data-tab-title': _('IPv6') }, [
902 E('div', { 'class': 'head' }, [
903 E('div', { 'class': 'pie' }, [
904 E('label', [ _('IPv4 vs. IPv6') ]),
905 E('canvas', { 'id': 'ipv6-share-pie', 'width': 200, 'height': 200 })
906 ]),
907
908 E('div', { 'class': 'pie' }, [
909 E('label', [ _('Dualstack enabled hosts') ]),
910 E('canvas', { 'id': 'ipv6-hosts-pie', 'width': 200, 'height': 200 })
911 ]),
912
913 E('div', { 'class': 'kpi' }, [
914 E('ul', [
915 E('li', _('<big id="ipv6-hosts">0%</big> IPv6 support rate among hosts')),
916 E('li', _('<big id="ipv6-share">0%</big> of the total traffic is IPv6')),
917 E('li', _('<big id="ipv6-rx">0B</big> total IPv6 download')),
918 E('li', _('<big id="ipv6-tx">0B</big> total IPv6 upload'))
919 ])
920 ])
921 ]),
922
923 E('div', { 'class': 'table', 'id': 'ipv6-data' }, [
924 E('div', { 'class': 'tr table-titles' }, [
925 E('div', { 'class': 'th left' }, [ _('Host') ]),
926 E('div', { 'class': 'th right' }, [ _('MAC') ]),
927 E('div', { 'class': 'th double right hide-xs' }, [ _('Family') ]),
928 E('div', { 'class': 'th double right' }, [ _('Download (Bytes)') ]),
929 E('div', { 'class': 'th double right' }, [ _('Download (Packets)') ]),
930 E('div', { 'class': 'th double right' }, [ _('Upload (Bytes)') ]),
931 E('div', { 'class': 'th double right' }, [ _('Upload (Packets)') ]),
932 ]),
933 E('div', { 'class': 'tr placeholder' }, [
934 E('div', { 'class': 'td' }, [
935 E('em', { 'class': 'spinning' }, [ _('Collecting data...') ])
936 ])
937 ])
938 ])
939 ]),
940
941 E('div', { 'class': 'cbi-section', 'data-tab': 'export', 'data-tab-title': _('Export') }, [
942 E('ul', [
943 E('li', [
944 E('a', {
945 'href': '#',
946 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'mac', '-rx,-tx')
947 }, [ _('CSV, grouped by MAC') ])
948 ]),
949 E('li', [
950 E('a', {
951 'href': '#',
952 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'ip', '-rx,-tx')
953 }, [ _('CSV, grouped by IP') ])
954 ]),
955 E('li', [
956 E('a', {
957 'href': '#',
958 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'layer7', '-rx,-tx')
959 }, [ _('CSV, grouped by protocol') ])
960 ]),
961 E('li', [
962 E('a', {
963 'href': '#',
964 'click': ui.createHandlerFn(this, 'handleDownload', 'json', null, null)
965 }, [ _('JSON dump') ])
966 ])
967 ])
968 ])
969 ])
970 ]);
971
972 ui.tabs.initTabGroup(node.lastElementChild.childNodes);
973
974 return node;
975 },
976
977 handleSave: null,
978 handleSaveApply: null,
979 handleReset: null
980 });
Lua Configuration Interface (mirror)