[PATCH pve-manager 14/15] ui: sdn: add VRF zone selection for fabrics

[Gabriel Goller <g.goller@proxmox.com>]

Allow BGP and OSPF fabrics to use the VRF created by a simple zone. The
selector ignores simple zones that use the default VRF, because they do
not create separate VRF and thus don't isolate the fabrics. Leaving the
field empty keeps the fabric in the default VRF.

Add the default VRF option to the simple zone editor so users can control
whether a zone creates its own VRF.

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 www/manager6/form/SDNZoneSelector.js   | 12 +++++++++++-
 www/manager6/sdn/fabrics/FabricEdit.js | 18 ++++++++++++++++++
 www/manager6/sdn/zones/SimpleEdit.js   | 12 +++++++++++-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/www/manager6/form/SDNZoneSelector.js b/www/manager6/form/SDNZoneSelector.js
index d8a63baeb7bd..4813539cb62a 100644
--- a/www/manager6/form/SDNZoneSelector.js
+++ b/www/manager6/form/SDNZoneSelector.js
@@ -8,6 +8,9 @@ Ext.define(
         valueField: 'zone',
         displayField: 'zone',
 
+        // Only show simple zones which create a dedicated VRF.
+        vrfOnly: false,
+
         initComponent: function () {
             var me = this;
 
@@ -17,6 +20,13 @@ Ext.define(
                     property: 'zone',
                     direction: 'ASC',
                 },
+                filters: me.vrfOnly
+                    ? [
+                          function (record) {
+                              return record.get('type') === 'simple' && !record.get('default-vrf');
+                          },
+                      ]
+                    : [],
             });
 
             Ext.apply(me, {
@@ -42,7 +52,7 @@ Ext.define(
     function () {
         Ext.define('pve-sdn-zone', {
             extend: 'Ext.data.Model',
-            fields: ['zone', 'type'],
+            fields: ['zone', 'type', { name: 'default-vrf', type: 'boolean', defaultValue: true }],
             proxy: {
                 type: 'proxmox',
                 url: '/api2/json/cluster/sdn/zones',
diff --git a/www/manager6/sdn/fabrics/FabricEdit.js b/www/manager6/sdn/fabrics/FabricEdit.js
index e9e0d1fa6286..b3992b294b93 100644
--- a/www/manager6/sdn/fabrics/FabricEdit.js
+++ b/www/manager6/sdn/fabrics/FabricEdit.js
@@ -37,6 +37,19 @@ Ext.define('PVE.sdn.Fabric.Fabric.Edit', {
                 disabled: '{!isCreate}',
             },
         },
+        {
+            xtype: 'pveSDNZoneSelector',
+            fieldLabel: gettext('VRF Zone'),
+            labelWidth: 120,
+            name: 'zone',
+            vrfOnly: true,
+            allowBlank: true,
+            skipEmptyText: true,
+            emptyText: gettext('Default VRF'),
+            cbind: {
+                deleteEmpty: '{!isCreate}',
+            },
+        },
     ],
 
     additionalItems: [],
@@ -50,6 +63,11 @@ Ext.define('PVE.sdn.Fabric.Fabric.Edit', {
         me.autoLoad = !me.isCreate;
         me.method = me.isCreate ? 'POST' : 'PUT';
 
+        let supportsVrf = ['bgp', 'ospf'].includes(me.extraRequestParams.protocol);
+        let vrfZoneField = me.items.find((item) => item.name === 'zone');
+        vrfZoneField.hidden = !supportsVrf;
+        vrfZoneField.disabled = !supportsVrf;
+
         if (!me.isCreate) {
             me.url = `${me.baseUrl}/${me.fabricId}`;
         } else {
diff --git a/www/manager6/sdn/zones/SimpleEdit.js b/www/manager6/sdn/zones/SimpleEdit.js
index ba10bb3616ea..4ec77057a6e5 100644
--- a/www/manager6/sdn/zones/SimpleEdit.js
+++ b/www/manager6/sdn/zones/SimpleEdit.js
@@ -18,7 +18,17 @@ Ext.define('PVE.sdn.zones.SimpleInputPanel', {
     initComponent: function () {
         var me = this;
 
-        me.items = [];
+        me.items = [
+            {
+                xtype: 'proxmoxcheckbox',
+                name: 'default-vrf',
+                fieldLabel: gettext('Create zone in default VRF'),
+                checked: true,
+                uncheckedValue: 0,
+                defaultValue: 1,
+                deleteDefaultValue: !me.isCreate,
+            },
+        ];
         me.advancedItems = [
             {
                 xtype: 'proxmoxcheckbox',
-- 
2.47.3