[pve-devel] [PATCH pve-manager 6/8] ui: sdn browser: Add ip-vrf panel for evpn zones

[Stefan Hanreich]

This panel shows the full state of the VRF of an EVPN zone on a
given node. 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            | 11 ++++
 www/manager6/sdn/EvpnZoneIpVrfPanel.js | 84 ++++++++++++++++++++++++++
 3 files changed, 96 insertions(+)
 create mode 100644 www/manager6/sdn/EvpnZoneIpVrfPanel.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index ba762578e..6abc77469 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -290,6 +290,7 @@ JSSRC= 							\
 	sdn/SubnetView.js				\
 	sdn/ZoneContentView.js				\
 	sdn/ZoneContentPanel.js				\
+	sdn/EvpnZoneIpVrfPanel.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 f7694ae91..d2e70f32a 100644
--- a/www/manager6/sdn/Browser.js
+++ b/www/manager6/sdn/Browser.js
@@ -48,6 +48,17 @@ Ext.define('PVE.sdn.Browser', {
             });
         }
 
+        if (me.pveSelNode.data.zone_type && me.pveSelNode.data.zone_type === 'evpn') {
+            me.items.push({
+                nodename: nodename,
+                zone: sdnId,
+                xtype: 'pveSDNEvpnZoneIpVrfPanel',
+                title: gettext('IP-VRF'),
+                iconCls: 'fa fa-th-list',
+                itemId: 'ip-vrf',
+            });
+        }
+
         me.callParent();
     },
 });
diff --git a/www/manager6/sdn/EvpnZoneIpVrfPanel.js b/www/manager6/sdn/EvpnZoneIpVrfPanel.js
new file mode 100644
index 000000000..2b9ded537
--- /dev/null
+++ b/www/manager6/sdn/EvpnZoneIpVrfPanel.js
@@ -0,0 +1,84 @@
+Ext.define('IpVrfRoute', {
+    extend: 'Ext.data.Model',
+    fields: ['ip', 'metric', 'nexthops', 'protocol'],
+});
+
+Ext.define('PVE.sdn.EvpnZoneIpVrfPanel', {
+    extend: 'Ext.grid.GridPanel',
+    alias: 'widget.pveSDNEvpnZoneIpVrfPanel',
+
+    title: gettext('IP-VRF'),
+    onlineHelp: 'pvesdn_zone_plugin_evpn',
+
+    stateful: true,
+    stateId: 'grid-sdn-ip-vrf',
+
+    columns: [
+        {
+            text: gettext('CIDR'),
+            flex: 2,
+            sortable: true,
+            dataIndex: 'ip',
+        },
+        {
+            text: gettext('Nexthop'),
+            flex: 3,
+            dataIndex: 'nexthops',
+            renderer: (value) => {
+                if (Ext.isArray(value)) {
+                    return value.join('<br>');
+                }
+                return value || '';
+            },
+        },
+        {
+            text: gettext('Protocol'),
+            flex: 1,
+            sortable: true,
+            dataIndex: 'protocol',
+        },
+        {
+            text: gettext('Metric'),
+            flex: 1,
+            sortable: true,
+            dataIndex: 'metric',
+        },
+    ],
+
+    initComponent: function () {
+        let me = this;
+
+        let store = new Ext.data.Store({
+            model: 'IpVrfRoute',
+            proxy: {
+                type: 'proxmox',
+                url: `/api2/json/nodes/${me.nodename}/sdn/zones/${me.zone}/ip-vrf`,
+                reader: {
+                    type: 'json',
+                    rootProperty: 'data',
+                },
+            },
+            sorters: [
+                {
+                    property: 'ip',
+                    direction: 'ASC',
+                },
+                {
+                    property: 'nexthop',
+                    direction: 'ASC',
+                },
+                {
+                    property: 'metric',
+                    direction: 'ASC',
+                },
+            ],
+            autoLoad: true,
+        });
+
+        Ext.apply(me, {
+            store,
+        });
+
+        me.callParent();
+    },
+});
-- 
2.47.3