UI cleanup, phase 2 (partially cosmetic)
[tomato.git] / release / src-rt-6.x.4708 / router / www / qos-settings.asp
blobf751561ca571231b0f73007f9b0d157d07801569
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/
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: Basic Settings</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>
19 <!-- / / / -->
20 <script type='text/javascript' src='debug.js'></script>
22 <script type='text/javascript'>
24 /* REMOVE-BEGIN
25 !!TB - added qos_pfifo
26 REMOVE-END */
27 // <% nvram("qos_classnames,qos_enable,qos_ack,qos_syn,qos_fin,qos_rst,qos_icmp,qos_udp,qos_default,qos_pfifo,qos_obw,qos_ibw,qos_orates,qos_irates,qos_reset,ne_vegas,ne_valpha,ne_vbeta,ne_vgamma,atm_overhead"); %>
29 var classNames = nvram.qos_classnames.split(' '); // Toastman - configurable class names
31 pctListin = [];
32 for (i = 1; i <= 100; ++i) pctListin.push([i, i + '%']);
34 pctListout = [];
35 for (i = 1; i <= 100; ++i) pctListout.push([i, i + '%']);
37 function scale(bandwidth, rate, ceil)
39 if (bandwidth <= 0) return '';
40 if (rate <= 0) return '';
42 var s = comma(MAX(Math.floor((bandwidth * rate) / 100), 1));
43 if (ceil > 0) s += ' - ' + MAX(Math.round((bandwidth * ceil) / 100), 1);
44 return s + ' <small>kbit/s</small>';
47 function toggleFiltersVisibility(){
48 if(E('qosclassnames').style.display=='')
49 E('qosclassnames').style.display='none';
50 else
51 E('qosclassnames').style.display='';
54 function verifyClassCeilingAndRate(bandwidthString, rateString, ceilingString, resultsFieldName)
56 if (parseInt(ceilingString) >= parseInt(rateString))
58 elem.setInnerHTML(
59 resultsFieldName,
60 scale(
61 bandwidthString,
62 rateString,
63 ceilingString));
65 else
67 elem.setInnerHTML(
68 resultsFieldName,
69 'Ceiling must be greater than or equal to rate.');
71 return 0;
74 return 1;
77 function verifyFields(focused, quiet)
79 var i, e, b, f;
81 if (!v_range('_qos_obw', quiet, 10, 999999)) return 0;
82 for (i = 0; i < 10; ++i)
84 if (!verifyClassCeilingAndRate(
85 E('_qos_obw').value,
86 E('_f_orate_' + i).value,
87 E('_f_oceil_' + i).value,
88 '_okbps_' + i))
90 return 0;
94 if (!v_range('_qos_ibw', quiet, 10, 999999)) return 0;
95 for (i = 0; i < 10; ++i)
97 if (!verifyClassCeilingAndRate(
98 E('_qos_ibw').value,
99 E('_f_irate_' + i).value,
100 E('_f_iceil_' + i).value,
101 '_ikbps_' + i))
103 return 0;
107 f = E('_fom').elements;
108 b = !E('_f_qos_enable').checked;
109 for (i = 0; i < f.length; ++i) {
110 if ((f[i].name.substr(0, 1) != '_') && (f[i].type != 'button') && (f[i].name.indexOf('enable') == -1) &&
111 (f[i].name.indexOf('ne_v') == -1)) f[i].disabled = b;
114 var abg = ['alpha', 'beta', 'gamma'];
115 b = E('_f_ne_vegas').checked;
116 for (i = 0; i < 3; ++i) {
117 f = E('_ne_v' + abg[i]);
118 f.disabled = !b;
119 if (b) {
120 if (!v_range(f, quiet, 0, 65535)) return 0;
124 return 1;
127 function save()
129 var fom = E('_fom');
130 var i, a, qos, c;
133 fom.qos_enable.value = E('_f_qos_enable').checked ? 1 : 0;
134 fom.qos_ack.value = E('_f_qos_ack').checked ? 1 : 0;
135 fom.qos_syn.value = E('_f_qos_syn').checked ? 1 : 0;
136 fom.qos_fin.value = E('_f_qos_fin').checked ? 1 : 0;
137 fom.qos_rst.value = E('_f_qos_rst').checked ? 1 : 0;
138 fom.qos_icmp.value = E('_f_qos_icmp').checked ? 1 : 0;
139 fom.qos_udp.value = E('_f_qos_udp').checked ? 1 : 0;
140 fom.qos_reset.value = E('_f_qos_reset').checked ? 1 : 0;
142 qos = [];
143 for (i = 1; i < 11; ++i) {
144 qos.push(E('_f_qos_' + (i - 1)).value);
147 fom = E('_fom');
148 fom.qos_classnames.value = qos.join(' ');
150 a = [];
151 for (i = 0; i < 10; ++i) {
152 a.push(E('_f_orate_' + i).value + '-' + E('_f_oceil_' + i).value);
154 fom.qos_orates.value = a.join(',');
156 a = [];
158 for (i = 0; i < 10; ++i)
160 //a.push(E('_f_iceil_' + i).value);
161 a.push(E('_f_irate_' + i).value + '-' + E('_f_iceil_' + i).value);
164 fom.qos_irates.value = a.join(',');
166 fom.ne_vegas.value = E('_f_ne_vegas').checked ? 1 : 0;
168 form.submit(fom, 1);
173 </script>
175 </head>
176 <body>
177 <form id='_fom' method='post' action='tomato.cgi'>
178 <table id='container' cellspacing=0>
179 <tr><td colspan=2 id='header'>
180 <div class='title'>Tomato</div>
181 <div class='version'>Version <% version(); %></div>
182 </td></tr>
183 <tr id='body'><td id='navi'><script type='text/javascript'>navi()</script></td>
184 <td id='content'>
185 <div id='ident'><% ident(); %></div>
187 <!-- / / / -->
190 <input type='hidden' name='_nextpage' value='qos-settings.asp'>
191 <input type='hidden' name='_service' value='qos-restart'>
193 <input type='hidden' name='qos_classnames'>
194 <input type='hidden' name='qos_enable'>
195 <input type='hidden' name='qos_ack'>
196 <input type='hidden' name='qos_syn'>
197 <input type='hidden' name='qos_fin'>
198 <input type='hidden' name='qos_rst'>
199 <input type='hidden' name='qos_icmp'>
200 <input type='hidden' name='qos_udp'>
201 <input type='hidden' name='qos_orates'>
202 <input type='hidden' name='qos_irates'>
203 <input type='hidden' name='qos_reset'>
204 <input type='hidden' name='ne_vegas'>
208 <div class='section-title'>Basic Settings</div>
209 <div class='section'>
210 <script type='text/javascript'>
212 classList = [];
213 for (i = 0; i < 10; ++i) {
214 classList.push([i, classNames[i]]);
216 createFieldTable('', [
217 { title: 'Enable QoS', name: 'f_qos_enable', type: 'checkbox', value: nvram.qos_enable == '1' },
218 { title: 'Prioritize small packets with these control flags', multi: [
219 { suffix: ' ACK &nbsp;', name: 'f_qos_ack', type: 'checkbox', value: nvram.qos_ack == '1' },
220 { suffix: ' SYN &nbsp;', name: 'f_qos_syn', type: 'checkbox', value: nvram.qos_syn == '1' },
221 { suffix: ' FIN &nbsp;', name: 'f_qos_fin', type: 'checkbox', value: nvram.qos_fin == '1' },
222 { suffix: ' RST &nbsp;', name: 'f_qos_rst', type: 'checkbox', value: nvram.qos_rst == '1' }
223 ] },
224 { title: 'Prioritize ICMP', name: 'f_qos_icmp', type: 'checkbox', value: nvram.qos_icmp == '1' },
225 { title: 'No Ingress QOS for UDP', name: 'f_qos_udp', type: 'checkbox', value: nvram.qos_udp == '1' },
226 { title: 'Reset class when changing settings', name: 'f_qos_reset', type: 'checkbox', value: nvram.qos_reset == '1' },
227 { title: 'Default class', name: 'qos_default', type: 'select', options: classList, value: nvram.qos_default },
228 /* REMOVE-BEGIN
229 !!TB - added qos_pfifo
230 REMOVE-END */
231 { title: 'Qdisc Scheduler', name: 'qos_pfifo', type: 'select', options: [['0','sfq'],['1','pfifo'],['2','codel'],['3','fq_codel']], value: nvram.qos_pfifo }
233 </script>
234 </div>
236 <div class='section-title'>Settings for DSL only</div>
237 <div class='section'>
238 <script type='text/javascript'>
240 createFieldTable('', [
241 { title: 'DSL Overhead Value - ATM Encapsulation Type', multi:[
242 {name: 'atm_overhead', type: 'select', options: [['0','None'],['32','32-PPPoE VC-Mux'],['40','40-PPPoE LLC/Snap'],
243 ['10','10-PPPoA VC-Mux'],['14','14-PPPoA LLC/Snap'],
244 ['8','8-RFC2684/RFC1483 Routed VC-Mux'],['16','16-RFC2684/RFC1483 Routed LLC/Snap'],
245 ['24','24-RFC2684/RFC1483 Bridged VC-Mux'],
246 ['32','32-RFC2684/RFC1483 Bridged LLC/Snap']], value:nvram.atm_overhead }
249 </script>
250 </div>
252 <div class='section-title'>Outbound Rates / Limits</div>
253 <div class='section'>
254 <script type='text/javascript'>
255 cc = nvram.qos_orates.split(/[,-]/);
256 f = [];
257 f.push({ title: 'Max Bandwidth Limit', name: 'qos_obw', type: 'text', maxlen: 6, size: 8, suffix: ' <small>kbit/s (set to measured bandwidth less 15-30%)</small>', value: nvram.qos_obw });
258 f.push(null);
259 j = 0;
260 for (i = 0; i < 10; ++i) {
261 x = cc[j++] || 1;
262 y = cc[j++] || 1;
263 f.push({ title: classNames[i], multi: [
264 { name: 'f_orate_' + i, type: 'select', options: pctListout, value: x, suffix: ' ' },
265 { name: 'f_oceil_' + i, type: 'select', options: pctListout, value: y },
266 { type: 'custom', custom: ' &nbsp; <span id="_okbps_' + i + '"></span>' } ]
269 createFieldTable('', f);
270 </script>
271 </div>
275 <div class='section-title'>Inbound Rates / Limits</div>
276 <div class='section'>
277 <script type='text/javascript'>
278 allRates = nvram.qos_irates.split(',');
279 f = [];
280 f.push({ title: 'Max Bandwidth Limit', name: 'qos_ibw', type: 'text', maxlen: 6, size: 8, suffix: ' <small>kbit/s (set to measured bandwidth less 15-30%)</small>', value: nvram.qos_ibw });
281 f.push(null);
283 f.push(
285 title: '', multi: [
286 { title: 'Rate' },
287 { title: 'Limit' } ]
288 });
290 for (i = 0; i < 10; ++i)
292 splitRate = allRates[i].split('-');
293 incoming_rate = splitRate[0] || 1;
294 incoming_ceil = splitRate[1] || 100;
296 f.push(
298 title: classNames[i], multi: [
299 { name: 'f_irate_' + i, type: 'select', options: pctListin, value: incoming_rate, suffix: ' ' },
300 { name: 'f_iceil_' + i, type: 'select', options: pctListin, value: incoming_ceil },
301 { custom: ' &nbsp; <span id="_ikbps_' + i + '"></span>' } ]
304 createFieldTable('', f);
305 </script>
306 </div>
310 <div class='section-title'>QOS Class Names <small><i><a href='javascript:toggleFiltersVisibility();'>(Toggle Visibility)</a></i></small></div>
311 <div class='section' id='qosclassnames' style='display:none'>
312 <script type='text/javascript'>
314 if ((v = nvram.qos_classnames.match(/^(.+)\s+(.+)\s+(.+)\s+(.+)\s+(.+)\s+(.+)\s+(.+)\s+(.+)\s+(.+)\s+(.+)$/)) == null) {
315 v = ["-","Highest","High","Medium","Low","Lowest","A","B","C","D","E"];
317 titles = ['-','Priority Class 1', 'Priority Class 2', 'Priority Class 3', 'Priority Class 4', 'Priority Class 5', 'Priority Class 6', 'Priority Class 7', 'Priority Class 8', 'Priority Class 9', 'Priority Class 10'];
318 f = [{ title: ' ', text: '<small>(Maximum 10 characters, no spaces)</small>' }];
319 for (i = 1; i < 11; ++i) {
320 f.push({ title: titles[i], name: ('f_qos_' + (i - 1)),
321 type: 'text', maxlen: 10, size: 15, value: v[i],
322 suffix: '<span id="count' + i + '"></span>' });
324 createFieldTable('', f);
325 </script>
326 </div>
329 <span id='s_vegas' style='display:none'>
330 <div class='section-title'>TCP Vegas <small>(Network Congestion Control)</small></div>
331 <div class='section'>
332 <script type='text/javascript'>
333 createFieldTable('', [
334 { title: 'Enable TCP Vegas', name: 'f_ne_vegas', type: 'checkbox', value: nvram.ne_vegas == '1' },
335 { title: 'Alpha', name: 'ne_valpha', type: 'text', maxlen: 6, size: 8, value: nvram.ne_valpha },
336 { title: 'Beta', name: 'ne_vbeta', type: 'text', maxlen: 6, size: 8, value: nvram.ne_vbeta },
337 { title: 'Gamma', name: 'ne_vgamma', type: 'text', maxlen: 6, size: 8, value: nvram.ne_vgamma }
339 </script>
340 </div>
341 </span>
343 <!-- / / / -->
345 </td></tr>
346 <tr><td id='footer' colspan=2>
347 <span id='footer-msg'></span>
348 <input type='button' value='Save' id='save-button' onclick='save()'>
349 <input type='button' value='Cancel' id='cancel-button' onclick='reloadPage();'>
350 </td></tr>
351 </table>
352 </form>
353 <script type='text/javascript'>verifyFields(null, 1);</script>
354 </body>
355 </html>