[pve-devel] [PATCH V4 pve-manager 0/2] add iscsi, lvm, lvmthin & zfs storage on all cluster nodes (fix #2822)

[pve-devel] [PATCH V4 pve-manager 0/2] add iscsi, lvm, lvmthin & zfs storage on all cluster nodes (fix #2822)

[Stefan Hrdlicka]

V1 -> V2:
# pve-storage
* removed because patch is not needed

# pve-manager (1/3)
* remove storage controller from V1
* added custom ComboBox with API URL & setNodeName function
* added scan node selection for iSCSI 
* scan node selection field no longer send to server

## (optional) pve-manager (2/3): cleanup related files
* var to let statement change
* some indentation

## ((very) optional) pve-manager (3/3): cleanup all var statements
* replaces all var with let statements


V2 -> V3:
# pve-manager (1/2)
* fix broken interface (broken in V2 :( )
* improve tooltip
* replace jNodeSelector function with class object
  (PVE.panel.StorageBaseWithNodeSelector)

# other things:
* removed very optional cleanup
* nothing changed for "Base storage" selector. It is still possible to
  select for example an iSCSI device only availabe on one node that
  isn't availabe on the other ones. I wasn't sure if this should be
  changed in this context as well.


V3 -> V4:
# pve-manager (1/2)
* "localhost" is set for "Scan Node"
* if another node is selcted and the "X" (clear) is used, localhost is
  set as the value again
* use lookupReference
* moved used template literals for building path strings

Stefan Hrdlicka (2):
  fix #2822: add lvm, lvmthin & zfs storage for all cluster nodes
  cleanup: "var" to "let", fix some indentation in related files

 www/manager6/storage/Base.js        | 59 +++++++++++++++++++++--
 www/manager6/storage/IScsiEdit.js   | 45 +++++++++++++-----
 www/manager6/storage/LVMEdit.js     | 44 +++++++++++++----
 www/manager6/storage/LvmThinEdit.js | 73 ++++++++++++++++++++---------
 www/manager6/storage/ZFSPoolEdit.js | 52 ++++++++++++++------
 5 files changed, 210 insertions(+), 63 deletions(-)

-- 
2.30.2

[pve-devel] [PATCH V4 manager 1/2] fix #2822: add lvm, lvmthin & zfs storage for all cluster nodes

[Stefan Hrdlicka]

This adds a dropdown box for LVM, LVMThin & ZFS storage options where a
cluster node needs to be chosen. As default the current node is
selected. It restricts the the storage to be only availabe on the
selected node.

Signed-off-by: Stefan Hrdlicka <s.hrdlicka@proxmox.com>
---
 www/manager6/storage/Base.js        | 49 +++++++++++++++++++++++++
 www/manager6/storage/IScsiEdit.js   | 39 +++++++++++++++-----
 www/manager6/storage/LVMEdit.js     | 30 ++++++++++++++--
 www/manager6/storage/LvmThinEdit.js | 55 ++++++++++++++++++++++-------
 www/manager6/storage/ZFSPoolEdit.js | 29 +++++++++++++--
 5 files changed, 175 insertions(+), 27 deletions(-)

diff --git a/www/manager6/storage/Base.js b/www/manager6/storage/Base.js
index 7f6d7a09..d7dd13cc 100644
--- a/www/manager6/storage/Base.js
+++ b/www/manager6/storage/Base.js
@@ -36,6 +36,7 @@ Ext.define('PVE.panel.StorageBase', {
 	    {
 		xtype: 'pveNodeSelector',
 		name: 'nodes',
+		reference: 'storageNodeRestriction',
 		disabled: me.storageId === 'local',
 		fieldLabel: gettext('Nodes'),
 		emptyText: gettext('All') + ' (' + gettext('No restrictions') +')',
@@ -76,6 +77,54 @@ Ext.define('PVE.panel.StorageBase', {
     },
 });
 
+Ext.define('PVE.form.StorageScanNodeSelector', {
+    extend: 'PVE.form.NodeSelector',
+    xtype: 'pveStorageScanNodeSelector',
+
+    name: 'storageScanNode',
+    itemId: 'pveStorageScanNodeSelector',
+    fieldLabel: gettext('Scan node'),
+    allowBlank: true,
+    disallowedNodes: undefined,
+    autoSelect: false,
+    submitValue: false,
+    value: 'localhost',
+    autoEl: {
+	tag: 'div',
+	'data-qtip': gettext('Scan for available storages on the selected node'),
+    },
+    triggers: {
+	clear: {
+	    handler: function() {
+		let me = this;
+		me.setValue('localhost');
+	    },
+	},
+    },
+    setValue: function(value) {
+	let me = this;
+	me.callParent([value]);
+	me.triggers.clear.setVisible(me.triggers.clear.isVisible() && value !== 'localhost');
+    },
+});
+
+Ext.define('PVE.storage.ComboBoxSetStoreNode', {
+    extend: 'Ext.form.field.ComboBox',
+    config: {
+	apiBaseUrl: '/api2/json/nodes/',
+	apiSuffix: '',
+    },
+
+    setNodeName: function(value) {
+	let me = this;
+	value ||= Proxmox.NodeName;
+
+	me.getStore().getProxy().setUrl(`${me.apiBaseUrl}${value}${me.apiSuffix}`);
+	this.clearValue();
+    },
+
+});
+
 Ext.define('PVE.storage.BaseEdit', {
     extend: 'Proxmox.window.Edit',
 
diff --git a/www/manager6/storage/IScsiEdit.js b/www/manager6/storage/IScsiEdit.js
index 2f35f882..e9177f9e 100644
--- a/www/manager6/storage/IScsiEdit.js
+++ b/www/manager6/storage/IScsiEdit.js
@@ -1,5 +1,5 @@
 Ext.define('PVE.storage.IScsiScan', {
-    extend: 'Ext.form.field.ComboBox',
+    extend: 'PVE.storage.ComboBoxSetStoreNode',
     alias: 'widget.pveIScsiScan',
 
     queryParam: 'portal',
@@ -10,6 +10,9 @@ Ext.define('PVE.storage.IScsiScan', {
 	loadingText: gettext('Scanning...'),
 	width: 350,
     },
+    config: {
+	apiSuffix: '/scan/iscsi',
+    },
     doRawQuery: function() {
 	// do nothing
     },
@@ -42,7 +45,7 @@ Ext.define('PVE.storage.IScsiScan', {
 	    fields: ['target', 'portal'],
 	    proxy: {
 		type: 'proxmox',
-		url: `/api2/json/nodes/${me.nodename}/scan/iscsi`,
+		url: `${me.apiBaseUrl}${me.nodename}${me.apiSuffix}`,
 	    },
 	});
 	store.sort('target', 'ASC');
@@ -77,8 +80,25 @@ Ext.define('PVE.storage.IScsiInputPanel', {
     initComponent: function() {
 	var me = this;
 
-	me.column1 = [
-	    {
+	me.column1 = [];
+	me.column1.push({
+	    xtype: 'pveStorageScanNodeSelector',
+	    disabled: !me.isCreate,
+	    hidden: !me.isCreate,
+	    preferredValue: '',
+	    allowBlank: true,
+	    autoSelect: false,
+	    listeners: {
+		change: {
+		    fn: function(field, value) {
+			me.lookupReference('iScsiTargetScan').setNodeName(value);
+			me.lookupReference('storageNodeRestriction')
+			    .setValue(value === 'localhost' ? '' : value);
+		    },
+		},
+	    },
+	});
+	me.column1.push({
 		xtype: me.isCreate ? 'textfield' : 'displayfield',
 		name: 'portal',
 		value: '',
@@ -94,15 +114,16 @@ Ext.define('PVE.storage.IScsiInputPanel', {
 		    },
 		},
 	    },
-	    {
+	);
+	me.column1.push(
+	    Ext.createWidget(me.isCreate ? 'pveIScsiScan' : 'displayfield', {
 		readOnly: !me.isCreate,
-		xtype: me.isCreate ? 'pveIScsiScan' : 'displayfield',
 		name: 'target',
 		value: '',
-		fieldLabel: 'Target',
+		fieldLabel: gettext('Target'),
 		allowBlank: false,
-	    },
-	];
+		reference: 'iScsiTargetScan',
+	}));
 
 	me.column2 = [
 	    {
diff --git a/www/manager6/storage/LVMEdit.js b/www/manager6/storage/LVMEdit.js
index 2a9cd283..e8c5c88a 100644
--- a/www/manager6/storage/LVMEdit.js
+++ b/www/manager6/storage/LVMEdit.js
@@ -1,10 +1,20 @@
 Ext.define('PVE.storage.VgSelector', {
-    extend: 'Ext.form.field.ComboBox',
+    extend: 'PVE.storage.ComboBoxSetStoreNode',
     alias: 'widget.pveVgSelector',
     valueField: 'vg',
     displayField: 'vg',
     queryMode: 'local',
     editable: false,
+    config: {
+	apiSuffix: '/scan/lvm',
+    },
+
+    setNodeName: function(value) {
+	let me = this;
+	me.callParent([value]);
+	me.getStore().load();
+    },
+
     initComponent: function() {
 	var me = this;
 
@@ -17,7 +27,7 @@ Ext.define('PVE.storage.VgSelector', {
 	    fields: ['vg', 'size', 'free'],
 	    proxy: {
 		type: 'proxmox',
-		url: '/api2/json/nodes/' + me.nodename + '/scan/lvm',
+		url: `${me.apiBaseUrl}${me.nodename}${me.apiSuffix}`,
 	    },
 	});
 
@@ -103,11 +113,25 @@ Ext.define('PVE.storage.LVMInputPanel', {
 	});
 
 	if (me.isCreate) {
-	    var vgField = Ext.create('PVE.storage.VgSelector', {
+	    let vgField = Ext.create('PVE.storage.VgSelector', {
 		name: 'vgname',
 		fieldLabel: gettext('Volume group'),
+		reference: 'volumeGroupSelector',
 		allowBlank: false,
 	    });
+	    me.column1.push({
+	        xtype: 'pveStorageScanNodeSelector',
+	        listeners: {
+	            change: {
+			fn: function(field, value) {
+			    me.lookupReference('volumeGroupSelector')
+				.setNodeName(value);
+			    me.lookupReference('storageNodeRestriction')
+				.setValue(value === 'localhost' ? '' : value);
+			},
+		    },
+	        },
+	    });
 
 	    var baseField = Ext.createWidget('pveFileSelector', {
 		name: 'base',
diff --git a/www/manager6/storage/LvmThinEdit.js b/www/manager6/storage/LvmThinEdit.js
index 4eab7740..7cd50746 100644
--- a/www/manager6/storage/LvmThinEdit.js
+++ b/www/manager6/storage/LvmThinEdit.js
@@ -1,5 +1,5 @@
 Ext.define('PVE.storage.TPoolSelector', {
-    extend: 'Ext.form.field.ComboBox',
+    extend: 'PVE.storage.ComboBoxSetStoreNode',
     alias: 'widget.pveTPSelector',
 
     queryParam: 'vg',
@@ -7,6 +7,10 @@ Ext.define('PVE.storage.TPoolSelector', {
     displayField: 'lv',
     editable: false,
 
+    config: {
+	apiSuffix: '/scan/lvmthin',
+    },
+
     doRawQuery: function() {
 	// nothing
     },
@@ -40,7 +44,7 @@ Ext.define('PVE.storage.TPoolSelector', {
 	    fields: ['lv'],
 	    proxy: {
 		type: 'proxmox',
-		url: '/api2/json/nodes/' + me.nodename + '/scan/lvmthin',
+		url: `${me.apiBaseUrl}${me.nodename}${me.apiSuffix}`,
 	    },
 	});
 
@@ -58,13 +62,23 @@ Ext.define('PVE.storage.TPoolSelector', {
 });
 
 Ext.define('PVE.storage.BaseVGSelector', {
-    extend: 'Ext.form.field.ComboBox',
+    extend: 'PVE.storage.ComboBoxSetStoreNode',
     alias: 'widget.pveBaseVGSelector',
 
     valueField: 'vg',
     displayField: 'vg',
     queryMode: 'local',
     editable: false,
+    config: {
+	apiSuffix: '/scan/lvm',
+    },
+
+    setNodeName: function(value) {
+	let me = this;
+	me.callParent([value]);
+	me.getStore().load();
+    },
+
     initComponent: function() {
 	var me = this;
 
@@ -77,7 +91,7 @@ Ext.define('PVE.storage.BaseVGSelector', {
 	    fields: ['vg', 'size', 'free'],
 	    proxy: {
 		type: 'proxmox',
-		url: '/api2/json/nodes/' + me.nodename + '/scan/lvm',
+		url: `${me.apiBaseUrl}${me.nodename}${me.apiSuffix}`,
 	    },
 	});
 
@@ -121,27 +135,44 @@ Ext.define('PVE.storage.LvmThinInputPanel', {
 	});
 
 	if (me.isCreate) {
-	    var vgField = Ext.create('PVE.storage.TPoolSelector', {
-		name: 'thinpool',
-		fieldLabel: gettext('Thin Pool'),
-		allowBlank: false,
+	    me.column1.push({
+	        xtype: 'pveStorageScanNodeSelector',
+	        listeners: {
+		    change: {
+			fn: function(field, value) {
+			    me.lookupReference('thinPoolSelector')
+				.setNodeName(value);
+			    me.lookupReference('volumeGroupSelector')
+				.setNodeName(value);
+			    me.lookupReference('storageNodeRestriction')
+				.setValue(value === 'localhost' ? '' : value);
+			},
+		    },
+		},
 	    });
 
-	    me.column1.push({
-		xtype: 'pveBaseVGSelector',
+	    me.column1.push(Ext.create('PVE.storage.BaseVGSelector', {
 		name: 'vgname',
 		fieldLabel: gettext('Volume group'),
+		reference: 'volumeGroupSelector',
 		listeners: {
 		    change: function(f, value) {
 			if (me.isCreate) {
+			    let vgField = me.lookupReference('thinPoolSelector');
 			    vgField.setVG(value);
 			    vgField.setValue('');
 			}
 		    },
 		},
-	    });
+	    }));
 
-	    me.column1.push(vgField);
+	    me.column1.push(Ext.create('PVE.storage.TPoolSelector', {
+		name: 'thinpool',
+		fieldLabel: gettext('Thin Pool'),
+		reference: 'thinPoolSelector',
+		allowBlank: false,
+	    }));
 	}
 
 	me.column1.push(vgnameField);
diff --git a/www/manager6/storage/ZFSPoolEdit.js b/www/manager6/storage/ZFSPoolEdit.js
index 8e689f0c..d7319a10 100644
--- a/www/manager6/storage/ZFSPoolEdit.js
+++ b/www/manager6/storage/ZFSPoolEdit.js
@@ -1,5 +1,5 @@
 Ext.define('PVE.storage.ZFSPoolSelector', {
-    extend: 'Ext.form.field.ComboBox',
+    extend: 'PVE.storage.ComboBoxSetStoreNode',
     alias: 'widget.pveZFSPoolSelector',
     valueField: 'pool',
     displayField: 'pool',
@@ -8,6 +8,16 @@ Ext.define('PVE.storage.ZFSPoolSelector', {
     listConfig: {
 	loadingText: gettext('Scanning...'),
     },
+    config: {
+	apiSuffix: '/scan/zfs',
+    },
+
+    setNodeName: function(value) {
+	let me = this;
+	me.callParent([value]);
+	me.getStore().load();
+    },
+
     initComponent: function() {
 	var me = this;
 
@@ -20,10 +30,9 @@ Ext.define('PVE.storage.ZFSPoolSelector', {
 	    fields: ['pool', 'size', 'free'],
 	    proxy: {
 		type: 'proxmox',
-		url: '/api2/json/nodes/' + me.nodename + '/scan/zfs',
+		url: `${me.apiBaseUrl}${me.nodename}${me.apiSuffix}`,
 	    },
 	});
-
 	store.sort('pool', 'ASC');
 
 	Ext.apply(me, {
@@ -45,9 +54,23 @@ Ext.define('PVE.storage.ZFSPoolInputPanel', {
 	me.column1 = [];
 
 	if (me.isCreate) {
+	    me.column1.push({
+	        xtype: 'pveStorageScanNodeSelector',
+	        listeners: {
+		    change: {
+			fn: function(field, value) {
+			    me.lookupReference('zfsPoolSelector')
+				.setNodeName(value);
+			    me.lookupReference('storageNodeRestriction')
+				.setValue(value === 'localhost' ? '' : value);
+			},
+		    },
+		},
+	    });
 	    me.column1.push(Ext.create('PVE.storage.ZFSPoolSelector', {
 		name: 'pool',
 		fieldLabel: gettext('ZFS Pool'),
+		reference: 'zfsPoolSelector',
 		allowBlank: false,
 	    }));
 	} else {
-- 
2.30.2

[pve-devel] [PATCH V4 manager 2/2] cleanup: "var" to "let", fix some indentation in related files

[Stefan Hrdlicka]

replace all "var" with "let" in files related to patch for ticket #2822

Signed-off-by: Stefan Hrdlicka <s.hrdlicka@proxmox.com>
---
 www/manager6/storage/Base.js        | 10 +++++-----
 www/manager6/storage/IScsiEdit.js   |  6 +++---
 www/manager6/storage/LVMEdit.js     | 14 +++++++-------
 www/manager6/storage/LvmThinEdit.js | 18 +++++++++---------
 www/manager6/storage/ZFSPoolEdit.js | 23 +++++++++++------------
 5 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/www/manager6/storage/Base.js b/www/manager6/storage/Base.js
index d7dd13cc..ce511c40 100644
--- a/www/manager6/storage/Base.js
+++ b/www/manager6/storage/Base.js
@@ -5,7 +5,7 @@ Ext.define('PVE.panel.StorageBase', {
     type: '',
 
     onGetValues: function(values) {
-	var me = this;
+	let me = this;
 
 	if (me.isCreate) {
 	    values.type = me.type;
@@ -20,7 +20,7 @@ Ext.define('PVE.panel.StorageBase', {
     },
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	me.column1.unshift({
 	    xtype: me.isCreate ? 'textfield' : 'displayfield',
@@ -136,7 +136,7 @@ Ext.define('PVE.storage.BaseEdit', {
     },
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	me.isCreate = !me.storageId;
 
@@ -196,8 +196,8 @@ Ext.define('PVE.storage.BaseEdit', {
 	if (!me.isCreate) {
 	    me.load({
 		success: function(response, options) {
-		    var values = response.result.data;
-		    var ctypes = values.content || '';
+		    let values = response.result.data;
+		    let ctypes = values.content || '';
 
 		    values.content = ctypes.split(',');
 
diff --git a/www/manager6/storage/IScsiEdit.js b/www/manager6/storage/IScsiEdit.js
index e9177f9e..674761c2 100644
--- a/www/manager6/storage/IScsiEdit.js
+++ b/www/manager6/storage/IScsiEdit.js
@@ -64,7 +64,7 @@ Ext.define('PVE.storage.IScsiInputPanel', {
     onlineHelp: 'storage_open_iscsi',
 
     onGetValues: function(values) {
-	var me = this;
+	let me = this;
 
 	values.content = values.luns ? 'images' : 'none';
 	delete values.luns;
@@ -78,7 +78,7 @@ Ext.define('PVE.storage.IScsiInputPanel', {
     },
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	me.column1 = [];
 	me.column1.push({
@@ -107,7 +107,7 @@ Ext.define('PVE.storage.IScsiInputPanel', {
 		listeners: {
 		    change: function(f, value) {
 			if (me.isCreate) {
-			    var exportField = me.down('field[name=target]');
+			    let exportField = me.down('field[name=target]');
 			    exportField.setPortal(value);
 			    exportField.setValue('');
 			}
diff --git a/www/manager6/storage/LVMEdit.js b/www/manager6/storage/LVMEdit.js
index e8c5c88a..f7091a42 100644
--- a/www/manager6/storage/LVMEdit.js
+++ b/www/manager6/storage/LVMEdit.js
@@ -16,13 +16,13 @@ Ext.define('PVE.storage.VgSelector', {
     },
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	if (!me.nodename) {
 	    me.nodename = 'localhost';
 	}
 
-	var store = Ext.create('Ext.data.Store', {
+	let store = Ext.create('Ext.data.Store', {
 	    autoLoad: {}, // true,
 	    fields: ['vg', 'size', 'free'],
 	    proxy: {
@@ -55,9 +55,9 @@ Ext.define('PVE.storage.BaseStorageSelector', {
     valueField: 'storage',
     displayField: 'text',
     initComponent: function() {
-	var me = this;
+	let me = this;
 
-	var store = Ext.create('Ext.data.Store', {
+	let store = Ext.create('Ext.data.Store', {
 	    autoLoad: {
 		addRecords: true,
 		params: {
@@ -99,11 +99,11 @@ Ext.define('PVE.storage.LVMInputPanel', {
     onlineHelp: 'storage_lvm',
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	me.column1 = [];
 
-	var vgnameField = Ext.createWidget(me.isCreate ? 'textfield' : 'displayfield', {
+	let vgnameField = Ext.createWidget(me.isCreate ? 'textfield' : 'displayfield', {
 	    name: 'vgname',
 	    hidden: !!me.isCreate,
 	    disabled: !!me.isCreate,
@@ -133,7 +133,7 @@ Ext.define('PVE.storage.LVMInputPanel', {
 	        },
 	    });
 
-	    var baseField = Ext.createWidget('pveFileSelector', {
+	    let baseField = Ext.createWidget('pveFileSelector', {
 		name: 'base',
 		hidden: true,
 		disabled: true,
diff --git a/www/manager6/storage/LvmThinEdit.js b/www/manager6/storage/LvmThinEdit.js
index 7cd50746..e7c58285 100644
--- a/www/manager6/storage/LvmThinEdit.js
+++ b/www/manager6/storage/LvmThinEdit.js
@@ -16,7 +16,7 @@ Ext.define('PVE.storage.TPoolSelector', {
     },
 
     onTriggerClick: function() {
-	var me = this;
+	let me = this;
 
 	if (!me.queryCaching || me.lastQuery !== me.vg) {
 	    me.store.removeAll();
@@ -28,19 +28,19 @@ Ext.define('PVE.storage.TPoolSelector', {
     },
 
     setVG: function(myvg) {
-	var me = this;
+	let me = this;
 
 	me.vg = myvg;
     },
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	if (!me.nodename) {
 	    me.nodename = 'localhost';
 	}
 
-	var store = Ext.create('Ext.data.Store', {
+	let store = Ext.create('Ext.data.Store', {
 	    fields: ['lv'],
 	    proxy: {
 		type: 'proxmox',
@@ -80,13 +80,13 @@ Ext.define('PVE.storage.BaseVGSelector', {
     },
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	if (!me.nodename) {
 	    me.nodename = 'localhost';
 	}
 
-	var store = Ext.create('Ext.data.Store', {
+	let store = Ext.create('Ext.data.Store', {
 	    autoLoad: {},
 	    fields: ['vg', 'size', 'free'],
 	    proxy: {
@@ -112,11 +112,11 @@ Ext.define('PVE.storage.LvmThinInputPanel', {
     onlineHelp: 'storage_lvmthin',
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	me.column1 = [];
 
-	var vgnameField = Ext.createWidget(me.isCreate ? 'textfield' : 'displayfield', {
+	let vgnameField = Ext.createWidget(me.isCreate ? 'textfield' : 'displayfield', {
 	    name: 'vgname',
 	    hidden: !!me.isCreate,
 	    disabled: !!me.isCreate,
@@ -125,7 +125,7 @@ Ext.define('PVE.storage.LvmThinInputPanel', {
 	    allowBlank: false,
 	});
 
-	var thinpoolField = Ext.createWidget(me.isCreate ? 'textfield' : 'displayfield', {
+	let thinpoolField = Ext.createWidget(me.isCreate ? 'textfield' : 'displayfield', {
 	    name: 'thinpool',
 	    hidden: !!me.isCreate,
 	    disabled: !!me.isCreate,
diff --git a/www/manager6/storage/ZFSPoolEdit.js b/www/manager6/storage/ZFSPoolEdit.js
index d7319a10..aec825f4 100644
--- a/www/manager6/storage/ZFSPoolEdit.js
+++ b/www/manager6/storage/ZFSPoolEdit.js
@@ -19,13 +19,13 @@ Ext.define('PVE.storage.ZFSPoolSelector', {
     },
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	if (!me.nodename) {
 	    me.nodename = 'localhost';
 	}
 
-	var store = Ext.create('Ext.data.Store', {
+	let store = Ext.create('Ext.data.Store', {
 	    autoLoad: {}, // true,
 	    fields: ['pool', 'size', 'free'],
 	    proxy: {
@@ -49,7 +49,7 @@ Ext.define('PVE.storage.ZFSPoolInputPanel', {
     onlineHelp: 'storage_zfspool',
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	me.column1 = [];
 
@@ -84,15 +84,14 @@ Ext.define('PVE.storage.ZFSPoolInputPanel', {
 
 	// value is an array,
 	// while before it was a string
-	me.column1.push(
-	    {
-xtype: 'pveContentTypeSelector',
-	     cts: ['images', 'rootdir'],
-	     fieldLabel: gettext('Content'),
-	     name: 'content',
-	     value: ['images', 'rootdir'],
-	     multiSelect: true,
-	     allowBlank: false,
+	me.column1.push({
+	    xtype: 'pveContentTypeSelector',
+	    cts: ['images', 'rootdir'],
+	    fieldLabel: gettext('Content'),
+	    name: 'content',
+	    value: ['images', 'rootdir'],
+	    multiSelect: true,
+	    allowBlank: false,
 	});
 	me.column2 = [
 	    {
-- 
2.30.2

Re: [pve-devel] [PATCH V4 manager 1/2] fix #2822: add lvm, lvmthin & zfs storage for all cluster nodes

[Dominik Csapak]

first, the patch does not apply here:
----
Applying: fix #2822: add lvm, lvmthin & zfs storage for all cluster nodes
error: corrupt patch at line 335
Patch failed at 0001 fix #2822: add lvm, lvmthin & zfs storage for all cluster nodes
----

also, some comments/nits inline (aside from those, it looks ok to me, could not
test because of the above issue)

On 8/4/22 16:46, Stefan Hrdlicka wrote:
> This adds a dropdown box for LVM, LVMThin & ZFS storage options where a
> cluster node needs to be chosen. As default the current node is
> selected. It restricts the the storage to be only availabe on the
> selected node.
> 

iscsi is not mentioned here ;)

> Signed-off-by: Stefan Hrdlicka <s.hrdlicka@proxmox.com>
> ---
>   www/manager6/storage/Base.js        | 49 +++++++++++++++++++++++++
>   www/manager6/storage/IScsiEdit.js   | 39 +++++++++++++++-----
>   www/manager6/storage/LVMEdit.js     | 30 ++++++++++++++--
>   www/manager6/storage/LvmThinEdit.js | 55 ++++++++++++++++++++++-------
>   www/manager6/storage/ZFSPoolEdit.js | 29 +++++++++++++--
>   5 files changed, 175 insertions(+), 27 deletions(-)
> 
> diff --git a/www/manager6/storage/Base.js b/www/manager6/storage/Base.js
> index 7f6d7a09..d7dd13cc 100644
> --- a/www/manager6/storage/Base.js
> +++ b/www/manager6/storage/Base.js
> @@ -36,6 +36,7 @@ Ext.define('PVE.panel.StorageBase', {
>   	    {
>   		xtype: 'pveNodeSelector',
>   		name: 'nodes',
> +		reference: 'storageNodeRestriction',
>   		disabled: me.storageId === 'local',
>   		fieldLabel: gettext('Nodes'),
>   		emptyText: gettext('All') + ' (' + gettext('No restrictions') +')',
> @@ -76,6 +77,54 @@ Ext.define('PVE.panel.StorageBase', {
>       },
>   });
>   
> +Ext.define('PVE.form.StorageScanNodeSelector', {
> +    extend: 'PVE.form.NodeSelector',
> +    xtype: 'pveStorageScanNodeSelector',
> +
> +    name: 'storageScanNode',
> +    itemId: 'pveStorageScanNodeSelector',
> +    fieldLabel: gettext('Scan node'),
> +    allowBlank: true,
> +    disallowedNodes: undefined,
> +    autoSelect: false,
> +    submitValue: false,
> +    value: 'localhost',
> +    autoEl: {
> +	tag: 'div',
> +	'data-qtip': gettext('Scan for available storages on the selected node'),
> +    },
> +    triggers: {
> +	clear: {
> +	    handler: function() {
> +		let me = this;
> +		me.setValue('localhost');
> +	    },
> +	},
> +    },
> +    setValue: function(value) {
> +	let me = this;
> +	me.callParent([value]);
> +	me.triggers.clear.setVisible(me.triggers.clear.isVisible() && value !== 'localhost');
> +    },
> +});
> +
> +Ext.define('PVE.storage.ComboBoxSetStoreNode', {
> +    extend: 'Ext.form.field.ComboBox',
> +    config: {
> +	apiBaseUrl: '/api2/json/nodes/',
> +	apiSuffix: '',
> +    },
> +
> +    setNodeName: function(value) {
> +	let me = this;
> +	value ||= Proxmox.NodeName;
> +
> +	me.getStore().getProxy().setUrl(`${me.apiBaseUrl}${value}${me.apiSuffix}`);
> +	this.clearValue();
> +    },
> +
> +});

nit: imho these two belong in www/manager6/form, but it's not a big deal

> +
>   Ext.define('PVE.storage.BaseEdit', {
>       extend: 'Proxmox.window.Edit',
>   
> diff --git a/www/manager6/storage/IScsiEdit.js b/www/manager6/storage/IScsiEdit.js
> index 2f35f882..e9177f9e 100644
> --- a/www/manager6/storage/IScsiEdit.js
> +++ b/www/manager6/storage/IScsiEdit.js
> @@ -1,5 +1,5 @@
>   Ext.define('PVE.storage.IScsiScan', {
> -    extend: 'Ext.form.field.ComboBox',
> +    extend: 'PVE.storage.ComboBoxSetStoreNode',
>       alias: 'widget.pveIScsiScan',
>   
>       queryParam: 'portal',
> @@ -10,6 +10,9 @@ Ext.define('PVE.storage.IScsiScan', {
>   	loadingText: gettext('Scanning...'),
>   	width: 350,
>       },
> +    config: {
> +	apiSuffix: '/scan/iscsi',
> +    },
>       doRawQuery: function() {
>   	// do nothing
>       },
> @@ -42,7 +45,7 @@ Ext.define('PVE.storage.IScsiScan', {
>   	    fields: ['target', 'portal'],
>   	    proxy: {
>   		type: 'proxmox',
> -		url: `/api2/json/nodes/${me.nodename}/scan/iscsi`,
> +		url: `${me.apiBaseUrl}${me.nodename}${me.apiSuffix}`,
>   	    },
>   	});
>   	store.sort('target', 'ASC');
> @@ -77,8 +80,25 @@ Ext.define('PVE.storage.IScsiInputPanel', {
>       initComponent: function() {
>   	var me = this;
>   
> -	me.column1 = [
> -	    {
> +	me.column1 = [];
> +	me.column1.push({
> +	    xtype: 'pveStorageScanNodeSelector',
> +	    disabled: !me.isCreate,
> +	    hidden: !me.isCreate,
> +	    preferredValue: '',
> +	    allowBlank: true,
> +	    autoSelect: false,
> +	    listeners: {
> +		change: {
> +		    fn: function(field, value) {
> +			me.lookupReference('iScsiTargetScan').setNodeName(value);
> +			me.lookupReference('storageNodeRestriction')
> +			    .setValue(value === 'localhost' ? '' : value)
nit: you could use 'lookup' instead of 'lookupReference' (it's just a short alias)

> +		    },
> +		},
> +	    },
> +	});
> +	me.column1.push({
>   		xtype: me.isCreate ? 'textfield' : 'displayfield',
>   		name: 'portal',
>   		value: '',
> @@ -94,15 +114,16 @@ Ext.define('PVE.storage.IScsiInputPanel', {
>   		    },
>   		},
>   	    },
> -	    {
> +	);
> +	me.column1.push(
> +	    Ext.createWidget(me.isCreate ? 'pveIScsiScan' : 'displayfield', {
>   		readOnly: !me.isCreate,
> -		xtype: me.isCreate ? 'pveIScsiScan' : 'displayfield',
>   		name: 'target',
>   		value: '',
> -		fieldLabel: 'Target',
> +		fieldLabel: gettext('Target'),

nit: it's ok, but does not really belong into this patch

>   		allowBlank: false,
> -	    },
> -	];
> +		reference: 'iScsiTargetScan',
> +	}));

any particular reason why you use '.push()' here?
AFAICS you could simply define them inline like this:

me.column1 = [
     {
          xtype: ...
          ...
     },
     ...
];

like it was before

>   
>   	me.column2 = [
>   	    {
> diff --git a/www/manager6/storage/LVMEdit.js b/www/manager6/storage/LVMEdit.js
> index 2a9cd283..e8c5c88a 100644
> --- a/www/manager6/storage/LVMEdit.js
> +++ b/www/manager6/storage/LVMEdit.js
> @@ -1,10 +1,20 @@
>   Ext.define('PVE.storage.VgSelector', {
> -    extend: 'Ext.form.field.ComboBox',
> +    extend: 'PVE.storage.ComboBoxSetStoreNode',
>       alias: 'widget.pveVgSelector',
>       valueField: 'vg',
>       displayField: 'vg',
>       queryMode: 'local',
>       editable: false,
> +    config: {
> +	apiSuffix: '/scan/lvm',
> +    },
> +
> +    setNodeName: function(value) {
> +	let me = this;
> +	me.callParent([value]);
> +	me.getStore().load();
> +    },
> +
>       initComponent: function() {
>   	var me = this;
>   
> @@ -17,7 +27,7 @@ Ext.define('PVE.storage.VgSelector', {
>   	    fields: ['vg', 'size', 'free'],
>   	    proxy: {
>   		type: 'proxmox',
> -		url: '/api2/json/nodes/' + me.nodename + '/scan/lvm',
> +		url: `${me.apiBaseUrl}${me.nodename}${me.apiSuffix}`,
>   	    },
>   	});
>   
> @@ -103,11 +113,25 @@ Ext.define('PVE.storage.LVMInputPanel', {
>   	});
>   
>   	if (me.isCreate) {
> -	    var vgField = Ext.create('PVE.storage.VgSelector', {
> +	    let vgField = Ext.create('PVE.storage.VgSelector', {
>   		name: 'vgname',
>   		fieldLabel: gettext('Volume group'),
> +		reference: 'volumeGroupSelector',
>   		allowBlank: false,
>   	    });
> +	    me.column1.push({
> +	        xtype: 'pveStorageScanNodeSelector',
> +	        listeners: {
> +	            change: {
> +			fn: function(field, value) {
> +			    me.lookupReference('volumeGroupSelector')
> +				.setNodeName(value);
> +			    me.lookupReference('storageNodeRestriction')
> +				.setValue(value === 'localhost' ? '' : value);

s/lookupReference/lookup/

> +			},
> +		    },
> +	        },
> +	    });
>   
>   	    var baseField = Ext.createWidget('pveFileSelector', {
>   		name: 'base',
> diff --git a/www/manager6/storage/LvmThinEdit.js b/www/manager6/storage/LvmThinEdit.js
> index 4eab7740..7cd50746 100644
> --- a/www/manager6/storage/LvmThinEdit.js
> +++ b/www/manager6/storage/LvmThinEdit.js
> @@ -1,5 +1,5 @@
>   Ext.define('PVE.storage.TPoolSelector', {
> -    extend: 'Ext.form.field.ComboBox',
> +    extend: 'PVE.storage.ComboBoxSetStoreNode',
>       alias: 'widget.pveTPSelector',
>   
>       queryParam: 'vg',
> @@ -7,6 +7,10 @@ Ext.define('PVE.storage.TPoolSelector', {
>       displayField: 'lv',
>       editable: false,
>   
> +    config: {
> +	apiSuffix: '/scan/lvmthin',
> +    },
> +
>       doRawQuery: function() {
>   	// nothing
>       },
> @@ -40,7 +44,7 @@ Ext.define('PVE.storage.TPoolSelector', {
>   	    fields: ['lv'],
>   	    proxy: {
>   		type: 'proxmox',
> -		url: '/api2/json/nodes/' + me.nodename + '/scan/lvmthin',
> +		url: `${me.apiBaseUrl}${me.nodename}${me.apiSuffix}`,
>   	    },
>   	});
>   
> @@ -58,13 +62,23 @@ Ext.define('PVE.storage.TPoolSelector', {
>   });
>   
>   Ext.define('PVE.storage.BaseVGSelector', {
> -    extend: 'Ext.form.field.ComboBox',
> +    extend: 'PVE.storage.ComboBoxSetStoreNode',
>       alias: 'widget.pveBaseVGSelector',
>   
>       valueField: 'vg',
>       displayField: 'vg',
>       queryMode: 'local',
>       editable: false,
> +    config: {
> +	apiSuffix: '/scan/lvm',
> +    },
> +
> +    setNodeName: function(value) {
> +	let me = this;
> +	me.callParent([value]);
> +	me.getStore().load();
> +    },
> +
>       initComponent: function() {
>   	var me = this;
>   
> @@ -77,7 +91,7 @@ Ext.define('PVE.storage.BaseVGSelector', {
>   	    fields: ['vg', 'size', 'free'],
>   	    proxy: {
>   		type: 'proxmox',
> -		url: '/api2/json/nodes/' + me.nodename + '/scan/lvm',
> +		url: `${me.apiBaseUrl}${me.nodename}${me.apiSuffix}`,
>   	    },
>   	});
>   
> @@ -121,27 +135,44 @@ Ext.define('PVE.storage.LvmThinInputPanel', {
>   	});
>   
>   	if (me.isCreate) {
> -	    var vgField = Ext.create('PVE.storage.TPoolSelector', {
> -		name: 'thinpool',
> -		fieldLabel: gettext('Thin Pool'),
> -		allowBlank: false,
> +	    me.column1.push({
> +	        xtype: 'pveStorageScanNodeSelector',
> +	        listeners: {
> +		    change: {
> +			fn: function(field, value) {
> +			    me.lookupReference('thinPoolSelector')
> +				.setNodeName(value);
> +			    me.lookupReference('volumeGroupSelector')
> +				.setNodeName(value);
> +			    me.lookupReference('storageNodeRestriction')
> +				.setValue(value === 'localhost' ? '' : value);

s/lookupReference/lookup/

> +			},
> +		    },
> +		},
>   	    });
>   
> -	    me.column1.push({
> -		xtype: 'pveBaseVGSelector',
> +	    me.column1.push(Ext.create('PVE.storage.BaseVGSelector', {
>   		name: 'vgname',
>   		fieldLabel: gettext('Volume group'),
> +		reference: 'volumeGroupSelector',
>   		listeners: {
>   		    change: function(f, value) {
>   			if (me.isCreate) {
> +			    let vgField = me.lookupReference('thinPoolSelector');

s/lookupReference/lookup/

>   			    vgField.setVG(value);
>   			    vgField.setValue(''); >   			}
>   		    },
>   		},
> -	    });
> +	    }));
>   
> -	    me.column1.push(vgField);
> +	    me.column1.push(Ext.create('PVE.storage.TPoolSelector', {
> +		name: 'thinpool',
> +		fieldLabel: gettext('Thin Pool'),
> +		reference: 'thinPoolSelector',
> +		allowBlank: false,
> +	    }));
>   	}
>   
>   	me.column1.push(vgnameField);
> diff --git a/www/manager6/storage/ZFSPoolEdit.js b/www/manager6/storage/ZFSPoolEdit.js
> index 8e689f0c..d7319a10 100644
> --- a/www/manager6/storage/ZFSPoolEdit.js
> +++ b/www/manager6/storage/ZFSPoolEdit.js
> @@ -1,5 +1,5 @@
>   Ext.define('PVE.storage.ZFSPoolSelector', {
> -    extend: 'Ext.form.field.ComboBox',
> +    extend: 'PVE.storage.ComboBoxSetStoreNode',
>       alias: 'widget.pveZFSPoolSelector',
>       valueField: 'pool',
>       displayField: 'pool',
> @@ -8,6 +8,16 @@ Ext.define('PVE.storage.ZFSPoolSelector', {
>       listConfig: {
>   	loadingText: gettext('Scanning...'),
>       },
> +    config: {
> +	apiSuffix: '/scan/zfs',
> +    },
> +
> +    setNodeName: function(value) {
> +	let me = this;
> +	me.callParent([value]);
> +	me.getStore().load();
> +    },
> +
>       initComponent: function() {
>   	var me = this;
>   
> @@ -20,10 +30,9 @@ Ext.define('PVE.storage.ZFSPoolSelector', {
>   	    fields: ['pool', 'size', 'free'],
>   	    proxy: {
>   		type: 'proxmox',
> -		url: '/api2/json/nodes/' + me.nodename + '/scan/zfs',
> +		url: `${me.apiBaseUrl}${me.nodename}${me.apiSuffix}`,
>   	    },
>   	});
> -

nit: also not really relevant for this patch

>   	store.sort('pool', 'ASC');
>   
>   	Ext.apply(me, {
> @@ -45,9 +54,23 @@ Ext.define('PVE.storage.ZFSPoolInputPanel', {
>   	me.column1 = [];
>   
>   	if (me.isCreate) {
> +	    me.column1.push({
> +	        xtype: 'pveStorageScanNodeSelector',
> +	        listeners: {
> +		    change: {
> +			fn: function(field, value) {
> +			    me.lookupReference('zfsPoolSelector')
> +				.setNodeName(value);
> +			    me.lookupReference('storageNodeRestriction')
> +				.setValue(value === 'localhost' ? '' : value);

s/lookupReference/lookup/

> +			},
> +		    },
> +		},
> +	    });
>   	    me.column1.push(Ext.create('PVE.storage.ZFSPoolSelector', {
>   		name: 'pool',
>   		fieldLabel: gettext('ZFS Pool'),
> +		reference: 'zfsPoolSelector',
>   		allowBlank: false,
>   	    }));
>   	} else {