release/src/router/www/ipt-details.asp

   1 <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0//EN'>
   2 <!--
   3         Tomato GUI
   4         Copyright (C) 2006-2010 Jonathan Zarate
   5         http://www.polarcloud.com/tomato/
   6
   7         IP Traffic enhancements
   8         Copyright (C) 2011 Augusto Bott
   9         http://code.google.com/p/tomato-sdhc-vlan/
  10
  11         For use with Tomato Firmware only.
  12         No part of this file may be used without permission.
  13 -->
  14 <html>
  15 <head>
  16 <meta http-equiv='content-type' content='text/html;charset=utf-8'>
  17 <meta name='robots' content='noindex,nofollow'>
  18 <title>[<% ident(); %>] IP Traffic: Details</title>
  19 <link rel='stylesheet' type='text/css' href='tomato.css'>
  20 <% css(); %>
  21 <script type='text/javascript' src='tomato.js'></script>
  22
  23 <!-- / / / -->
  24
  25 <style type='text/css'>
  26 #grid .co2,
  27 #grid .co3,
  28 #grid .co4,
  29 #grid .co5,
  30 #grid .co6,
  31 #grid .co7,
  32 #grid .co8 {
  33         text-align: right;
  34 }
  35 </style>
  36
  37 <script type='text/javascript' src='debug.js'></script>
  38 <script type='text/javascript' src='protocols.js'></script>
  39 <script type='text/javascript' src='bwm-hist.js'></script>
  40 <script type='text/javascript' src='bwm-common.js'></script>
  41 <script type='text/javascript' src='interfaces.js'></script>
  42
  43 <script type='text/javascript'>
  44 //      <% nvram('cstats_enable,lan_ipaddr,lan1_ipaddr,lan2_ipaddr,lan3_ipaddr,lan_netmask,lan1_netmask,lan2_netmask,lan3_netmask,dhcpd_static'); %>
  45
  46 //      <% devlist(); %>
  47
  48 var cstats_busy = 0;
  49
  50 try {
  51 // <% iptraffic(); %>
  52 }
  53 catch (ex) {
  54         iptraffic = [];
  55         cstats_busy = 1;
  56 }
  57
  58 if (typeof(iptraffic) == 'undefined') {
  59         iptraffic = [];
  60         cstats_busy = 1;
  61 }
  62
  63 var grid = new TomatoGrid();
  64
  65 var scale = -1;
  66 var lock = 0;
  67
  68 var filterip = [];
  69 var filteripe = [];
  70 var filteripe_before = [];
  71
  72 var prevtimestamp = new Date().getTime();
  73 var thistimestamp;
  74 var difftimestamp;
  75 var avgiptraffic = [];
  76 var lastiptraffic = iptraffic;
  77
  78 hostnamecache = [];
  79
  80 var ref = new TomatoRefresh('update.cgi', '', 0, 'ipt_details');
  81 ref.refresh = function(text) {
  82
  83         ++lock;
  84
  85         var i, b, j, k, l;
  86
  87         thistimestamp = new Date().getTime();
  88
  89         try {
  90                 eval(text);
  91         }
  92         catch (ex) {
  93                 iptraffic = [];
  94                 cstats_busy = 1;
  95         }
  96
  97         difftimestamp = thistimestamp - prevtimestamp;
  98         prevtimestamp = thistimestamp;
  99
 100         for (i = 0; i < iptraffic.length; ++i) {
 101                 b = iptraffic[i];
 102
 103                 j = getArrayPosByElement(avgiptraffic, b[0], 0);
 104                 if (j == -1) {
 105                         j = avgiptraffic.length;
 106                         avgiptraffic[j] = [ b[0], 0, 0, 0, 0, 0, 0, 0, 0, b[9], b[10] ];
 107                 }
 108
 109                 k = getArrayPosByElement(lastiptraffic, b[0], 0);
 110                 if (k == -1) {
 111                         k = lastiptraffic.length;
 112                         lastiptraffic[k] = b;
 113                 }
 114
 115                 for (l = 1; l <= 8; ++l) {
 116                         avgiptraffic[j][l] = ((b[l] - lastiptraffic[k][l]) / difftimestamp * 1000);
 117                         lastiptraffic[k][l] = b[l];
 118                 }
 119
 120                 avgiptraffic[j][9] = b[9];
 121                 avgiptraffic[j][10] = b[10];
 122                 lastiptraffic[k][9] = b[9];
 123                 lastiptraffic[k][10] = b[10];
 124         }
 125
 126         setTimeout(function() { E('loading').style.visibility = 'hidden'; }, 100);
 127
 128         --lock;
 129
 130         grid.populate();
 131 }
 132
 133 grid.populate = function() {
 134         if ((lock) || (cstats_busy)) return;
 135
 136         var hostslisted = [];
 137
 138         var i, b, x;
 139         var fskip;
 140
 141         var tx = 0;
 142         var rx = 0;
 143         var tcpi = 0;
 144         var tcpo = 0;
 145         var udpi = 0;
 146         var udpo = 0;
 147         var icmpi = 0;
 148         var icmpo = 0;
 149         var tcpconn = 0;
 150         var udpconn = 0;
 151
 152         grid.removeAllData();
 153
 154         for (i = 0; i < avgiptraffic.length; ++i) {
 155                 fskip = 0;
 156                 b = avgiptraffic[i];
 157
 158                 if(E('_f_onlyactive').checked) {
 159                         if ((b[2] < 10) && (b[3] < 10))
 160                                 continue;
 161                 }
 162
 163                 if (filteripe.length>0) {
 164                         fskip = 0;
 165                         for (x = 0; x < filteripe.length; ++x) {
 166                                 if (b[0] == filteripe[x]){
 167                                         fskip=1;
 168                                         break;
 169                                 }
 170                         }
 171                         if (fskip == 1) continue;
 172                 }
 173
 174                 if (filterip.length>0) {
 175                         fskip = 1;
 176                         for (x = 0; x < filterip.length; ++x) {
 177                                 if (b[0] == filterip[x]){
 178                                         fskip=0;
 179                                         break;
 180                                 }
 181                         }
 182                         if (fskip == 1) continue;
 183                 }
 184
 185                 rx += b[1];
 186                 tx += b[2];
 187                 tcpi += b[3];
 188                 tcpo += b[4];
 189                 udpi += b[5];
 190                 udpo += b[6];
 191                 icmpi += b[7];
 192                 icmpo += b[8];
 193                 tcpconn += b[9];
 194                 udpconn += b[10];
 195                 hostslisted.push(b[0]);
 196
 197                 var h = b[0];
 198                 if (E('_f_hostnames').checked) {
 199                         if(hostnamecache[b[0]] != null) {
 200                                 h = hostnamecache[b[0]] + ((b[0].indexOf(':') != -1) ? '<br>' : ' ') + '<small>(' + b[0] + ')</small>';
 201                         }
 202                 }
 203
 204                 if (E('_f_shortcuts').checked) {
 205                         h = h + '<br><small>';
 206                         h = h + '<a href="javascript:viewQosDetail(' + i + ')" title="View QoS Details">[qosdetails]</a>';
 207                         h = h + '<a href="javascript:viewQosCTrates(' + i + ')" title="View transfer rates per connection">[qosrates]</a>';
 208                         h = h + '<a href="javascript:viewIptHistory(' + i + ')" title="View IP Traffic History">[history]</a>';
 209                         h = h + '<a href="javascript:addExcludeList(' + i + ')" title="Filter out this address">[hide]</a>';
 210                         h = h + '</small>';
 211                 }
 212
 213                 d = [h,
 214                         rescale((b[1]/1024).toFixed(2)).toString(),
 215                         rescale((b[2]/1024).toFixed(2)).toString(),
 216                         b[3].toFixed(0).toString(),
 217                         b[4].toFixed(0).toString(),
 218                         b[5].toFixed(0).toString(),
 219                         b[6].toFixed(0).toString(),
 220                         b[7].toFixed(0).toString(),
 221                         b[8].toFixed(0).toString(),
 222                         b[9].toString(),
 223                         b[10].toString()];
 224
 225                 grid.insertData(-1, d);
 226         }
 227
 228         grid.resort();
 229         grid.recolor();
 230         grid.footerSet([ 'Total ' + ('<small><i>(' + ((hostslisted.length > 0) ? (hostslisted.length + ' hosts') : 'no data') + ')</i></small>'),
 231                 rescale((rx/1024).toFixed(2)).toString(),
 232                 rescale((tx/1024).toFixed(2)).toString(),
 233                 tcpi.toFixed(0).toString() + '/' + tcpo.toFixed(0).toString(),
 234                 udpi.toFixed(0).toString() + '/' + udpo.toFixed(0).toString(),
 235                 icmpi.toFixed(0).toString() + '/' + icmpo.toFixed(0).toString(),
 236                 tcpconn.toString(), udpconn.toString() ]);
 237 }
 238
 239 grid.sortCompare = function(a, b) {
 240         var col = this.sortColumn;
 241         var da = a.getRowData();
 242         var db = b.getRowData();
 243         var r = 0;
 244
 245         switch (col) {
 246         case 0: // host
 247                 r = cmpText(da[col], db[col]);
 248                 break;
 249         case 1: // Download
 250         case 2: // Upload
 251                 r = cmpFloat(da[col], db[col]);
 252                 break;
 253         case 3: // TCP pkts
 254                 r = cmpInt(da[3]+da[4], db[3]+db[4]);
 255                 break;
 256         case 4: // UDP pkts
 257                 r = cmpInt(da[5]+da[6], db[5]+db[6]);
 258                 break;
 259         case 5: // ICMP pkts
 260                 r = cmpInt(da[7]+da[8], db[7]+db[8]);
 261                 break;
 262         case 6: // TCP connections
 263                 r = cmpInt(da[9], db[9]);
 264                 break;
 265         case 7: // UDP connections
 266                 r = cmpInt(da[10], db[10]);
 267                 break;
 268         }
 269         return this.sortAscending ? r : -r;
 270 }
 271
 272 function popupWindow(v) {
 273         window.open(v, '', 'width=1000,height=600,toolbar=no,menubar=no,scrollbars=yes,resizable=yes');
 274 }
 275
 276 function viewQosDetail(n) {
 277         cookie.set('qos_filterip', [avgiptraffic[n][0]], 1);
 278         popupWindow('qos-detailed.asp');
 279 }
 280
 281 function viewQosCTrates(n) {
 282         cookie.set('qos_filterip', [avgiptraffic[n][0]], 1);
 283         popupWindow('qos-ctrate.asp');
 284 }
 285
 286 function viewIptHistory(n) {
 287         cookie.set('ipt_filterip', [avgiptraffic[n][0]], 1);
 288         popupWindow('ipt-daily.asp');
 289 }
 290
 291 function addExcludeList(n) {
 292         if (E('_f_filter_ipe').value.length<6) {
 293                 E('_f_filter_ipe').value = avgiptraffic[n][0];
 294         } else {
 295                 if (E('_f_filter_ipe').value.indexOf(avgiptraffic[n][0]) < 0) {
 296                         E('_f_filter_ipe').value = E('_f_filter_ipe').value + ',' + avgiptraffic[n][0];
 297                 }
 298         }
 299         dofilter();
 300 }
 301
 302 grid.dataToView = function(data) {
 303         return [data[0].toString(),
 304                         data[1].toString(),
 305                         data[2].toString(),
 306                         data[3] + '/' + data[4],
 307                         data[5] + '/' + data[6],
 308                         data[7] + '/' + data[8],
 309                         data[9].toString(),
 310                         data[10].toString() ];
 311 }
 312
 313 grid.setup = function() {
 314         this.init('grid', 'sort');
 315         this.headerSet(['Host', 'Download (bytes/s)', 'Upload (bytes/s)', 'TCP IN/OUT (pkt/s)', 'UDP IN/OUT (pkt/s)', 'ICMP IN/OUT (pkt/s)', 'TCP Connections', 'UDP Connections']);
 316 }
 317
 318 function init() {
 319         if (nvram.cstats_enable != '1') {
 320                 E('refresh-time').disabled = 1;
 321                 E('refresh-button').disabled = 1;
 322                 return;
 323         }
 324
 325         if ((c = '<% cgi_get("ipt_filterip"); %>') != '') {
 326                 if (c.length>6) {
 327                         E('_f_filter_ip').value = c;
 328                         filterip = c.split(',');
 329                 }
 330         }
 331
 332         if ((c = cookie.get('ipt_filterip')) != null) {
 333                 cookie.set('ipt_filterip', '', 0);
 334                 if (c.length>6) {
 335                         E('_f_filter_ip').value = E('_f_filter_ip').value + ((E('_f_filter_ip').value.length > 0) ? ',' : '') + c;
 336                         filterip.push(c.split(','));
 337                 }
 338         }
 339
 340         if ((c = cookie.get('ipt_addr_hidden')) != null) {
 341                 if (c.length>6) {
 342                         E('_f_filter_ipe').value = c;
 343                         filteripe = c.split(',');
 344                 }
 345         }
 346
 347         filteripe_before = filteripe;
 348
 349         if (((c = cookie.get('ipt_details_options_vis')) != null) && (c == '1')) {
 350                 toggleVisibility("options");
 351         }
 352
 353         scale = fixInt(cookie.get('ipt_details_scale'), 0, 2, 0);
 354
 355         E('_f_scale').value = scale;
 356
 357         E('_f_onlyactive').checked = (((c = cookie.get('ipt_details_onlyactive')) != null) && (c == '1'));
 358
 359         E('_f_hostnames').checked = (((c = cookie.get('ipt_details_hostnames')) != null) && (c == '1'));
 360
 361         E('_f_shortcuts').checked = (((c = cookie.get('ipt_details_shortcuts')) != null) && (c == '1'));
 362
 363         populateCache();
 364         grid.setup();
 365         ref.postData = 'exec=iptraffic';
 366         ref.initPage(250);
 367         if (!ref.running) ref.once = 1;
 368         ref.start();
 369 }
 370
 371 function getArrayPosByElement(haystack, needle, index) {
 372         for (var i = 0; i < haystack.length; ++i) {
 373                 if (haystack[i][index] == needle) {
 374                         return i;
 375                 }
 376         }
 377         return -1;
 378 }
 379
 380 function dofilter() {
 381         var i;
 382
 383         if (E('_f_filter_ip').value.length>0) {
 384                 filterip = E('_f_filter_ip').value.split(',');
 385                 for (i = 0; i < filterip.length; ++i) {
 386                         if ((filterip[i] = fixIP(filterip[i])) == null) {
 387                                 filterip.splice(i,1);
 388                         }
 389                 }
 390                 E('_f_filter_ip').value = (filterip.length > 0) ? filterip.join(',') : '';
 391         } else {
 392                 filterip = [];
 393         }
 394
 395         if (E('_f_filter_ipe').value.length>0) {
 396                 filteripe = E('_f_filter_ipe').value.split(',');
 397                 for (i = 0; i < filteripe.length; ++i) {
 398                         if ((filteripe[i] = fixIP(filteripe[i])) == null) {
 399                                 filteripe.splice(i,1);
 400                         }
 401                 }
 402                 E('_f_filter_ipe').value = (filteripe.length > 0) ? filteripe.join(',') : '';
 403         } else {
 404                 filteripe = [];
 405         }
 406
 407         if (filteripe_before != filteripe) {
 408                 cookie.set('ipt_addr_hidden', (filteripe.length > 0) ? filteripe.join(',') : '', 1);
 409                 filteripe_before = filteripe;
 410         }
 411
 412         grid.populate();
 413 }
 414
 415 function verifyFields(focused, quiet) {
 416         scale = E('_f_scale').value * 1;
 417         cookie.set('ipt_details_scale', E('_f_scale').value, 2);
 418
 419         cookie.set('ipt_details_onlyactive', (E('_f_onlyactive').checked ? '1' : '0'), 1);
 420
 421         cookie.set('ipt_details_hostnames', (E('_f_hostnames').checked ? '1' : '0'), 1);
 422
 423         cookie.set('ipt_details_shortcuts', (E('_f_shortcuts').checked ? '1' : '0'), 1);
 424
 425         dofilter();
 426         return 1;
 427 }
 428
 429 function toggleVisibility(whichone) {
 430         if(E('sesdiv' + whichone).style.display=='') {
 431                 E('sesdiv' + whichone).style.display='none';
 432                 E('sesdiv' + whichone + 'showhide').innerHTML='(Click here to show)';
 433                 cookie.set('ipt_details_' + whichone + '_vis', 0);
 434         } else {
 435                 E('sesdiv' + whichone).style.display='';
 436                 E('sesdiv' + whichone + 'showhide').innerHTML='(Click here to hide)';
 437                 cookie.set('ipt_details_' + whichone + '_vis', 1);
 438         }
 439 }
 440
 441 </script>
 442
 443 </head>
 444 <body onload='init()'>
 445 <form id='_fom' action='javascript:{}'>
 446 <table id='container' cellspacing=0>
 447 <tr><td colspan=2 id='header'>
 448         <div class='title'>Tomato</div>
 449         <div class='version'>Version <% version(); %></div>
 450 </td></tr>
 451 <tr id='body'><td id='navi'><script type='text/javascript'>navi()</script></td>
 452 <td id='content'>
 453 <div id='ident'><% ident(); %></div>
 454
 455 <div id='cstats'>
 456 <!-- / / / -->
 457
 458 <div class='section-title'>IP Traffic Details</div>
 459 <div class='section'>
 460 <table id='grid' class='tomato-grid' style="float:left" cellspacing=1></table>
 461
 462 <div id='loading'><br><b>Loading...</b></div>
 463 </div>
 464
 465 <!-- / / / -->
 466
 467 <div class='section-title'>Options <small><i><a href='javascript:toggleVisibility("options");'><span id='sesdivoptionsshowhide'>(Click here to show)</span></a></i></small></div>
 468 <div class='section' id='sesdivoptions' style='display:none'>
 469 <script type='text/javascript'>
 470 var c;
 471 c = [];
 472 c.push({ title: 'Only these IPs', name: 'f_filter_ip', size: 50, maxlen: 255, type: 'text', suffix: ' <small>(Comma separated list)</small>' });
 473 c.push({ title: 'Exclude these IPs', name: 'f_filter_ipe', size: 50, maxlen: 255, type: 'text', suffix: ' <small>(Comma separated list)</small>' });
 474 c.push({ title: 'Scale', name: 'f_scale', type: 'select', options: [['0', 'KB'], ['1', 'MB'], ['2', 'GB']] });
 475 c.push({ title: 'Ignore inactive hosts', name: 'f_onlyactive', type: 'checkbox' });
 476 c.push({ title: 'Show hostnames', name: 'f_hostnames', type: 'checkbox' });
 477 c.push({ title: 'Show shortcuts', name: 'f_shortcuts', type: 'checkbox' });
 478 createFieldTable('',c);
 479 </script>
 480 <div style="float:right;text-align:right">
 481 &raquo; <a href="admin-iptraffic.asp">Configure</a>
 482 </div>
 483 </div>
 484
 485 <!-- / / / -->
 486
 487 </div>
 488 <br>
 489
 490 <script type='text/javascript'>checkCstats();</script>
 491
 492
 493 </td></tr>
 494 <tr><td id='footer' colspan=2>
 495         <script type='text/javascript'>genStdRefresh(1,1,'ref.toggle()');</script>
 496 </td></tr>
 497 </table>
 498 </form>
 499 </body>
 500 </html>