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
  71 var prevtimestamp = new Date().getTime();
  72 var thistimestamp;
  73 var difftimestamp;
  74 var avgiptraffic = [];
  75 var lastiptraffic = iptraffic;
  76
  77 hostnamecache = [];
  78
  79 var ref = new TomatoRefresh('update.cgi', '', 0, 'ipt_details');
  80 ref.refresh = function(text) {
  81
  82         ++lock;
  83
  84         var i, b, j, k, l;
  85
  86         thistimestamp = new Date().getTime();
  87
  88         try {
  89                 eval(text);
  90         }
  91         catch (ex) {
  92                 iptraffic = [];
  93                 cstats_busy = 1;
  94         }
  95
  96         difftimestamp = thistimestamp - prevtimestamp;
  97         prevtimestamp = thistimestamp;
  98
  99         for (i = 0; i < iptraffic.length; ++i) {
 100                 b = iptraffic[i];
 101
 102                 j = getArrayPosByElement(avgiptraffic, b[0], 0);
 103                 if (j == -1) {
 104                         j = avgiptraffic.length;
 105                         avgiptraffic[j] = [ b[0], 0, 0, 0, 0, 0, 0, 0, 0, b[9], b[10] ];
 106                 }
 107
 108                 k = getArrayPosByElement(lastiptraffic, b[0], 0);
 109                 if (k == -1) {
 110                         k = lastiptraffic.length;
 111                         lastiptraffic[k] = b;
 112                 }
 113
 114                 for (l = 1; l <= 8; ++l) {
 115                         avgiptraffic[j][l] = ((b[l] - lastiptraffic[k][l]) / difftimestamp * 1000);
 116                         lastiptraffic[k][l] = b[l];
 117                 }
 118
 119                 avgiptraffic[j][9] = b[9];
 120                 avgiptraffic[j][10] = b[10];
 121                 lastiptraffic[k][9] = b[9];
 122                 lastiptraffic[k][10] = b[10];
 123         }
 124
 125         setTimeout(function() { E('loading').style.visibility = 'hidden'; }, 100);
 126
 127         --lock;
 128
 129         grid.populate();
 130 }
 131
 132 grid.populate = function() {
 133         if ((lock) || (cstats_busy)) return;
 134
 135         var hostslisted = [];
 136
 137         var i, b, x;
 138         var fskip;
 139
 140         var tx = 0;
 141         var rx = 0;
 142         var tcpi = 0;
 143         var tcpo = 0;
 144         var udpi = 0;
 145         var udpo = 0;
 146         var icmpi = 0;
 147         var icmpo = 0;
 148         var tcpconn = 0;
 149         var udpconn = 0;
 150
 151         grid.removeAllData();
 152
 153         for (i = 0; i < avgiptraffic.length; ++i) {
 154                 fskip = 0;
 155                 b = avgiptraffic[i];
 156
 157                 if(E('_f_onlyactive').checked) {
 158                         if ((b[2] < 10) && (b[3] < 10))
 159                                 continue;
 160                 }
 161
 162                 if (filteripe.length>0) {
 163                         fskip = 0;
 164                         for (x = 0; x < filteripe.length; ++x) {
 165                                 if (b[0] == filteripe[x]){
 166                                         fskip=1;
 167                                         break;
 168                                 }
 169                         }
 170                         if (fskip == 1) continue;
 171                 }
 172
 173                 if (filterip.length>0) {
 174                         fskip = 1;
 175                         for (x = 0; x < filterip.length; ++x) {
 176                                 if (b[0] == filterip[x]){
 177                                         fskip=0;
 178                                         break;
 179                                 }
 180                         }
 181                         if (fskip == 1) continue;
 182                 }
 183
 184                 rx += b[1];
 185                 tx += b[2];
 186                 tcpi += b[3];
 187                 tcpo += b[4];
 188                 udpi += b[5];
 189                 udpo += b[6];
 190                 icmpi += b[7];
 191                 icmpo += b[8];
 192                 tcpconn += b[9];
 193                 udpconn += b[10];
 194                 hostslisted.push(b[0]);
 195
 196                 var h = b[0];
 197                 if (E('_f_hostnames').checked) {
 198                         if(hostnamecache[b[0]] != null) {
 199                                 h = hostnamecache[b[0]] + ((b[0].indexOf(':') != -1) ? '<br>' : ' ') + '<small>(' + b[0] + ')</small>';
 200                         }
 201                 }
 202
 203                 if (E('_f_shortcuts').checked) {
 204                         h = h + '<br><small>';
 205                         h = h + '<a href="javascript:viewQosDetail(' + i + ')" title="View QoS Details">[qosdetails]</a>';
 206                         h = h + '<a href="javascript:viewQosCTrates(' + i + ')" title="View transfer rates per connection">[qosrates]</a>';
 207                         h = h + '<a href="javascript:viewIptHistory(' + i + ')" title="View IP Traffic History">[history]</a>';
 208                         h = h + '<a href="javascript:addExcludeList(' + i + ')" title="Filter out this address">[hide]</a>';
 209                         h = h + '</small>';
 210                 }
 211
 212                 d = [h,
 213                         rescale((b[1]/1024).toFixed(2)).toString(),
 214                         rescale((b[2]/1024).toFixed(2)).toString(),
 215                         b[3].toFixed(0).toString(),
 216                         b[4].toFixed(0).toString(),
 217                         b[5].toFixed(0).toString(),
 218                         b[6].toFixed(0).toString(),
 219                         b[7].toFixed(0).toString(),
 220                         b[8].toFixed(0).toString(),
 221                         b[9].toString(),
 222                         b[10].toString()];
 223
 224                 grid.insertData(-1, d);
 225         }
 226
 227         grid.resort();
 228         grid.recolor();
 229         grid.footerSet([ 'Total ' + ('<small><i>(' + ((hostslisted.length > 0) ? (hostslisted.length + ' hosts') : 'no data') + ')</i></small>'),
 230                 rescale((rx/1024).toFixed(2)).toString(),
 231                 rescale((tx/1024).toFixed(2)).toString(),
 232                 tcpi.toFixed(0).toString() + '/' + tcpo.toFixed(0).toString(),
 233                 udpi.toFixed(0).toString() + '/' + udpo.toFixed(0).toString(),
 234                 icmpi.toFixed(0).toString() + '/' + icmpo.toFixed(0).toString(),
 235                 tcpconn.toString(), udpconn.toString() ]);
 236 }
 237
 238 grid.sortCompare = function(a, b) {
 239         var col = this.sortColumn;
 240         var da = a.getRowData();
 241         var db = b.getRowData();
 242         var r = 0;
 243
 244         switch (col) {
 245         case 0: // host
 246                 r = cmpText(da[col], db[col]);
 247                 break;
 248         case 1: // Download
 249         case 2: // Upload
 250                 r = cmpFloat(da[col], db[col]);
 251                 break;
 252         case 3: // TCP pkts
 253                 r = cmpInt(da[3]+da[4], db[3]+db[4]);
 254                 break;
 255         case 4: // UDP pkts
 256                 r = cmpInt(da[5]+da[6], db[5]+db[6]);
 257                 break;
 258         case 5: // ICMP pkts
 259                 r = cmpInt(da[7]+da[8], db[7]+db[8]);
 260                 break;
 261         case 6: // TCP connections
 262                 r = cmpInt(da[9], db[9]);
 263                 break;
 264         case 7: // UDP connections
 265                 r = cmpInt(da[10], db[10]);
 266                 break;
 267         }
 268         return this.sortAscending ? r : -r;
 269 }
 270
 271 function popupWindow(v) {
 272         window.open(v, '', 'width=1000,height=600,toolbar=no,menubar=no,scrollbars=yes,resizable=yes');
 273 }
 274
 275 function viewQosDetail(n) {
 276         cookie.set('qos_filterip', [avgiptraffic[n][0]], 1);
 277         popupWindow('qos-detailed.asp');
 278 }
 279
 280 function viewQosCTrates(n) {
 281         cookie.set('qos_filterip', [avgiptraffic[n][0]], 1);
 282         popupWindow('qos-ctrate.asp');
 283 }
 284
 285 function viewIptHistory(n) {
 286         cookie.set('ipt_filterip', [avgiptraffic[n][0]], 1);
 287         popupWindow('ipt-daily.asp');
 288 }
 289
 290 function addExcludeList(n) {
 291         if (E('_f_filter_ipe').value.length<6) {
 292                 E('_f_filter_ipe').value = avgiptraffic[n][0];
 293         } else {
 294                 if (E('_f_filter_ipe').value.indexOf(avgiptraffic[n][0]) < 0) {
 295                         E('_f_filter_ipe').value = E('_f_filter_ipe').value + ',' + avgiptraffic[n][0];
 296                 }
 297         }
 298         dofilter();
 299 }
 300
 301 grid.dataToView = function(data) {
 302         return [data[0].toString(),
 303                         data[1].toString(),
 304                         data[2].toString(),
 305                         data[3] + '/' + data[4],
 306                         data[5] + '/' + data[6],
 307                         data[7] + '/' + data[8],
 308                         data[9].toString(),
 309                         data[10].toString() ];
 310 }
 311
 312 grid.setup = function() {
 313         this.init('grid', 'sort');
 314         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']);
 315 }
 316
 317 function init() {
 318         if ((c = cookie.get('ipt_filterip')) != null) {
 319                 cookie.set('ipt_filterip', '', 0);
 320                 if (c.length>6) {
 321                         E('_f_filter_ip').value = c;
 322                         filterip = c.split(',');
 323                 }
 324         }
 325
 326         if (((c = cookie.get('ipt_details_options_vis')) != null) && (c == '1')) {
 327                 toggleVisibility("options");
 328         }
 329         scale = fixInt(cookie.get('ipt_details_scale'), 0, 2, 0);
 330
 331         E('_f_scale').value = scale;
 332
 333         E('_f_onlyactive').checked = (((c = cookie.get('ipt_details_onlyactive')) != null) && (c == '1'));
 334
 335         E('_f_hostnames').checked = (((c = cookie.get('ipt_details_hostnames')) != null) && (c == '1'));
 336
 337         E('_f_shortcuts').checked = (((c = cookie.get('ipt_details_shortcuts')) != null) && (c == '1'));
 338
 339         populateCache();
 340         grid.setup();
 341         ref.postData = 'exec=iptraffic';
 342         ref.initPage(250);
 343         if (!ref.running) ref.once = 1;
 344         ref.start();
 345 }
 346
 347 function getArrayPosByElement(haystack, needle, index) {
 348         for (var i = 0; i < haystack.length; ++i) {
 349                 if (haystack[i][index] == needle) {
 350                         return i;
 351                 }
 352         }
 353         return -1;
 354 }
 355
 356 function dofilter() {
 357         if (E('_f_filter_ip').value.length>6) {
 358                 filterip = E('_f_filter_ip').value.split(',');
 359         } else {
 360                 filterip = [];
 361         }
 362
 363         if (E('_f_filter_ipe').value.length>6) {
 364                 filteripe = E('_f_filter_ipe').value.split(',');
 365         } else {
 366                 filteripe = [];
 367         }
 368
 369         grid.populate();
 370 }
 371
 372 function verifyFields(focused, quiet) {
 373         scale = E('_f_scale').value * 1;
 374         cookie.set('ipt_details_scale', E('_f_scale').value, 2);
 375
 376         cookie.set('ipt_details_onlyactive', (E('_f_onlyactive').checked ? '1' : '0'), 1);
 377
 378         cookie.set('ipt_details_hostnames', (E('_f_hostnames').checked ? '1' : '0'), 1);
 379
 380         cookie.set('ipt_details_shortcuts', (E('_f_shortcuts').checked ? '1' : '0'), 1);
 381
 382         dofilter();
 383         return 1;
 384 }
 385
 386 function toggleVisibility(whichone) {
 387         if(E('sesdiv' + whichone).style.display=='') {
 388                 E('sesdiv' + whichone).style.display='none';
 389                 E('sesdiv' + whichone + 'showhide').innerHTML='(Click here to show)';
 390                 cookie.set('ipt_details_' + whichone + '_vis', 0);
 391         } else {
 392                 E('sesdiv' + whichone).style.display='';
 393                 E('sesdiv' + whichone + 'showhide').innerHTML='(Click here to hide)';
 394                 cookie.set('ipt_details_' + whichone + '_vis', 1);
 395         }
 396 }
 397
 398 </script>
 399
 400 </head>
 401 <body onload='init()'>
 402 <form id='_fom' action='javascript:{}'>
 403 <table id='container' cellspacing=0>
 404 <tr><td colspan=2 id='header'>
 405         <div class='title'>Tomato</div>
 406         <div class='version'>Version <% version(); %></div>
 407 </td></tr>
 408 <tr id='body'><td id='navi'><script type='text/javascript'>navi()</script></td>
 409 <td id='content'>
 410 <div id='ident'><% ident(); %></div>
 411
 412 <!-- / / / -->
 413
 414 <div class='section-title'>IP Traffic Details</div>
 415 <div class='section'>
 416 <table id='grid' class='tomato-grid' style="float:left" cellspacing=1></table>
 417
 418 <div id='loading'><br><b>Loading...</b></div>
 419 </div>
 420
 421 <!-- / / / -->
 422
 423 <div class='section-title'>Options <small><i><a href='javascript:toggleVisibility("options");'><span id='sesdivoptionsshowhide'>(Click here to show)</span></a></i></small></div>
 424 <div class='section' id='sesdivoptions' style='display:none'>
 425 <script type='text/javascript'>
 426 var c;
 427 c = [];
 428 c.push({ title: 'Only these IPs', name: 'f_filter_ip', size: 50, maxlen: 255, type: 'text', suffix: ' <small>(Comma separated list)</small>' });
 429 c.push({ title: 'Exclude these IPs', name: 'f_filter_ipe', size: 50, maxlen: 255, type: 'text', suffix: ' <small>(Comma separated list)</small>' });
 430 c.push({ title: 'Scale', name: 'f_scale', type: 'select', options: [['0', 'KB'], ['1', 'MB'], ['2', 'GB']] });
 431 c.push({ title: 'Ignore inactive hosts', name: 'f_onlyactive', type: 'checkbox' });
 432 c.push({ title: 'Show hostnames', name: 'f_hostnames', type: 'checkbox' });
 433 c.push({ title: 'Show shortcuts', name: 'f_shortcuts', type: 'checkbox' });
 434 createFieldTable('',c);
 435 </script>
 436 <div style="float:right;text-align:right">
 437 &raquo; <a href="admin-iptraffic.asp">Configure</a>
 438 </div>
 439 </div>
 440
 441 <script type='text/javascript'>checkCstats();</script>
 442
 443 <!-- / / / -->
 444
 445 </td></tr>
 446 <tr><td id='footer' colspan=2>
 447         <script type='text/javascript'>genStdRefresh(1,1,'ref.toggle()');</script>
 448 </td></tr>
 449 </table>
 450 </form>
 451 </body>
 452 </html>