ui: storage: iSCSI panel: modernize, cleanup & improve UX

using cbind + pmxDisplayEditField, getting rid of initComponent

Disables the target selector until a portal is entered. For this, we
currently cannot use the pmxDisplayEditField, since that
disabled/enables the fields automatically based on 'editable'.

Also setting buffer for the portal entry change handler to 500ms (so that
we don't query the backend that often)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
Dominik Csapak 2023-01-18 14:13:01 +01:00 committed by Thomas Lamprecht
parent fa84bd595f
commit df60e210d7

View File

@ -71,6 +71,7 @@ Ext.define('PVE.storage.IScsiScan', {
Ext.define('PVE.storage.IScsiInputPanel', { Ext.define('PVE.storage.IScsiInputPanel', {
extend: 'PVE.panel.StorageBase', extend: 'PVE.panel.StorageBase',
mixins: ['Proxmox.Mixin.CBind'],
onlineHelp: 'storage_open_iscsi', onlineHelp: 'storage_open_iscsi',
@ -88,28 +89,42 @@ Ext.define('PVE.storage.IScsiInputPanel', {
this.callParent([values]); this.callParent([values]);
}, },
initComponent: function() { column1: [
let me = this;
me.column1 = [
{ {
xtype: me.isCreate ? 'textfield' : 'displayfield', xtype: 'pmxDisplayEditField',
cbind: {
editable: '{isCreate}',
},
name: 'portal', name: 'portal',
value: '', value: '',
fieldLabel: 'Portal', fieldLabel: 'Portal',
allowBlank: false, allowBlank: false,
editConfig: {
listeners: { listeners: {
change: function(f, value) { change: {
if (me.isCreate) { fn: function(f, value) {
let exportField = me.down('field[name=target]'); let panel = this.up('inputpanel');
let exportField = panel.lookup('iScsiTargetScan');
if (exportField) {
exportField.setDisabled(!value);
exportField.setPortal(value); exportField.setPortal(value);
exportField.setValue(''); exportField.setValue('');
} }
}, },
buffer: 500,
}, },
}, },
Ext.createWidget(me.isCreate ? 'pveIScsiScan' : 'displayfield', { },
readOnly: !me.isCreate, },
{
cbind: {
xtype: (get) => get('isCreate') ? 'pveIScsiScan' : 'displayfield',
readOnly: '{!isCreate}',
disabled: '{isCreate}',
},
name: 'target', name: 'target',
value: '', value: '',
fieldLabel: gettext('Target'), fieldLabel: gettext('Target'),
@ -117,21 +132,18 @@ Ext.define('PVE.storage.IScsiInputPanel', {
reference: 'iScsiTargetScan', reference: 'iScsiTargetScan',
listeners: { listeners: {
nodechanged: function(value) { nodechanged: function(value) {
me.lookup('storageNodeRestriction').setValue(value); this.up('inputpanel').lookup('storageNodeRestriction').setValue(value);
}, },
}, },
}), },
]; ],
me.column2 = [ column2: [
{ {
xtype: 'checkbox', xtype: 'checkbox',
name: 'luns', name: 'luns',
checked: true, checked: true,
fieldLabel: gettext('Use LUNs directly'), fieldLabel: gettext('Use LUNs directly'),
}, },
]; ],
me.callParent();
},
}); });