modules/admin-full: switch live stats to XHR.poll(), lower update frequency to 3 seconds
This commit is contained in:
Jo-Philipp Wich
parent
d46b42901a
commit
e415f27419
4 changed files with 480 additions and 509 deletions
|
|
@ -96,9 +96,80 @@ $Id$
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function update_graph()
|
/* wait for SVG */
|
||||||
|
window.setTimeout(
|
||||||
|
function() {
|
||||||
|
var svg = document.getElementById('bwsvg');
|
||||||
|
|
||||||
|
try {
|
||||||
|
G = svg.getSVGDocument
|
||||||
|
? svg.getSVGDocument() : svg.contentDocument;
|
||||||
|
}
|
||||||
|
catch(e) {
|
||||||
|
G = document.embeds['bwsvg'].getSVGDocument();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!G)
|
||||||
{
|
{
|
||||||
bwxhr.get('<%=build_url("admin/status/bandwidth_status", curdev)%>', null,
|
window.setTimeout(arguments.callee, 1000);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
/* find sizes */
|
||||||
|
width = svg.offsetWidth - 2;
|
||||||
|
height = svg.offsetHeight - 2;
|
||||||
|
data_wanted = Math.ceil(width / step);
|
||||||
|
|
||||||
|
/* prefill datasets */
|
||||||
|
for (var i = 0; i < data_wanted; i++)
|
||||||
|
{
|
||||||
|
data_rx[i] = 0;
|
||||||
|
data_tx[i] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* find svg elements */
|
||||||
|
line_rx = G.getElementById('rx');
|
||||||
|
line_tx = G.getElementById('tx');
|
||||||
|
|
||||||
|
label_25 = G.getElementById('label_25');
|
||||||
|
label_50 = G.getElementById('label_50');
|
||||||
|
label_75 = G.getElementById('label_75');
|
||||||
|
|
||||||
|
label_rx_cur = document.getElementById('rx_bw_cur');
|
||||||
|
label_rx_avg = document.getElementById('rx_bw_avg');
|
||||||
|
label_rx_peak = document.getElementById('rx_bw_peak');
|
||||||
|
|
||||||
|
label_tx_cur = document.getElementById('tx_bw_cur');
|
||||||
|
label_tx_avg = document.getElementById('tx_bw_avg');
|
||||||
|
label_tx_peak = document.getElementById('tx_bw_peak');
|
||||||
|
|
||||||
|
label_scale = document.getElementById('scale');
|
||||||
|
|
||||||
|
|
||||||
|
/* plot horizontal time interval lines */
|
||||||
|
for (var i = step * 60; i < width; i += step * 60)
|
||||||
|
{
|
||||||
|
var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||||
|
line.setAttribute('x1', i);
|
||||||
|
line.setAttribute('y1', 0);
|
||||||
|
line.setAttribute('x2', i);
|
||||||
|
line.setAttribute('y2', '100%');
|
||||||
|
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
||||||
|
|
||||||
|
var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||||
|
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'));
|
||||||
|
|
||||||
|
label_25.parentNode.appendChild(line);
|
||||||
|
label_25.parentNode.appendChild(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 3);
|
||||||
|
|
||||||
|
/* render datasets, start update interval */
|
||||||
|
XHR.poll(3, '<%=build_url("admin/status/bandwidth_status", curdev)%>', null,
|
||||||
function(x, data)
|
function(x, data)
|
||||||
{
|
{
|
||||||
var data_max = 0;
|
var data_max = 0;
|
||||||
|
|
@ -192,87 +263,8 @@ $Id$
|
||||||
|
|
||||||
label_rx_peak.innerHTML = bandwidth_label(data_rx_peak, true);
|
label_rx_peak.innerHTML = bandwidth_label(data_rx_peak, true);
|
||||||
label_tx_peak.innerHTML = bandwidth_label(data_tx_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() {
|
|
||||||
var svg = document.getElementById('bwsvg');
|
|
||||||
|
|
||||||
try {
|
|
||||||
G = svg.getSVGDocument
|
|
||||||
? svg.getSVGDocument() : svg.contentDocument;
|
|
||||||
}
|
|
||||||
catch(e) {
|
|
||||||
G = document.embeds['bwsvg'].getSVGDocument();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!G)
|
|
||||||
{
|
|
||||||
window.setTimeout(arguments.callee, 1000);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
/* find sizes */
|
|
||||||
width = svg.offsetWidth - 2;
|
|
||||||
height = svg.offsetHeight - 2;
|
|
||||||
data_wanted = Math.ceil(width / step);
|
|
||||||
|
|
||||||
/* prefill datasets */
|
|
||||||
for (var i = 0; i < data_wanted; i++)
|
|
||||||
{
|
|
||||||
data_rx[i] = 0;
|
|
||||||
data_tx[i] = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* find svg elements */
|
|
||||||
line_rx = G.getElementById('rx');
|
|
||||||
line_tx = G.getElementById('tx');
|
|
||||||
|
|
||||||
label_25 = G.getElementById('label_25');
|
|
||||||
label_50 = G.getElementById('label_50');
|
|
||||||
label_75 = G.getElementById('label_75');
|
|
||||||
|
|
||||||
label_rx_cur = document.getElementById('rx_bw_cur');
|
|
||||||
label_rx_avg = document.getElementById('rx_bw_avg');
|
|
||||||
label_rx_peak = document.getElementById('rx_bw_peak');
|
|
||||||
|
|
||||||
label_tx_cur = document.getElementById('tx_bw_cur');
|
|
||||||
label_tx_avg = document.getElementById('tx_bw_avg');
|
|
||||||
label_tx_peak = document.getElementById('tx_bw_peak');
|
|
||||||
|
|
||||||
label_scale = document.getElementById('scale');
|
|
||||||
|
|
||||||
|
|
||||||
/* plot horizontal time interval lines */
|
|
||||||
for (var i = step * 60; i < width; i += step * 60)
|
|
||||||
{
|
|
||||||
var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
||||||
line.setAttribute('x1', i);
|
|
||||||
line.setAttribute('y1', 0);
|
|
||||||
line.setAttribute('x2', i);
|
|
||||||
line.setAttribute('y2', '100%');
|
|
||||||
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
|
||||||
|
|
||||||
var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
||||||
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'));
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
/* render datasets, start update interval */
|
|
||||||
update_graph();
|
|
||||||
}
|
}
|
||||||
}, 1000
|
}, 1000
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -60,9 +60,88 @@ $Id$
|
||||||
var conn_table;
|
var conn_table;
|
||||||
|
|
||||||
|
|
||||||
function update_graph()
|
/* wait for SVG */
|
||||||
|
window.setTimeout(
|
||||||
|
function() {
|
||||||
|
var svg = document.getElementById('bwsvg');
|
||||||
|
|
||||||
|
try {
|
||||||
|
G = svg.getSVGDocument
|
||||||
|
? svg.getSVGDocument() : svg.contentDocument;
|
||||||
|
}
|
||||||
|
catch(e) {
|
||||||
|
G = document.embeds['bwsvg'].getSVGDocument();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!G)
|
||||||
{
|
{
|
||||||
bwxhr.get('<%=build_url("admin/status/connections_status")%>', null,
|
window.setTimeout(arguments.callee, 1000);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
/* find sizes */
|
||||||
|
width = svg.offsetWidth - 2;
|
||||||
|
height = svg.offsetHeight - 2;
|
||||||
|
data_wanted = Math.ceil(width / step);
|
||||||
|
|
||||||
|
/* prefill datasets */
|
||||||
|
for (var i = 0; i < data_wanted; i++)
|
||||||
|
{
|
||||||
|
data_udp[i] = 0;
|
||||||
|
data_tcp[i] = 0;
|
||||||
|
data_otr[i] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* find svg elements */
|
||||||
|
line_udp = G.getElementById('udp');
|
||||||
|
line_tcp = G.getElementById('tcp');
|
||||||
|
line_otr = G.getElementById('other');
|
||||||
|
|
||||||
|
label_25 = G.getElementById('label_25');
|
||||||
|
label_50 = G.getElementById('label_50');
|
||||||
|
label_75 = G.getElementById('label_75');
|
||||||
|
|
||||||
|
label_udp_cur = document.getElementById('lb_udp_cur');
|
||||||
|
label_udp_avg = document.getElementById('lb_udp_avg');
|
||||||
|
label_udp_peak = document.getElementById('lb_udp_peak');
|
||||||
|
|
||||||
|
label_tcp_cur = document.getElementById('lb_tcp_cur');
|
||||||
|
label_tcp_avg = document.getElementById('lb_tcp_avg');
|
||||||
|
label_tcp_peak = document.getElementById('lb_tcp_peak');
|
||||||
|
|
||||||
|
label_otr_cur = document.getElementById('lb_otr_cur');
|
||||||
|
label_otr_avg = document.getElementById('lb_otr_avg');
|
||||||
|
label_otr_peak = document.getElementById('lb_otr_peak');
|
||||||
|
|
||||||
|
label_scale = document.getElementById('scale');
|
||||||
|
|
||||||
|
conn_table = document.getElementById('connections');
|
||||||
|
|
||||||
|
|
||||||
|
/* plot horizontal time interval lines */
|
||||||
|
for (var i = step * 60; i < width; i += step * 60)
|
||||||
|
{
|
||||||
|
var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||||
|
line.setAttribute('x1', i);
|
||||||
|
line.setAttribute('y1', 0);
|
||||||
|
line.setAttribute('x2', i);
|
||||||
|
line.setAttribute('y2', '100%');
|
||||||
|
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
||||||
|
|
||||||
|
var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||||
|
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'));
|
||||||
|
|
||||||
|
label_25.parentNode.appendChild(line);
|
||||||
|
label_25.parentNode.appendChild(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 3);
|
||||||
|
|
||||||
|
/* render datasets, start update interval */
|
||||||
|
XHR.poll(3, '<%=build_url("admin/status/connections_status")%>', null,
|
||||||
function(x, json)
|
function(x, json)
|
||||||
{
|
{
|
||||||
var conn = json.connections;
|
var conn = json.connections;
|
||||||
|
|
@ -189,95 +268,8 @@ $Id$
|
||||||
label_udp_peak.innerHTML = Math.floor(data_udp_peak);
|
label_udp_peak.innerHTML = Math.floor(data_udp_peak);
|
||||||
label_tcp_peak.innerHTML = Math.floor(data_tcp_peak);
|
label_tcp_peak.innerHTML = Math.floor(data_tcp_peak);
|
||||||
label_otr_peak.innerHTML = Math.floor(data_otr_peak);
|
label_otr_peak.innerHTML = Math.floor(data_otr_peak);
|
||||||
|
|
||||||
/* reset timer */
|
|
||||||
window.setTimeout(update_graph, 1000);
|
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
}
|
|
||||||
|
|
||||||
/* wait for SVG */
|
|
||||||
window.setTimeout(
|
|
||||||
function() {
|
|
||||||
var svg = document.getElementById('bwsvg');
|
|
||||||
|
|
||||||
try {
|
|
||||||
G = svg.getSVGDocument
|
|
||||||
? svg.getSVGDocument() : svg.contentDocument;
|
|
||||||
}
|
|
||||||
catch(e) {
|
|
||||||
G = document.embeds['bwsvg'].getSVGDocument();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!G)
|
|
||||||
{
|
|
||||||
window.setTimeout(arguments.callee, 1000);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
/* find sizes */
|
|
||||||
width = svg.offsetWidth - 2;
|
|
||||||
height = svg.offsetHeight - 2;
|
|
||||||
data_wanted = Math.ceil(width / step);
|
|
||||||
|
|
||||||
/* prefill datasets */
|
|
||||||
for (var i = 0; i < data_wanted; i++)
|
|
||||||
{
|
|
||||||
data_udp[i] = 0;
|
|
||||||
data_tcp[i] = 0;
|
|
||||||
data_otr[i] = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* find svg elements */
|
|
||||||
line_udp = G.getElementById('udp');
|
|
||||||
line_tcp = G.getElementById('tcp');
|
|
||||||
line_otr = G.getElementById('other');
|
|
||||||
|
|
||||||
label_25 = G.getElementById('label_25');
|
|
||||||
label_50 = G.getElementById('label_50');
|
|
||||||
label_75 = G.getElementById('label_75');
|
|
||||||
|
|
||||||
label_udp_cur = document.getElementById('lb_udp_cur');
|
|
||||||
label_udp_avg = document.getElementById('lb_udp_avg');
|
|
||||||
label_udp_peak = document.getElementById('lb_udp_peak');
|
|
||||||
|
|
||||||
label_tcp_cur = document.getElementById('lb_tcp_cur');
|
|
||||||
label_tcp_avg = document.getElementById('lb_tcp_avg');
|
|
||||||
label_tcp_peak = document.getElementById('lb_tcp_peak');
|
|
||||||
|
|
||||||
label_otr_cur = document.getElementById('lb_otr_cur');
|
|
||||||
label_otr_avg = document.getElementById('lb_otr_avg');
|
|
||||||
label_otr_peak = document.getElementById('lb_otr_peak');
|
|
||||||
|
|
||||||
label_scale = document.getElementById('scale');
|
|
||||||
|
|
||||||
conn_table = document.getElementById('connections');
|
|
||||||
|
|
||||||
|
|
||||||
/* plot horizontal time interval lines */
|
|
||||||
for (var i = step * 60; i < width; i += step * 60)
|
|
||||||
{
|
|
||||||
var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
||||||
line.setAttribute('x1', i);
|
|
||||||
line.setAttribute('y1', 0);
|
|
||||||
line.setAttribute('x2', i);
|
|
||||||
line.setAttribute('y2', '100%');
|
|
||||||
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
|
||||||
|
|
||||||
var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
||||||
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'));
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
/* render datasets, start update interval */
|
|
||||||
update_graph();
|
|
||||||
}
|
}
|
||||||
}, 1000
|
}, 1000
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -59,9 +59,86 @@ $Id$
|
||||||
var label_scale;
|
var label_scale;
|
||||||
|
|
||||||
|
|
||||||
function update_graph()
|
/* wait for SVG */
|
||||||
|
window.setTimeout(
|
||||||
|
function() {
|
||||||
|
var svg = document.getElementById('bwsvg');
|
||||||
|
|
||||||
|
try {
|
||||||
|
G = svg.getSVGDocument
|
||||||
|
? svg.getSVGDocument() : svg.contentDocument;
|
||||||
|
}
|
||||||
|
catch(e) {
|
||||||
|
G = document.embeds['bwsvg'].getSVGDocument();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!G)
|
||||||
{
|
{
|
||||||
bwxhr.get('<%=build_url("admin/status/load_status")%>', null,
|
window.setTimeout(arguments.callee, 1000);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
/* find sizes */
|
||||||
|
width = svg.offsetWidth - 2;
|
||||||
|
height = svg.offsetHeight - 2;
|
||||||
|
data_wanted = Math.ceil(width / step);
|
||||||
|
|
||||||
|
/* prefill datasets */
|
||||||
|
for (var i = 0; i < data_wanted; i++)
|
||||||
|
{
|
||||||
|
data_01[i] = 0;
|
||||||
|
data_05[i] = 0;
|
||||||
|
data_15[i] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* find svg elements */
|
||||||
|
line_01 = G.getElementById('load01');
|
||||||
|
line_05 = G.getElementById('load05');
|
||||||
|
line_15 = G.getElementById('load15');
|
||||||
|
|
||||||
|
label_25 = G.getElementById('label_25');
|
||||||
|
label_50 = G.getElementById('label_50');
|
||||||
|
label_75 = G.getElementById('label_75');
|
||||||
|
|
||||||
|
label_01_cur = document.getElementById('lb_load01_cur');
|
||||||
|
label_01_avg = document.getElementById('lb_load01_avg');
|
||||||
|
label_01_peak = document.getElementById('lb_load01_peak');
|
||||||
|
|
||||||
|
label_05_cur = document.getElementById('lb_load05_cur');
|
||||||
|
label_05_avg = document.getElementById('lb_load05_avg');
|
||||||
|
label_05_peak = document.getElementById('lb_load05_peak');
|
||||||
|
|
||||||
|
label_15_cur = document.getElementById('lb_load15_cur');
|
||||||
|
label_15_avg = document.getElementById('lb_load15_avg');
|
||||||
|
label_15_peak = document.getElementById('lb_load15_peak');
|
||||||
|
|
||||||
|
label_scale = document.getElementById('scale');
|
||||||
|
|
||||||
|
|
||||||
|
/* plot horizontal time interval lines */
|
||||||
|
for (var i = step * 60; i < width; i += step * 60)
|
||||||
|
{
|
||||||
|
var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||||
|
line.setAttribute('x1', i);
|
||||||
|
line.setAttribute('y1', 0);
|
||||||
|
line.setAttribute('x2', i);
|
||||||
|
line.setAttribute('y2', '100%');
|
||||||
|
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
||||||
|
|
||||||
|
var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||||
|
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'));
|
||||||
|
|
||||||
|
label_25.parentNode.appendChild(line);
|
||||||
|
label_25.parentNode.appendChild(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 3);
|
||||||
|
|
||||||
|
/* render datasets, start update interval */
|
||||||
|
XHR.poll(3, '<%=build_url("admin/status/load_status")%>', null,
|
||||||
function(x, data)
|
function(x, data)
|
||||||
{
|
{
|
||||||
var data_max = 0;
|
var data_max = 0;
|
||||||
|
|
@ -171,89 +248,7 @@ $Id$
|
||||||
/* reset timer */
|
/* reset timer */
|
||||||
window.setTimeout(update_graph, 1000);
|
window.setTimeout(update_graph, 1000);
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
}
|
|
||||||
|
|
||||||
/* wait for SVG */
|
|
||||||
window.setTimeout(
|
|
||||||
function() {
|
|
||||||
var svg = document.getElementById('bwsvg');
|
|
||||||
|
|
||||||
try {
|
|
||||||
G = svg.getSVGDocument
|
|
||||||
? svg.getSVGDocument() : svg.contentDocument;
|
|
||||||
}
|
|
||||||
catch(e) {
|
|
||||||
G = document.embeds['bwsvg'].getSVGDocument();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!G)
|
|
||||||
{
|
|
||||||
window.setTimeout(arguments.callee, 1000);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
/* find sizes */
|
|
||||||
width = svg.offsetWidth - 2;
|
|
||||||
height = svg.offsetHeight - 2;
|
|
||||||
data_wanted = Math.ceil(width / step);
|
|
||||||
|
|
||||||
/* prefill datasets */
|
|
||||||
for (var i = 0; i < data_wanted; i++)
|
|
||||||
{
|
|
||||||
data_01[i] = 0;
|
|
||||||
data_05[i] = 0;
|
|
||||||
data_15[i] = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* find svg elements */
|
|
||||||
line_01 = G.getElementById('load01');
|
|
||||||
line_05 = G.getElementById('load05');
|
|
||||||
line_15 = G.getElementById('load15');
|
|
||||||
|
|
||||||
label_25 = G.getElementById('label_25');
|
|
||||||
label_50 = G.getElementById('label_50');
|
|
||||||
label_75 = G.getElementById('label_75');
|
|
||||||
|
|
||||||
label_01_cur = document.getElementById('lb_load01_cur');
|
|
||||||
label_01_avg = document.getElementById('lb_load01_avg');
|
|
||||||
label_01_peak = document.getElementById('lb_load01_peak');
|
|
||||||
|
|
||||||
label_05_cur = document.getElementById('lb_load05_cur');
|
|
||||||
label_05_avg = document.getElementById('lb_load05_avg');
|
|
||||||
label_05_peak = document.getElementById('lb_load05_peak');
|
|
||||||
|
|
||||||
label_15_cur = document.getElementById('lb_load15_cur');
|
|
||||||
label_15_avg = document.getElementById('lb_load15_avg');
|
|
||||||
label_15_peak = document.getElementById('lb_load15_peak');
|
|
||||||
|
|
||||||
label_scale = document.getElementById('scale');
|
|
||||||
|
|
||||||
|
|
||||||
/* plot horizontal time interval lines */
|
|
||||||
for (var i = step * 60; i < width; i += step * 60)
|
|
||||||
{
|
|
||||||
var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
||||||
line.setAttribute('x1', i);
|
|
||||||
line.setAttribute('y1', 0);
|
|
||||||
line.setAttribute('x2', i);
|
|
||||||
line.setAttribute('y2', '100%');
|
|
||||||
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
|
||||||
|
|
||||||
var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
||||||
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'));
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
/* render datasets, start update interval */
|
|
||||||
update_graph();
|
|
||||||
}
|
}
|
||||||
}, 1000
|
}, 1000
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -74,9 +74,112 @@ $Id$
|
||||||
var label_scale;
|
var label_scale;
|
||||||
|
|
||||||
|
|
||||||
function update_graph()
|
/* wait for SVG */
|
||||||
|
window.setTimeout(
|
||||||
|
function() {
|
||||||
|
var svg = document.getElementById('iwsvg');
|
||||||
|
var svg2 = document.getElementById('iwsvg2');
|
||||||
|
|
||||||
|
try {
|
||||||
|
G = svg.getSVGDocument
|
||||||
|
? svg.getSVGDocument() : svg.contentDocument;
|
||||||
|
G2 = svg2.getSVGDocument
|
||||||
|
? svg2.getSVGDocument() : svg2.contentDocument;
|
||||||
|
}
|
||||||
|
catch(e) {
|
||||||
|
G = document.embeds['iwsvg'].getSVGDocument();
|
||||||
|
G2 = document.embeds['iwsvg2'].getSVGDocument();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!G || !G2)
|
||||||
{
|
{
|
||||||
bwxhr.get('<%=build_url("admin/status/wireless_status", curdev)%>', null,
|
window.setTimeout(arguments.callee, 1000);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
/* find sizes */
|
||||||
|
width = svg.offsetWidth - 2;
|
||||||
|
height = svg.offsetHeight - 2;
|
||||||
|
data_wanted = Math.ceil(width / step);
|
||||||
|
|
||||||
|
/* prefill datasets */
|
||||||
|
for (var i = 0; i < data_wanted; i++)
|
||||||
|
{
|
||||||
|
data_rssi[i] = 0;
|
||||||
|
data_noise[i] = 0;
|
||||||
|
data_rate[i] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* find svg elements */
|
||||||
|
line_rssi = G.getElementById('rssi');
|
||||||
|
line_noise = G.getElementById('noise');
|
||||||
|
line_rate = G2.getElementById('rate');
|
||||||
|
|
||||||
|
label_25 = G.getElementById('label_25');
|
||||||
|
label_50 = G.getElementById('label_50');
|
||||||
|
label_75 = G.getElementById('label_75');
|
||||||
|
label_25_2 = G2.getElementById('label_25');
|
||||||
|
label_50_2 = G2.getElementById('label_50');
|
||||||
|
label_75_2 = G2.getElementById('label_75');
|
||||||
|
|
||||||
|
label_rssi_cur = document.getElementById('rssi_bw_cur');
|
||||||
|
label_rssi_avg = document.getElementById('rssi_bw_avg');
|
||||||
|
label_rssi_peak = document.getElementById('rssi_bw_peak');
|
||||||
|
|
||||||
|
label_noise_cur = document.getElementById('noise_bw_cur');
|
||||||
|
label_noise_avg = document.getElementById('noise_bw_avg');
|
||||||
|
label_noise_peak = document.getElementById('noise_bw_peak');
|
||||||
|
|
||||||
|
label_rate_cur = document.getElementById('rate_bw_cur');
|
||||||
|
label_rate_avg = document.getElementById('rate_bw_avg');
|
||||||
|
label_rate_peak = document.getElementById('rate_bw_peak');
|
||||||
|
|
||||||
|
label_scale = document.getElementById('scale');
|
||||||
|
label_scale_2 = document.getElementById('scale2');
|
||||||
|
|
||||||
|
|
||||||
|
/* plot horizontal time interval lines */
|
||||||
|
for (var i = step * 60; i < width; i += step * 60)
|
||||||
|
{
|
||||||
|
var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||||
|
line.setAttribute('x1', i);
|
||||||
|
line.setAttribute('y1', 0);
|
||||||
|
line.setAttribute('x2', i);
|
||||||
|
line.setAttribute('y2', '100%');
|
||||||
|
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
||||||
|
|
||||||
|
var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||||
|
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'));
|
||||||
|
|
||||||
|
label_25.parentNode.appendChild(line);
|
||||||
|
label_25.parentNode.appendChild(text);
|
||||||
|
|
||||||
|
|
||||||
|
var line2 = G2.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||||
|
line2.setAttribute('x1', i);
|
||||||
|
line2.setAttribute('y1', 0);
|
||||||
|
line2.setAttribute('x2', i);
|
||||||
|
line2.setAttribute('y2', '100%');
|
||||||
|
line2.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
||||||
|
|
||||||
|
var text2 = G2.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||||
|
text2.setAttribute('x', i + 5);
|
||||||
|
text2.setAttribute('y', 15);
|
||||||
|
text2.setAttribute('style', 'fill:#999999; font-size:9pt');
|
||||||
|
text2.appendChild(G.createTextNode(Math.round(i / step / 60) + 'm'));
|
||||||
|
|
||||||
|
label_25_2.parentNode.appendChild(line2);
|
||||||
|
label_25_2.parentNode.appendChild(text2);
|
||||||
|
}
|
||||||
|
|
||||||
|
label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 3);
|
||||||
|
label_scale_2.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 3);
|
||||||
|
|
||||||
|
/* render datasets, start update interval */
|
||||||
|
XHR.poll(3, '<%=build_url("admin/status/wireless_status", curdev)%>', null,
|
||||||
function(x, data)
|
function(x, data)
|
||||||
{
|
{
|
||||||
var noise_floor = 255;
|
var noise_floor = 255;
|
||||||
|
|
@ -213,119 +316,8 @@ $Id$
|
||||||
label_rate_cur.innerHTML = rate_label(data_rate[data_rate.length-1]);
|
label_rate_cur.innerHTML = rate_label(data_rate[data_rate.length-1]);
|
||||||
label_rate_avg.innerHTML = rate_label(data_rate_avg);
|
label_rate_avg.innerHTML = rate_label(data_rate_avg);
|
||||||
label_rate_peak.innerHTML = rate_label(data_rate_peak);
|
label_rate_peak.innerHTML = rate_label(data_rate_peak);
|
||||||
|
|
||||||
/* reset timer */
|
|
||||||
window.setTimeout(update_graph, 1000);
|
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
}
|
|
||||||
|
|
||||||
/* wait for SVG */
|
|
||||||
window.setTimeout(
|
|
||||||
function() {
|
|
||||||
var svg = document.getElementById('iwsvg');
|
|
||||||
var svg2 = document.getElementById('iwsvg2');
|
|
||||||
|
|
||||||
try {
|
|
||||||
G = svg.getSVGDocument
|
|
||||||
? svg.getSVGDocument() : svg.contentDocument;
|
|
||||||
G2 = svg2.getSVGDocument
|
|
||||||
? svg2.getSVGDocument() : svg2.contentDocument;
|
|
||||||
}
|
|
||||||
catch(e) {
|
|
||||||
G = document.embeds['iwsvg'].getSVGDocument();
|
|
||||||
G2 = document.embeds['iwsvg2'].getSVGDocument();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!G || !G2)
|
|
||||||
{
|
|
||||||
window.setTimeout(arguments.callee, 1000);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
/* find sizes */
|
|
||||||
width = svg.offsetWidth - 2;
|
|
||||||
height = svg.offsetHeight - 2;
|
|
||||||
data_wanted = Math.ceil(width / step);
|
|
||||||
|
|
||||||
/* prefill datasets */
|
|
||||||
for (var i = 0; i < data_wanted; i++)
|
|
||||||
{
|
|
||||||
data_rssi[i] = 0;
|
|
||||||
data_noise[i] = 0;
|
|
||||||
data_rate[i] = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* find svg elements */
|
|
||||||
line_rssi = G.getElementById('rssi');
|
|
||||||
line_noise = G.getElementById('noise');
|
|
||||||
line_rate = G2.getElementById('rate');
|
|
||||||
|
|
||||||
label_25 = G.getElementById('label_25');
|
|
||||||
label_50 = G.getElementById('label_50');
|
|
||||||
label_75 = G.getElementById('label_75');
|
|
||||||
label_25_2 = G2.getElementById('label_25');
|
|
||||||
label_50_2 = G2.getElementById('label_50');
|
|
||||||
label_75_2 = G2.getElementById('label_75');
|
|
||||||
|
|
||||||
label_rssi_cur = document.getElementById('rssi_bw_cur');
|
|
||||||
label_rssi_avg = document.getElementById('rssi_bw_avg');
|
|
||||||
label_rssi_peak = document.getElementById('rssi_bw_peak');
|
|
||||||
|
|
||||||
label_noise_cur = document.getElementById('noise_bw_cur');
|
|
||||||
label_noise_avg = document.getElementById('noise_bw_avg');
|
|
||||||
label_noise_peak = document.getElementById('noise_bw_peak');
|
|
||||||
|
|
||||||
label_rate_cur = document.getElementById('rate_bw_cur');
|
|
||||||
label_rate_avg = document.getElementById('rate_bw_avg');
|
|
||||||
label_rate_peak = document.getElementById('rate_bw_peak');
|
|
||||||
|
|
||||||
label_scale = document.getElementById('scale');
|
|
||||||
label_scale_2 = document.getElementById('scale2');
|
|
||||||
|
|
||||||
|
|
||||||
/* plot horizontal time interval lines */
|
|
||||||
for (var i = step * 60; i < width; i += step * 60)
|
|
||||||
{
|
|
||||||
var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
||||||
line.setAttribute('x1', i);
|
|
||||||
line.setAttribute('y1', 0);
|
|
||||||
line.setAttribute('x2', i);
|
|
||||||
line.setAttribute('y2', '100%');
|
|
||||||
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
|
||||||
|
|
||||||
var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
||||||
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'));
|
|
||||||
|
|
||||||
label_25.parentNode.appendChild(line);
|
|
||||||
label_25.parentNode.appendChild(text);
|
|
||||||
|
|
||||||
|
|
||||||
var line2 = G2.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
||||||
line2.setAttribute('x1', i);
|
|
||||||
line2.setAttribute('y1', 0);
|
|
||||||
line2.setAttribute('x2', i);
|
|
||||||
line2.setAttribute('y2', '100%');
|
|
||||||
line2.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
|
||||||
|
|
||||||
var text2 = G2.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
||||||
text2.setAttribute('x', i + 5);
|
|
||||||
text2.setAttribute('y', 15);
|
|
||||||
text2.setAttribute('style', 'fill:#999999; font-size:9pt');
|
|
||||||
text2.appendChild(G.createTextNode(Math.round(i / step / 60) + 'm'));
|
|
||||||
|
|
||||||
label_25_2.parentNode.appendChild(line2);
|
|
||||||
label_25_2.parentNode.appendChild(text2);
|
|
||||||
}
|
|
||||||
|
|
||||||
label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 1);
|
|
||||||
label_scale_2.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 1);
|
|
||||||
|
|
||||||
/* render datasets, start update interval */
|
|
||||||
update_graph();
|
|
||||||
}
|
}
|
||||||
}, 1000
|
}, 1000
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue