From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <pve-devel-bounces@lists.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
by lore.proxmox.com (Postfix) with ESMTPS id C26601FF15C
for <inbox@lore.proxmox.com>; Fri, 4 Apr 2025 18:34:08 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 61761807;
Fri, 4 Apr 2025 18:30:23 +0200 (CEST)
From: Gabriel Goller <g.goller@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Fri, 4 Apr 2025 18:29:04 +0200
Message-Id: <20250404162908.563060-54-g.goller@proxmox.com>
X-Mailer: git-send-email 2.39.5
In-Reply-To: <20250404162908.563060-1-g.goller@proxmox.com>
References: <20250404162908.563060-1-g.goller@proxmox.com>
MIME-Version: 1.0
X-SPAM-LEVEL: Spam detection results: 0
AWL -0.022 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
DMARC_MISSING 0.1 Missing DMARC policy
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
Subject: [pve-devel] [PATCH pve-manager v2 09/11] fabrics: Add main
FabricView
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
Reply-To: Proxmox VE development discussion <pve-devel@lists.proxmox.com>
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Errors-To: pve-devel-bounces@lists.proxmox.com
Sender: "pve-devel" <pve-devel-bounces@lists.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