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

@@ -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'),