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