mirror of
https://github.com/openwrt/luci.git
synced 2025-12-21 19:14:34 +04:00
luci-mod-status: ES6 treatment
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
This commit is contained in:
@@ -7,15 +7,15 @@
|
|||||||
'require rpc';
|
'require rpc';
|
||||||
'require network';
|
'require network';
|
||||||
|
|
||||||
var callLuciRealtimeStats = rpc.declare({
|
const callLuciRealtimeStats = rpc.declare({
|
||||||
object: 'luci',
|
object: 'luci',
|
||||||
method: 'getRealtimeStats',
|
method: 'getRealtimeStats',
|
||||||
params: [ 'mode', 'device' ],
|
params: [ 'mode', 'device' ],
|
||||||
expect: { result: [] }
|
expect: { result: [] }
|
||||||
});
|
});
|
||||||
|
|
||||||
var graphPolls = [],
|
const graphPolls = [];
|
||||||
pollInterval = 3;
|
const pollInterval = 3;
|
||||||
|
|
||||||
Math.log2 = Math.log2 || function(x) { return Math.log(x) * Math.LOG2E; };
|
Math.log2 = Math.log2 || function(x) { return Math.log(x) * Math.LOG2E; };
|
||||||
|
|
||||||
@@ -25,56 +25,56 @@ function rate(n, br) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return view.extend({
|
return view.extend({
|
||||||
load: function() {
|
load() {
|
||||||
return Promise.all([
|
return Promise.all([
|
||||||
this.loadSVG(L.resource('svg/bandwidth.svg')),
|
this.loadSVG(L.resource('svg/bandwidth.svg')),
|
||||||
network.getDevices()
|
network.getDevices()
|
||||||
]);
|
]);
|
||||||
},
|
},
|
||||||
|
|
||||||
updateGraph: function(ifname, svg, lines, cb) {
|
updateGraph(ifname, svg, lines, cb) {
|
||||||
var G = svg.firstElementChild;
|
const G = svg.firstElementChild;
|
||||||
|
|
||||||
var view = document.querySelector('#view');
|
const view = document.querySelector('#view');
|
||||||
|
|
||||||
var width = view.offsetWidth - 2;
|
const width = view.offsetWidth - 2;
|
||||||
var height = 300 - 2;
|
const height = 300 - 2;
|
||||||
var step = 5;
|
const step = 5;
|
||||||
|
|
||||||
var data_wanted = Math.floor(width / step);
|
const data_wanted = Math.floor(width / step);
|
||||||
|
|
||||||
var data_values = [],
|
const data_values = [];
|
||||||
line_elements = [];
|
const line_elements = [];
|
||||||
|
|
||||||
for (var i = 0; i < lines.length; i++)
|
for (const line of lines)
|
||||||
if (lines[i] != null)
|
if (line)
|
||||||
data_values.push([]);
|
data_values.push([]);
|
||||||
|
|
||||||
var info = {
|
const info = {
|
||||||
line_current: [],
|
line_current: [],
|
||||||
line_average: [],
|
line_average: [],
|
||||||
line_peak: []
|
line_peak: []
|
||||||
};
|
};
|
||||||
|
|
||||||
/* prefill datasets */
|
/* prefill datasets */
|
||||||
for (var i = 0; i < data_values.length; i++)
|
for (let i = 0; i < data_values.length; i++)
|
||||||
for (var j = 0; j < data_wanted; j++)
|
for (let j = 0; j < data_wanted; j++)
|
||||||
data_values[i][j] = 0;
|
data_values[i][j] = 0;
|
||||||
|
|
||||||
/* plot horizontal time interval lines */
|
/* plot horizontal time interval lines */
|
||||||
for (var i = width % (step * 60); i < width; i += step * 60) {
|
for (let i = width % (step * 60); i < width; i += step * 60) {
|
||||||
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||||
line.setAttribute('x1', i);
|
line.setAttribute('x1', i);
|
||||||
line.setAttribute('y1', 0);
|
line.setAttribute('y1', 0);
|
||||||
line.setAttribute('x2', i);
|
line.setAttribute('x2', i);
|
||||||
line.setAttribute('y2', '100%');
|
line.setAttribute('y2', '100%');
|
||||||
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
||||||
|
|
||||||
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||||
text.setAttribute('x', i + 5);
|
text.setAttribute('x', i + 5);
|
||||||
text.setAttribute('y', 15);
|
text.setAttribute('y', 15);
|
||||||
text.setAttribute('style', 'fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
|
text.setAttribute('style', 'fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
|
||||||
text.appendChild(document.createTextNode(Math.round((width - i) / step / 60) + 'm'));
|
text.appendChild(document.createTextNode(Math.round((width - i) / step / 60) + 'm'));
|
||||||
|
|
||||||
G.appendChild(line);
|
G.appendChild(line);
|
||||||
G.appendChild(text);
|
G.appendChild(text);
|
||||||
@@ -98,35 +98,34 @@ return view.extend({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
pollData: function() {
|
pollData() {
|
||||||
poll.add(L.bind(function() {
|
poll.add(L.bind(function() {
|
||||||
var tasks = [];
|
const tasks = [];
|
||||||
|
|
||||||
for (var i = 0; i < graphPolls.length; i++) {
|
for (const ctx of graphPolls) {
|
||||||
var ctx = graphPolls[i];
|
|
||||||
tasks.push(L.resolveDefault(callLuciRealtimeStats('interface', ctx.ifname), []));
|
tasks.push(L.resolveDefault(callLuciRealtimeStats('interface', ctx.ifname), []));
|
||||||
}
|
}
|
||||||
|
|
||||||
return Promise.all(tasks).then(L.bind(function(datasets) {
|
return Promise.all(tasks).then(L.bind(function(datasets) {
|
||||||
for (var gi = 0; gi < graphPolls.length; gi++) {
|
for (let gi = 0; gi < graphPolls.length; gi++) {
|
||||||
var ctx = graphPolls[gi],
|
let ctx = graphPolls[gi];
|
||||||
data = datasets[gi],
|
const data = datasets[gi];
|
||||||
values = ctx.values,
|
const values = ctx.values;
|
||||||
lines = ctx.lines,
|
const lines = ctx.lines;
|
||||||
info = ctx.info;
|
const info = ctx.info;
|
||||||
|
|
||||||
var data_scale = 0;
|
let data_scale = 0;
|
||||||
var data_wanted = Math.floor(ctx.width / ctx.step);
|
const data_wanted = Math.floor(ctx.width / ctx.step);
|
||||||
var last_timestamp = NaN;
|
let last_timestamp = NaN;
|
||||||
|
|
||||||
for (var i = 0, di = 0; di < lines.length; di++) {
|
for (let i = 0, di = 0; di < lines.length; di++) {
|
||||||
if (lines[di] == null)
|
if (lines[di] == null)
|
||||||
continue;
|
continue;
|
||||||
|
|
||||||
var multiply = (lines[di].multiply != null) ? lines[di].multiply : 1,
|
const multiply = (lines[di].multiply != null) ? lines[di].multiply : 1;
|
||||||
offset = (lines[di].offset != null) ? lines[di].offset : 0;
|
const offset = (lines[di].offset != null) ? lines[di].offset : 0;
|
||||||
|
|
||||||
for (var j = ctx.timestamp ? 0 : 1; j < data.length; j++) {
|
for (let j = ctx.timestamp ? 0 : 1; j < data.length; j++) {
|
||||||
/* skip overlapping entries */
|
/* skip overlapping entries */
|
||||||
if (data[j][0] <= ctx.timestamp)
|
if (data[j][0] <= ctx.timestamp)
|
||||||
continue;
|
continue;
|
||||||
@@ -160,15 +159,15 @@ return view.extend({
|
|||||||
/* cut off outdated entries */
|
/* cut off outdated entries */
|
||||||
ctx.fill = Math.min(ctx.fill, data_wanted);
|
ctx.fill = Math.min(ctx.fill, data_wanted);
|
||||||
|
|
||||||
for (var i = 0; i < values.length; i++) {
|
for (let i = 0; i < values.length; i++) {
|
||||||
var len = values[i].length;
|
const len = values[i].length;
|
||||||
values[i] = values[i].slice(len - data_wanted, len);
|
values[i] = values[i].slice(len - data_wanted, len);
|
||||||
|
|
||||||
/* find peaks, averages */
|
/* find peaks, averages */
|
||||||
info.line_peak[i] = NaN;
|
info.line_peak[i] = NaN;
|
||||||
info.line_average[i] = 0;
|
info.line_average[i] = 0;
|
||||||
|
|
||||||
for (var j = 0; j < values[i].length; j++) {
|
for (let j = 0; j < values[i].length; j++) {
|
||||||
info.line_peak[i] = isNaN(info.line_peak[i]) ? values[i][j] : Math.max(info.line_peak[i], values[i][j]);
|
info.line_peak[i] = isNaN(info.line_peak[i]) ? values[i][j] : Math.max(info.line_peak[i], values[i][j]);
|
||||||
info.line_average[i] += values[i][j];
|
info.line_average[i] += values[i][j];
|
||||||
}
|
}
|
||||||
@@ -182,39 +181,39 @@ return view.extend({
|
|||||||
if (!isNaN(last_timestamp))
|
if (!isNaN(last_timestamp))
|
||||||
ctx.timestamp = last_timestamp;
|
ctx.timestamp = last_timestamp;
|
||||||
|
|
||||||
var size = Math.floor(Math.log2(info.peak)),
|
const size = Math.floor(Math.log2(info.peak));
|
||||||
div = Math.pow(2, size - (size % 10)),
|
const div = Math.pow(2, size - (size % 10));
|
||||||
mult = info.peak / div,
|
const p_o_d = info.peak / div;
|
||||||
mult = (mult < 5) ? 2 : ((mult < 50) ? 10 : ((mult < 500) ? 100 : 1000));
|
const mult = (p_o_d < 5) ? 2 : ((p_o_d < 50) ? 10 : ((p_o_d < 500) ? 100 : 1000));
|
||||||
|
|
||||||
info.peak = info.peak + (mult * div) - (info.peak % (mult * div));
|
info.peak = info.peak + (mult * div) - (info.peak % (mult * div));
|
||||||
|
|
||||||
data_scale = ctx.height / info.peak;
|
data_scale = ctx.height / info.peak;
|
||||||
|
|
||||||
/* plot data */
|
/* plot data */
|
||||||
for (var i = 0, di = 0; di < lines.length; di++) {
|
for (let i = 0, di = 0; di < lines.length; di++) {
|
||||||
if (lines[di] == null)
|
if (lines[di] == null)
|
||||||
continue;
|
continue;
|
||||||
|
|
||||||
var el = ctx.svg.firstElementChild.getElementById(lines[di].line),
|
const el = ctx.svg.firstElementChild.getElementById(lines[di].line);
|
||||||
pt = '0,' + ctx.height,
|
let pt = `0,${ctx.height}`;
|
||||||
y = 0;
|
let y = 0;
|
||||||
|
|
||||||
if (!el)
|
if (!el)
|
||||||
continue;
|
continue;
|
||||||
|
|
||||||
for (var j = 0; j < values[i].length; j++) {
|
for (let j = 0; j < values[i].length; j++) {
|
||||||
var x = j * ctx.step;
|
const x = j * ctx.step;
|
||||||
|
|
||||||
y = ctx.height - Math.floor(values[i][j] * data_scale);
|
y = ctx.height - Math.floor(values[i][j] * data_scale);
|
||||||
//y -= Math.floor(y % (1 / data_scale));
|
//y -= Math.floor(y % (1 / data_scale));
|
||||||
|
|
||||||
y = isNaN(y) ? ctx.height : y;
|
y = isNaN(y) ? ctx.height : y;
|
||||||
|
|
||||||
pt += ' ' + x + ',' + y;
|
pt += ` ${x},${y}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
pt += ' ' + ctx.width + ',' + y + ' ' + ctx.width + ',' + ctx.height;
|
pt += ` ${ctx.width},${y} ${ctx.width},${ctx.height}`;
|
||||||
|
|
||||||
el.setAttribute('points', pt);
|
el.setAttribute('points', pt);
|
||||||
|
|
||||||
@@ -232,7 +231,7 @@ return view.extend({
|
|||||||
}, this), pollInterval);
|
}, this), pollInterval);
|
||||||
},
|
},
|
||||||
|
|
||||||
loadSVG: function(src) {
|
loadSVG(src) {
|
||||||
return request.get(src).then(function(response) {
|
return request.get(src).then(function(response) {
|
||||||
if (!response.ok)
|
if (!response.ok)
|
||||||
throw new Error(response.statusText);
|
throw new Error(response.statusText);
|
||||||
@@ -243,18 +242,18 @@ return view.extend({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function([svg, devs]) {
|
render([svg, devs]) {
|
||||||
|
|
||||||
var v = E('div', { 'class': 'cbi-map', 'id': 'map' }, E('div'));
|
var v = E('div', { 'class': 'cbi-map', 'id': 'map' }, E('div'));
|
||||||
|
|
||||||
for (var i = 0; i < devs.length; i++) {
|
for (const dev of devs) {
|
||||||
var ifname = devs[i].getName();
|
var ifname = dev.getName();
|
||||||
const ssid = devs[i].wif?.getSSID?.() || null;
|
const ssid = dev.wif?.getSSID?.() || null;
|
||||||
|
|
||||||
if (!ifname || !devs[i].isUp() || devs[i].wif?.isDisabled())
|
if (!ifname || !dev.isUp() || dev.wif?.isDisabled())
|
||||||
continue;
|
continue;
|
||||||
|
|
||||||
var csvg = svg.cloneNode(true);
|
const csvg = svg.cloneNode(true);
|
||||||
|
|
||||||
v.firstElementChild.appendChild(E('div', { 'class': 'cbi-section', 'data-tab': ifname, 'data-tab-title': ssid ? `${ifname} ${ssid}` : ifname }, [
|
v.firstElementChild.appendChild(E('div', { 'class': 'cbi-section', 'data-tab': ifname, 'data-tab-title': ssid ? `${ifname} ${ssid}` : ifname }, [
|
||||||
csvg,
|
csvg,
|
||||||
@@ -287,7 +286,7 @@ return view.extend({
|
|||||||
]));
|
]));
|
||||||
|
|
||||||
this.updateGraph(ifname, csvg, [ { line: 'rx', counter: true }, null, { line: 'tx', counter: true } ], function(svg, info) {
|
this.updateGraph(ifname, csvg, [ { line: 'rx', counter: true }, null, { line: 'tx', counter: true } ], function(svg, info) {
|
||||||
var G = svg.firstElementChild, tab = svg.parentNode;
|
const G = svg.firstElementChild, tab = svg.parentNode;
|
||||||
|
|
||||||
G.getElementById('label_25').firstChild.data = rate(info.label_25).join('');
|
G.getElementById('label_25').firstChild.data = rate(info.label_25).join('');
|
||||||
G.getElementById('label_50').firstChild.data = rate(info.label_50).join('');
|
G.getElementById('label_50').firstChild.data = rate(info.label_50).join('');
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ return view.extend({
|
|||||||
|
|
||||||
return Promise.all(tasks).then(L.bind(function(datasets) {
|
return Promise.all(tasks).then(L.bind(function(datasets) {
|
||||||
for (let gi = 0; gi < graphPolls.length; gi++) {
|
for (let gi = 0; gi < graphPolls.length; gi++) {
|
||||||
const ctx = graphPolls[gi];
|
let ctx = graphPolls[gi];
|
||||||
const data = datasets[gi];
|
const data = datasets[gi];
|
||||||
const values = ctx.values;
|
const values = ctx.values;
|
||||||
const lines = ctx.lines;
|
const lines = ctx.lines;
|
||||||
|
|||||||
Reference in New Issue
Block a user