[pve-devel] [PATCH pve-manager 8/8] ui: sdn browser: add zone bridge view

[Stefan Hanreich]

This shows a list of all bridges, that are part of an SDN zone
(including the pseudo localnetwork zone, that corresponds to the local
network of a node). It also shows additional information about which
ports are currently members of the bridge, as well as their VLAN
configuration and which guest they belong to.

Signed-off-by: Stefan Hanreich <s.hanreich at proxmox.com>
---
 www/manager6/Makefile                |   2 +
 www/manager6/sdn/Browser.js          |   9 ++
 www/manager6/sdn/ZoneBridgeView.js   |  88 ++++++++++++++++++
 www/manager6/sdn/ZoneBridgesPanel.js | 131 +++++++++++++++++++++++++++
 4 files changed, 230 insertions(+)
 create mode 100644 www/manager6/sdn/ZoneBridgeView.js
 create mode 100644 www/manager6/sdn/ZoneBridgesPanel.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 3f7125e1f..68c3f4457 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -290,6 +290,8 @@ JSSRC= 							\
 	sdn/SubnetView.js				\
 	sdn/ZoneContentView.js				\
 	sdn/ZoneContentPanel.js				\
+	sdn/ZoneBridgesPanel.js				\
+	sdn/ZoneBridgeView.js				\
 	sdn/EvpnZoneIpVrfPanel.js	\
 	sdn/EvpnZoneMacVrfPanel.js	\
 	sdn/FirewallPanel.js				\
diff --git a/www/manager6/sdn/Browser.js b/www/manager6/sdn/Browser.js
index 8960caf2d..4dc709ff0 100644
--- a/www/manager6/sdn/Browser.js
+++ b/www/manager6/sdn/Browser.js
@@ -48,6 +48,15 @@ Ext.define('PVE.sdn.Browser', {
             });
         }
 
