[pve-devel] [PATCH v4 pve-manager 20/33] sdn: ipam: add ipam panel

[Stefan Hanreich <s.hanreich@proxmox.com>]

Signed-off-by: Stefan Hanreich <s.hanreich@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';
+		    },
+                },
+	    ],
+	},
+    ],
+});
-- 
2.39.2