NAT drawer: empty rows in the “Device” dropdown under advanced settings

[cotosso]

Description

In the NAT configuration drawer, when opening Advanced settings, the Device dropdown may show empty rows between the available interfaces.

This issue does not necessarily occur on every device. It is easier to reproduce or observe on systems where VPN tunnels are configured.

The empty rows make the menu less readable and may cause confusion when selecting the correct device.

Steps to reproduce

1. Log in to NethSecurity.
2. Open the NAT section.
3. Open or create a NAT rule.
4. Open the configuration drawer.
5. Expand Advanced settings.
6. Open the Device dropdown.
7. Observe the list of available devices, especially on systems with VPN tunnels configured.

Expected behavior

The Device dropdown should display only valid values, with no empty rows.

Actual behavior

The Device dropdown may display empty rows between the available entries.

Components

NethSecurity 8.7.2.

[cotosso]

I've made some test with the browser console, this is the request:

{
    "path": "ns.nat",
    "method": "list-devices",
    "payload": {}
}

this is the reply:

{
    "code": 200,
    "data": {
        "devices": [
            {
                "id": "eth0",
                "label": "LAN"
            },
            {
                "id": "eth1",
                "label": "RETE_SERVER"
            },
            {
                "id": "tun-nsplug",
                "label": null
            },
            {
                "id": "@f1000",
                "label": "al_f1000"
            },
            {
                "id": "eth4",
                "label": "f1000"
            },
            {
                "id": "eth5",
                "label": "FTTC_BCK"
            },
            {
                "id": "tunrw1",
                "label": null
            },
            {
                "id": "tuncerbeyra",
                "label": "cerbeyra"
            },
            {
                "id": "eth0.10",
                "label": null
            },
            {
                "id": "tun-dedalo",
                "label": null
            },
            {
                "id": "wg1",
                "label": null
            },
            {
                "id": "tunct_nethesi",
                "label": "ct_nethesi"
            },
            {
                "id": "wg2",
                "label": null
            },
            {
                "id": "eth0.20",
                "label": "RETE_IOT"
            }
        ]
    },
    "message": "ubus call action success"
}

Some device has label = null, this tipically happens with VPN devices (tunrw1, wg1, ns-plug)

I'f suggest to show also the devices with null label, so we can cover every device.

It's also possible to not show at all devices with nulll label, but it could be limiting in some scenario.

[m-dilorenzi]

QA

Image: dev image

1. Log in to NethSecurity.
2. Create a VPN instance of your choice (OpenVPN RoadWarrior, WireGuard Server, ...)
3. Open the NAT section.
4. Open or create a NAT rule.
5. Open the configuration drawer.
6. Expand Advanced settings.
7. Open the Device dropdown.
8. Review the list of available devices and verify that it includes entries for the configured VPN instances and contains no empty (blank) selectable items like the following ones

[gsanchietti]

Verified: now VPN devices appears inside the select box.