+        me.items.push({
+            nodename: nodename,
+            zone: sdnId,
+            xtype: 'pveSDNZoneBridgePanel',
+            title: gettext('Bridges'),
+            iconCls: 'fa fa-network-wired x-fa-sdn-treelist',
+            itemId: 'bridges',
+        });
+
         if (me.pveSelNode.data.zone_type && me.pveSelNode.data.zone_type === 'evpn') {
             me.items.push({
                 nodename: nodename,
diff --git a/www/manager6/sdn/ZoneBridgeView.js b/www/manager6/sdn/ZoneBridgeView.js
new file mode 100644
index 000000000..316ce86f2
--- /dev/null
+++ b/www/manager6/sdn/ZoneBridgeView.js
@@ -0,0 +1,88 @@
+Ext.define('ZoneBridge', {
+    extend: 'Ext.data.Model',
+    fields: ['name', 'vlan_filtering', 'ports'],
+});
+
+Ext.define('PVE.sdn.ZoneBridgeView', {
+    extend: 'Ext.grid.GridPanel',
+    alias: 'widget.pveSDNZoneBridgeView',
+
+    stateful: true,
+    stateId: 'grid-sdnzone-bridges',
+
+    viewConfig: {
+        trackOver: false,
+        loadMask: false,
+    },
+
+    columns: [
+        {
+            header: gettext('Bridge'),
+            width: 100,
+            sortable: true,
+            dataIndex: 'name',
+            flex: 1,
+        },
+        {
+            header: gettext('VLAN-aware'),
+            width: 300,
+            sortable: true,
+            dataIndex: 'vlan_filtering',
+            flex: 1,
+            renderer: function (value) {
+                return value === 1 ? gettext('Yes') : gettext('No');
+            },
+        },
+    ],
+
+    on_select: function (selectionModel, record) {
+        // do nothing by default
+    },
+
+    on_deselect: function () {
+        // do nothing by default
+    },
+
+    initComponent: function () {
+        var me = this;
+
+        if (!me.nodename) {
+            throw 'no node name specified';
+        }
+
+        if (!me.zone) {
+            throw 'no zone ID specified';
+        }
+
+        let baseUrl = `/nodes/${me.nodename}/sdn/zones/${me.zone}/bridges`;
+
+        let store = Ext.create('Ext.data.Store', {
+            model: 'ZoneBridge',
+            proxy: {
+                type: 'proxmox',
+                url: '/api2/json' + baseUrl,
+            },
+            sorters: {
+                property: 'name',
+                direction: 'ASC',
+            },
+        });
+
+        let reload = function () {
+            store.load();
+        };
+
+        Proxmox.Utils.monStoreErrors(me, store);
+        Ext.apply(me, {
+            store: store,
+            listeners: {
+                activate: reload,
+                show: reload,
+                select: me.on_select,
+                deselect: me.on_deselect,
+            },
+        });
+        store.load();
+        me.callParent();
+    },
+});
diff --git a/www/manager6/sdn/ZoneBridgesPanel.js b/www/manager6/sdn/ZoneBridgesPanel.js
new file mode 100644
index 000000000..600b23b0a
--- /dev/null
+++ b/www/manager6/sdn/ZoneBridgesPanel.js
@@ -0,0 +1,131 @@
+Ext.define('PVE.sdn.ZoneBridgePanel', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.pveSDNZoneBridgePanel',
+
+    title: gettext('Bridges'),
+    onlineHelp: 'pvesdn_zone_plugin_evpn',
+
+    stateful: true,
+    stateId: 'grid-sdn-zone-bridges',
+
+    initComponent: function () {
+        var me = this;
+        let nodename = me.nodename;
+
+        var bridge_ports_panel = Ext.createWidget('pveSDNZoneBridgePortsPanel', {
+            title: gettext('Bridge Ports'),
+            region: 'center',
+            border: false,
+        });
+
+        var vnetview_panel = Ext.createWidget('pveSDNZoneBridgeView', {
+            title: gettext('VNets'),
+            region: 'west',
+            nodename: me.nodename,
+            zone: me.zone,
+
+            width: '50%',
+            border: false,
+            split: true,
+
+            on_select: function (_sm, rec) {
+                let deepCopy = structuredClone(rec.data.ports);
+                bridge_ports_panel.setPorts(deepCopy, nodename);
+            },
+
+            on_deselect: function () {
+                bridge_ports_panel.clearPorts();
+            },
+        });
+
+        Ext.apply(me, {
+            layout: 'border',
+            items: [vnetview_panel, bridge_ports_panel],
+        });
+
+        me.callParent();
+    },
+});
+
+Ext.define('ZoneBridgePort', {
+    extend: 'Ext.data.Model',
+    fields: ['index', 'name', 'primary_vlan', 'vlans', 'vmid'],
+});
+
+Ext.define('PVE.sdn.ZoneBridgePortsPanel', {
+    extend: 'Ext.grid.GridPanel',
+    alias: 'widget.pveSDNZoneBridgePortsPanel',
+
+    title: gettext('IP-VRF'),
+    onlineHelp: 'pvesdn_zone_plugin_evpn',
+
+    stateful: true,
+    stateId: 'grid-sdn-zone-ports',
+
+    columns: [
+        {
+            text: gettext('Name'),
+            flex: 2,
+            sortable: true,
+            dataIndex: 'name',
+        },
+        {
+            text: gettext('VMID'),
+            flex: 1,
+            sortable: true,
+            dataIndex: 'vmid',
+        },
+        {
+            text: gettext('Network Device Index'),
+            flex: 1,
+            sortable: true,
+            dataIndex: 'index',
+        },
+        {
+            text: gettext('Primary VLAN'),
+            flex: 1,
+            sortable: true,
+            dataIndex: 'primary_vlan',
+        },
+        {
+            text: gettext('VLANs'),
+            flex: 1,
+            sortable: true,
+            dataIndex: 'vlans',
+        },
+    ],
+
+    initComponent: function () {
+        let me = this;
+
+        let store = new Ext.data.Store({
+            model: 'ZoneBridge',
+            sorters: [
+                {
+                    property: 'vmid',
+                    direction: 'ASC',
+                },
+                {
+                    property: 'index',
+                    direction: 'ASC',
+                },
+            ],
+        });
+
+        Ext.apply(me, {
+            store,
+        });
+
+        me.callParent();
+    },
+
+    setPorts: function (ports) {
+        let me = this;
+        me.getStore().setData(ports);
+    },
+
+    clearPorts: function (ports) {
+        let me = this;
+        me.getStore().removeAll();
+    },
+});
-- 
2.47.3