TreeView that shows all the fabrics and nodes in a hierarchical
structure. It also shows all the pending changes from the
running-config.

We decided against including all the interfaces (as children of nodes)
because otherwise the indentation would be too much. So to keep it
simple, we removed the interface entries and also moved the protocol to
the column (instead of having two root nodes for each protocol).

Signed-off-by: Gabriel Goller <g.gol...@proxmox.com>
Co-authored-by: Stefan Hanreich <s.hanre...@proxmox.com>
---
 www/manager6/Makefile           |   1 +
 www/manager6/dc/Config.js       |   8 +
 www/manager6/sdn/FabricsView.js | 419 ++++++++++++++++++++++++++++++++
 3 files changed, 428 insertions(+)
 create mode 100644 www/manager6/sdn/FabricsView.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 39abd8292044..a959860fe73a 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -303,6 +303,7 @@ JSSRC=                                                      
\
        sdn/zones/SimpleEdit.js                         \
        sdn/zones/VlanEdit.js                           \
        sdn/zones/VxlanEdit.js                          \
+       sdn/FabricsView.js                              \
        sdn/fabrics/Common.js                           \
        sdn/fabrics/NodeEdit.js                         \
        sdn/fabrics/FabricEdit.js                               \
diff --git a/www/manager6/dc/Config.js b/www/manager6/dc/Config.js
index 74728c8320e9..68f7be8d6042 100644
--- a/www/manager6/dc/Config.js
+++ b/www/manager6/dc/Config.js
@@ -229,6 +229,14 @@ Ext.define('PVE.dc.Config', {
                    hidden: true,
                    iconCls: 'fa fa-shield',
                    itemId: 'sdnfirewall',
+               },
+               {
+                   xtype: 'pveSDNFabricView',
+                   groups: ['sdn'],
+                   title: gettext('Fabrics'),
+                   hidden: true,
+                   iconCls: 'fa fa-road',
+                   itemId: 'sdnfabrics',
                });
            }
 
