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

[Dominik Csapak]

great :), i like this one much better

some problems though (sorry for not catching them earlier)

the checkbox should probably not be there when editing an existing storage
when editing a 'non-pve' ceph storage, it spits out the error:

Uncaught TypeError: this[c._config.names.set] is not a function

and subsequently breaks the gui

also you cannot edit a 'pve' ceph storage, it fails in the console with 
the error:

Uncaught no editor registered for storage type: pveceph


On 06/26/2018 01:00 PM, Thomas Lamprecht wrote:
> 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
> -});
>