Merge pull request #15 from wsk-163/openwrt-21.02

make ethernet information looks like openwrt 23.05
This commit is contained in:
padavanonly 2024-11-08 13:27:31 +08:00 committed by GitHub
commit 015af9e3f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -3,58 +3,91 @@
'require rpc';
var callLuciETHInfo = rpc.declare({
object: 'luci',
method: 'getETHInfo',
expect: { '': {} }
object: 'luci',
method: 'getETHInfo',
expect: { '': {} }
});
var callLuciNetworkDevices = rpc.declare({
object: 'luci-rpc',
method: 'getNetworkDevices',
expect: { '': {} }
});
function formatSpeed(speed) {
if (speed == '-') return '-';
const speedNum = parseInt(speed);
return speedNum < 1000 ? `${speedNum} M` : `${speedNum / 1000} GbE`;
}
function getPortColor(link, duplex) {
if (link == 'no') return 'background-color: whitesmoke;';
const color = duplex == 'Full' ? 'greenyellow' : 'darkorange';
return 'background-color: ' + color;
}
function getPortIcon(link) {
return L.resource(`icons/port_${link == 'yes' ? 'up' : 'down'}.png`);
}
return L.Class.extend({
title: _('Ethernet Information'),
title: _('Ethernet Information'),
load: function() {
return Promise.all([
L.resolveDefault(callLuciETHInfo(), {})
]);
},
load: function () {
return Promise.all([
L.resolveDefault(callLuciETHInfo(), {}),
L.resolveDefault(callLuciNetworkDevices(), {})
]);
},
render: function(data) {
var ethinfo = Array.isArray(data[0].ethinfo) ? data[0].ethinfo : [];
render: function (data) {
const ethinfo = Array.isArray(data[0].ethinfo) ? data[0].ethinfo : [];
const netdevs = typeof data[1] === 'object' ? data[1] : {};
var table = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Ethernet Name')),
E('th', { 'class': 'th' }, _('Link Status')),
E('th', { 'class': 'th' }, _('Speed')),
E('th', { 'class': 'th' }, _('Duplex'))
])
]);
const boxStyle = 'max-width: 100px;';
const boxHeadStyle =
'border-radius: 7px 7px 0 0;' +
'text-align: center;' +
'font-size:1.1rem; font-weight:bold;';
const boxbodyStyle =
'border: 1px solid lightgrey;' +
'border-radius: 0 0 7px 7px;' +
'display:flex; flex-direction: column;' +
'align-items: center; justify-content:center;';
const iconStyle = 'margin: 5px; width: 40px;';
const speedStyle = 'font-size:0.8rem; font-weight:bold;';
const trafficStyle =
'border-top: 1px solid lightgrey;' + 'font-size:0.8rem;';
cbi_update_table(table, ethinfo.map(function(info) {
var exp1;
var exp2;
const ethPorts = [];
for (const port of ethinfo) {
const portName = port.name;
const portIcon = getPortIcon(port.status);
const portColor = getPortColor(port.status, port.duplex);
const { tx_bytes, rx_bytes } = netdevs[portName].stats;
const portDiv = E('div', { style: boxStyle }, [
E('div', { style: boxHeadStyle + portColor }, portName),
E('div', { style: boxbodyStyle }, [
E('img', { style: iconStyle, src: portIcon }),
E('div', { style: speedStyle }, formatSpeed(port.speed)),
E('div', { style: trafficStyle }, [
'\u25b2\u202f%1024.1mB'.format(tx_bytes),
E('br'),
'\u25bc\u202f%1024.1mB'.format(rx_bytes)
])
])
]);
if (portName == 'wan') {
ethPorts.unshift(portDiv);
} else {
ethPorts.push(portDiv);
}
}
if (info.status == "yes")
exp1 = _('Link Up');
else if (info.status == "no")
exp1 = _('Link Down');
if (info.duplex == "Full")
exp2 = _('Full Duplex');
else if (info.duplex == "Half")
exp2 = _('Half Duplex');
else
exp2 = _('-');
return [
info.name,
exp1,
info.speed,
exp2
];
}));
return E([
table
]);
}
const gridStyle =
'display:grid; grid-gap: 5px 5px;' +
'grid-template-columns:repeat(auto-fit, minmax(70px, 1fr));' +
'margin-bottom:1em';
return E('div', { style: gridStyle }, ethPorts);
}
});