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"></script>
 199 <script type="text/javascript" src="<%=resource%>/nlbw.chart.min.js"></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, pd;
 434
 435                 if (i) {
 436                         d2 = new Date(trafficPeriods[i - 1]);
 437                         d2.setDate(d2.getDate() - 1);
 438                         pd = '%04d-%02d-%02d'.format(d1.getFullYear(), d1.getMonth() + 1, d1.getDate());
 439                 }
 440                 else {
 441                         d2 = new Date();
 442                         pd = '';
 443                 }
 444
 445                 var opt = document.createElement('option');
 446                     opt.setAttribute('data-duration', (d2.getTime() - d1.getTime()) / 1000);
 447                     opt.value = pd;
 448                     opt.text = '%04d-%02d-%02d - %04d-%02d-%02d'.format(
 449                                 d1.getFullYear(), d1.getMonth() + 1, d1.getDate(),
 450                                 d2.getFullYear(), d2.getMonth() + 1, d2.getDate());
 451
 452                 sel.appendChild(opt);
 453         }
 454
 455         sel.selectedIndex = sel.childNodes.length - 1;
 456         sel.style.display = '';
 457
 458         sel.onchange = function() {
 459                 bubbleDismiss();
 460                 fetchData(sel.options[sel.selectedIndex].value);
 461         }
 462 }
 463
 464 function renderHostDetail()
 465 {
 466         var key = this.getAttribute('href').substr(1),
 467             col = this.getAttribute('data-col'),
 468             label = this.getAttribute('data-label'),
 469             bubble = document.getElementById('detail-bubble'),
 470             arrow = document.getElementById('bubble-arrow'),
 471             table = document.getElementById('bubble-table');
 472
 473         bubbleDismiss();
 474
 475         var detailData = query(
 476                 function(c, r) {
 477                         return ((r[c.mac] === key || r[c.ip] === key) &&
 478                                 (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0));
 479                 },
 480                 [col],
 481                 function(r1, r2) {
 482                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 483                 }
 484         );
 485
 486         var rxData = [], txData = [];
 487
 488         table.innerHTML = '<tr>' +
 489                 '<th>%s</th>'.format(label || col) +
 490                 '<th><%:Conn.%></th>' +
 491                 '<th colspan="2"><%:Down. (Bytes / Pkts.)%></th>' +
 492                 '<th colspan="2"><%:Up. (Bytes / Pkts.)%></th>' +
 493         '</tr>';
 494
 495         for (var i = 0; i < detailData.length; i++) {
 496                 var rec = detailData[i],
 497                     row = table.insertRow(-1);
 498
 499                 row.insertCell(-1).innerHTML = rec[col] || '<%:other%>';
 500                 row.insertCell(-1).innerHTML = "%1000.2m".format(rec.conns);
 501                 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes);
 502                 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts);
 503                 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes);
 504                 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts);
 505
 506                 rxData.push({
 507                         label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row],
 508                         value: rec.rx_bytes
 509                 });
 510
 511                 txData.push({
 512                         label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row],
 513                         value: rec.tx_bytes
 514                 });
 515         }
 516
 517         pie('bubble-pie1', rxData);
 518         pie('bubble-pie2', txData);
 519
 520         var mac = key.toUpperCase();
 521         var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null;
 522
 523         if (!name)
 524                 for (var i = 0; i < detailData.length; i++)
 525                         if ((name = hostNames[detailData[i].ip]) !== undefined)
 526                                 break;
 527
 528         if (mac !== '00:00:00:00:00:00') {
 529                 kpi('bubble-hostname', name);
 530                 kpi('bubble-vendor', oui(mac));
 531         }
 532         else {
 533                 kpi('bubble-hostname');
 534                 kpi('bubble-vendor');
 535         }
 536
 537         var tr = this.parentNode.parentNode,
 538             xy = off(tr),
 539             xy2 = off(this);
 540
 541         bubble.style.width = tr.offsetWidth + 'px';
 542         bubble.style.left = xy[0] + 'px';
 543         bubble.style.top = (xy[1] + tr.offsetHeight) + 'px';
 544         arrow.style.left = Math.floor(xy2[0] + this.offsetWidth / 2 - xy[0]) + 'px';
 545
 546         bubble.className = 'in';
 547
 548         return false;
 549 }
 550
 551 function formatHostname(dns)
 552 {
 553         if (dns === undefined || dns === null || dns === '')
 554                 return '-';
 555
 556         dns = dns.split('.')[0];
 557
 558         if (dns.length > 12)
 559                 return '<span title="%q">%h…</span>'.format(dns, dns.substr(0, 12));
 560
 561         return '%h'.format(dns);
 562 }
 563
 564 function renderHostData()
 565 {
 566         var trafData = [], connData = [];
 567         var rx_total = 0, tx_total = 0, conn_total = 0;
 568         var table = document.getElementById('host-data');
 569
 570         var hostData = query(
 571                 function(c, r) {
 572                         return (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0);
 573                 },
 574                 ['mac'],
 575                 //function(c, r) {
 576                 //      return (r[c.mac] !== '00:00:00:00:00:00') ? r[c.mac] : r[c.ip];
 577                 //},
 578                 function(r1, r2) {
 579                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 580                 }
 581         );
 582
 583         while (table.rows.length > 1)
 584                 table.deleteRow(1);
 585
 586         for (var i = 0; i < hostData.length; i++) {
 587                 var row = table.insertRow(-1),
 588                     cell = row.insertCell(-1),
 589                     rec = hostData[i],
 590                     mac = rec.mac.toUpperCase(),
 591                     key = (mac !== '00:00:00:00:00:00') ? mac : rec.ip,
 592                     dns = hostInfo[mac] ? hostInfo[mac].name : null;
 593
 594                 var link1 = document.createElement('a');
 595                     link1.onclick = renderHostDetail;
 596                     link1.href = '#' + rec.mac;
 597                     link1.setAttribute('data-col', 'ip');
 598                     link1.setAttribute('data-label', '<%:Source IP%>');
 599                     link1.innerHTML = (mac !== '00:00:00:00:00:00') ? mac : '<%:other%>';
 600
 601                 var link2 = document.createElement('a');
 602                     link2.onclick = renderHostDetail;
 603                     link2.href = '#' + rec.mac;
 604                     link2.setAttribute('data-col', 'layer7');
 605                     link2.setAttribute('data-label', '<%:Protocol%>');
 606                     link2.innerHTML = "%1000.2m".format(rec.conns);
 607
 608                 cell.innerHTML = formatHostname(dns);
 609                 cell.className = 'hostname';
 610
 611                 row.insertCell(-1).appendChild(link1);
 612                 row.insertCell(-1).appendChild(link2);
 613                 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes);
 614                 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts);
 615                 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes);
 616                 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts);
 617
 618                 trafData.push({
 619                         value: rec.rx_bytes + rec.tx_bytes,
 620                         label: ["%s: %%.2mB".format(key), row]
 621                 });
 622
 623                 connData.push({
 624                         value: rec.conns,
 625                         label: ["%s: %%.2m".format(key), row]
 626                 });
 627
 628                 rx_total += rec.rx_bytes;
 629                 tx_total += rec.tx_bytes;
 630                 conn_total += rec.conns;
 631         }
 632
 633         if (table.rows.length === 1) {
 634                 var cell = table.insertRow(-1).insertCell(-1);
 635
 636                 cell.setAttribute('colspan', 6);
 637                 cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
 638         }
 639
 640         pie('traf-pie', trafData);
 641         pie('conn-pie', connData);
 642
 643         kpi('rx-total', '%1024.2mB'.format(rx_total));
 644         kpi('tx-total', '%1024.2mB'.format(tx_total));
 645         kpi('conn-total', '%1000m'.format(conn_total));
 646         kpi('host-total', '%u'.format(hostData.length));
 647 }
 648
 649 function renderLayer7Data()
 650 {
 651         var rxData = [], txData = [];
 652         var topConn = [[0],[0],[0]], topRx = [[0],[0],[0]], topTx = [[0],[0],[0]];
 653         var table = document.getElementById('layer7-data');
 654
 655         var layer7Data = query(
 656                 null, ['layer7'],
 657                 function(r1, r2) {
 658                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 659                 }
 660         );
 661
 662         while (table.rows.length > 1)
 663                 table.deleteRow(1);
 664
 665         for (var i = 0, c = 0; i < layer7Data.length; i++) {
 666                 var rec = layer7Data[i],
 667                     row = table.insertRow(-1);
 668
 669                 rxData.push({
 670                         value: rec.rx_bytes,
 671                         label: ["%s: %%.2mB".format(rec.layer7 || '<%:other%>'), row]
 672                 });
 673
 674                 txData.push({
 675                         value: rec.tx_bytes,
 676                         label: ["%s: %%.2mB".format(rec.layer7 || '<%:other%>'), row]
 677                 });
 678
 679                 row.insertCell(-1).innerHTML = rec.layer7 || '<%:other%>';
 680                 row.insertCell(-1).innerHTML = "%1000m".format(rec.conns);
 681                 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes);
 682                 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts);
 683                 row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes);
 684                 row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts);
 685
 686                 if (rec.layer7) {
 687                         topRx.push([rec.rx_bytes, rec.layer7]);
 688                         topTx.push([rec.tx_bytes, rec.layer7]);
 689                         topConn.push([rec.conns, rec.layer7]);
 690                 }
 691         }
 692
 693         if (table.rows.length === 1) {
 694                 var cell = table.insertRow(-1).insertCell(-1);
 695
 696                 cell.setAttribute('colspan', 6);
 697                 cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
 698         }
 699
 700         pie('layer7-rx-pie', rxData);
 701         pie('layer7-tx-pie', txData);
 702
 703         topRx.sort(function(a, b) { return b[0] - a[0] });
 704         topTx.sort(function(a, b) { return b[0] - a[0] });
 705         topConn.sort(function(a, b) { return b[0] - a[0] });
 706
 707         kpi('layer7-total', layer7Data.length);
 708         kpi('layer7-most-rx', topRx[0][1], topRx[1][1], topRx[2][1]);
 709         kpi('layer7-most-tx', topTx[0][1], topTx[1][1], topTx[2][1]);
 710         kpi('layer7-most-conn', topConn[0][1], topConn[1][1], topConn[2][1]);
 711 }
 712
 713 function renderIPv6Data()
 714 {
 715         var table     = document.getElementById('ipv6-data'),
 716             col       = { },
 717             rx4_total = 0,
 718             tx4_total = 0,
 719             rx6_total = 0,
 720             tx6_total = 0,
 721             v4_total  = 0,
 722             v6_total  = 0,
 723             ds_total  = 0,
 724             families  = { },
 725             records   = { };
 726
 727         ipv6Data = query(
 728                 null, ['family', 'mac'],
 729                 function(r1, r2) {
 730                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 731                 }
 732         );
 733
 734         for (var i = 0, c = 0; i < ipv6Data.length; i++) {
 735                 var rec = ipv6Data[i],
 736                     mac = rec.mac.toUpperCase(),
 737                     ip  = rec.ip,
 738                     fam = families[mac] || 0,
 739                     recs = records[mac] || {};
 740
 741                 if (rec.family == 4) {
 742                         rx4_total += rec.rx_bytes;
 743                         tx4_total += rec.tx_bytes;
 744                         fam |= 1;
 745                 }
 746                 else {
 747                         rx6_total += rec.rx_bytes;
 748                         tx6_total += rec.tx_bytes;
 749                         fam |= 2;
 750                 }
 751
 752                 recs[rec.family] = rec;
 753                 records[mac] = recs;
 754
 755                 families[mac] = fam;
 756         }
 757
 758         for (var mac in families) {
 759                 switch (families[mac])
 760                 {
 761                 case 3:
 762                         ds_total++;
 763                         break;
 764
 765                 case 2:
 766                         v6_total++;
 767                         break;
 768
 769                 case 1:
 770                         v4_total++;
 771                         break;
 772                 }
 773         }
 774
 775         while (table.rows.length > 1)
 776                 table.deleteRow(1);
 777
 778         for (var mac in records) {
 779                 if (mac === '00:00:00:00:00:00')
 780                         continue;
 781
 782                 var row = table.insertRow(-1),
 783                     cell1 = row.insertCell(-1),
 784                     cell2 = row.insertCell(-1),
 785                     dns = hostInfo[mac] ? hostInfo[mac].name : null,
 786                     rec4 = records[mac][4],
 787                     rec6 = records[mac][6];
 788
 789                 cell1.setAttribute('rowspan', 2);
 790                 cell1.innerHTML = formatHostname(dns);
 791                 cell1.className = 'hostname';
 792
 793                 cell2.setAttribute('rowspan', 2);
 794                 cell2.innerHTML = mac;
 795
 796                 row.insertCell(-1).innerHTML = 'IPv4';
 797                 row.insertCell(-1).innerHTML = rec4 ? "%1024.2mB".format(rec4.rx_bytes) : '-';
 798                 row.insertCell(-1).innerHTML = rec4 ? "%1000.2mP".format(rec4.rx_pkts)  : '-';
 799                 row.insertCell(-1).innerHTML = rec4 ? "%1024.2mB".format(rec4.tx_bytes) : '-';
 800                 row.insertCell(-1).innerHTML = rec4 ? "%1000.2mP".format(rec4.tx_pkts)  : '-';
 801
 802                 row = table.insertRow(-1);
 803
 804                 row.insertCell(-1).innerHTML = 'IPv6';
 805                 row.insertCell(-1).innerHTML = rec6 ? "%1024.2mB".format(rec6.rx_bytes) : '-';
 806                 row.insertCell(-1).innerHTML = rec6 ? "%1000.2mP".format(rec6.rx_pkts)  : '-';
 807                 row.insertCell(-1).innerHTML = rec6 ? "%1024.2mB".format(rec6.tx_bytes) : '-';
 808                 row.insertCell(-1).innerHTML = rec6 ? "%1000.2mP".format(rec6.tx_pkts)  : '-';
 809         }
 810
 811         if (table.rows.length === 1) {
 812                 var cell = table.insertRow(-1).insertCell(-1);
 813
 814                 cell.setAttribute('colspan', 7);
 815                 cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
 816         }
 817
 818         var shareData = [], hostsData = [];
 819
 820         if (rx4_total > 0 || tx4_total > 0)
 821                 shareData.push({
 822                         value: rx4_total + tx4_total,
 823                         label: ["IPv4: %.2mB"],
 824                         color: 'hsl(140, 100%, 50%)'
 825                 });
 826
 827         if (rx6_total > 0 || tx6_total > 0)
 828                 shareData.push({
 829                         value: rx6_total + tx6_total,
 830                         label: ["IPv6: %.2mB"],
 831                         color: 'hsl(180, 100%, 50%)'
 832                 });
 833
 834         if (v4_total > 0)
 835                 hostsData.push({
 836                         value: v4_total,
 837                         label: ["<%:%d IPv4-only hosts%>"],
 838                         color: 'hsl(140, 100%, 50%)'
 839                 });
 840
 841         if (v6_total > 0)
 842                 hostsData.push({
 843                         value: v6_total,
 844                         label: ["<%:%d IPv6-only hosts%>"],
 845                         color: 'hsl(180, 100%, 50%)'
 846                 });
 847
 848         if (ds_total > 0)
 849                 hostsData.push({
 850                         value: ds_total,
 851                         label: ["<%:%d dual-stack hosts%>"],
 852                         color: 'hsl(50, 100%, 50%)'
 853                 });
 854
 855         pie('ipv6-share-pie', shareData);
 856         pie('ipv6-hosts-pie', hostsData);
 857
 858         kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total)));
 859         kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total)));
 860         kpi('ipv6-rx', '%1024.2mB'.format(rx6_total));
 861         kpi('ipv6-tx', '%1024.2mB'.format(tx6_total));
 862 }
 863
 864 function bubbleDismiss()
 865 {
 866         var bubble = document.getElementById('detail-bubble');
 867
 868         bubble.className = '';
 869         document.body.appendChild(bubble);
 870
 871         return false;
 872 }
 873
 874
 875 //]]></script>
 876
 877 <h2 name="content"><%:Netlink Bandwidth Monitor%></h2>
 878
 879 <div id="detail-bubble">
 880         <span id="bubble-arrow"></span>
 881         <div>
 882                 <div class="head">
 883                         <a class="dismiss" href="#" onclick="this.blur(); return bubbleDismiss()">×</a>
 884                         <div class="pie">
 885                                 <label>Download</label>
 886                                 <canvas id="bubble-pie1" width="100" height="100"></canvas>
 887                         </div>
 888                         <div class="pie">
 889                                 <label>Upload</label>
 890                                 <canvas id="bubble-pie2" width="100" height="100"></canvas>
 891                         </div>
 892                         <div class="kpi">
 893                                 <ul>
 894                                         <li><%_Hostname: <big id="bubble-hostname">example.org</big>%></li>
 895                                         <li><%_Vendor: <big id="bubble-vendor">Example Corp.</big>%></li>
 896                                 </ul>
 897                         </div>
 898                 </div>
 899                 <table id="bubble-table"></table>
 900         </div>
 901 </div>
 902
 903 <hr />
 904
 905 <p>
 906         <%:Select accounting period:%>
 907         <select id="nlbw.period" style="display:none"></select>
 908 </p>
 909
 910 <hr />
 911
 912 <ul class="cbi-tabmenu">
 913         <li id="tab.nlbw.traffic" class="cbi-tab"><a href="#" onclick="return switchTab('traffic')"><%:Traffic Distribution%></a></li>
 914         <li id="tab.nlbw.layer7" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('layer7')"><%:Application Protocols%></a></li>
 915         <li id="tab.nlbw.ipv6" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('ipv6')"><%:IPv6%></a></li>
 916         <li id="tab.nlbw.export" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('export')"><%:Export%></a></li>
 917 </ul>
 918
 919 <div class="cbi-section" id="container.nlbw.traffic">
 920         <div>
 921                 <div class="pie">
 922                         <label><%:Traffic / Host%></label>
 923                         <canvas id="traf-pie" width="200" height="200"></canvas>
 924                 </div>
 925
 926                 <div class="pie">
 927                         <label><%:Connections / Host%></label>
 928                         <canvas id="conn-pie" width="200" height="200"></canvas>
 929                 </div>
 930
 931                 <div class="kpi">
 932                         <ul>
 933                                 <li><%_<big id="host-total">0</big> hosts%></li>
 934                                 <li><%_<big id="rx-total">0</big> download%></li>
 935                                 <li><%_<big id="tx-total">0</big> upload%></li>
 936                                 <li><%_<big id="conn-total">0</big> connections%></li>
 937                         </ul>
 938                 </div>
 939         </div>
 940         <table id="host-data">
 941                 <tr>
 942                         <th width="10%" class="hostname"><%:Host%></th>
 943                         <th width="5%"><%:MAC%></th>
 944                         <th width="5%"><%:Connections%></th>
 945                         <th width="30%" colspan="2"><%:Download (Bytes / Packets)%></th>
 946                         <th width="30%" colspan="2"><%:Upload (Bytes / Packets)%></th>
 947                 </tr>
 948         </table>
 949 </div>
 950
 951 <div class="cbi-section" id="container.nlbw.layer7" style="display:none">
 952         <div>
 953                 <div class="pie">
 954                         <label><%:Download / Application%></label>
 955                         <canvas id="layer7-rx-pie" width="200" height="200"></canvas>
 956                 </div>
 957
 958                 <div class="pie">
 959                         <label><%:Upload / Application%></label>
 960                         <canvas id="layer7-tx-pie" width="200" height="200"></canvas>
 961                 </div>
 962
 963                 <div class="kpi">
 964                         <ul>
 965                                 <li><%_<big id="layer7-total">0</big> different application protocols%></li>
 966                                 <li><%_<big id="layer7-most-rx">0</big> cause the most download%></li>
 967                                 <li><%_<big id="layer7-most-tx">0</big> cause the most upload%></li>
 968                                 <li><%_<big id="layer7-most-conn">0</big> cause the most connections%></li>
 969                         </ul>
 970                 </div>
 971         </div>
 972         <table id="layer7-data">
 973                 <tr>
 974                         <th width="20%"><%:Application%></th>
 975                         <th width="10%"><%:Connections%></th>
 976                         <th width="30%" colspan="2"><%:Download (Bytes / Packets)%></th>
 977                         <th width="30%" colspan="2"><%:Upload (Bytes / Packets)%></th>
 978                 </tr>
 979         </table>
 980 </div>
 981
 982 <div class="cbi-section" id="container.nlbw.ipv6" style="display:none">
 983         <div>
 984                 <div class="pie">
 985                         <label><%:IPv4 vs. IPv6%></label>
 986                         <canvas id="ipv6-share-pie" width="200" height="200"></canvas>
 987                 </div>
 988
 989                 <div class="pie">
 990                         <label><%:Dualstack enabled hosts%></label>
 991                         <canvas id="ipv6-hosts-pie" width="200" height="200"></canvas>
 992                 </div>
 993
 994                 <div class="kpi">
 995                         <ul>
 996                                 <li><%_<big id="ipv6-hosts">0%</big> IPv6 support rate among hosts%></li>
 997                                 <li><%_<big id="ipv6-share">0%</big> of the total traffic is IPv6%></li>
 998                                 <li><%_<big id="ipv6-rx">0B</big> total IPv6 download%></li>
 999                                 <li><%_<big id="ipv6-tx">0B</big> total IPv6 upload%></li>
