I wonder if this panel could be integrated in zone panel (accessible from the tree).
as It's not related to the sdn configuration itself. (and don't need sdn reload) I think yhis could allow to give permissions to user to manage ips in the zone, without need to access to datacenter panel -------- Message initial -------- De: Stefan Hanreich <s.hanre...@proxmox.com> Répondre à: Proxmox VE development discussion <pve- de...@lists.proxmox.com> À: pve-devel@lists.proxmox.com Objet: [pve-devel] [PATCH v4 pve-manager 20/33] sdn: ipam: add ipam panel Date: 17/11/2023 12:39:58 Signed-off-by: Stefan Hanreich <s.hanre...@proxmox.com> --- www/css/ext6-pve.css | 22 ++- www/manager6/Makefile | 1 + www/manager6/dc/Config.js | 12 +- www/manager6/sdn/IpamEdit.js | 78 ++++++++++ www/manager6/tree/DhcpTree.js | 267 ++++++++++++++++++++++++++++++++++ 5 files changed, 372 insertions(+), 8 deletions(-) create mode 100644 www/manager6/sdn/IpamEdit.js create mode 100644 www/manager6/tree/DhcpTree.js diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css index e18b173f5..091855356 100644 --- a/www/css/ext6-pve.css +++ b/www/css/ext6-pve.css @@ -510,28 +510,38 @@ div.right-aligned { content: ' '; } -.fa-sdn:before { +.x-fa-sdn-treelist:before { width: 14px; height: 14px; position: absolute; left: 1px; top: 4px; +} + +.fa-sdn:before { background-image:url(../images/icon-sdn.svg); background-size: 14px 14px; content: ' '; } .fa-network-wired:before { - width: 14px; - height: 14px; - position: absolute; - left: 1px; - top: 4px; background-image:url(../images/icon-fa-network-wired.svg); background-size: 14px 14px; content: ' '; } +.x-fa-treepanel:before { + width: 16px; + height: 24px; + display: block; + background-repeat: no-repeat; + background-position: center; +} + +.x-tree-icon-none { + display: none; +} + .x-treelist-row-over > * > .x-treelist-item-icon, .x-treelist-row-over > * > .x-treelist-item-text{ color: #000; diff --git a/www/manager6/Makefile b/www/manager6/Makefile index 093452cd7..93b4ff155 100644 --- a/www/manager6/Makefile +++ b/www/manager6/Makefile @@ -108,6 +108,7 @@ JSSRC= \ tree/ResourceTree.js \ tree/SnapshotTree.js \ tree/ResourceMapTree.js \ + tree/DhcpTree.js \ window/Backup.js \ window/BackupConfig.js \ window/BulkAction.js \ diff --git a/www/manager6/dc/Config.js b/www/manager6/dc/Config.js index 7d01da5fb..7c2b7b168 100644 --- a/www/manager6/dc/Config.js +++ b/www/manager6/dc/Config.js @@ -185,7 +185,7 @@ Ext.define('PVE.dc.Config', { me.items.push({ xtype: 'pveSDNStatus', title: gettext('SDN'), - iconCls: 'fa fa-sdn', + iconCls: 'fa fa-sdn x-fa-sdn-treelist', hidden: true, itemId: 'sdn', expandedOnInit: true, @@ -203,7 +203,7 @@ Ext.define('PVE.dc.Config', { groups: ['sdn'], title: 'VNets', hidden: true, - iconCls: 'fa fa-network-wired', + iconCls: 'fa fa-network-wired x-fa-sdn-treelist', itemId: 'sdnvnet', }, { @@ -213,6 +213,14 @@ Ext.define('PVE.dc.Config', { hidden: true, iconCls: 'fa fa-gear', itemId: 'sdnoptions', + }, + { + xtype: 'pveDhcpTree', + groups: ['sdn'], + title: gettext('IPAM'), + hidden: true, + iconCls: 'fa fa-map-signs', + itemId: 'sdnmappings', }); } diff --git a/www/manager6/sdn/IpamEdit.js b/www/manager6/sdn/IpamEdit.js new file mode 100644 index 000000000..18e22c592 --- /dev/null +++ b/www/manager6/sdn/IpamEdit.js @@ -0,0 +1,78 @@ +Ext.define('PVE.sdn.IpamEditInputPanel', { + extend: 'Proxmox.panel.InputPanel', + mixins: ['Proxmox.Mixin.CBind'], + + isCreate: false, + + onGetValues: function(values) { + let me = this; + + if (!values.vmid) { + delete values.vmid; + } + + return values; + }, + + items: [ + { + xtype: 'pmxDisplayEditField', + name: 'vmid', + fieldLabel: gettext('VMID'), + allowBlank: false, + editable: false, + cbind: { + hidden: '{isCreate}', + }, + }, + { + xtype: 'pmxDisplayEditField', + name: 'mac', + fieldLabel: gettext('MAC'), + allowBlank: false, + cbind: { + editable: '{isCreate}', + }, + }, + { + xtype: 'proxmoxtextfield', + name: 'ip', + fieldLabel: gettext('IP'), + allowBlank: false, + }, + ], +}); + +Ext.define('PVE.sdn.IpamEdit', { + extend: 'Proxmox.window.Edit', + + subject: gettext('DHCP Mapping'), + width: 350, + + isCreate: false, + mapping: {}, + + submitUrl: function(url, values) { + return `${url}/${values.zone}/${values.vnet}/${values.mac}`; + }, + + initComponent: function() { + var me = this; + + me.method = me.isCreate ? 'POST' : 'PUT'; + + let ipanel = Ext.create('PVE.sdn.IpamEditInputPanel', { + isCreate: me.isCreate, + }); + + Ext.apply(me, { + items: [ + ipanel, + ], + }); + + me.callParent(); + + ipanel.setValues(me.mapping); + }, +}); diff --git a/www/manager6/tree/DhcpTree.js b/www/manager6/tree/DhcpTree.js new file mode 100644 index 000000000..ca279c29a --- /dev/null +++ b/www/manager6/tree/DhcpTree.js @@ -0,0 +1,267 @@ +Ext.define('PVE.sdn.DhcpTree', { + extend: 'Ext.tree.Panel', + xtype: 'pveDhcpTree', + + layout: 'fit', + rootVisible: false, + animate: false, + + store: { + sorters: ['ip', 'name'], + }, + + controller: { + xclass: 'Ext.app.ViewController', + + reload: function() { + let me = this; + + Proxmox.Utils.API2Request({ + url: `/cluster/sdn/ipam`, + method: 'GET', + success: function(response, opts) { + let root = { + name: '__root', + expanded: true, + children: [], + }; + + let zones = {}; + let vnets = {}; + let subnets = {}; + + response.result.data.forEach((element) => { + element.leaf = true; + + if (!(element.zone in zones)) { + let zone = { + name: element.zone, + type: 'zone', + iconCls: 'fa fa-th', + expanded: true, + children: [], + }; + + zones[element.zone] = zone; + root.children.push(zone); + } + + if (!(element.vnet in vnets)) { + let vnet = { + name: element.vnet, + zone: element.zone, + type: 'vnet', + iconCls: 'fa fa-network-wired x-fa- treepanel', + expanded: true, + children: [], + }; + + vnets[element.vnet] = vnet; + zones[element.zone].children.push(vnet); + } + + if (!(element.subnet in subnets)) { + let subnet = { + name: element.subnet, + zone: element.zone, + vnet: element.vnet, + type: 'subnet', + iconCls: 'x-tree-icon-none', + expanded: true, + children: [], + }; + + subnets[element.subnet] = subnet; + vnets[element.vnet].children.push(subnet); + } + + element.type = 'mapping'; + element.iconCls = 'x-tree-icon-none'; + subnets[element.subnet].children.push(element) ; + }); + + me.getView().setRootNode(root); + }, + }); + }, + + init: function(view) { + let me = this; + me.reload(); + }, + + onDelete: 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 DHCP mapping {0}'), `${data.mac} / ${data.ip}`), + buttons: Ext.Msg.YESNO, + defaultFocus: 'no', + callback: function(btn) { + if (btn !== 'yes') { + return; + } + + Proxmox.Utils.API2Request({ + url: `/cluster/sdn/ipam/${data.zone}/${data.vnet}/${data.mac}`, + method: 'DELETE', + waitMsgTarget: view, + failure: function(response, opts) { + Ext.Msg.alert(gettext('Error'), response.htmlStatus); + }, + callback: me.reload.bind(me), + }); + }, + }); + }, + + editAction: function(_grid, _rI, _cI, _item, _e, rec) { + this.edit(rec); + }, + + editDblClick: function() { + let me = this; + + let view = me.getView(); + let selection = view.getSelection(); + + if (!selection || selection.length < 1) { + return; + } + + me.edit(selection[0]); + }, + + edit: function(rec) { + let me = this; + + if (rec.data.type === 'mapping' && !rec.data.gateway) { + me.openEditWindow(rec.data); + } + }, + + openEditWindow: function(data) { + let me = this; + + Ext.create('PVE.sdn.IpamEdit', { + autoShow: true, + mapping: data, + url: `/cluster/sdn/ipam`, + extraRequestParams: { + vmid: data.vmid, + mac: data.mac, + zone: data.zone, + vnet: data.vnet, + }, + listeners: { + destroy: () => me.reload(), + }, + }); + }, + }, + + listeners: { + itemdblclick: 'editDblClick', + }, + + tbar: [ + { + xtype: 'proxmoxButton', + text: gettext('Reload'), + handler: 'reload', + }, + ], + + columns: [ + { + xtype: 'treecolumn', + text: gettext('Name / VMID'), + dataIndex: 'name', + width: 200, + renderer: function(value, meta, record) { + if (record.get('gateway')) { + return gettext('Gateway'); + } + + return record.get('name') ?? record.get('vmid') ?? ' '; + }, + }, + { + text: gettext('IP'), + dataIndex: 'ip', + width: 200, + }, + { + text: gettext('MAC'), + dataIndex: 'mac', + width: 200, + }, + { + text: gettext('Gateway'), + dataIndex: 'gateway', + width: 200, + }, + { + header: gettext('Actions'), + xtype: 'actioncolumn', + dataIndex: 'text', + width: 150, + items: [ + { + handler: function(table, rI, cI, item, e, { data }) { + let me = this; + + Ext.create('PVE.sdn.IpamEdit', { + autoShow: true, + mapping: {}, + url: `/cluster/sdn/ipam`, + isCreate: true, + extraRequestParams: { + vnet: data.name, + zone: data.zone, + }, + listeners: { + destroy: () => { + me.up('pveDhcpTree').controller.reload(); + }, + }, + }); + }, + getTip: (v, m, rec) => gettext('Add'), + getClass: (v, m, { data }) => { + if (data.type === 'vnet') { + return 'fa fa-plus-square'; + } + + return 'pmx-hidden'; + }, + }, + { + handler: 'editAction', + getTip: (v, m, rec) => gettext('Edit'), + getClass: (v, m, { data }) => { + if (data.type === 'mapping' && !data.gateway) { + return 'fa fa-pencil fa-fw'; + } + + return 'pmx-hidden'; + }, + }, + { + handler: 'onDelete', + getTip: (v, m, rec) => gettext('Delete'), + getClass: (v, m, { data }) => { + if (data.type === 'mapping' && !data.gateway) { + return 'fa critical fa-trash-o'; + } + + return 'pmx-hidden'; + }, + }, + ], + }, + ], +}); _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel