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

[Thomas Lamprecht]

We have a growing list of storages we can add. RBD and the upcoming
CephFS have additionally the difference between hyperconverged PVE
managed and external managed one. This makes the list quite long and
not very user friendly.

This proposes to combine the both dialogues in a single one, with a
checkbox allowing the user what he wants to add (external or PVE)

I implemented this quite quick but initial test look OK, I'd also
have a followup for Alwins manager series adding CephFS, which would
do the same there, ready.

gettext and other minor details are up to discussion, I chose the
first thing which came into my mind.

Signed-off-by: Thomas Lamprecht <t.lamprecht at proxmox.com>
---
 www/manager6/Utils.js           |   7 +-
 www/manager6/storage/RBDEdit.js | 110 +++++++++++++++++++-------------
 2 files changed, 65 insertions(+), 52 deletions(-)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index f41a9562..ee1f6faf 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -444,15 +444,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..102ac5e0 100644
--- a/www/manager6/storage/RBDEdit.js
+++ b/www/manager6/storage/RBDEdit.js
@@ -1,6 +1,14 @@
+/*jslint confusion: true*/
 Ext.define('PVE.storage.RBDInputPanel', {
     extend: 'PVE.panel.StorageBase',
 
+    viewModel: {
+	parent: null,
+	data: {
+	    pveceph: true
+	}
+    },
+
     initComponent : function() {
 	var me = this;
 
@@ -9,48 +17,53 @@ 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}'
 		},
-		{
-		    xtype: me.isCreate ? 'textfield' : 'displayfield',
-		    name: 'monhost',
-		    vtype: 'HostList',
-		    value: '',
-		    fieldLabel: 'Monitor(s)',
-		    allowBlank: false
+		fieldLabel: gettext('Pool'),
+		allowBlank: false
+	    },
+	    {
+		xtype: me.isCreate ? 'textfield' : 'displayfield',
+		name: 'monhost',
+		vtype: 'HostList',
+		bind: {
+		    submitValue: '{!pveceph}',
+		    disabled: '{pveceph}',
+		    hidden: '{pveceph}'
 		},
-		{
-		    xtype: me.isCreate ? 'textfield' : 'displayfield',
-		    name: 'username',
-		    value: me.isCreate ? 'admin': '',
-		    fieldLabel: gettext('User name'),
-		    allowBlank: true
-		}
-	    );
-	}
+		value: '',
+		fieldLabel: 'Monitor(s)',
+		allowBlank: false
+	    },
+	    {
+		xtype: me.isCreate ? 'textfield' : 'displayfield',
+		name: 'username',
+		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 +81,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