[PATCH pve-manager 1/3] ui: sdn: improve wireguard node edit dialog with no interfaces

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

The list collapsed to a thin strip and the right pane stayed empty,
making the dialog look broken when none had been added yet.

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 .../sdn/fabrics/wireguard/InterfacePanel.js   | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/www/manager6/sdn/fabrics/wireguard/InterfacePanel.js b/www/manager6/sdn/fabrics/wireguard/InterfacePanel.js
index 9db453a0..c3376011 100644
--- a/www/manager6/sdn/fabrics/wireguard/InterfacePanel.js
+++ b/www/manager6/sdn/fabrics/wireguard/InterfacePanel.js
@@ -162,6 +162,8 @@ Ext.define('PVE.sdn.Fabric.WireGuard.InterfacePanel', {
 
     xtype: 'pveSDNFabricWireGuardInterfacePanel',
 
+    minHeight: 200,
+
     layout: {
         type: 'hbox',
         align: 'stretch',
@@ -212,6 +214,10 @@ Ext.define('PVE.sdn.Fabric.WireGuard.InterfacePanel', {
                     flex: 1,
                     margin: '0 0 10 0',
                     hideHeaders: true,
+                    viewConfig: {
+                        emptyText: gettext('No interfaces configured'),
+                        deferEmptyText: false,
+                    },
                     columns: [
                         {
                             text: gettext('Name'),
@@ -280,6 +286,31 @@ Ext.define('PVE.sdn.Fabric.WireGuard.InterfacePanel', {
                 },
             ],
         },
+        {
+            xtype: 'panel',
+            border: false,
+            flex: 1,
+            width: 300,
+            layout: {
+                type: 'vbox',
+                pack: 'center',
+                align: 'center',
+            },
+            bind: {
+                hidden: '{selectedInterface}',
+            },
+            items: [
+                {
+                    xtype: 'component',
+                    html: gettext('Select an interface to configure, or add a new one.'),
+                    style: {
+                        color: '#888',
+                        'font-style': 'italic',
+                        'text-align': 'center',
+                    },
+                },
+            ],
+        },
         {
             xtype: 'form',
             border: false,
-- 
2.47.3