1000                         </ul>
1001                 </div>
1002         </div>
1003         <table id="ipv6-data">
1004                 <tr>
1005                         <th width="10%" class="hostname"><%:Host%></th>
1006                         <th width="5%"><%:MAC%></th>
1007                         <th width="5%"><%:Family%></th>
1008                         <th width="40%" colspan="2"><%:Download (Bytes / Packets)%></th>
1009                         <th width="40%" colspan="2"><%:Upload (Bytes / Packets)%></th>
1010                 </tr>
1011         </table>
1012 </div>
1013
1014 <div class="cbi-section" id="container.nlbw.export" style="display:none">
1015         <ul>
1016                 <li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=mac&#38;order_by=-rx,-tx"><%:CSV, grouped by MAC%></a></li>
1017                 <li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=ip&#38;order_by=-rx,-tx"><%:CSV, grouped by IP%></a></li>
1018                 <li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=layer7&#38;order_by=-rx,-tx"><%:CSV, grouped by protocol%></a></li>
1019                 <li><a href="<%=url('admin/nlbw/data')%>?type=json"><%:JSON dump%></a></li>
1020         </ul>
1021 </div>
1022
1023 <script type="text/javascript">//<![CDATA[
1024         cbi_t_add('nlbw', 'traffic');
1025         cbi_t_add('nlbw', 'layer7');
1026         cbi_t_add('nlbw', 'ipv6');
1027         cbi_t_add('nlbw', 'export');
1028
1029         XHR.get('<%=url("admin/nlbw/list")%>', null, function(xhr, res) {
1030
1031                 if (res !== null && typeof(res) === 'object' && res.length > 0) {
1032                         trafficPeriods = res;
1033                         renderPeriods();
1034                 }
1035
1036                 xhr.open('GET', 'https://raw.githubusercontent.com/jow-/oui-database/master/oui.json', true);
1037                 xhr.onreadystatechange = function() {
1038                         if (xhr.readyState === 4) {
1039                                 try { res = JSON.parse(xhr.responseText); }
1040                                 catch(e) { res = null; }
1041
1042                                 if (res !== null && typeof(res) === 'object' && (res.length % 3) === 0)
1043                                         ouiData = res;
1044
1045                                 fetchData('');
1046                         }
1047                 };
1048                 xhr.send(null);
1049         });
1050 //]]></script>
1051
1052 <%+footer%>