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
  54 var Unclassified = ['Unclassified'];
  55 var classNames = nvram.qos_classnames.split(' ');               //Toastman Class Labels
  56 var abc = Unclassified.concat(classNames);
  57
  58
  59 //      var abc = ['Unclassified', 'Highest', 'High', 'Medium', 'Low', 'Lowest', 'Class A', 'Class B', 'Class C', 'Class D', 'Class E'];
  60
  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 function mClick(n)
  76 {
  77         location.href = 'qos-detailed.asp?class=' + n;
  78 }
  79
  80 function showData()
  81 {
  82         var i, n, p;
  83         var ct, rt;
  84
  85         ct = rt = 0;
  86         for (i = 0; i < 11; ++i) {
  87                 if (!nfmarks[i]) nfmarks[i] = 0;
  88                 ct += nfmarks[i];
  89                 if (!qrates[i]) qrates[i] = 0;
  90                 rt += qrates[i];
  91         }
  92
  93         for (i = 0; i < 11; ++i) {
  94                 n = nfmarks[i];
  95                 E('ccnt' + i).innerHTML = n;
  96                 if (ct > 0) p = (n / ct) * 100;
  97                         else p = 0;
  98                 E('cpct' + i).innerHTML = p.toFixed(2) + '%';
  99         }
 100         E('ccnt-total').innerHTML = ct;
 101
 102         for (i = 1; i < 11; ++i) {
 103                 n = qrates[i];
 104                 E('bcnt' + i).innerHTML = (n / 1000).toFixed(2)
 105                 E('bcntx' + i).innerHTML = (n / 8192).toFixed(2)
 106                 if (rt > 0) p = (n / rt) * 100;
 107                         else p = 0;
 108                 E('bpct' + i).innerHTML = p.toFixed(2) + '%';
 109         }
 110         E('bcnt-total').innerHTML = (rt / 1000).toFixed(2)
 111         E('bcntx-total').innerHTML = (rt / 8192).toFixed(2)
 112 }
 113
 114
 115 var ref = new TomatoRefresh('update.cgi', 'exec=qrate', 2, 'qos_graphs');
 116
 117 ref.refresh = function(text)
 118 {
 119         nfmarks = [];
 120         qrates = [];
 121         try {
 122                 eval(text);
 123         }
 124         catch (ex) {
 125                 nfmarks = [];
 126                 qrates = [];
 127         }
 128
 129         showData();
 130         if (svgReady == 1) {
 131                 updateCD(nfmarks);
 132                 updateBD(qrates);
 133         }
 134 }
 135
 136 function checkSVG()
 137 {
 138         var i, e, d, w;
 139
 140         try {
 141                 for (i = 1; i >= 0; --i) {
 142                         e = E('svg' + i);
 143                         d = e.getSVGDocument();
 144                         if (d.defaultView) w = d.defaultView;
 145                                 else w = e.getWindow();
 146                         if (!w.ready) break;
 147                         if (i == 0) updateCD = w.updateSVG;
 148                                 else updateBD = w.updateSVG;
 149                 }
 150         }
 151         catch (ex) {
 152         }
 153
 154         if (i < 0) {
 155                 svgReady = 1;
 156                 updateCD(nfmarks);
 157                 updateBD(qrates);
 158         }
 159         else if (--svgReady > -5) {
 160                 setTimeout(checkSVG, 500);
 161         }
 162 }
 163
 164 function init()
 165 {
 166         nbase = fixInt(cookie.get('qnbase'), 0, 1, 0);
 167         showData();
 168         checkSVG();
 169         ref.initPage(2000, 3);
 170 }
 171 </script>
 172 </head>
 173 <body onload='init()'>
 174 <form id='_fom' action='javascript:{}'>
 175 <table id='container' cellspacing=0>
 176 <tr><td colspan=2 id='header'>
 177         <div class='title'>Tomato</div>
 178         <div class='version'>Version <% version(); %></div>
 179 </td></tr>
 180 <tr id='body'><td id='navi'><script type='text/javascript'>navi()</script></td>
 181 <td id='content'>
 182 <div id='ident'><% ident(); %></div>
 183
 184 <!-- / / / -->
 185
 186 <div class="section-title">Connections Distribution</div>
 187 <div class="section">
 188 <table border=0 width="100%"><tr><td>
 189         <table style="width:250px">
 190 <script type='text/javascript'>
 191 for (i = 0; i < 11; ++i) {
 192         W('<tr style="cursor:pointer" onclick="mClick(' + i + ')">' +
 193                 '<td class="color" style="background:#' + colors[i] + '" onclick="mClick(' + i + ')">&nbsp;</td>' +
 194                 '<td class="title" style="width:60px"><a href="qos-detailed.asp?class=' + i + '">' + abc[i] + '</a></td>' +
 195                 '<td id="ccnt' + i + '" class="count" style="width:90px"></td>' +
 196                 '<td id="cpct' + i + '" class="pct"></td></tr>');
 197 }
 198 </script>
 199         <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>
 200         </table>
 201 </td><td style="margin-right:150px">
 202 <script type='text/javascript'>
 203 if (nvram.web_svg != '0') {
 204         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>');
 205 }
 206 </script>
 207 </td></tr>
 208 </table>
 209 </div>
 210
 211 <div class="section-title">Bandwidth Distribution (Outbound)</div>
 212 <div class="section">
 213 <table border=0 width="100%"><tr><td>
 214         <table style="width:250px">
 215         <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>
 216 <script type='text/javascript'>
 217 for (i = 1; i < 11; ++i) {
 218         W('<tr style="cursor:pointer" onclick="mClick(' + i + ')">' +
 219                 '<td class="color" style="background:#' + colors[i] + '" onclick="mClick(' + i + ')">&nbsp;</td>' +
 220                 '<td class="title" style="width:45px"><a href="qos-detailed.asp?class=' + i + '">' + abc[i] + '</a></td>' +
 221                 '<td id="bcnt' + i + '" class="count" style="width:60px"></td>' +
 222                 '<td id="bcntx' + i + '" class="count" style="width:50px"></td>' +
 223                 '<td id="bpct' + i + '" class="pct"></td></tr>');
 224 }
 225 </script>
 226         <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>
 227         </table>
 228 </td><td style="margin-right:150px">
 229 <script type='text/javascript'>
 230 if (nvram.web_svg != '0') {
 231         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>');
 232 }
 233 </script>
 234 </td></tr>
 235 </table>
 236 </div>
 237
 238 <script type='text/javascript'>
 239 if (nvram.qos_enable != '1') {
 240         W('<div class="note-disabled"><b>QoS disabled.</b> &nbsp; <a href="qos-settings.asp">Enable &raquo;</a></div>');
 241 }
 242 </script>
 243
 244 <!-- / / / -->
 245
 246 </td></tr>
 247 <tr><td id='footer' colspan=2>
 248         <script type='text/javascript'>genStdRefresh(1,0,'ref.toggle()');</script>
 249 </td></tr>
 250 </table>
 251 </form>
 252 </body>
 253 </html>