Proxmox/pve-manager
5
0
Fork 0
Code Pull Requests Releases Activity

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

Browse Source 
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
1 changed files with 51 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
www/manager6/storage/IScsiEdit.js
View File

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