[PATCH pve-manager 8/9] ui: sdn: fabric edit: allow defining multiple tabs

[Stefan Hanreich <s.hanreich@proxmox.com>]

This allows for adding multiple tabs to the fabric edit window, which
can be used to include additional settings to the create/edit window
without cluttering the main view too much. The first use case is to
add support for route redistribution to the UI in subsequent commits.

Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
---
 www/manager6/sdn/fabrics/FabricEdit.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/www/manager6/sdn/fabrics/FabricEdit.js b/www/manager6/sdn/fabrics/FabricEdit.js
index 6111bbb51..43a402a99 100644
--- a/www/manager6/sdn/fabrics/FabricEdit.js
+++ b/www/manager6/sdn/fabrics/FabricEdit.js
@@ -37,6 +37,7 @@ Ext.define('PVE.sdn.Fabric.Fabric.Edit', {
     ],
 
     additionalItems: [],
+    additionalTabs: [],
 
     initComponent: function () {
         let me = this;
@@ -97,7 +98,26 @@ Ext.define('PVE.sdn.Fabric.Fabric.Edit', {
             );
         }
 
-        me.items.push(...me.additionalItems);
+        if (me.additionalTabs.length > 0) {
+            let items = [...me.items, ...me.additionalItems];
+
+            let iPanel = Ext.create('Proxmox.panel.InputPanel', {
+                title: gettext('Fabric'),
+                items,
+            });
+
+            me.bodyPadding = 0;
+
+            me.items = [
+                {
+                    xtype: 'tabpanel',
+                    bodyPadding: 10,
+                    items: [iPanel, ...me.additionalTabs],
+                },
+            ];
+        } else {
+            me.items.push(...me.additionalItems);
+        }
 
         me.callParent();
     },
-- 
2.47.3