From ffb09fb652e226f7521b89f62c3f8a010d829726 Mon Sep 17 00:00:00 2001
From: Michal Fox <me@dualfroz.com>
Date: Fri, 2 Oct 2026 16:50:20 +0200
Subject: [PATCH] fix #5772: node network view: sort names and ports naturally

The interface list was sorted by comparing the names as plain strings,
so 'eno10' and 'eno11' came before 'eno2', and 'vmbr10' before 'vmbr2'.

Sort by name with a comparison that orders numbers in the names by
their value instead. Use the same sorter for the initial order of the
store and for the name column, so that the column header still shows
the initial sort order and the first click on it reverses it, like
before.

The 'Ports/Slaves' column uses the type as data index, so sorting by it
just sorted by type. Sort it by the shown ports or slaves instead, also
in natural order.

Signed-off-by: Michal Fox <me@dualfroz.com>
---
 src/node/NetworkView.js | 46 +++++++++++++++++++++++++----------------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/node/NetworkView.js b/src/node/NetworkView.js
index 0ff9649..29b3fe6 100644
--- a/src/node/NetworkView.js
+++ b/src/node/NetworkView.js
@@ -49,18 +49,36 @@ Ext.define('Proxmox.node.NetworkView', {
 
         let baseUrl = `/nodes/${me.nodename}/network`;
 
+        // sort numbers in names by value, so that 'eno2' comes before 'eno10'
+        let naturalCompare = (a, b) =>
+            (a ?? '').localeCompare(b ?? '', undefined, { numeric: true });
+
+        let getPortsOrSlaves = (data) => {
+            if (data.type === 'bridge') {
+                return data.bridge_ports;
+            } else if (data.type === 'bond') {
+                return data.slaves;
+            } else if (data.type === 'OVSBridge') {
+                return data.ovs_ports;
+            } else if (data.type === 'OVSBond') {
+                return data.ovs_bonds;
+            }
+            return '';
+        };
+
+        // shared with the name column, so that its header shows the initial sort order
+        let ifaceSorter = Ext.create('Ext.util.Sorter', {
+            id: 'iface',
+            sorterFn: (a, b) => naturalCompare(a.data.iface, b.data.iface),
+        });
+
         let store = Ext.create('Ext.data.Store', {
             model: 'proxmox-networks',
             proxy: {
                 type: 'proxmox',
                 url: '/api2/json' + baseUrl,
             },
-            sorters: [
-                {
-                    property: 'iface',
-                    direction: 'ASC',
-                },
-            ],
+            sorters: [ifaceSorter],
         });
 
         let reload = function () {
@@ -282,6 +300,7 @@ Ext.define('Proxmox.node.NetworkView', {
                             header: gettext('Name'),
                             sortable: true,
                             dataIndex: 'iface',
+                            sorter: ifaceSorter,
                         },
                         {
                             header: gettext('Alternative Names'),
@@ -338,18 +357,9 @@ Ext.define('Proxmox.node.NetworkView', {
                         {
                             header: gettext('Ports/Slaves'),
                             dataIndex: 'type',
-                            renderer: (value, metaData, { data }) => {
-                                if (value === 'bridge') {
-                                    return data.bridge_ports;
-                                } else if (value === 'bond') {
-                                    return data.slaves;
-                                } else if (value === 'OVSBridge') {
-                                    return data.ovs_ports;
-                                } else if (value === 'OVSBond') {
-                                    return data.ovs_bonds;
-                                }
-                                return '';
-                            },
+                            renderer: (value, metaData, { data }) => getPortsOrSlaves(data),
+                            sorter: (a, b) =>
+                                naturalCompare(getPortsOrSlaves(a.data), getPortsOrSlaves(b.data)),
                         },
                         {
                             header: gettext('Bond Mode'),