[pve-devel] [PATCH manager v2] ui: storage: combine RBD external and hyperconverged add dialog

[Thomas Lamprecht]

Combine both dialogues. This not only helps to reuse code but also
reduces storage choices from the Storage -> Add menu, and thus
improves usability.

Signed-off-by: Thomas Lamprecht <t.lamprecht at proxmox.com>
---

changes v1 -> v2:
* do not hide the monitor or username field when choosing the
  hyperconverged variant but tell the user via an emptyText that the
  username will default to admin and the monitors will be autodetected

 www/manager6/Utils.js           |   7 +-
 www/manager6/storage/RBDEdit.js | 137 +++++++++++++++++++++-----------
 2 files changed, 92 insertions(+), 52 deletions(-)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index ad5a0a61..f9a48e14 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -434,15 +434,10 @@ Ext.define('PVE.Utils', { utilities: {
 	    faIcon: 'building'
 	},
 	rbd_ext: {
-	    name: 'RBD (external)',
+	    name: 'RBD',
 	    ipanel: 'RBDInputPanel',
 	    faIcon: 'building'
 	},
-	pveceph: {
-	    name: 'RBD (PVE)',
-	    ipanel: 'PVERBDInputPanel',
-	    faIcon: 'building'
-	},
 	zfs: {
 	    name: 'ZFS over iSCSI',
 	    ipanel: 'ZFSInputPanel',
diff --git a/www/manager6/storage/RBDEdit.js b/www/manager6/storage/RBDEdit.js
index d26a6ac3..3a0d373c 100644
--- a/www/manager6/storage/RBDEdit.js
+++ b/www/manager6/storage/RBDEdit.js
@@ -1,6 +1,37 @@
+/*jslint confusion: true*/
 Ext.define('PVE.storage.RBDInputPanel', {
     extend: 'PVE.panel.StorageBase',
 
+    viewModel: {
+	parent: null,
+	data: {
+	    pveceph: true
+	}
+    },
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+	control: {
+	    'textfield[name=username]': {
+		disable: 'resetField'
+	    },
+	    'textfield[name=monhost]': {
+		disable: 'disableMonField',
+		enable: 'enableMonField'
+	    }
+	},
+	resetField: function(field) {
+	    field.reset();
+	},
+	enableMonField: function(field) {
+	    field.setEmptyText('');
+	},
+	disableMonField: function(field) {
+	    field.reset();
+	    field.setEmptyText(field.config.emptyText);
+	}
+    },
+
     initComponent : function() {
 	var me = this;
 
@@ -9,48 +40,57 @@ Ext.define('PVE.storage.RBDInputPanel', {
 	}
 	me.type = 'rbd';
 
-	me.column1 = [];
-
-	if (me.pveceph) {
-	    me.column1.push(
-		{
-		    xtype: me.isCreate ? 'pveCephPoolSelector' : 'displayfield',
-		    nodename: me.nodename,
-		    name: 'pool',
-		    fieldLabel: gettext('Pool'),
-		    allowBlank: false
-		}
-	    );
-	} else {
-	    me.column1.push(
-		{
-		    xtype: me.isCreate ? 'textfield' : 'displayfield',
-		    name: 'pool',
-		    value: 'rbd',
-		    fieldLabel: gettext('Pool'),
-		    allowBlank: false
+	me.column1 = [
+	    {
+		xtype: me.isCreate ? 'pveCephPoolSelector' : 'displayfield',
+		nodename: me.nodename,
+		name: 'pool',
+		bind: {
+		    submitValue: '{pveceph}',
+		    disabled: '{!pveceph}',
+		    hidden: '{!pveceph}'
+		},
+		fieldLabel: gettext('Pool'),
+		allowBlank: false
+	    },
+	    {
+		xtype: me.isCreate ? 'textfield' : 'displayfield',
+		name: 'pool',
+		value: 'rbd',
+		bind: {
+		    submitValue: '{!pveceph}',
+		    disabled: '{pveceph}',
+		    hidden: '{pveceph}'
+		},
+		fieldLabel: gettext('Pool'),
+		allowBlank: false
+	    },
+	    {
+		xtype: me.isCreate ? 'textfield' : 'displayfield',
+		name: 'monhost',
+		vtype: 'HostList',
+		bind: {
+		    submitValue: '{!pveceph}',
+		    disabled: '{pveceph}'
 		},
-		{
-		    xtype: me.isCreate ? 'textfield' : 'displayfield',
-		    name: 'monhost',
-		    vtype: 'HostList',
-		    value: '',
-		    fieldLabel: 'Monitor(s)',
-		    allowBlank: false
+		value: '',
+		fieldLabel: 'Monitor(s)',
+		emptyText: gettext('Autodetected'),
+		allowBlank: false
+	    },
+	    {
+		xtype: me.isCreate ? 'textfield' : 'displayfield',
+		name: 'username',
+		bind: {
+		    submitValue: '{!pveceph}',
+		    disabled: '{pveceph}'
 		},
-		{
-		    xtype: me.isCreate ? 'textfield' : 'displayfield',
-		    name: 'username',
-		    value: me.isCreate ? 'admin': '',
-		    fieldLabel: gettext('User name'),
-		    allowBlank: true
-		}
-	    );
-	}
+		value: me.isCreate ? 'admin': '',
+		fieldLabel: gettext('User name'),
+		allowBlank: true
+	    }
+	];
 
-	// here value is an array,
-	// while before it was a string
-	/*jslint confusion: true*/
 	me.column2 = [
 	    {
 		xtype: 'pveContentTypeSelector',
@@ -68,14 +108,19 @@ Ext.define('PVE.storage.RBDInputPanel', {
 		fieldLabel: 'KRBD'
 	    }
 	];
-	/*jslint confusion: false*/
+
+	me.columnB = [{
+	    xtype: 'proxmoxcheckbox',
+	    name: 'pveceph',
+	    bind : {
+		value: '{pveceph}'
+	    },
+	    checked: true,
+	    uncheckedValue: 0,
+	    submitValue: false,
+	    boxLabel: gettext('Use Proxmox VE Hyperconverged managed ceph pool')
+	}];
 
 	me.callParent();
     }
 });
-
-Ext.define('PVE.storage.PVERBDInputPanel', {
-    extend: 'PVE.storage.RBDInputPanel',
-
-    pveceph: 1
-});
-- 
2.17.1