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