[PATCH pve-manager v3 11/12] 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 or enable propagation to grant
full access to all tagged and untagged traffic.

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

Add opacity adjustments for the `fa-network-wired` icon used by pool
networks. The light/base theme lowers the icons opacity to simulate
a light grey color that matches other configuration elements.

Signed-off-by: David Riley <d.riley@proxmox.com>

Link: https://bugzilla.proxmox.com/show_bug.cgi?id=7294
---
 www/css/ext6-pve.css             |  15 ++++
 www/manager6/Utils.js            |   1 +
 www/manager6/grid/PoolMembers.js | 145 +++++++++++++++++++++++++++++++
 3 files changed, 161 insertions(+)

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 5c37dd29..3c383dfa 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -464,6 +464,21 @@ div.right-aligned {
     content: " ";
 }
 
+.x-fa-pool-net:before {
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    opacity: 0.45;
+}
+
+.x-fa-pool-net-grid:before {
+    left: 14px;
+    top: 6px;
+    opacity: 0.65;
+}
+
 .x-fa-treepanel:before {
     width: 16px;
     height: 24px;
diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 040b5ae0..8f53dfb6 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1322,6 +1322,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..c3902983 100644
--- a/www/manager6/grid/PoolMembers.js
+++ b/www/manager6/grid/PoolMembers.js
@@ -158,6 +158,128 @@ 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 () {
+        let 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: 'inputpanel',
+                    onGetValues: function (values) {
+                        let network = `vnet/${values.zone}/${values.vnet}`;
+
+                        if (values.propagate) {
+                            network += '/*';
+                        } else if (values.tag) {
+                            network += `/${values.tag}`;
+                        }
+
+                        delete values.zone;
+                        delete values.vnet;
+                        delete values.propagate;
+                        delete values.tag;
+
+                        values.network = network;
+
+                        return values;
+                    },
+                    items: [
+                        {
+                            xtype: 'pveSDNZoneSelector',
+                            fieldLabel: gettext('Zone'),
+                            name: 'zone',
+                            allowBlank: false,
+                            bind: {
+                                value: '{zone}',
+                            },
+                            listeners: {
+                                change: function (_f, _value) {
+                                    let vnetField = me.lookupReference('vnetField');
+                                    if (vnetField) {
+                                        vnetField.setValue('');
+                                    }
+                                },
+                            },
+                        },
+                        {
+                            xtype: 'pveSDNVnetSelector',
+                            fieldLabel: gettext('VNet'),
+                            name: 'vnet',
+                            reference: 'vnetField',
+                            allowBlank: false,
+                            bind: {
+                                disabled: '{vnetDisabled}',
+                            },
+                            listeners: {
+                                beforequery: function (_queryPlan) {
+                                    let zone = me.getViewModel().get('zone');
+                                    let 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'),
+                            bind: {
+                                disabled: '{propagate}',
+                            },
+                        },
+                        {
+                            xtype: 'proxmoxcheckbox',
+                            name: 'propagate',
+                            checked: false,
+                            uncheckedValue: 0,
+                            fieldLabel: gettext('Propagate'),
+                            boxLabel: gettext(
+                                'Grant full access to this VNet (tagged and untagged)',
+                            ),
+                            bind: {
+                                value: '{propagate}',
+                            },
+                        },
+                    ],
+                },
+            ],
+        });
+
+        me.callParent();
+    },
+});
+
 Ext.define('PVE.grid.PoolMembers', {
     extend: 'Ext.grid.GridPanel',
     alias: ['widget.pvePoolMembers'],
@@ -223,6 +345,20 @@ Ext.define('PVE.grid.PoolMembers', {
                     rec.data.type === 'openvz'
                 ) {
                     params.vms = rec.data.vmid;
+                } else if (rec.get('type') === 'network') {
+                    if (rec.get('network-type') === 'vnet') {
+                        let [_type, zone, vnet, tag] = rec.data.id.split('/');
+
+                        let network = `vnet/${zone}/${vnet}`;
+
+                        if (tag) {
+                            network += `/${tag}`;
+                        }
+
+                        params.network = network;
+                    } else {
+                        console.warn('unknown network-type encountered');
+                    }
                 } else {
                     throw 'unknown resource type';
                 }
@@ -268,6 +404,15 @@ Ext.define('PVE.grid.PoolMembers', {
                                     win.show();
                                 },
                             },
+                            {
+                                text: gettext('VNet'),
+                                iconCls: 'fa fa-network-wired x-fa-pool-net',
+                                handler: function () {
+                                    let win = Ext.create('PVE.pool.AddVnet', { pool: me.pool });
+                                    win.on('destroy', reload);
+                                    win.show();
+                                },
+                            },
                         ],
                     }),
                 },
-- 
2.47.3