[PATCH pve-manager v2 2/2] ui: sdn: ipam: allow picking the nic instead of typing its MAC

[Hannes Laimer <h.laimer@proxmox.com>]

Instead of hand-copying a MAC from the guest's hardware panel, take a
guest and one of its NICs on the assignments's VNet, and fill the MAC in
from there.

Setting a MAC without a guest stays possible, so this is purely a UX
improvement. We could also restrict this, so our IPAM only manages IPs
of guests in our SDN.

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
v2:
 - add `displayConfig: (get) => ({ submitValue: get('isCreate') })` to
   mac field so it is submitted if filled by nic selection

 www/manager6/sdn/IpamEdit.js | 114 ++++++++++++++++++++++++++++++++++-
 1 file changed, 111 insertions(+), 3 deletions(-)

diff --git a/www/manager6/sdn/IpamEdit.js b/www/manager6/sdn/IpamEdit.js
index cdefe436..718fee67 100644
--- a/www/manager6/sdn/IpamEdit.js
+++ b/www/manager6/sdn/IpamEdit.js
@@ -16,22 +16,54 @@ Ext.define('PVE.sdn.IpamEditInputPanel', {
 
     items: [
         {
-            xtype: 'pmxDisplayEditField',
             name: 'vmid',
-            fieldLabel: 'VMID',
+            fieldLabel: gettext('Guest'),
+            allowBlank: true,
+            notFoundIsValid: true,
+            emptyText: Proxmox.Utils.NoneText,
+            cbind: {
+                xtype: (get) => (get('isCreate') ? 'vmComboSelector' : 'displayfield'),
+            },
+            listeners: {
+                change: 'onGuestChange',
+            },
+        },
+        {
+            xtype: 'combobox',
+            reference: 'netid',
+            fieldLabel: gettext('Network Device'),
+            emptyText: gettext('Select a guest first'),
+            submitValue: false,
             allowBlank: false,
             editable: false,
+            disabled: true,
+            queryMode: 'local',
+            valueField: 'netid',
+            displayField: 'netid',
+            listConfig: {
+                itemTpl: '{netid} <i>{mac:htmlEncode}</i>',
+            },
+            store: {
+                fields: ['netid', 'mac'],
+                data: [],
+            },
             cbind: {
-                hidden: '{isCreate}',
+                hidden: '{!isCreate}',
+            },
+            listeners: {
+                select: 'onDeviceSelect',
             },
         },
         {
             xtype: 'pmxDisplayEditField',
             name: 'mac',
+            reference: 'mac',
             fieldLabel: 'MAC',
             allowBlank: false,
             cbind: {
                 editable: '{isCreate}',
+                // display fields do not submit by default, but the MAC set from the NIC selection must
+                displayConfig: (get) => ({ submitValue: get('isCreate') }),
             },
         },
         {
@@ -58,11 +90,87 @@ Ext.define('PVE.sdn.IpamEdit', {
         return `${url}/${values.vnet}/ips`;
     },
 
+    controller: {
+        xclass: 'Ext.app.ViewController',
+
+        onGuestChange: function (f, vmid) {
+            if (!this.getView().isCreate) {
+                return;
+            }
+            this.setGuest(vmid ? f.getSelection() : undefined);
+        },
+
+        onDeviceSelect: function (f, record) {
+            this.lookup('mac').setValue(record?.data.mac ?? '');
+        },
+
+        setGuest: function (record) {
+            let me = this;
+            let view = me.getView();
+
+            let selector = me.lookup('netid');
+            let mac = me.lookup('mac');
+
+            selector.clearValue();
+            selector.getStore().removeAll();
+            selector.setDisabled(!record);
+
+            mac.setValue('');
+            mac.setEditable(!record);
+
+            if (!record) {
+                selector.setEmptyText(gettext('Select a guest first'));
+                return;
+            }
+
+            Proxmox.Utils.API2Request({
+                url: `/nodes/${record.data.node}/${record.data.type}/${record.data.vmid}/config`,
+                method: 'GET',
+                failure: (response) => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
+                success: function ({ result }) {
+                    if (selector.destroyed) {
+                        return;
+                    }
+
+                    let vnet = view.extraRequestParams?.vnet;
+                    let nics = [];
+
+                    for (const [key, value] of Object.entries(result.data)) {
+                        if (!key.match(/^net\d+$/)) {
+                            continue;
+                        }
+
+                        let net =
+                            record.data.type === 'qemu'
+                                ? PVE.Parser.parseQemuNetwork(key, value)
+                                : PVE.Parser.parseLxcNetwork(value);
+
+                        let mac = net?.macaddr ?? net?.hwaddr;
+                        if (!mac || net.bridge !== vnet) {
+                            continue;
+                        }
+
+                        nics.push({ netid: key, mac });
+                    }
+
+                    selector.getStore().setData(nics);
+                    selector.setEmptyText(
+                        nics.length
+                            ? gettext('Select a network device')
+                            : Ext.String.format(gettext('No network device on {0}'), vnet),
+                    );
+                },
+            });
+        },
+    },
+
     initComponent: function () {
         var me = this;
 
         me.method = me.isCreate ? 'POST' : 'PUT';
 
+        me.defaultFocus = me.isCreate ? 'textfield[name=mac]' : 'textfield[name=ip]';
+
         let ipanel = Ext.create('PVE.sdn.IpamEditInputPanel', {
             isCreate: me.isCreate,
         });
-- 
2.47.3