diff --git a/www/manager6/sdn/FabricsView.js b/www/manager6/sdn/FabricsView.js
new file mode 100644
index 000000000000..f0faa709264e
--- /dev/null
+++ b/www/manager6/sdn/FabricsView.js
@@ -0,0 +1,419 @@
+Ext.define('PVE.sdn.Fabric.TreeModel', {
+    extend: 'Ext.data.TreeModel',
+    idProperty: 'tree_id',
+});
+
+Ext.define('PVE.sdn.Fabric.View', {
+    extend: 'Ext.tree.Panel',
+
+    xtype: 'pveSDNFabricView',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    onlineHelp: 'pvesdn_config_fabrics',
+
+    columns: [
+       {
+           xtype: 'treecolumn',
+           text: gettext('Name'),
+           dataIndex: 'node_id',
+           width: 200,
+           renderer: function(value, metaData, rec) {
+               if (rec.data.type === 'fabric') {
+                   return rec.data.fabric_id;
+               }
+
+               return PVE.Utils.render_sdn_pending(rec, value, 'node_id');
+           },
+       },
+       {
+           text: gettext('Protocol'),
+           dataIndex: 'protocol',
+           width: 100,
+           renderer: function(value, metaData, rec) {
+               if (rec.data.type !== 'fabric') {
+                   return "";
+               }
+
+               const PROTOCOL_DISPLAY_NAMES = {
+                   'openfabric': 'OpenFabric',
+                   'ospf': 'OSPF',
+               };
+
+               return PVE.Utils.render_sdn_pending(rec, 
PROTOCOL_DISPLAY_NAMES[value], 'protocol');
+           },
+       },
+       {
+           text: gettext('Loopback IP'),
+           dataIndex: 'router_id',
+           width: 150,
+           renderer: function(value, metaData, rec) {
+               if (rec.data.type === 'fabric') {
+                   return PVE.Utils.render_sdn_pending(rec, 
rec.data.loopback_prefix, 'loopback_prefix');
+               }
+
+               return PVE.Utils.render_sdn_pending(rec, value, 'router_id');
+           },
+       },
+       {
+           header: gettext('Interfaces'),
+           width: 100,
+           dataIndex: 'interface',
+           renderer: function(value, metaData, rec) {
+               const interfaces = rec.data.pending?.interfaces || 
rec.data.interfaces || [];
+
+               let names = interfaces.map((iface) => {
+                   const properties = Proxmox.Utils.parsePropertyString(iface);
+                   return properties.name;
+               });
+
+               names.sort();
+               return Ext.htmlEncode(names.join(", "));
+           },
+       },
+       {
+           text: gettext('Action'),
+           xtype: 'actioncolumn',
+           dataIndex: 'text',
+           width: 100,
+           items: [
+               {
+                   handler: 'addActionTreeColumn',
+                   getTip: (_v, _m, _rec) => gettext('Add Node'),
+                   getClass: (_v, _m, { data }) => {
+                       if (data.type === 'fabric') {
+                           return 'fa fa-plus-circle';
+                       }
+
+                       return 'pmx-hidden';
+                   },
+                   isActionDisabled: (_v, _r, _c, _i, { data }) => data.type 
!== 'fabric',
+               },
+               {
+                   tooltip: gettext('Edit'),
+                   handler: 'editAction',
+                   getClass: (_v, _m, { data }) => {
+                       // the fabric type (openfabric, ospf, etc.) cannot be 
edited
+                       if (data.type && data.state !== 'deleted') {
+                           return 'fa fa-pencil fa-fw';
+                       }
+
+                       return 'pmx-hidden';
+                   },
+                   isActionDisabled: (_v, _r, _c, _i, { data }) => !data.type,
+               },
+               {
+                   tooltip: gettext('Delete'),
+                   handler: 'deleteAction',
+                   getClass: (_v, _m, { data }) => {
+                       // the fabric type (openfabric, ospf, etc.) cannot be 
deleted
+                       if (data.type && data.state !== 'deleted') {
+                           return 'fa critical fa-trash-o';
+                       }
+
+                       return 'pmx-hidden';
+                   },
+                   isActionDisabled: (_v, _r, _c, _i, { data }) => !data.type,
+               },
+           ],
+       },
+       {
+           header: gettext('State'),
+           width: 100,
+           dataIndex: 'state',
+           renderer: function(value, metaData, rec) {
+               return PVE.Utils.render_sdn_pending_state(rec, value);
+           },
+       },
+    ],
+
+    store: {
+       sorters: ['name'],
+       model: 'PVE.sdn.Fabric.TreeModel',
+    },
+
+    layout: 'fit',
+    rootVisible: false,
+    animate: false,
+
+    initComponent: function() {
+       let me = this;
+
+       let addButton = new Proxmox.button.Button({
+           text: gettext('Add Node'),
+           handler: 'addActionTbar',
+           disabled: true,
+       });
+
+       let setAddButtonStatus = function() {
+           let selection = me.view.getSelection();
+
+           if (selection.length === 0) {
+               return;
+           }
+
+           addButton.setDisabled(selection[0].data.type !== 'fabric');
+       };
+
+       Ext.apply(me, {
+           tbar: [
+               {
+                   text: gettext('Add Fabric'),
+                   menu: [
+                       {
+                           text: 'OpenFabric',
+                           handler: 'openAddOpenFabricWindow',
+                       },
+                       {
+                           text: 'OSPF',
+                           handler: 'openAddOspfWindow',
+                       },
+                   ],
+               },
+               addButton,
+               {
+                   xtype: 'proxmoxButton',
+                   text: gettext('Reload'),
+                   handler: 'reload',
+               },
+           ],
+           listeners: {
+               selectionchange: setAddButtonStatus,
+           },
+       });
+
+       me.callParent();
+    },
+
+    controller: {
+       xclass: 'Ext.app.ViewController',
+
+       mapTree: function(allFabrics) {
+           return allFabrics.filter(e => e.type === "fabric").map((fabric) => {
+               if (!fabric.state || fabric.state !== 'deleted') {
+                   fabric.children = allFabrics.filter(e => e.type === "node")
+                       .filter((node) =>
+                           node.fabric_id === fabric.fabric_id && 
node.protocol === fabric.protocol)
+                               .map((node) => {
+                                   Object.assign(node, {
+                                       leaf: true,
+                                       iconCls: 'fa fa-desktop x-fa-treepanel',
+                                       tree_id: 
`${fabric.protocol}_${node.id}`,
+                                   });
+
+                                   return node;
+                               });
+               }
+
+               Object.assign(fabric, {
+                   expanded: true,
+                   iconCls: 'fa fa-road x-fa-treepanel',
+                   tree_id: `${fabric.protocol}_${fabric.fabric_id}`,
+               });
+
+               return fabric;
+           });
+       },
+
+       formatResult: function(entity, protocol) {
+           if (entity.state && entity.state === "new") {
+               Object.assign(entity, entity.pending);
+           }
+
+           entity.protocol = protocol;
+
+           return entity;
+       },
+
+       reload: function() {
+           let me = this;
+
+           Proxmox.Utils.API2Request({
+               url: `/cluster/sdn/fabrics/all?pending=1`,
+               method: 'GET',
+               success: function(response, opts) {
+                   let allFabrics = [];
+
+                   if (response.result.data.ospf) {
+                       let data = response.result.data.ospf.map((entry) => 
me.formatResult(entry, "ospf"));
+                       allFabrics = allFabrics.concat(data);
+                   }
+
+                   if (response.result.data.openfabric) {
+                       let data = response.result.data.openfabric.map((entry) 
=> me.formatResult(entry, "openfabric"));
+                       allFabrics = allFabrics.concat(data);
+                   }
+
+                   me.getView().setRootNode({
+                       name: '__root',
+                       expanded: true,
+                       children: me.mapTree(allFabrics),
+                   });
+               },
+           });
+       },
+
+       getFabricEditPanel: function(type) {
+           const FABRIC_PANELS = {
+               'openfabric': 'PVE.sdn.Fabric.OpenFabric.Fabric.Edit',
+               'ospf': 'PVE.sdn.Fabric.Ospf.Fabric.Edit',
+           };
+
+           return FABRIC_PANELS[type];
+       },
+
+       addActionTreeColumn: function(_grid, _rI, _cI, _item, _e, rec) {
+           this.addAction(rec);
+       },
+
+       addActionTbar: function() {
+           let me = this;
+
+           let selection = me.view.getSelection();
+
+           if (selection.length === 0) {
+               return;
+           }
+
+           if (selection[0].data.type === 'fabric') {
+               me.addAction(selection[0]);
+           }
+       },
+
+       addAction: function(rec) {
+           let me = this;
+
+           let component = 'PVE.sdn.Fabric.Node.Edit';
+
+           let extraRequestParams = {
+               fabric: rec.data.fabric_id,
+           };
+
+           let configuredNodes = rec.data.children
+               .filter(node => node.state !== 'deleted')
+               .map(node => node.node_id);
+
+           let window = Ext.create(component, {
+               autoShow: true,
+               isCreate: true,
+               autoLoad: false,
+               protocol: rec.data.protocol,
+               extraRequestParams,
+               alreadyConfiguredNodes: configuredNodes,
+           });
+
+           window.on('destroy', () => me.reload());
+       },
+
+       editAction: function(_grid, _rI, _cI, _item, _e, rec) {
+           let me = this;
+
+           let component = '';
+           let url = '';
+           let autoLoad = false;
+           let data = rec.data;
+
+           if (data.type === 'fabric') {
+               component = me.getFabricEditPanel(data.protocol);
+               url = `/cluster/sdn/fabrics/${data.protocol}/${data.fabric_id}`;
+           } else if (data.type === 'node') {
+               component = 'PVE.sdn.Fabric.Node.Edit';
+               url = 
`/cluster/sdn/fabrics/${data.protocol}/${data.fabric_id}/node/${data.node_id}`;
+           }
+
+           if (!component) {
+               console.warn(`unknown protocol ${data.protocol} or unknown type 
${data.type}`);
+               return;
+           }
+
+           let window = Ext.create(component, {
+               autoShow: true,
+               autoLoad: autoLoad,
+               isCreate: false,
+               submitUrl: url,
+               loadUrl: url,
+               fabric: data.fabric_id,
+               protocol: data.protocol,
+               node: data.node_id,
+           });
+
+           window.on('destroy', () => me.reload());
+       },
+
+       deleteAction: function(table, rI, cI, item, e, { data }) {
+           let me = this;
+           let view = me.getView();
+
+           let message = '';
+           if (data.type === "fabric") {
+               message = Ext.String.format(gettext('Are you sure you want to 
remove the fabric "{0}"?'), data.fabric_id);
+           } else if (data.type === "node") {
+               message = Ext.String.format(gettext('Are you sure you want to 
remove the node "{0}" from the fabric "{1}"?'), data.node_id, data.fabric_id);
+           } else {
+               console.warn("deleteAction: missing type");
+               return;
+           }
+
+
+           Ext.Msg.show({
+               title: gettext('Confirm'),
+               icon: Ext.Msg.WARNING,
+               message: Ext.htmlEncode(message),
+               buttons: Ext.Msg.YESNO,
+               defaultFocus: 'no',
+               callback: function(btn) {
+                   if (btn !== 'yes') {
+                       return;
+                   }
+
+                   let url;
+                   if (data.type === "node") {
+                       url = 
`/cluster/sdn/fabrics/${data.protocol}/${data.fabric_id}/node/${data.node_id}`;
+                   } else if (data.type === "fabric") {
+                       url = 
`/cluster/sdn/fabrics/${data.protocol}/${data.fabric_id}`;
+                   } else {
+                       console.warn("deleteAction: missing type");
+                   }
+
+                   Proxmox.Utils.API2Request({
+                       url,
+                       method: 'DELETE',
+                       waitMsgTarget: view,
+                       failure: function(response, opts) {
+                           Ext.Msg.alert(Proxmox.Utils.errorText, 
response.htmlStatus);
+                       },
+                       callback: () => me.reload(),
+                   });
+               },
+           });
+       },
+
+       openAddOpenFabricWindow: function() {
+           let me = this;
+
+           let window = Ext.create('PVE.sdn.Fabric.OpenFabric.Fabric.Edit', {
+               autoShow: true,
+               autoLoad: false,
+               isCreate: true,
+           });
+
+           window.on('destroy', () => me.reload());
+       },
+
+       openAddOspfWindow: function() {
+           let me = this;
+
+           let window = Ext.create('PVE.sdn.Fabric.Ospf.Fabric.Edit', {
+               autoShow: true,
+               autoLoad: false,
+               isCreate: true,
+           });
+
+           window.on('destroy', () => me.reload());
+       },
+
+       init: function(view) {
+           let me = this;
+           me.reload();
+       },
+    },
+});
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

Reply via email to