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