release/src/router/www/ipt-graphs.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         For use with Tomato Firmware only.
   8         No part of this file may be used without permission.
   9 -->
  10 <html>
  11 <head>
  12 <meta http-equiv='content-type' content='text/html;charset=utf-8'>
  13 <meta name='robots' content='noindex,nofollow'>
  14 <title>[<% ident(); %>] IP Traffic: View Graphs</title>
  15 <link rel='stylesheet' type='text/css' href='tomato.css'>
  16 <% css(); %>
  17 <script type='text/javascript' src='tomato.js'></script>
  18
  19 <!-- / / / -->
  20 <script type='text/javascript' src='debug.js'></script>
  21
  22 <style type='text/css'>
  23 .color {
  24         width: 12px;
  25         height: 25px;
  26 }
  27 .title {
  28 }
  29 .count {
  30         text-align: right;
  31 }
  32 .pct {
  33         width:55px;
  34         text-align: right;
  35 }
  36 .thead {
  37         font-size: 90%;
  38         font-weight: bold;
  39 }
  40 .total {
  41         border-top: 1px dashed #bbb;
  42         font-weight: bold;
  43 }
  44 </style>
  45
  46 <script type='text/javascript'>
  47 //      <% nvram('cstats_enable,lan_ipaddr,lan1_ipaddr,lan2_ipaddr,lan3_ipaddr,lan_netmask,lan1_netmask,lan2_netmask,lan3_netmask,dhcpd_static,web_svg'); %>
  48
  49 // <% iptraffic(); %>
  50
  51 /* REMOVE-BEGIN */
  52 //      <% devlist(); %>
  53 /* REMOVE-END */
  54
  55 nfmarks = [];
  56 irates = [];
  57 orates = [];
  58
  59 var svgReady = 0;
  60 var abc = ['', '', '', '', '', '', '', '', '', '', ''];
  61 var colors = [
  62         'c6e2ff',
  63         'b0c4de',
  64         '9ACD32',
  65         '3cb371',
  66         '6495ed',
  67         '8FBC8F',
  68         'a0522d',
  69         'deb887',
  70         'F08080',
  71         'ffa500',
  72         'ffd700'
  73 ];
  74
  75 /* REMOVE-BEGIN */
  76 //var grid = new TomatoGrid();
  77 /* REMOVE-END */
  78
  79 var lock = 0;
  80
  81 var prevtimestamp = new Date().getTime();
  82 var thistimestamp;
  83 var difftimestamp;
  84 var avgiptraffic = [];
  85 var lastiptraffic = iptraffic;
  86
  87 /* REMOVE-BEGIN */
  88 //hostnamecache = [];
  89 /* REMOVE-END */
  90
  91 function updateLabels() {
  92         var i = 0;
  93         while ((i < abc.length) && (i < iptraffic.length)) {
  94                 abc[i] = iptraffic[i][0]; // IP address
  95                 i++;
  96         }
  97 }
  98
  99 updateLabels();
 100
 101 /* REMOVE-BEGIN */
 102 //      var i = 0;
 103 //      while ((i <= nfmarks.length) && (i <= iptraffic.length)) {
 104 //      while (i < nfmarks.length){
 105 /* REMOVE-END */
 106         i = 0;
 107         while (i < 11){
 108                 if (iptraffic[i] != null) {
 109                         nfmarks[i] = iptraffic[i][9] + iptraffic[i][10]; // TCP + UDP connections
 110                 } else {
 111                         nfmarks[i] = 0;
 112                 }
 113                 irates[i] = 0;
 114                 orates[i] = 0;
 115                 i++;
 116         }
 117
 118
 119 function mClick(n) {
 120         location.href = 'ipt-details.asp?ipt_filterip=' + abc[n];
 121 }
 122
 123 function showData() {
 124         var i, n, p;
 125         var ct, rt, ort;
 126
 127         ct = rt = ort = 0;
 128         for (i = 0; i < 11; ++i) {
 129                 if (!nfmarks[i]) nfmarks[i] = 0;
 130                 ct += nfmarks[i];
 131                 if (!irates[i]) irates[i] = 0;
 132                 rt += irates[i];
 133                 if (!orates[i]) orates[i] = 0;
 134                 ort += orates[i];
 135         }
 136
 137         for (i = 0; i < 11; ++i) {
 138                 n = nfmarks[i];
 139                 E('ccnt' + i).innerHTML = (abc[i] != '') ? n : '';
 140                 if (ct > 0) p = (n / ct) * 100;
 141                         else p = 0;
 142                 E('cpct' + i).innerHTML = (abc[i] != '') ? p.toFixed(2) + '%' : '';
 143         }
 144         E('ccnt-total').innerHTML = ct;
 145
 146         for (i = 0; i < 11; ++i) {
 147                 n = irates[i];
 148                 E('bcnt' + i).innerHTML = (abc[i] != '') ? (n / 125).toFixed(2) : '';
 149                 E('bcntx' + i).innerHTML = (abc[i] != '') ? (n / 1024).toFixed(2) : '';
 150                 if (rt > 0) p = (n / rt) * 100;
 151                         else p = 0;
 152                 E('bpct' + i).innerHTML = (abc[i] != '') ? p.toFixed(2) + '%' : '';
 153         }
 154         E('bcnt-total').innerHTML = (rt / 125).toFixed(2);
 155         E('bcntx-total').innerHTML = (rt / 1024).toFixed(2);
 156
 157         for (i = 0; i < 11; ++i) {
 158                 n = orates[i];
 159                 E('obcnt' + i).innerHTML = (abc[i] != '') ? (n / 125).toFixed(2) : '';
 160                 E('obcntx' + i).innerHTML = (abc[i] != '') ? (n / 1024).toFixed(2) : '';
 161                 if (ort > 0) p = (n / ort) * 100;
 162                         else p = 0;
 163                 E('obpct' + i).innerHTML = (abc[i] != '') ? p.toFixed(2) + '%' : '';
 164         }
 165         E('obcnt-total').innerHTML = (ort / 125).toFixed(2);
 166         E('obcntx-total').innerHTML = (ort / 1024).toFixed(2);
 167 }
 168
 169 function getArrayPosByElement(haystack, needle, index) {
 170         for (var i = 0; i < haystack.length; ++i) {
 171                 if (haystack[i][index] == needle) {
 172                         return i;
 173                 }
 174         }
 175         return -1;
 176 }
 177
 178 var ref = new TomatoRefresh('update.cgi', 'exec=iptraffic', 2, 'ipt_graphs');
 179
 180 ref.refresh = function(text) {
 181         var b, i, j, k, l;
 182
 183         ++lock;
 184
 185         thistimestamp = new Date().getTime();
 186
 187         nfmarks = [];
 188         irates = [];
 189         orates = [];
 190         iptraffic = [];
 191         try {
 192                 eval(text);
 193         }
 194         catch (ex) {
 195                 nfmarks = [];
 196                 irates = [];
 197                 orates = [];
 198                 iptraffic = [];
 199         }
 200
 201         difftimestamp = thistimestamp - prevtimestamp;
 202         prevtimestamp = thistimestamp;
 203
 204         for (i = 0; i < iptraffic.length; ++i) {
 205                 b = iptraffic[i];
 206
 207                 j = getArrayPosByElement(avgiptraffic, b[0], 0);
 208                 if (j == -1) {
 209                         j = avgiptraffic.length;
 210                         avgiptraffic[j] = [ b[0], 0, 0, 0, 0, 0, 0, 0, 0, b[9], b[10] ];
 211                 }
 212
 213                 k = getArrayPosByElement(lastiptraffic, b[0], 0);
 214                 if (k == -1) {
 215                         k = lastiptraffic.length;
 216                         lastiptraffic[k] = b;
 217                 }
 218
 219                 for (l = 1; l <= 8; ++l) {
 220                         avgiptraffic[j][l] = ((b[l] - lastiptraffic[k][l]) / difftimestamp * 1000);
 221                         lastiptraffic[k][l] = b[l];
 222                 }
 223
 224                 avgiptraffic[j][9] = b[9];
 225                 avgiptraffic[j][10] = b[10];
 226                 lastiptraffic[k][9] = b[9];
 227                 lastiptraffic[k][10] = b[10];
 228
 229         }
 230         -- lock;
 231
 232 /* REMOVE-BEGIN */
 233 //updateLabels();
 234 /* REMOVE-END */
 235         i = 0;
 236         while (i < 11){
 237                 if (iptraffic[i] != null) {
 238                         nfmarks[i] = avgiptraffic[i][9] + avgiptraffic[i][10]; // TCP + UDP connections
 239                         irates[i] = avgiptraffic[i][1]; // RX bytes
 240                         orates[i] = avgiptraffic[i][2]; // TX bytes
 241                 } else {
 242                         nfmarks[i] = 0;
 243                         irates[i] = 0;
 244                         orates[i] = 0;
 245                 }
 246                 ++i;
 247         }
 248
 249         showData();
 250         if (svgReady == 1) {
 251                 updateCD(nfmarks, abc);
 252                 updateBD(irates, abc);
 253                 updateOB(orates, abc);
 254         }
 255 }
 256
 257 function checkSVG() {
 258         var i, e, d, w;
 259
 260         try {
 261                 for (i = 2; i >= 0; --i) {
 262                         e = E('svg' + i);
 263                         d = e.getSVGDocument();
 264                         if (d.defaultView) w = d.defaultView;
 265                                 else w = e.getWindow();
 266                         if (!w.ready) break;
 267                         if (i == 0) updateCD = w.updateSVG;
 268                         if (i == 1)     updateBD = w.updateSVG;
 269                         if (i == 2)     updateOB = w.updateSVG;
 270                 }
 271         }
 272         catch (ex) {
 273         }
 274
 275         if (i < 0) {
 276                 svgReady = 1;
 277                 updateCD(nfmarks, abc);
 278                 updateBD(irates, abc);
 279                 updateOB(orates, abc);
 280         }
 281         else if (--svgReady > -5) {
 282                 setTimeout(checkSVG, 500);
 283         }
 284 }
 285
 286 function init() {
 287         showData();
 288         checkSVG();
 289         ref.initPage(2000, 3);
 290         if (!ref.running) ref.once = 1;
 291         ref.start();
 292 }
 293 </script>
 294 </head>
 295 <body onload='init()'>
 296 <form id='_fom' action='javascript:{}'>
 297 <table id='container' cellspacing=0>
 298 <tr><td colspan=2 id='header'>
 299         <div class='title'>Tomato</div>
 300         <div class='version'>Version <% version(); %></div>
 301 </td></tr>
 302 <tr id='body'><td id='navi'><script type='text/javascript'>navi()</script></td>
 303 <td id='content'>
 304 <div id='ident'><% ident(); %></div>
 305
 306 <!-- / / / -->
 307
 308 <div class="section-title">Connections Distribution (TCP/UDP)</div>
 309 <div class="section">
 310 <table border=0 width="100%"><tr><td>
 311         <table style="width:250px">
 312 <script type='text/javascript'>
 313 for (i = 0; i < 11; ++i) {
 314         W('<tr style="cursor:pointer" onclick="mClick(' + i + ')">' +
 315                 '<td class="color" style="background:#' + colors[i] + '" onclick="mClick(' + i + ')">&nbsp;</td>' +
 316                 '<td class="title" style="width:45px"><a href="ipt-details.asp?ipt_filterip=' + abc[i] + '">' + abc[i] + '</a></td>' +
 317                 '<td id="ccnt' + i + '" class="count" style="width:90px"></td>' +
 318                 '<td id="cpct' + i + '" class="pct"></td></tr>');
 319 }
 320 </script>
 321         <tr><td>&nbsp;</td><td class="total">Total</a></td><td id="ccnt-total" class="total count"></td><td class="total pct">100%</td></tr>
 322         </table>
 323 </td><td style="margin-right:150px">
 324 <script type='text/javascript'>
 325 if (nvram.web_svg != '0') {
 326         W('<embed src="ipt-graph.svg?n=0&v=<% version(); %>" style="width:310px;height:310px;margin:0;padding:0" id="svg0" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>');
 327 }
 328 </script>
 329 </td></tr>
 330 </table>
 331 </div>
 332
 333 <!-- / / / -->
 334
 335 <div class="section-title">Bandwidth Distribution (Inbound)</div>
 336 <div class="section">
 337 <table border=0 width="100%"><tr><td>
 338         <table style="width:250px">
 339         <tr><td class='color' style="height:1em"></td><td class='title' style="width:45px">&nbsp;</td><td class='thead count'>kbit/s</td><td class='thead count'>KB/s</td><td class='pct'>&nbsp;</td></tr>
 340 <script type='text/javascript'>
 341 for (i = 0; i < 11; ++i) {
 342         W('<tr style="cursor:pointer" onclick="mClick(' + i + ')">' +
 343                 '<td class="color" style="background:#' + colors[i] + '" onclick="mClick(' + i + ')">&nbsp;</td>' +
 344                 '<td class="title" style="width:45px"><a href="ipt-details.asp?ipt_filterip=' + abc[i] + '">' + abc[i] + '</a></td>' +
 345                 '<td id="bcnt' + i + '" class="count" style="width:60px"></td>' +
 346                 '<td id="bcntx' + i + '" class="count" style="width:50px"></td>' +
 347                 '<td id="bpct' + i + '" class="pct"></td></tr>');
 348 }
 349 </script>
 350         <tr><td>&nbsp;</td><td class="total">Total</a></td><td id="bcnt-total" class="total count"></td><td id="bcntx-total" class="total count"></td><td class="total pct">100%</td></tr>
 351         </table>
 352 </td><td style="margin-right:150px">
 353 <script type='text/javascript'>
 354 if (nvram.web_svg != '0') {
 355         W('<embed src="ipt-graph.svg?n=1&v=<% version(); %>" style="width:310px;height:310px;margin:0;padding:0" id="svg1" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>');
 356 }
 357 </script>
 358 </td></tr>
 359 </table>
 360 </div>
 361
 362 <!-- / / / -->
 363
 364 <div class="section-title">Bandwidth Distribution (Outbound)</div>
 365 <div class="section">
 366 <table border=0 width="100%"><tr><td>
 367         <table style="width:250px">
 368         <tr><td class='color' style="height:1em"></td><td class='title' style="width:45px">&nbsp;</td><td class='thead count'>kbit/s</td><td class='thead count'>KB/s</td><td class='pct'>&nbsp;</td></tr>
 369 <script type='text/javascript'>
 370 for (i = 0; i < 11; ++i) {
 371         W('<tr style="cursor:pointer" onclick="mClick(' + i + ')">' +
 372                 '<td class="color" style="background:#' + colors[i] + '" onclick="mClick(' + i + ')">&nbsp;</td>' +
 373                 '<td class="title" style="width:45px"><a href="ipt-details.asp?ipt_filterip=' + abc[i] + '">' + abc[i] + '</a></td>' +
 374                 '<td id="obcnt' + i + '" class="count" style="width:60px"></td>' +
 375                 '<td id="obcntx' + i + '" class="count" style="width:50px"></td>' +
 376                 '<td id="obpct' + i + '" class="pct"></td></tr>');
 377 }
 378 </script>
 379         <tr><td>&nbsp;</td><td class="total">Total</a></td><td id="obcnt-total" class="total count"></td><td id="obcntx-total" class="total count"></td><td class="total pct">100%</td></tr>
 380         </table>
 381 </td><td style="margin-right:150px">
 382 <script type='text/javascript'>
 383 if (nvram.web_svg != '0') {
 384         W('<embed src="ipt-graph.svg?n=2&v=<% version(); %>" style="width:310px;height:310px;margin:0;padding:0" id="svg2" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>');
 385 }
 386 </script>
 387 </td></tr>
 388 </table>
 389 </div>
 390
 391 <!-- / / / -->
 392
 393 <script type='text/javascript'>
 394 if (nvram.cstats_enable != '1') {
 395         W('<div class="note-disabled"><b>IP Traffic monitoring disabled.</b> &nbsp; <a href="admin-iptraffic.asp">Enable&nbsp;&raquo;</a></div>');
 396 }
 397 </script>
 398
 399 <!-- / / / -->
 400
 401 </td></tr>
 402 <tr><td id='footer' colspan=2>
 403         <script type='text/javascript'>genStdRefresh(1,1,'ref.toggle()');</script>
 404 </td></tr>
 405 </table>
 406 </form>
 407 </body>
 408 </html>