small-package/luci-app-tailscale/htdocs/luci-static/resources/view/tailscale/interface.js

118 lines
3.3 KiB
JavaScript
Raw Normal View History

2025-01-09 19:54:09 +08:00
/* SPDX-License-Identifier: GPL-3.0-only
*
* Copyright (C) 2022 ImmortalWrt.org
* Copyright (C) 2024 asvow
*/
'use strict';
'require dom';
'require fs';
'require poll';
'require ui';
'require view';
return view.extend({
load: function() {
2025-04-25 00:28:39 +08:00
return fs.exec('/sbin/ip', ['-s', '-j', 'ad']).then(function(res) {
2025-01-09 19:54:09 +08:00
if (res.code !== 0 || !res.stdout || res.stdout.trim() === '') {
ui.addNotification(null, E('p', {}, _('Unable to get interface info: %s.').format(res.message)));
2025-04-25 00:28:39 +08:00
return [];
2025-01-09 19:54:09 +08:00
}
2025-04-25 00:28:39 +08:00
try {
const interfaces = JSON.parse(res.stdout);
const tailscaleInterfaces = interfaces.filter(iface => iface.ifname.match(/tailscale[0-9]+/));
2025-01-09 19:54:09 +08:00
2025-04-25 00:28:39 +08:00
return tailscaleInterfaces.map(iface => {
const parsedInfo = {
name: iface.ifname
2025-01-09 19:54:09 +08:00
};
2025-04-25 00:28:39 +08:00
const addr_info = iface.addr_info || [];
addr_info.forEach(addr => {
if (addr.family === 'inet') {
parsedInfo.ipv4 = addr.local;
} else if (addr.family === 'inet6') {
parsedInfo.ipv6 = addr.local;
2025-01-09 19:54:09 +08:00
}
});
2025-04-25 00:28:39 +08:00
parsedInfo.mtu = iface.mtu;
2025-04-27 16:25:21 +08:00
parsedInfo.rxBytes = '%1024mB'.format(iface.stats64.rx.bytes);
parsedInfo.txBytes = '%1024mB'.format(iface.stats64.tx.bytes);
2025-04-25 00:28:39 +08:00
2025-01-09 19:54:09 +08:00
return parsedInfo;
});
2025-04-25 00:28:39 +08:00
} catch (e) {
ui.addNotification(null, E('p', {}, _('Error parsing interface info: %s.').format(e.message)));
return [];
}
2025-01-09 19:54:09 +08:00
});
},
pollData: function (container) {
poll.add(L.bind(function () {
return this.load().then(L.bind(function (data) {
dom.content(container, this.renderContent(data));
}, this));
}, this));
},
renderContent: function (data) {
if (!Array.isArray(data)) {
return E('div', {}, _('No interface online.'));
}
2025-04-25 00:28:39 +08:00
const rows = [
E('th', { class: 'th', colspan: '2' }, _('Network Interface Information'))
];
data.forEach(interfaceData => {
rows.push(
E('tr', { class: 'tr' }, [
E('td', { class: 'td left', width: '25%' }, _('Interface Name')),
E('td', { class: 'td left', width: '25%' }, interfaceData.name)
2025-01-09 19:54:09 +08:00
]),
2025-04-25 00:28:39 +08:00
E('tr', { class: 'tr' }, [
E('td', { class: 'td left', width: '25%' }, _('IPv4 Address')),
E('td', { class: 'td left', width: '25%' }, interfaceData.ipv4)
2025-01-09 19:54:09 +08:00
]),
2025-04-25 00:28:39 +08:00
E('tr', { class: 'tr' }, [
E('td', { class: 'td left', width: '25%' }, _('IPv6 Address')),
E('td', { class: 'td left', width: '25%' }, interfaceData.ipv6)
2025-01-09 19:54:09 +08:00
]),
2025-04-25 00:28:39 +08:00
E('tr', { class: 'tr' }, [
E('td', { class: 'td left', width: '25%' }, _('MTU')),
E('td', { class: 'td left', width: '25%' }, interfaceData.mtu)
2025-01-09 19:54:09 +08:00
]),
2025-04-25 00:28:39 +08:00
E('tr', { class: 'tr' }, [
E('td', { class: 'td left', width: '25%' }, _('Total Download')),
E('td', { class: 'td left', width: '25%' }, interfaceData.rxBytes)
2025-01-09 19:54:09 +08:00
]),
2025-04-25 00:28:39 +08:00
E('tr', { class: 'tr' }, [
E('td', { class: 'td left', width: '25%' }, _('Total Upload')),
E('td', { class: 'td left', width: '25%' }, interfaceData.txBytes)
2025-01-09 19:54:09 +08:00
])
2025-04-25 00:28:39 +08:00
);
2025-01-09 19:54:09 +08:00
});
return E('table', { 'class': 'table' }, rows);
},
render: function(data) {
2025-04-25 00:28:39 +08:00
const content = E([], [
E('h2', { class: 'content' }, _('Tailscale')),
E('div', { class: 'cbi-map-descr' }, _('Tailscale is a cross-platform and easy to use virtual LAN.')),
2025-01-09 19:54:09 +08:00
E('div')
]);
2025-04-25 00:28:39 +08:00
const container = content.lastElementChild;
2025-01-09 19:54:09 +08:00
dom.content(container, this.renderContent(data));
this.pollData(container);
return content;
},
handleSaveApply: null,
handleSave: null,
handleReset: null
});