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 | 430 ++++++++++++++++++++++++++++++++
 3 files changed, 439 insertions(+)
 create mode 100644 www/manager6/sdn/FabricsView.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 7ed2839d9557..224b6079e833 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/openfabric/FabricEdit.js            \
        sdn/fabrics/openfabric/NodeEdit.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..0ef12defb1a8
--- /dev/null
+++ b/www/manager6/sdn/FabricsView.js
@@ -0,0 +1,430 @@
+const FABRIC_PANELS = {
+    'openfabric': 'PVE.sdn.Fabric.OpenFabric.Fabric.Edit',
+    'ospf': 'PVE.sdn.Fabric.Ospf.Fabric.Edit',
+};
+
+const NODE_PANELS = {
+    'openfabric': 'PVE.sdn.Fabric.OpenFabric.Node.Edit',
+    'ospf': 'PVE.sdn.Fabric.Ospf.Node.Edit',
+};
+
+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: 'name',
+           width: 200,
+           renderer: function(value, metaData, rec) {
+               return PVE.Utils.render_sdn_pending(rec, value, 'name');
+           },
+       },
+       {
+           text: gettext('Protocol'),
+           dataIndex: 'protocol',
+           width: 100,
+           renderer: function(value, metaData, rec) {
+               if (rec.data.type !== 'fabric') {
+                   return "";
+               }
+
+               return PVE.Utils.render_sdn_pending(rec, 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');
+           },
+       },
+       {
+           text: gettext('Action'),
+           xtype: 'actioncolumn',
+           dataIndex: 'text',
+           width: 100,
+           items: [
+               {
+                   handler: 'addActionTreeColumn',
+                   getTip: (_v, _m, _rec) => gettext('Add'),
+                   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) {
+                           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) {
+                           return 'fa critical fa-trash-o';
+                       }
+
+                       return 'pmx-hidden';
+                   },
+                   isActionDisabled: (_v, _r, _c, _i, { data }) => !data.type,
+               },
+           ],
+       },
+       {
+           header: gettext('Interfaces'),
+           width: 100,
+           dataIndex: 'interface',
+           renderer: function(value, metaData, rec) {
+               let interfaces = rec.data.pending?.interface || 
rec.data.interface || [];
+
+               let names = interfaces.map((iface) => {
+                   let properties = Proxmox.Utils.parsePropertyString(iface);
+                   return properties.name;
+               });
+
+               names.sort();
+               return names.join(", ");
+           },
+       },
+       {
+           header: gettext('State'),
+           width: 100,
+           dataIndex: 'state',
+           renderer: function(value, metaData, rec) {
+               return PVE.Utils.render_sdn_pending_state(rec, value);
+           },
+       },
+    ],
+
+    store: {
+       sorters: ['name'],
+    },
+
+    layout: 'fit',
+    rootVisible: false,
+    animate: false,
+
+
+    initComponent: function() {
+       let me = this;
+
+
+       let add_button = new Proxmox.button.Button({
+           text: gettext('Add Node'),
+           handler: 'addActionTbar',
+           disabled: true,
+       });
+
+       let set_add_button_status = function() {
+           let selection = me.view.getSelection();
+
+           if (selection.length === 0) {
+               return;
+           }
+
+           add_button.setDisabled(selection[0].data.type !== 'fabric');
+       };
+
+       Ext.apply(me, {
+           tbar: [
+               {
+                   text: gettext('Add Fabric'),
+                   menu: [
+                       {
+                           text: gettext('OpenFabric'),
+                           handler: 'openAddOpenFabricWindow',
+                       },
+                       {
+                           text: gettext('OSPF'),
+                           handler: 'openAddOspfWindow',
+                       },
+                   ],
+               },
+               add_button,
+               {
+                   xtype: 'proxmoxButton',
+                   text: gettext('Reload'),
+                   handler: 'reload',
+               },
+           ],
+           listeners: {
+               selectionchange: set_add_button_status,
+           },
+       });
+
+       me.callParent();
+    },
+
+    controller: {
+       xclass: 'Ext.app.ViewController',
+
+       reload: function() {
+           let me = this;
+
+           Proxmox.Utils.API2Request({
+               url: `/cluster/sdn/fabrics/?pending=1`,
+               method: 'GET',
+               success: function(response, opts) {
+                   let ospf = response.result.data.ospf;
+                   let openfabric = response.result.data.openfabric;
+
+                   // add some metadata so we can merge the objects later and 
still know the protocol/type
+                   ospf = ospf.map(x => {
+                       if (x.state && x.state === 'new') {
+                           Object.assign(x, x.pending);
+                       }
+
+                       if (x.ty === 'fabric') {
+                           return Object.assign(x, { protocol: "ospf", name: 
x.area });
+                       } else if (x.ty === 'node') {
+                           let id = x.node_id.split("_");
+                           return Object.assign(x,
+                               {
+                                   protocol: "ospf",
+                                   node: id[1],
+                                   fabric: id[0],
+                               },
+                           );
+                       } else {
+                           return x;
+                       }
+                   });
+                   openfabric = openfabric.map(x => {
+                       if (x.state && x.state === 'new') {
+                           Object.assign(x, x.pending);
+                       }
+
+                       if (x.ty === 'fabric') {
+                           return Object.assign(x, { protocol: "openfabric", 
name: x.fabric_id });
+                       } else if (x.ty === 'node') {
+                           let id = x.node_id.split("_");
+                           return Object.assign(x,
+                               {
+                                   protocol: "openfabric",
+                                   node: id[1],
+                                   fabric: id[0],
+                               },
+                           );
+                       } else {
+                           return x;
+                       }
+                   });
+
+                   let allFabrics = openfabric.concat(ospf);
+                   let fabrics = allFabrics.filter(e => e.ty === 
"fabric").map((fabric) => {
+                       if (!fabric.state || fabric.state !== 'deleted') {
+                           fabric.children = allFabrics.filter(e => e.ty === 
"node")
+                               .filter((node) =>
+                                   node.fabric === fabric.name && 
node.protocol === fabric.protocol)
+                                       .map((node) => {
+                                           Object.assign(node, {
+                                               leaf: true,
+                                               type: 'node',
+                                               iconCls: 'fa fa-desktop 
x-fa-treepanel',
+                                               name: node.node,
+                                               _fabric: fabric.name,
+                                           });
+
+                                           return node;
+                                       });
+                       }
+
+                       Object.assign(fabric, {
+                           type: 'fabric',
+                           protocol: fabric.protocol,
+                           expanded: true,
+                           name: fabric.fabric_id || fabric.area,
+                           iconCls: 'fa fa-road x-fa-treepanel',
+                       });
+
+                       return fabric;
+                   });
+
+                   me.getView().setRootNode({
+                       name: '__root',
+                       expanded: true,
+                       children: fabrics,
+                   });
+               },
+           });
+       },
+
+       getFabricEditPanel: function(type) {
+           return FABRIC_PANELS[type];
+       },
+
+       getNodeEditPanel: function(type) {
+           return NODE_PANELS[type];
+       },
+
+       addActionTreeColumn: function(_grid, _rI, _cI, _item, _e, rec) {
+           let me = this;
+           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 = me.getNodeEditPanel(rec.data.protocol);
+
+           if (!component) {
+               console.warn(`unknown protocol ${rec.data.protocol}`);
+               return;
+           }
+
+           let extraRequestParams = {
+               fabric: rec.data.name,
+           };
+
+           let window = Ext.create(component, {
+               autoShow: true,
+               isCreate: true,
+               autoLoad: false,
+               extraRequestParams,
+           });
+
+           window.on('destroy', () => me.reload());
+       },
+
+       editAction: function(_grid, _rI, _cI, _item, _e, rec) {
+           let me = this;
+
+           let component = '';
+           let url = '';
+           let autoLoad = true;
+
+           if (rec.data.type === 'fabric') {
+               component = me.getFabricEditPanel(rec.data.protocol);
+               url = 
`/cluster/sdn/fabrics/${rec.data.protocol}/${rec.data.name}`;
+           } else if (rec.data.type === 'node') {
+               component = me.getNodeEditPanel(rec.data.protocol);
+               // no url, every request is done manually
+               url = 
`/cluster/sdn/fabrics/${rec.data.protocol}/${rec.data._fabric}/node/${rec.data.node}`;
+               autoLoad = false;
+           }
+
+           if (!component) {
+               console.warn(`unknown protocol ${rec.data.protocol} or unknown 
type ${rec.data.type}`);
+               return;
+           }
+
+           let window = Ext.create(component, {
+               autoShow: true,
+               autoLoad: autoLoad,
+               isCreate: false,
+               submitUrl: url,
+               loadUrl: url,
+               fabric: rec.data._fabric,
+               node: rec.data.node,
+           });
+
+           window.on('destroy', () => me.reload());
+       },
+
+       deleteAction: function(table, rI, cI, item, e, { data }) {
+           let me = this;
+           let view = me.getView();
+
+           Ext.Msg.show({
+               title: gettext('Confirm'),
+               icon: Ext.Msg.WARNING,
+               message: Ext.String.format(gettext('Are you sure you want to 
remove the fabric {0}?'), `${data.name}`),
+               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}/node/${data.name}`;
+                   } else if (data.type === "fabric") {
+                       url = 
`/cluster/sdn/fabrics/${data.protocol}/${data.name}`;
+                   } else {
+                       console.warn("deleteAction: missing type");
+                   }
+
+                   Proxmox.Utils.API2Request({
+                       url,
+                       method: 'DELETE',
+                       waitMsgTarget: view,
+                       failure: function(response, opts) {
+                           Ext.Msg.alert(gettext('Error'), 
response.htmlStatus);
+                       },
+                       callback: me.reload.bind(me),
+                   });
+               },
+           });
+       },
+
+       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