[pve-devel] [PATCH pve-manager v2 09/11] fabrics: Add main FabricView

[Gabriel Goller <g.goller@proxmox.com>]

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.goller@proxmox.com>
Co-authored-by: Stefan Hanreich <s.hanreich@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