From fd0038d1831151fb44147e462e2c87d1f6f649eb Mon Sep 17 00:00:00 2001
From: Paul Donald <newtwen+github@gmail.com>
Date: Sat, 14 Jun 2025 00:11:04 +0200
Subject: [PATCH] modules: fix device widgets for tunnel devices

Returning a device via getDevice() doesn't work out for tunnel configs,
like wireguard-wg0. Its dev property (for determining dev.getType()) is
always empty, but device is 'wireguard-wg0' and network is 'wg0'.

getDevice() returns an instantiated prototype which is not up, defeating
the purpose of querying its 'up' status.

When dealing with firewall zones and device widgets, what's interesting
is the dev. And getL3Device() is intended for this.

This effectively reverts commit f17ae7fd96f285aa564579f597f51e2679b27fd4
which attempted to address the problem of 'up' status; now calls via
getL3Device() get the correct up status.

Signed-off-by: Paul Donald <newtwen+github@gmail.com>
---
 .../luci-static/resources/tools/widgets.js     | 18 +++++++++---------
 .../resources/view/network/interfaces.js       |  7 ++++---
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js b/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js
index 05d27d0ae2..311803feb2 100644
--- a/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js
+++ b/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js
@@ -18,12 +18,12 @@ function getGroups() {
 }
 
 function getDevices(network) {
-    if (network.isBridge()) {
-        var devices = network.getDevices();
-        return devices ? devices : [];
-    } else {
-        return L.toArray(network.getDevice());
-    }
+	if (network.isBridge()) {
+		var devices = network.getDevices();
+		return devices ? devices : [];
+	} else {
+		return L.toArray(network.getL3Device());
+	}
 }
 
 var CBIZoneSelect = form.ListValue.extend({
@@ -119,7 +119,7 @@ var CBIZoneSelect = form.ListValue.extend({
 				for (var k = 0; k < devices.length; k++) {
 					span.appendChild(E('img', {
 						'title': devices[k].getI18n(),
-						'src': L.resource('icons/%s%s.svg'.format(devices[k].getType(), network.isUp() ? '' : '_disabled'))
+						'src': L.resource('icons/%s%s.svg'.format(devices[k].getType(), devices[k].isUp() ? '' : '_disabled'))
 					}));
 				}
 
@@ -264,7 +264,7 @@ var CBIZoneForwards = form.DummyValue.extend({
 			for (var k = 0; k < subdevs.length && subdevs[k]; k++) {
 				span.appendChild(E('img', {
 					'title': subdevs[k].getI18n(),
-					'src': L.resource('icons/%s%s.svg'.format(subdevs[k].getType(), network.isUp() ? '' : '_disabled'))
+					'src': L.resource('icons/%s%s.svg'.format(subdevs[k].getType(), subdevs[k].isUp() ? '' : '_disabled'))
 				}));
 			}
 
@@ -360,7 +360,7 @@ var CBINetworkSelect = form.ListValue.extend({
 		for (var j = 0; j < devices.length && devices[j]; j++) {
 			span.appendChild(E('img', {
 				'title': devices[j].getI18n(),
-				'src': L.resource('icons/%s%s.svg'.format(devices[j].getType(), network.isUp() ? '' : '_disabled'))
+				'src': L.resource('icons/%s%s.svg'.format(devices[j].getType(), devices[j].isUp() ? '' : '_disabled'))
 			}));
 		}
 
diff --git a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/interfaces.js b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/interfaces.js
index 3e7614dd38..c59bc08abd 100644
--- a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/interfaces.js
+++ b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/interfaces.js
@@ -68,7 +68,7 @@ function render_status(node, ifc, with_device) {
 	desc = desc ? '%s (%s)'.format(desc, ifc.getI18n()) : ifc.getI18n();
 
 	const changecount = with_device ? 0 : count_changes(ifc.getName());
-	const maindev = ifc.getL3Device() || ifc.getDevice();
+	const maindev = ifc.getL3Device() ?? ifc.getDevice();
 	const macaddr = maindev ? maindev.getMAC() : null;
 	const cond00 = !changecount && !ifc.isDynamic() && !ifc.isAlias();
 	const cond01 = cond00 && macaddr;
@@ -99,7 +99,8 @@ function render_status(node, ifc, with_device) {
 }
 
 function render_modal_status(node, ifc) {
-	var dev = ifc ? (ifc.getDevice() || ifc.getL3Device() || ifc.getL3Device()) : null;
+	// order is important: ifc.getL3Device() can determine dev.getType for tunnel configs
+	const dev = ifc ? (ifc.getL3Device() ?? ifc.getDevice()) : null;
 
 	dom.content(node, [
 		E('img', {
@@ -294,7 +295,7 @@ return view.extend({
 			}
 
 			if (stat) {
-				var dev = ifc.getDevice();
+				const dev = ifc.getL3Device() ?? ifc.getDevice();
 				dom.content(stat, [
 					E('img', {
 						'src': L.resource('icons/%s%s.svg').format(dev ? dev.getType() : 'ethernet', ifc.isUp() ? '' : '_disabled'),
-- 
2.30.2