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 <[email protected]> --- www/manager6/Makefile | 2 + www/manager6/sdn/ZoneBridgeView.js | 88 ++++++++++++++++++ www/manager6/sdn/ZoneBridgesPanel.js | 131 +++++++++++++++++++++++++++ 3 files changed, 221 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/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 _______________________________________________ pve-devel mailing list [email protected] https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
