[pve-devel] [PATCH pve-manager 7/8] ui: sdn browser: add mac vrf panel

[Stefan Hanreich]

This panel shows the full state of the neighbor table of an EVPN vnet.
It is integrated into the SDN browser and only shown for EVPN zones.

Signed-off-by: Stefan Hanreich <s.hanreich at proxmox.com>
---
 www/manager6/Makefile                   |   1 +
 www/manager6/sdn/Browser.js             |   9 ++
 www/manager6/sdn/EvpnZoneMacVrfPanel.js | 130 ++++++++++++++++++++++++
 3 files changed, 140 insertions(+)
 create mode 100644 www/manager6/sdn/EvpnZoneMacVrfPanel.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 6abc77469..3f7125e1f 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -291,6 +291,7 @@ JSSRC= 							\
 	sdn/ZoneContentView.js				\
 	sdn/ZoneContentPanel.js				\
 	sdn/EvpnZoneIpVrfPanel.js	\
+	sdn/EvpnZoneMacVrfPanel.js	\
 	sdn/FirewallPanel.js				\
 	sdn/FirewallVnetView.js				\
 	sdn/ZoneView.js					\
diff --git a/www/manager6/sdn/Browser.js b/www/manager6/sdn/Browser.js
index d2e70f32a..8960caf2d 100644
--- a/www/manager6/sdn/Browser.js
+++ b/www/manager6/sdn/Browser.js
@@ -57,6 +57,15 @@ Ext.define('PVE.sdn.Browser', {
                 iconCls: 'fa fa-th-list',
                 itemId: 'ip-vrf',
             });
+
+            me.items.push({
+                nodename: nodename,
+                zone: sdnId,
+                xtype: 'pveSDNEvpnZoneMacVrfPanel',
+                title: gettext('MAC-VRFs'),
+                iconCls: 'fa fa-th-list',
+                itemId: 'mac-vrfs',
+            });
         }
 
         me.callParent();
diff --git a/www/manager6/sdn/EvpnZoneMacVrfPanel.js b/www/manager6/sdn/EvpnZoneMacVrfPanel.js
new file mode 100644
index 000000000..0984fdbdc
--- /dev/null
+++ b/www/manager6/sdn/EvpnZoneMacVrfPanel.js
@@ -0,0 +1,130 @@
+Ext.define('PVE.sdn.EvpnZoneMacVrfPanel', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.pveSDNEvpnZoneMacVrfPanel',
+
+    title: 'MAC-VRFs',
+    onlineHelp: 'pvesdn_zone_plugin_evpn',
+
+    initComponent: function () {
+        var me = this;
+        let nodename = me.nodename;
+
+        var mac_vrf_panel = Ext.createWidget('pveSDNEvpnZoneMacVrfGridPanel', {
+            title: gettext('VNet MAC-VRF'),
+            region: 'center',
+            border: false,
+        });
+
+        var vnetview_panel = Ext.createWidget('pveSDNZoneContentView', {
+            title: gettext('VNets'),
+            region: 'west',
+            sub_panel: mac_vrf_panel,
+            nodename: me.nodename,
+            zone: me.zone,
+
+            width: '50%',
+            border: false,
+            split: true,
+
+            on_select: function (_sm, rec) {
+                mac_vrf_panel.setVnet(rec.data.vnet, nodename);
+            },
+
+            on_deselect: function () {
+                mac_vrf_panel.clearVnet();
+            },
+        });
+
+        Ext.apply(me, {
+            layout: 'border',
+            items: [vnetview_panel, mac_vrf_panel],
+        });
+
+        me.callParent();
+    },
+});
+
+Ext.define('MacVrfRoute', {
+    extend: 'Ext.data.Model',
+    fields: ['ip', 'metric', 'nexthops', 'protocol'],
+});
+
+Ext.define('PVE.sdn.EvpnZoneMacVrfGridPanel', {
+    extend: 'Ext.grid.GridPanel',
+    alias: 'widget.pveSDNEvpnZoneMacVrfGridPanel',
+
+    title: gettext('MAC-VRF'),
+
+    stateful: true,
+    stateId: 'grid-sdn-mac-vrf',
+
+    columns: [
+        {
+            text: gettext('IP'),
+            flex: 1,
+            sortable: true,
+            dataIndex: 'ip',
+        },
+        {
+            text: gettext('MAC-Address'),
+            flex: 1,
+            sortable: true,
+            dataIndex: 'mac',
+        },
+        {
+            text: gettext('Nexthop'),
+            flex: 1,
+            dataIndex: 'nexthop',
+        },
+    ],
+
+    clearVnet: function () {
+        let me = this;
+
+        me.getStore().removeAll();
+    },
+
+    setVnet: function (vnet, node) {
+        let me = this;
+
+        let store = me.getStore();
+
+        store.getProxy().setUrl(`/api2/json/nodes/${node}/sdn/vnets/${vnet}/mac-vrf`);
+        store.load();
+    },
+
+    initComponent: function () {
+        let me = this;
+
+        let store = new Ext.data.Store({
+            model: 'MacVrfRoute',
+            proxy: {
+                type: 'proxmox',
+                reader: {
+                    type: 'json',
+                    rootProperty: 'data',
+                },
+            },
+            sorters: [
+                {
+                    property: 'ip',
+                    direction: 'ASC',
+                },
+                {
+                    property: 'mac',
+                    direction: 'ASC',
+                },
+                {
+                    property: 'nexthop',
+                    direction: 'ASC',
+                },
+            ],
+        });
+
+        Ext.apply(me, {
+            store,
+        });
+
+        me.callParent();
+    },
+});
-- 
2.47.3