[PATCH pve-manager 3/9] fix #7294: ui: pool: add SDN VNets as pool members

[David Riley <d.riley@proxmox.com>]

Add user interface to manage SDN VNets inside resource pools.
In the dialog window users can select an SDN zone, pick an associated
VNet, and optionally specify a VLAN tag.

The VNet selector only shows VNets of the selected zone to prevent
invalid configurations.

Link: https://bugzilla.proxmox.com/show_bug.cgi?id=7294
Signed-off-by: David Riley <d.riley@proxmox.com>
---
 www/css/ext6-pve.css             |  13 ++++
 www/manager6/Utils.js            |   1 +
 www/manager6/grid/PoolMembers.js | 102 +++++++++++++++++++++++++++++++
 3 files changed, 116 insertions(+)

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 27742a74..9ec2a3af 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -470,6 +470,19 @@ div.right-aligned {
     content: " ";
 }
 
+.x-fa-pool-net:before {
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    left: 1px;
+    top: 1px;
+}
+
+.x-fa-pool-net-grid:before {
+    left: 14px;
+    top: 6px;
+}
+
 .x-fa-treepanel:before {
     width: 16px;
     height: 24px;
diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index bbf59d8f..80331933 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1320,6 +1320,7 @@ Ext.define('PVE.Utils', {
                 const networkTypeMapping = {
                     fabric: 'fa fa-road',
                     zone: 'fa fa-th',
+                    vnet: 'fa fa-network-wired x-fa-pool-net x-fa-pool-net-grid',
                 };
 
                 return networkTypeMapping[record['network-type']] ?? '';
diff --git a/www/manager6/grid/PoolMembers.js b/www/manager6/grid/PoolMembers.js
index 69f50e30..3c902b67 100644
--- a/www/manager6/grid/PoolMembers.js
+++ b/www/manager6/grid/PoolMembers.js
@@ -158,6 +158,88 @@ Ext.define('PVE.pool.AddStorage', {
     },
 });
 
+Ext.define('PVE.pool.AddVnet', {
+    extend: 'Proxmox.window.Edit',
+
+    viewModel: {
+        data: {
+            zone: '',
+        },
+        formulas: {
+            vnetDisabled: function (get) {
+                return !get('zone');
+            },
+        },
+    },
+
+    initComponent: function () {
+        var me = this;
+
+        if (!me.pool) {
+            throw 'no pool specified';
+        }
+
+        me.isCreate = true;
+        me.isAdd = true;
+        me.url = '/pools/';
+        me.method = 'PUT';
+        me.extraRequestParams.poolid = me.pool;
+
+        Ext.apply(me, {
+            subject: gettext('VNet'),
+            width: 350,
+            items: [
+                {
+                    xtype: 'pveSDNZoneSelector',
+                    fieldLabel: gettext('Zone'),
+                    name: 'zone',
+                    allowBlank: false,
+                    bind: {
+                        value: '{zone}',
+                    },
+                    listeners: {
+                        change: function (_f, _value) {
+                            var vnetField = me.down('field[name=vnet]');
+                            if (vnetField) {
+                                vnetField.setValue('');
+                            }
+                        },
+                    },
+                },
+                {
+                    xtype: 'pveSDNVnetSelector',
+                    fieldLabel: gettext('VNet'),
+                    name: 'vnet',
+                    allowBlank: false,
+                    bind: {
+                        disabled: '{vnetDisabled}',
+                    },
+                    listeners: {
+                        beforequery: function (_queryPlan) {
+                            var zone = me.getViewModel().get('zone');
+                            var store = this.getStore();
+                            store.clearFilter();
+                            store.filter('zone', zone);
+                            return true;
+                        },
+                    },
+                },
+                {
+                    xtype: 'proxmoxintegerfield',
+                    name: 'tag',
+                    fieldLabel: gettext('VLAN Tag'),
+                    minValue: 1,
+                    maxValue: 4094,
+                    allowBlank: true,
+                    emptyText: gettext('All'),
+                },
+            ],
+        });
+
+        me.callParent();
+    },
+});
+
 Ext.define('PVE.grid.PoolMembers', {
     extend: 'Ext.grid.GridPanel',
     alias: ['widget.pvePoolMembers'],
@@ -223,6 +305,17 @@ Ext.define('PVE.grid.PoolMembers', {
                     rec.data.type === 'openvz'
                 ) {
                     params.vms = rec.data.vmid;
+                } else if (rec.data.type === 'network') {
+                    if (rec.get('network-type') === 'vnet') {
+                        let [_type, zone, vnet, tag] = rec.data.id.split('/');
+
+                        params.zone = zone;
+                        params.vnet = vnet;
+
+                        if (tag) {
+                            params.tag = tag;
+                        }
+                    }
                 } else {
                     throw 'unknown resource type';
                 }
@@ -268,6 +361,15 @@ Ext.define('PVE.grid.PoolMembers', {
                                     win.show();
                                 },
                             },
+                            {
+                                text: gettext('VNet'),
+                                iconCls: 'fa fa-network-wired x-fa-pool-net',
+                                handler: function () {
+                                    var win = Ext.create('PVE.pool.AddVnet', { pool: me.pool });
+                                    win.on('destroy', reload);
+                                    win.show();
+                                },
+                            },
                         ],
                     }),
                 },
-- 
2.47.3