[pve-devel] [PATCH pve-manager 2/8] refactor: ui: sdn browser: parametrize zone content panel

[Stefan Hanreich]

In order to reuse the zone content panel for future, additional,
panels in the SDN browser, move all static configuration properties
into the declaration of the ExtJS widget. In particular, make the
on_(de)select callbacks configurable, so this panel can be customized
to work with a multitude of additional panels.

This is a preparation for extended status reporting for SDN zones,
which will add several new panels that want to utilize the content
view.

The selectionModel uses the default configuration that is included in
the GridPanel, so it can be removed.

No functional changes intended.

Signed-off-by: Stefan Hanreich <s.hanreich at proxmox.com>
---
 www/manager6/sdn/ZoneContentPanel.js | 11 +++-
 www/manager6/sdn/ZoneContentView.js  | 75 +++++++++++++++-------------
 2 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/www/manager6/sdn/ZoneContentPanel.js b/www/manager6/sdn/ZoneContentPanel.js
index 76b8500b1..50d2dd741 100644
--- a/www/manager6/sdn/ZoneContentPanel.js
+++ b/www/manager6/sdn/ZoneContentPanel.js
@@ -18,12 +18,21 @@ Ext.define('PVE.sdn.ZoneContentPanel', {
         var vnetview_panel = Ext.createWidget('pveSDNZoneContentView', {
             title: 'VNets',
             region: 'west',
-            permissions_panel: permissions_panel,
+            sub_panel: permissions_panel,
             nodename: me.nodename,
             zone: me.zone,
             width: '50%',
             border: false,
             split: true,
+
+            on_select: function (_sm, rec) {
+                let path = `/sdn/zones/${me.zone}/${rec.data.vnet}`;
+                permissions_panel.setPath(path);
+            },
+
+            on_deselect: function () {
+                permissions_panel.setPath(undefined);
+            },
         });
 
         Ext.apply(me, {
diff --git a/www/manager6/sdn/ZoneContentView.js b/www/manager6/sdn/ZoneContentView.js
index 97b3612e1..2243f277f 100644
--- a/www/manager6/sdn/ZoneContentView.js
+++ b/www/manager6/sdn/ZoneContentView.js
@@ -16,6 +16,43 @@ Ext.define(
                 groupHeaderTpl: '{name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
             },
         ],
+
+        sub_panel: null,
+
+        columns: [
+            {
+                header: gettext('VNet'),
+                width: 100,
+                sortable: true,
+                dataIndex: 'vnet',
+            },
+            {
+                header: gettext('Alias'),
+                width: 300,
+                sortable: true,
+                dataIndex: 'alias',
+            },
+            {
+                header: gettext('Status'),
+                width: 100,
+                sortable: true,
+                dataIndex: 'status',
+            },
+            {
+                header: gettext('Details'),
+                flex: 1,
+                dataIndex: 'statusmsg',
+            },
+        ],
+
+        on_select: function (selectionModel, record) {
+            // do nothing by default
+        },
+
+        on_deselect: function () {
+            // do nothing by default
+        },
+
         initComponent: function () {
             var me = this;
 
@@ -44,8 +81,6 @@ Ext.define(
                 },
             });
 
-            var sm = Ext.create('Ext.selection.RowModel', {});
-
             var reload = function () {
                 store.load();
             };
@@ -53,43 +88,11 @@ Ext.define(
             Proxmox.Utils.monStoreErrors(me, store);
             Ext.apply(me, {
                 store: store,
-                selModel: sm,
-                tbar: [],
-                columns: [
-                    {
-                        header: 'VNet',
-                        width: 100,
-                        sortable: true,
-                        dataIndex: 'vnet',
-                    },
-                    {
-                        header: 'Alias',
-                        width: 300,
-                        sortable: true,
-                        dataIndex: 'alias',
-                    },
-                    {
-                        header: gettext('Status'),
-                        width: 100,
-                        sortable: true,
-                        dataIndex: 'status',
-                    },
-                    {
-                        header: gettext('Details'),
-                        flex: 1,
-                        dataIndex: 'statusmsg',
-                    },
-                ],
                 listeners: {
                     activate: reload,
                     show: reload,
-                    select: function (_sm, rec) {
-                        let path = `/sdn/zones/${me.zone}/${rec.data.vnet}`;
-                        me.permissions_panel.setPath(path);
-                    },
-                    deselect: function () {
-                        me.permissions_panel.setPath(undefined);
-                    },
+                    select: me.on_select,
+                    deselect: me.on_deselect,
                 },
             });
             store.load();
-- 
2.47.3