release/src/router/www/qos-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(); %>] QoS: View Graphs</title>
  15 <link rel='stylesheet' type='text/css' href='tomato.css'>
  16 <link rel='stylesheet' type='text/css' href='color.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("qos_classnames,web_svg,qos_enable,qos_obw,qos_ibw"); %>
  48
  49 //<% qrate(); %>
  50
  51 var svgReady = 0;
  52
  53
  54
  55 var Unclassified = ['Unclassified'];
  56 var Unused = ['Unused'];
  57 var classNames = nvram.qos_classnames.split(' ');               //Toastman Class Labels
  58 var abc = Unclassified.concat(classNames,Unused);
  59
  60
  61 //      var abc = ['Unclassified', 'Highest', 'High', 'Medium', 'Low', 'Lowest', 'Class A', 'Class B', 'Class C', 'Class D', 'Class E'];
  62
  63 var colors = [
  64         'c6e2ff',
  65         'b0c4de',
  66         '9ACD32',
  67         '3cb371',
  68         '6495ed',
  69         '8FBC8F',
  70         'a0522d',
  71         'deb887',
  72         'F08080',
  73         'ffa500',
  74         'ffd700',
  75         'D8D8D8'
  76 ];
  77
  78 var toggle=true;
  79
  80 function mClick(n)
  81 {
  82         location.href = 'qos-detailed.asp?class=' + n;
  83 }
  84
  85 function showData()
  86 {
  87         var i, n, p;
  88         var totalConnections, totalOutgoingBandwidth, totalIncomingBandwidth;
  89
  90         totalConnections = totalOutgoingBandwidth = totalIncomingBandwidth = 0;
  91
  92         for (i = 0; i < 11; ++i)
  93         {
  94                 if (!nfmarks[i]) nfmarks[i] = 0;
  95                 totalConnections += nfmarks[i];
  96                 if (!qrates_out[i]) qrates_out[i] = 0;
  97                 totalOutgoingBandwidth += qrates_out[i];
  98                 if (!qrates_in[i]) qrates_in[i] = 0;
  99                 totalIncomingBandwidth += qrates_in[i];
 100         }
 101
 102         for (i = 0; i < 11; ++i) {
 103                 n = nfmarks[i];
 104                 E('ccnt' + i).innerHTML = n;
 105                 if (totalConnections > 0) p = (n / totalConnections) * 100;
 106                         else p = 0;
 107                 E('cpct' + i).innerHTML = p.toFixed(2) + '%';
 108         }
 109         E('ccnt-total').innerHTML = totalConnections;
 110
 111         obwrate = nvram.qos_obw * 1000;
 112         ibwrate = nvram.qos_ibw * 1000;
 113
 114         if(toggle == false)
 115         {
 116                 totalorate = totalOutgoingBandwidth;
 117                 totalirate = totalIncomingBandwidth;
 118                 totalrateout = '100%';
 119                 totalratein = '100%';
 120         } else
 121         {
 122                 FreeOutgoing = (obwrate - totalOutgoingBandwidth);
 123                 qrates_out.push(FreeOutgoing);
 124                 FreeIncoming = (ibwrate - totalIncomingBandwidth);
 125                 qrates_in.push(FreeIncoming);
 126                 totalorate = obwrate;
 127                 totalirate = ibwrate;
 128                 totalrateout = ((totalOutgoingBandwidth / totalorate) * 100).toFixed(2) + '%';
 129                 totalratein = ((totalIncomingBandwidth / totalirate) * 100).toFixed(2) + '%';
 130         }
 131
 132         for (i = 1; i < 11; ++i) {
 133                 n = qrates_out[i];
 134                 E('bocnt' + i).innerHTML = (n / 1000).toFixed(2)
 135                 E('bocntx' + i).innerHTML = (n / 8192).toFixed(2)
 136                 if (totalOutgoingBandwidth > 0) p = (n / totalorate) * 100;
 137                         else p = 0;
 138                 E('bopct' + i).innerHTML = p.toFixed(2) + '%';
 139         }
 140         E('bocnt-total').innerHTML = (totalOutgoingBandwidth / 1000).toFixed(2)
 141         E('bocntx-total').innerHTML = (totalOutgoingBandwidth / 8192).toFixed(2)
 142         E('rateout').innerHTML = totalrateout;
 143
 144         for (i = 1; i < 11; ++i) {
 145                 n = qrates_in[i];
 146                 E('bicnt' + i).innerHTML = (n / 1000).toFixed(2)
 147                 E('bicntx' + i).innerHTML = (n / 8192).toFixed(2)
 148                 if (totalIncomingBandwidth > 0) p = (n / totalirate) * 100;
 149                         else p = 0;
 150                 E('bipct' + i).innerHTML = p.toFixed(2) + '%';
 151         }
 152         E('bicnt-total').innerHTML = (totalIncomingBandwidth / 1000).toFixed(2)
 153         E('bicntx-total').innerHTML = (totalIncomingBandwidth / 8192).toFixed(2)
 154         E('ratein').innerHTML = totalratein;
 155 }
 156
 157 var ref = new TomatoRefresh('update.cgi', 'exec=qrate', 2, 'qos_graphs');
 158
 159 ref.refresh = function(text)
 160 {
 161         nfmarks = [];
 162         qrates_out = [];
 163         qrates_in = [];
 164
 165         try
 166         {
 167                 eval(text);
 168         }
 169         catch (ex)
 170         {
 171                 nfmarks = [];
 172                 qrates_out = [];
 173                 qrates_in = [];
 174         }
 175
 176         showData();
 177         if (svgReady == 1)
 178         {
 179                 updateConnectionDistribution(nfmarks, abc);
 180                 updateBandwidthOutgoing(qrates_out, abc);
 181                 updateBandwidthIncoming(qrates_in, abc);
 182         }
 183 }
 184
 185 function checkSVG()
 186 {
 187         var i, e, d, w;
 188
 189         try
 190         {
 191                 for (i = 2; i >= 0; --i)
 192                 {
 193                         e = E('svg' + i);
 194                         d = e.getSVGDocument();
 195
 196                         if (d.defaultView)
 197                         {
 198                                 w = d.defaultView;
 199                         }
 200                         else
 201                         {
 202                                 w = e.getWindow();
 203                         }
 204
 205                         if (!w.ready) break;
 206
 207                         switch(i)
 208                         {
 209                                 case 0:
 210                                 {
 211                                         updateConnectionDistribution = w.updateSVG;
 212                                         break;
 213                                 }
 214
 215                                 case 1:
 216                                 {
 217                                         updateBandwidthOutgoing = w.updateSVG;
 218                                         break;
 219                                 }
 220
 221                                 case 2:
 222                                 {
 223                                         updateBandwidthIncoming = w.updateSVG;
 224                                         break;
 225                                 }
 226                         }
 227                 }
 228         }
 229         catch (ex)
 230         {
 231         }
 232
 233         if (i < 0)
 234         {
 235                 svgReady = 1;
 236                 updateConnectionDistribution(nfmarks, abc);
 237                 updateBandwidthOutgoing(qrates_out, abc);
 238                 updateBandwidthIncoming(qrates_in, abc);
 239         }
 240         else if (--svgReady > -5)
 241         {
 242                 setTimeout(checkSVG, 500);
 243         }
 244 }
 245
 246 function showGraph()
 247 {
 248         if(toggle == true)
 249         {
 250                 toggle=false;
 251                 qrates_out = qrates_out.slice(0, -1);
 252                 qrates_in = qrates_in.slice(0, -1);
 253                 showData();
 254                 checkSVG();
 255         } else
 256         {
 257                 toggle=true;
 258                 showData();
 259                 checkSVG();
 260         }
 261 }
 262
 263 function init()
 264 {
 265         nbase = fixInt(cookie.get('qnbase'), 0, 1, 0);
 266         showData();
 267         checkSVG();
 268         showGraph();
 269         ref.initPage(2000, 3);
 270 }
 271 </script>
 272 </head>
 273 <body onload='init()'>
 274 <form id='_fom' action='javascript:{}'>
 275 <table id='container' cellspacing=0>
 276 <tr><td colspan=3 id='header'>
 277         <div class='title'>Tomato</div>
 278         <div class='version'>Version <% version(); %></div>
 279 </td></tr>
 280 <tr id='body'><td id='navi'><script type='text/javascript'>navi()</script></td>
 281 <td id='content'colspan=2>
 282 <div id='ident'><% ident(); %></div>
 283
 284 <!-- / / / -->
 285
 286 <div class="section-title">Connections Distribution</div>
 287 <div class="section">
 288 <table border=0 width="100%"><tr><td>
 289         <table style="width:250px">
 290 <script type='text/javascript'>
 291 for (i = 0; i < 11; ++i) {
 292         W('<tr style="cursor:pointer" onclick="mClick(' + i + ')">' +
 293                 '<td class="color" style="background:#' + colors[i] + '" onclick="mClick(' + i + ')">&nbsp;</td>' +
 294                 '<td class="title" style="width:60px"><a href="qos-detailed.asp?class=' + i + '">' + abc[i] + '</a></td>' +
 295                 '<td id="ccnt' + i + '" class="count" style="width:90px"></td>' +
 296                 '<td id="cpct' + i + '" class="pct"></td></tr>');
 297 }
 298 </script>
 299         <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>
 300         </table>
 301 </td><td style="margin-right:150px">
 302 <script type='text/javascript'>
 303 if (nvram.web_svg != '0') {
 304         W('<embed src="qos-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>');
 305 }
 306 </script>
 307 </td></tr>
 308 </table>
 309 </div>
 310
 311 <div class="section-title">Bandwidth Distribution (Outbound)</div>
 312 <div class="section">
 313 <table border=0 width="100%"><tr><td>
 314         <table style="width:250px">
 315         <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='thead pct'>Rate</td></tr>
 316 <script type='text/javascript'>
 317 for (i = 1; i < 11; ++i) {
 318         W('<tr style="cursor:pointer" onclick="mClick(' + i + ')">' +
 319                 '<td class="color" style="background:#' + colors[i] + '" onclick="mClick(' + i + ')">&nbsp;</td>' +
 320                 '<td class="title" style="width:45px"><a href="qos-detailed.asp?class=' + i + '">' + abc[i] + '</a></td>' +
 321                 '<td id="bocnt' + i + '" class="count" style="width:60px"></td>' +
 322                 '<td id="bocntx' + i + '" class="count" style="width:50px"></td>' +
 323                 '<td id="bopct' + i + '" class="pct"></td></tr>');
 324 }
 325 </script>
 326         <tr><td>&nbsp;</td><td class="total">Total</a></td><td id="bocnt-total" class="total count"></td><td id="bocntx-total" class="total count"></td><td id="rateout" class="total pct"></td></tr>
 327         </table>
 328 </td><td style="margin-right:150px">
 329 <script type='text/javascript'>
 330 if (nvram.web_svg != '0') {
 331         W('<embed src="qos-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>');
 332 }
 333 </script>
 334 </td></tr>
 335 </table>
 336 </div>
 337
 338 <div class="section-title">Bandwidth Distribution (Inbound)</div>
 339 <div class="section">
 340 <table border=0 width="100%"><tr><td>
 341         <table style="width:250px">
 342         <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='thead pct'>Rate</td></tr>
 343 <script type='text/javascript'>
 344 for (i = 1; i < 11; ++i) {
 345         W('<tr style="cursor:pointer" onclick="mClick(' + i + ')">' +
 346                 '<td class="color" style="background:#' + colors[i] + '" onclick="mClick(' + i + ')">&nbsp;</td>' +
 347                 '<td class="title" style="width:45px"><a href="qos-detailed.asp?class=' + i + '">' + abc[i] + '</a></td>' +
 348                 '<td id="bicnt' + i + '" class="count" style="width:60px"></td>' +
 349                 '<td id="bicntx' + i + '" class="count" style="width:50px"></td>' +
 350                 '<td id="bipct' + i + '" class="pct"></td></tr>');
 351 }
 352 </script>
 353         <tr><td>&nbsp;</td><td class="total">Total</a></td><td id="bicnt-total" class="total count"></td><td id="bicntx-total" class="total count"></td><td id="ratein" class="total pct"></td></tr>
 354         </table>
 355 </td><td style="margin-right:150px">
 356 <script type='text/javascript'>
 357 if (nvram.web_svg != '0') {
 358         W('<embed src="qos-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>');
 359 }
 360 </script>
 361 </td></tr>
 362 </table>
 363 </div>
 364
 365 <script type='text/javascript'>
 366 if (nvram.qos_enable != '1') {
 367         W('<div class="note-disabled"><b>QoS disabled.</b> &nbsp; <a href="qos-settings.asp">Enable &raquo;</a></div>');
 368 }
 369 </script>
 370
 371 <!-- / / / -->
 372
 373 </td></tr>
 374 <tr><td id='footer'></td>
 375         <td id='footer' width="528"><input name="mybtn" style="width:100px" value="Zoom Graphs" type="button" onclick="showGraph()" ></td>
 376         <td id='footer' width="237"><script type='text/javascript'>genStdRefresh(1,2,'ref.toggle()');</script></td>
 377         </tr>
 378 </table>
 379 </form>
 380 </body>
 381 </html>