release/src/router/www/ipt-24.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: Last 24 Hours</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 #txt {
  27         width: 550px;
  28         white-space: nowrap;
  29 }
  30 #bwm-controls {
  31         text-align: right;
  32         margin-right: 5px;
  33         margin-top: 5px;
  34         float: right;
  35         visibility: hidden;
  36 }
  37 ul.tabs a,
  38 #tabs a {
  39         width: 140px;
  40         height: 12px;
  41         font-size: 9px;
  42 }
  43 </style>
  44
  45 <script type='text/javascript' src='debug.js'></script>
  46
  47 <script type='text/javascript' src='wireless.jsx?_http_id=<% nv(http_id); %>'></script>
  48 <script type='text/javascript' src='bwm-common.js'></script>
  49 <script type='text/javascript' src='bwm-hist.js'></script>
  50 <script type='text/javascript' src='interfaces.js'></script>
  51
  52 <script type='text/javascript'>
  53
  54 //      <% nvram("wan_ifname,lan_ifname,wl_ifname,wan_proto,wan_iface,web_svg,cstats_enable,cstats_colors,dhcpd_static,lan_ipaddr,lan_netmask,lan1_ipaddr,lan1_netmask,lan2_ipaddr,lan2_netmask,lan3_ipaddr,lan3_netmask,cstats_labels"); %>
  55
  56 //      <% devlist(); %>
  57
  58 var cprefix = 'ipt_';
  59 var updateInt = 120;
  60 var updateDiv = updateInt;
  61 var updateMaxL = 720;
  62 var updateReTotal = 1;
  63 var hours = 24;
  64 var lastHours = 0;
  65 var debugTime = 0;
  66
  67 var ipt_addr_shown = [];
  68 var ipt_addr_hidden = [];
  69
  70 hostnamecache = [];
  71
  72 function showHours() {
  73         if (hours == lastHours) return;
  74         showSelectedOption('hr', lastHours, hours);
  75         lastHours = hours;
  76 }
  77
  78 function switchHours(h) {
  79         if ((!svgReady) || (updating)) return;
  80
  81         hours = h;
  82         updateMaxL = (720 / 24) * hours;
  83         showHours();
  84         loadData();
  85         cookie.set(cprefix + 'hrs', hours);
  86 }
  87
  88 var ref = new TomatoRefresh('update.cgi', 'exec=ipt_bandwidth&arg0=speed');
  89
  90 ref.refresh = function(text) {
  91         ++updating;
  92         try {
  93                 this.refreshTime = 1500;
  94                 speed_history = {};
  95                 try {
  96                         eval(text);
  97
  98                         var i;
  99                         for (i in speed_history) {
 100                                 if ((ipt_addr_hidden.find(i) == -1) && (ipt_addr_shown.find(i) == -1) && (i != '_next')) {
 101                                         ipt_addr_shown.push(i);
 102                                         var option=document.createElement("option");
 103                                         option.value=i;
 104                                         if (hostnamecache[i] != null) {
 105                                                 option.text = hostnamecache[i] + ' (' + i + ')';
 106                                         } else {
 107                                                 option.text=i;
 108                                         }
 109                                         E('_f_ipt_addr_shown').add(option,null);
 110                                         speed_history[i].hide = 0;
 111                                 }
 112
 113                                 if (ipt_addr_hidden.find(i) != -1) {
 114                                         speed_history[i].hide = 1;
 115                                 } else {
 116                                         speed_history[i].hide = 0;
 117                                 }
 118                         }
 119
 120                         if (cstats_busy) {
 121                                 E('rbusy').style.display = 'none';
 122                                 cstats_busy = 0;
 123                         }
 124                         this.refreshTime = (fixInt(speed_history._next, 1, 120, 60) + 2) * 1000;
 125                 } catch (ex) {
 126                         speed_history = {};
 127                         cstats_busy = 1;
 128                         E('rbusy').style.display = '';
 129                 }
 130                 if (debugTime) E('dtime').innerHTML = (ymdText(new Date())) + ' ' + (this.refreshTime / 1000);
 131
 132                 loadData();
 133         }
 134         catch (ex) {
 135 /* REMOVE-BEGIN
 136 //              alert('ex=' + ex);
 137 REMOVE-END */
 138         }
 139         --updating;
 140 }
 141
 142 ref.showState = function() {
 143         E('refresh-button').value = this.running ? 'Stop' : 'Start';
 144 }
 145
 146 ref.toggleX = function() {
 147         this.toggle();
 148         this.showState();
 149         cookie.set(cprefix + 'refresh', this.running ? 1 : 0);
 150 }
 151
 152 ref.initX = function() {
 153         var a;
 154
 155         a = fixInt(cookie.get(cprefix + 'refresh'), 0, 1, 1);
 156         if (a) {
 157                 ref.refreshTime = 100;
 158                 ref.toggleX();
 159         }
 160 }
 161
 162 function init() {
 163         if (nvram.cstats_enable != '1') return;
 164
 165         populateCache();
 166
 167         var c,i;
 168         if ((c = cookie.get('ipt_addr_hidden')) != null) {
 169                 c = c.split(',');
 170                 for (var i = 0; i < c.length; ++i) {
 171                         if (c[i].trim() != '') {
 172                                 ipt_addr_hidden.push(c[i]);
 173                                 var option=document.createElement("option");
 174                                 option.value=c[i];
 175                                 if (hostnamecache[c[i]] != null) {
 176                                         option.text = hostnamecache[c[i]] + ' (' + c[i] + ')';
 177                                 } else {
 178                                         option.text = c[i];
 179                                 }
 180                                 E('_f_ipt_addr_hidden').add(option,null);
 181                         }
 182                 }
 183         }
 184
 185         try {
 186         //      <% ipt_bandwidth("speed"); %>
 187
 188                 for (i in speed_history) {
 189                         if ((ipt_addr_hidden.find(i) == -1) && (ipt_addr_shown.find(i) == -1) && ( i != '_next') && (i.trim() != '')) {
 190                                 ipt_addr_shown.push(i);
 191                                 var option=document.createElement("option");
 192                                 var ii = i;
 193                                 if (hostnamecache[i] != null) {
 194                                         ii = hostnamecache[i] + ' (' + i + ')';
 195                                 }
 196                                 option.text=ii;
 197                                 option.value=i;
 198                                 E('_f_ipt_addr_shown').add(option,null);
 199                                 speed_history[i].hide = 0;
 200                         }
 201                         if (ipt_addr_hidden.find(i) != -1) {
 202                                 speed_history[i].hide = 1;
 203                         } else {
 204                                 speed_history[i].hide = 0;
 205                         }
 206                 }
 207         }
 208         catch (ex) {
 209 /* REMOVE-BEGIN
 210 //              speed_history = {};
 211 REMOVE-END */
 212         }
 213         cstats_busy = 0;
 214         if (typeof(speed_history) == 'undefined') {
 215                 speed_history = {};
 216                 cstats_busy = 1;
 217                 E('rbusy').style.display = '';
 218         }
 219
 220         hours = fixInt(cookie.get(cprefix + 'hrs'), 1, 24, 24);
 221         updateMaxL = (720 / 24) * hours;
 222         showHours();
 223
 224         initCommon(1, 0, 0);
 225
 226         verifyFields(null,1);
 227
 228         var theRules = document.styleSheets[2].cssRules;
 229         switch (nvram['cstats_labels']) {
 230                 case '1':               // show hostnames only
 231                         theRules[theRules.length-1].style.cssText = 'width: 140px;';
 232 /* REMOVE-BEGIN */
 233 //                      document.styleSheets[2].deleteRule(theRules.length - 1);
 234 /* REMOVE-END */
 235                         break;
 236                 case '2':               // show IPs only
 237                         theRules[theRules.length-1].style.cssText = 'width: 140px;';
 238                         break;
 239                 case '0':               // show hostnames + IPs
 240                 default:
 241 /* REMOVE-BEGIN */
 242 //                      theRules[theRules.length-1].style.cssText = 'width: 140px; height: 12px; font-size: 9px;';
 243 /* REMOVE-END */
 244                         break;
 245         }
 246
 247         ref.initX();
 248 }
 249
 250 function verifyFields(focused, quiet) {
 251         var changed_addr_hidden = 0;
 252         if (focused != null) {
 253                 if (focused.id == '_f_ipt_addr_shown') {
 254                         ipt_addr_shown.remove(focused.options[focused.selectedIndex].value);
 255                         ipt_addr_hidden.push(focused.options[focused.selectedIndex].value);
 256                         var option=document.createElement("option");
 257                         option.text=focused.options[focused.selectedIndex].text;
 258                         option.value=focused.options[focused.selectedIndex].value;
 259                         E('_f_ipt_addr_shown').remove(focused.selectedIndex);
 260                         E('_f_ipt_addr_shown').selectedIndex=0;
 261                         E('_f_ipt_addr_hidden').add(option,null);
 262                         changed_addr_hidden = 1;
 263                 }
 264
 265                 if (focused.id == '_f_ipt_addr_hidden') {
 266                         ipt_addr_hidden.remove(focused.options[focused.selectedIndex].value);
 267                         ipt_addr_shown.push(focused.options[focused.selectedIndex].value);
 268                         var option=document.createElement("option");
 269                         option.text=focused.options[focused.selectedIndex].text;
 270                         option.value=focused.options[focused.selectedIndex].value;
 271                         E('_f_ipt_addr_hidden').remove(focused.selectedIndex);
 272                         E('_f_ipt_addr_hidden').selectedIndex=0;
 273                         E('_f_ipt_addr_shown').add(option,null);
 274                         changed_addr_hidden = 1;
 275                 }
 276                 if (changed_addr_hidden == 1) {
 277                         cookie.set('ipt_addr_hidden', ipt_addr_hidden.join(','), 1);
 278                         if (!ref.running) {
 279                                 ref.once = 1;
 280                                 ref.start();
 281                         } else {
 282                                 ref.stop();
 283                                 ref.start();
 284                         }
 285                 }
 286         }
 287
 288         if (E('_f_ipt_addr_hidden').length < 2) {
 289                 E('_f_ipt_addr_hidden').disabled = 1;
 290         } else {
 291                 E('_f_ipt_addr_hidden').disabled = 0;
 292         }
 293
 294         if (E('_f_ipt_addr_shown').length < 2) {
 295                 E('_f_ipt_addr_shown').disabled = 1;
 296         } else {
 297                 E('_f_ipt_addr_shown').disabled = 0;
 298         }
 299
 300         return 1;
 301 }
 302 </script>
 303
 304 </head>
 305 <body onload='init()'>
 306 <form>
 307 <table id='container' cellspacing=0>
 308 <tr><td colspan=2 id='header'>
 309         <div class='title'>Tomato</div>
 310         <div class='version'>Version <% version(); %></div>
 311 </td></tr>
 312 <tr id='body'><td id='navi'><script type='text/javascript'>navi()</script></td>
 313 <td id='content'>
 314 <div id='ident'><% ident(); %></div>
 315
 316 <!-- / / / -->
 317
 318 <div id='cstats'>
 319         <div id='tab-area'></div>
 320
 321         <script type='text/javascript'>
 322         if ((nvram.web_svg != '0') && (nvram.cstats_enable == '1')) {
 323                 // without a div, Opera 9 moves svgdoc several pixels outside of <embed> (?)
 324                 W("<div style='border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;visibility:hidden;padding:0;margin:0' id='graph'><embed src='bwm-graph.svg?<% version(); %>' style='width:760px;height:300px;margin:0;padding:0' type='image/svg+xml' pluginspage='http://www.adobe.com/svg/viewer/install/'></embed></div>");
 325         }
 326         </script>
 327
 328         <div id='bwm-controls'>
 329                 <small>(2 minute interval)</small><br>
 330                 <br>
 331                 Hours:&nbsp;
 332                         <a href='javascript:switchHours(1);' id='hr1'>1</a>,
 333                         <a href='javascript:switchHours(2);' id='hr2'>2</a>,
 334                         <a href='javascript:switchHours(4);' id='hr4'>4</a>,
 335                         <a href='javascript:switchHours(6);' id='hr6'>6</a>,
 336                         <a href='javascript:switchHours(12);' id='hr12'>12</a>,
 337                         <a href='javascript:switchHours(18);' id='hr18'>18</a>,
 338                         <a href='javascript:switchHours(24);' id='hr24'>24</a><br>
 339                 Avg:&nbsp;
 340                         <a href='javascript:switchAvg(1)' id='avg1'>Off</a>,
 341                         <a href='javascript:switchAvg(2)' id='avg2'>2x</a>,
 342                         <a href='javascript:switchAvg(4)' id='avg4'>4x</a>,
 343                         <a href='javascript:switchAvg(6)' id='avg6'>6x</a>,
 344                         <a href='javascript:switchAvg(8)' id='avg8'>8x</a><br>
 345                 Max:&nbsp;
 346                         <a href='javascript:switchScale(0)' id='scale0'>Uniform</a>,
 347                         <a href='javascript:switchScale(1)' id='scale1'>Per Address</a><br>
 348                 Display:&nbsp;
 349                         <a href='javascript:switchDraw(0)' id='draw0'>Solid</a>,
 350                         <a href='javascript:switchDraw(1)' id='draw1'>Line</a><br>
 351                 Color:&nbsp; <a href='javascript:switchColor()' id='drawcolor'>-</a><br>
 352                 <small><a href='javascript:switchColor(1)' id='drawrev'>[reverse]</a></small><br>
 353                 <br><br>
 354                 &nbsp; &raquo; <a href="admin-iptraffic.asp">Configure</a>
 355         </div>
 356
 357         <br><br>
 358         <table border=0 cellspacing=2 id='txt'>
 359         <tr>
 360                 <td width='8%' align='right' valign='top'><b style='border-bottom:blue 1px solid' id='rx-name'>RX</b></td>
 361                         <td width='15%' align='right' valign='top'><span id='rx-current'></span></td>
 362                 <td width='8%' align='right' valign='top'><b>Avg</b></td>
 363                         <td width='15%' align='right' valign='top' id='rx-avg'></td>
 364                 <td width='8%' align='right' valign='top'><b>Peak</b></td>
 365                         <td width='15%' align='right' valign='top' id='rx-max'></td>
 366                 <td width='8%' align='right' valign='top'><b>Total</b></td>
 367                         <td width='14%' align='right' valign='top' id='rx-total'></td>
 368                 <td>&nbsp;</td>
 369         </tr>
 370         <tr>
 371                 <td width='8%' align='right' valign='top'><b style='border-bottom:blue 1px solid' id='tx-name'>TX</b></td>
 372                         <td width='15%' align='right' valign='top'><span id='tx-current'></span></td>
 373                 <td width='8%' align='right' valign='top'><b>Avg</b></td>
 374                         <td width='15%' align='right' valign='top' id='tx-avg'></td>
 375                 <td width='8%' align='right' valign='top'><b>Peak</b></td>
 376                         <td width='15%' align='right' valign='top' id='tx-max'></td>
 377                 <td width='8%' align='right' valign='top'><b>Total</b></td>
 378                         <td width='14%' align='right' valign='top' id='tx-total'></td>
 379                 <td>&nbsp;</td>
 380         </tr>
 381         </table>
 382
 383 <!-- / / / -->
 384
 385 <br>
 386
 387 <div>
 388 <script type='text/javascript'>
 389 createFieldTable('', [
 390         { title: 'IPs currently on graphic', name: 'f_ipt_addr_shown', type: 'select', options: [[0,'Select']], suffix: ' <small>(Click/select a device from this list to hide it)</small>' },
 391         { title: 'Hidden addresses', name: 'f_ipt_addr_hidden', type: 'select', options: [[0,'Select']], suffix: ' <small>(Click/select to show it again)</small>' }
 392         ]);
 393 </script>
 394 </div>
 395
 396 </div>
 397
 398 </div>
 399
 400 <!-- / / / -->
 401
 402 <script type='text/javascript'>
 403 if (nvram.cstats_enable != '1') {
 404         W('<div class="note-disabled">IP Traffic monitoring disabled.</b><br><br><a href="admin-iptraffic.asp">Enable &raquo;</a><div>');
 405         E('cstats').style.display = 'none';
 406 }else {
 407         W('<div class="note-warning" style="display:none" id="rbusy">The cstats program is not responding or is busy. Try reloading after a few seconds.</div>');
 408 }
 409 </script>
 410
 411 <!-- / / / -->
 412
 413 </td></tr>
 414 <tr><td id='footer' colspan=2>
 415         <span id='dtime'></span>
 416         <img src='spin.gif' id='refresh-spinner' onclick='debugTime=1'>
 417         <input type='button' value='Refresh' id='refresh-button' onclick='ref.toggleX()'>
 418 </td></tr>
 419 </table>
 420 </form>
 421 </body>
 422 </html>