[pve-devel] [PATCH pve-manager 4/7] fabrics: add FabricEdit components

[Gabriel Goller]

Add FabricEdit components for openfabric and ospf. These are used to
create and edit fabrics. When editing, everything is disabled except the
hello_interval property, mostly because making the area/router_id and
the loopback_prefix editable would be kinda hard (i.e. we'd need to
force the user to delete the fabrics, or revalidate stuff).

Signed-off-by: Gabriel Goller <g.goller at proxmox.com>
Co-authored-by: Stefan Hanreich <s.hanreich at proxmox.com>
---
 www/manager6/Makefile                         |  2 +
 .../sdn/fabrics/openfabric/FabricEdit.js      | 71 +++++++++++++++++++
 www/manager6/sdn/fabrics/ospf/FabricEdit.js   | 64 +++++++++++++++++
 3 files changed, 137 insertions(+)
 create mode 100644 www/manager6/sdn/fabrics/openfabric/FabricEdit.js
 create mode 100644 www/manager6/sdn/fabrics/ospf/FabricEdit.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index b75a455d70e6..04f00b270fba 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -304,7 +304,9 @@ JSSRC= 							\
 	sdn/zones/VlanEdit.js				\
 	sdn/zones/VxlanEdit.js				\
 	sdn/fabrics/Common.js				\
+	sdn/fabrics/openfabric/FabricEdit.js		\
 	sdn/fabrics/openfabric/InterfaceEdit.js		\
+	sdn/fabrics/ospf/FabricEdit.js			\
 	sdn/fabrics/ospf/InterfaceEdit.js		\
 	storage/ContentView.js				\
 	storage/BackupView.js				\
diff --git a/www/manager6/sdn/fabrics/openfabric/FabricEdit.js b/www/manager6/sdn/fabrics/openfabric/FabricEdit.js
new file mode 100644
index 000000000000..672adf45581f
--- /dev/null
+++ b/www/manager6/sdn/fabrics/openfabric/FabricEdit.js
@@ -0,0 +1,71 @@
+Ext.define('PVE.sdn.Fabric.OpenFabric.Fabric.Edit', {
+    extend: 'Proxmox.window.Edit',
+    xtype: 'pveSDNOpenFabricRouteEdit',
+
+    subject: gettext('Add OpenFabric'),
+
+    onlineHelp: 'pvesdn_openfabric_fabric',
+
+    url: '/cluster/sdn/fabrics/openfabric',
+
+    isCreate: undefined,
+
+    viewModel: {
+	data: {
+	    isCreate: true,
+	},
+    },
+
+    items: [
+	{
+	    xtype: 'textfield',
+	    fieldLabel: gettext('Name'),
+	    labelWidth: 120,
+	    name: 'fabric_id',
+	    allowBlank: false,
+	    bind: {
+		disabled: '{!isCreate}',
+	    },
+	},
+	{
+	    xtype: 'textfield',
+	    fieldLabel: gettext('Loopback IP Prefix'),
+	    labelWidth: 120,
+	    name: 'loopback_prefix',
+	    allowBlank: false,
+	    bind: {
+		disabled: '{!isCreate}',
+	    },
+	},
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Hello Interval'),
+	    labelWidth: 120,
+	    name: 'hello_interval',
+	    allowBlank: true,
+	},
+    ],
+
+    submitUrl: function(url, values) {
+	let me = this;
+	return `${me.url}`;
+    },
+
+    initComponent: function() {
+	let me = this;
+
+	let view = me.getViewModel();
+	view.set('isCreate', me.isCreate);
+
+	me.method = me.isCreate ? 'POST' : 'PUT';
+	me.callParent();
+
+	if (!me.isCreate) {
+	    me.load({
+		success: function(response, opts) {
+		    me.setValues(response.result.data);
+		},
+	    });
+	}
+    },
+});
diff --git a/www/manager6/sdn/fabrics/ospf/FabricEdit.js b/www/manager6/sdn/fabrics/ospf/FabricEdit.js
new file mode 100644
index 000000000000..a229e688c9e6
--- /dev/null
+++ b/www/manager6/sdn/fabrics/ospf/FabricEdit.js
@@ -0,0 +1,64 @@
+Ext.define('PVE.sdn.Fabric.Ospf.Fabric.Edit', {
+    extend: 'Proxmox.window.Edit',
+    xtype: 'pveSDNOpenFabricRouteEdit',
+
+    subject: gettext('Add OSPF'),
+
+    onlineHelp: 'pvesdn_ospf_fabric',
+
+    url: '/cluster/sdn/fabrics/ospf',
+
+    isCreate: undefined,
+
+    viewModel: {
+	data: {
+	    isCreate: true,
+	},
+    },
+
+    items: [
+	{
+	    xtype: 'textfield',
+	    fieldLabel: gettext('Area'),
+	    labelWidth: 120,
+	    name: 'area',
+	    allowBlank: false,
+	    bind: {
+		disabled: '{!isCreate}',
+	    },
+	},
+	{
+	    xtype: 'textfield',
+	    fieldLabel: gettext('Loopback IP Prefix'),
+	    labelWidth: 120,
+	    name: 'loopback_prefix',
+	    allowBlank: false,
+	    bind: {
+		disabled: '{!isCreate}',
+	    },
+	},
+    ],
+
+    submitUrl: function(url, values) {
+	let me = this;
+	return `${me.url}`;
+    },
+
+    initComponent: function() {
+	let me = this;
+
+	let view = me.getViewModel();
+	view.set('isCreate', me.isCreate);
+
+	me.method = me.isCreate ? 'POST' : 'PUT';
+
+	me.callParent();
+	if (!me.isCreate) {
+	    me.load({
+		success: function(response, opts) {
+		    me.setValues(response.result.data);
+		},
+	    });
+	}
+    },
+});
-- 
2.39.5