function bandwidth_label(bytes, br)
{
- var uby = 'KByte';
+ var uby = '<%:kB/s%>';
var kby = (bytes / 1024);
if (kby >= 1024)
{
- uby = 'MByte';
+ uby = '<%:MB/s%>';
kby = kby / 1024;
}
- var ubi = 'KBit';
+ var ubi = '<%:kbit/s%>';
var kbi = (bytes * 8 / 1024);
if (kbi >= 1024)
{
- ubi = 'MBit';
+ ubi = '<%:Mbit/s%>';
kbi = kbi / 1024;
}
- return String.format("%f %s/s%s(%f %s/s)",
+ return String.format("%f %s%s(%f %s)",
kbi.toFixed(2), ubi,
br ? '<br />' : ' ',
kby.toFixed(2), uby
);
}
- function update_graph()
- {
- bwxhr.get('<%=build_url("admin/status/bandwidth_status", curdev)%>', null,
- function(x, data)
- {
- var data_max = 0;
- var data_scale = 0;
-
- var data_rx_avg = 0;
- var data_tx_avg = 0;
-
- var data_rx_peak = 0;
- var data_tx_peak = 0;
-
- for (var i = data_stamp ? 0 : 1; i < data.length; i++)
- {
- /* skip overlapping entries */
- if (data[i][TIME] <= data_stamp)
- continue;
-
- /* normalize difference against time interval */
- var time_delta = data[i][TIME] - data[i-1][TIME];
- if (time_delta)
- {
- data_rx.push((data[i][RXB] - data[i-1][RXB]) / time_delta);
- data_tx.push((data[i][TXB] - data[i-1][TXB]) / time_delta);
- }
- }
-
- /* cut off outdated entries */
- data_rx = data_rx.slice(data_rx.length - data_wanted, data_rx.length);
- data_tx = data_tx.slice(data_tx.length - data_wanted, data_tx.length);
-
- /* find peak */
- for (var i = 0; i < data_rx.length; i++)
- {
- data_max = Math.max(data_max, data_rx[i]);
- data_max = Math.max(data_max, data_tx[i]);
-
- data_rx_peak = Math.max(data_rx_peak, data_rx[i]);
- data_tx_peak = Math.max(data_tx_peak, data_tx[i]);
-
- if (i > 0)
- {
- data_rx_avg = (data_rx_avg + data_rx[i]) / 2;
- data_tx_avg = (data_tx_avg + data_tx[i]) / 2;
- }
- else
- {
- data_rx_avg = data_rx[i];
- data_tx_avg = data_tx[i];
- }
- }
-
- /* remember current timestamp, calculate horizontal scale */
- data_stamp = data[data.length-1][TIME];
- data_scale = height / (data_max * 1.1);
-
-
- /* plot data */
- var pt_rx = '0,' + height;
- var pt_tx = '0,' + height;
-
- var y_rx = 0;
- var y_tx = 0;
-
- for (var i = 0; i < data_rx.length; i++)
- {
- var x = i * step;
-
- y_rx = height - Math.floor(data_rx[i] * data_scale);
- y_tx = height - Math.floor(data_tx[i] * data_scale);
-
- pt_rx += ' ' + x + ',' + y_rx;
- pt_tx += ' ' + x + ',' + y_tx;
- }
-
- pt_rx += ' ' + width + ',' + y_rx + ' ' + width + ',' + height;
- pt_tx += ' ' + width + ',' + y_tx + ' ' + width + ',' + height;
-
-
- line_rx.setAttribute('points', pt_rx);
- line_tx.setAttribute('points', pt_tx);
-
- label_25.firstChild.data = bandwidth_label(1.1 * 0.25 * data_max);
- label_50.firstChild.data = bandwidth_label(1.1 * 0.50 * data_max);
- label_75.firstChild.data = bandwidth_label(1.1 * 0.75 * data_max);
-
- label_rx_cur.innerHTML = bandwidth_label(data_rx[data_rx.length-1], true);
- label_tx_cur.innerHTML = bandwidth_label(data_tx[data_tx.length-1], true);
-
- label_rx_avg.innerHTML = bandwidth_label(data_rx_avg, true);
- label_tx_avg.innerHTML = bandwidth_label(data_tx_avg, true);
-
- label_rx_peak.innerHTML = bandwidth_label(data_rx_peak, true);
- label_tx_peak.innerHTML = bandwidth_label(data_tx_peak, true);
-
- /* reset timer */
- window.setTimeout(update_graph, 1000);
- }
- )
- }
-
/* wait for SVG */
window.setTimeout(
function() {
- G = document.embeds["bwsvg"].getSVGDocument();
+ var svg = document.getElementById('bwsvg');
+
+ try {
+ G = svg.getSVGDocument
+ ? svg.getSVGDocument() : svg.contentDocument;
+ }
+ catch(e) {
+ G = document.embeds['bwsvg'].getSVGDocument();
+ }
if (!G)
{
else
{
/* find sizes */
- width = document.embeds["bwsvg"].offsetWidth - 2;
- height = document.embeds["bwsvg"].offsetHeight - 2;
+ width = svg.offsetWidth - 2;
+ height = svg.offsetHeight - 2;
data_wanted = Math.ceil(width / step);
/* prefill datasets */
/* plot horizontal time interval lines */
- for (var i = step * 60; i < width; i += step * 60)
+ for (var i = width % (step * 60); i < width; i += step * 60)
{
var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', i);
text.setAttribute('x', i + 5);
text.setAttribute('y', 15);
text.setAttribute('style', 'fill:#999999; font-size:9pt');
- text.appendChild(G.createTextNode(Math.round(i / step / 60) + 'm'));
+ text.appendChild(G.createTextNode(Math.round((width - i) / step / 60) + 'm'));
label_25.parentNode.appendChild(line);
label_25.parentNode.appendChild(text);
}
- label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 1);
+ label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 3);
/* render datasets, start update interval */
- update_graph();
+ XHR.poll(3, '<%=build_url("admin/status/realtime/bandwidth_status", curdev)%>', null,
+ function(x, data)
+ {
+ var data_max = 0;
+ var data_scale = 0;
+
+ var data_rx_avg = 0;
+ var data_tx_avg = 0;
+
+ var data_rx_peak = 0;
+ var data_tx_peak = 0;
+
+ for (var i = data_stamp ? 0 : 1; i < data.length; i++)
+ {
+ /* skip overlapping entries */
+ if (data[i][TIME] <= data_stamp)
+ continue;
+
+ /* normalize difference against time interval */
+ if (i > 0)
+ {
+ var time_delta = data[i][TIME] - data[i-1][TIME];
+ if (time_delta)
+ {
+ data_rx.push((data[i][RXB] - data[i-1][RXB]) / time_delta);
+ data_tx.push((data[i][TXB] - data[i-1][TXB]) / time_delta);
+ }
+ }
+ }
+
+ /* cut off outdated entries */
+ data_rx = data_rx.slice(data_rx.length - data_wanted, data_rx.length);
+ data_tx = data_tx.slice(data_tx.length - data_wanted, data_tx.length);
+
+ /* find peak */
+ for (var i = 0; i < data_rx.length; i++)
+ {
+ data_max = Math.max(data_max, data_rx[i]);
+ data_max = Math.max(data_max, data_tx[i]);
+
+ data_rx_peak = Math.max(data_rx_peak, data_rx[i]);
+ data_tx_peak = Math.max(data_tx_peak, data_tx[i]);
+
+ if (i > 0)
+ {
+ data_rx_avg = (data_rx_avg + data_rx[i]) / 2;
+ data_tx_avg = (data_tx_avg + data_tx[i]) / 2;
+ }
+ else
+ {
+ data_rx_avg = data_rx[i];
+ data_tx_avg = data_tx[i];
+ }
+ }
+
+ /* remember current timestamp, calculate horizontal scale */
+ data_stamp = data[data.length-1][TIME];
+ data_scale = height / (data_max * 1.1);
+
+
+ /* plot data */
+ var pt_rx = '0,' + height;
+ var pt_tx = '0,' + height;
+
+ var y_rx = 0;
+ var y_tx = 0;
+
+ for (var i = 0; i < data_rx.length; i++)
+ {
+ var x = i * step;
+
+ y_rx = height - Math.floor(data_rx[i] * data_scale);
+ y_tx = height - Math.floor(data_tx[i] * data_scale);
+
+ pt_rx += ' ' + x + ',' + y_rx;
+ pt_tx += ' ' + x + ',' + y_tx;
+ }
+
+ pt_rx += ' ' + width + ',' + y_rx + ' ' + width + ',' + height;
+ pt_tx += ' ' + width + ',' + y_tx + ' ' + width + ',' + height;
+
+
+ line_rx.setAttribute('points', pt_rx);
+ line_tx.setAttribute('points', pt_tx);
+
+ label_25.firstChild.data = bandwidth_label(1.1 * 0.25 * data_max);
+ label_50.firstChild.data = bandwidth_label(1.1 * 0.50 * data_max);
+ label_75.firstChild.data = bandwidth_label(1.1 * 0.75 * data_max);
+
+ label_rx_cur.innerHTML = bandwidth_label(data_rx[data_rx.length-1], true);
+ label_tx_cur.innerHTML = bandwidth_label(data_tx[data_tx.length-1], true);
+
+ label_rx_avg.innerHTML = bandwidth_label(data_rx_avg, true);
+ label_tx_avg.innerHTML = bandwidth_label(data_tx_avg, true);
+
+ label_rx_peak.innerHTML = bandwidth_label(data_rx_peak, true);
+ label_tx_peak.innerHTML = bandwidth_label(data_tx_peak, true);
+ }
+ );
}
}, 1000
);
<table style="width:100%; table-layout:fixed" cellspacing="5">
<tr>
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:Inbound:%></strong></td>
- <td id="rx_bw_cur">0 kbit/s<br />(0 KB/s)</td>
+ <td id="rx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
- <td id="rx_bw_avg">0 kbit/s<br />(0 KB/s)</td>
+ <td id="rx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
- <td id="rx_bw_peak">0 kbit/s<br />(0 KB/s)</td>
+ <td id="rx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
</tr>
<tr>
<td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:Outbound:%></strong></td>
- <td id="tx_bw_cur">0 kbit/s<br />(0 KB/s)</td>
+ <td id="tx_bw_cur">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
<td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
- <td id="tx_bw_avg">0 kbit/s<br />(0 KB/s)</td>
+ <td id="tx_bw_avg">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
<td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
- <td id="tx_bw_peak">0 kbit/s<br />(0 KB/s)</td>
+ <td id="tx_bw_peak">0 <%:kbit/s%><br />(0 <%:kB/s%>)</td>
</tr>
</table>
projects / project / luci.git / blobdiff