[pve-devel] [PATCH manager v2 1/2] ui: refactor iso selector out of the cd input panel

[pve-devel] [PATCH manager v2 1/2] ui: refactor iso selector out of the cd input panel

[Dominik Csapak]

and make it into a proper field
it's intended to be used like a single field and exactly as before

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
no changes
 www/manager6/Makefile            |   1 +
 www/manager6/form/IsoSelector.js | 107 +++++++++++++++++++++++++++++++
 www/manager6/qemu/CDEdit.js      |  38 ++---------
 3 files changed, 115 insertions(+), 31 deletions(-)
 create mode 100644 www/manager6/form/IsoSelector.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index ee09f0b8..c63361c3 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -88,6 +88,7 @@ JSSRC= 							\
 	form/TagEdit.js					\
 	form/MultiFileButton.js				\
 	form/TagFieldSet.js				\
+	form/IsoSelector.js				\
 	grid/BackupView.js				\
 	grid/FirewallAliases.js				\
 	grid/FirewallOptions.js				\
diff --git a/www/manager6/form/IsoSelector.js b/www/manager6/form/IsoSelector.js
new file mode 100644
index 00000000..632ee7f0
--- /dev/null
+++ b/www/manager6/form/IsoSelector.js
@@ -0,0 +1,107 @@
+Ext.define('PVE.form.IsoSelector', {
+    extend: 'Ext.container.Container',
+    alias: 'widget.pveIsoSelector',
+    mixins: [
+	'Ext.form.field.Field',
+	'Proxmox.Mixin.CBind',
+    ],
+
+    nodename: undefined,
+    insideWizard: false,
+
+    cbindData: function() {
+	let me = this;
+	return {
+	    nodename: me.nodename,
+	    insideWizard: me.insideWizard,
+	};
+    },
+
+    getValue: function() {
+	return this.lookup('file').getValue();
+    },
+
+    setValue: function(value) {
+	let me = this;
+	if (!value) {
+	    me.lookup('file').reset();
+	    return;
+	}
+	var match = value.match(/^([^:]+):/);
+	if (match) {
+	    me.lookup('storage').setValue(match[1]);
+	    me.lookup('file').setValue(value);
+	}
+    },
+
+    getErrors: function() {
+	let me = this;
+	me.lookup('storage').validate();
+	let file = me.lookup('file');
+	file.validate();
+	let value = file.getValue();
+	if (!value || !value.length) {
+	    return [""]; // for validation
+	}
+	return [];
+    },
+
+    setNodename: function(nodename) {
+	let me = this;
+	me.lookup('storage').setNodename(nodename);
+	me.lookup('file').setStorage(undefined, nodename);
+    },
+
+    setDisabled: function(disabled) {
+	let me = this;
+	me.lookup('storage').setDisabled(disabled);
+	me.lookup('file').setDisabled(disabled);
+	me.callParent();
+    },
+
+    referenceHolder: true,
+
+    items: [
+	{
+	    xtype: 'pveStorageSelector',
+	    reference: 'storage',
+	    isFormField: false,
+	    fieldLabel: gettext('Storage'),
+	    labelAlign: 'right',
+	    storageContent: 'iso',
+	    allowBlank: false,
+	    cbind: {
+		nodename: '{nodename}',
+		autoSelect: '{insideWizard}',
+		insideWizard: '{insideWizard}',
+		disabled: '{disabled}',
+	    },
+	    listeners: {
+		change: function(f, value) {
+		    let me = this;
+		    let selector = me.up('pveIsoSelector');
+		    selector.lookup('file').setStorage(value);
+		    selector.checkChange();
+		},
+	    },
+	},
+	{
+	    xtype: 'pveFileSelector',
+	    reference: 'file',
+	    isFormField: false,
+	    storageContent: 'iso',
+	    fieldLabel: gettext('ISO image'),
+	    labelAlign: 'right',
+	    cbind: {
+		nodename: '{nodename}',
+		disabled: '{disabled}',
+	    },
+	    allowBlank: false,
+	    listeners: {
+		change: function() {
+		    this.up('pveIsoSelector').checkChange();
+		},
+	    },
+	},
+    ],
+});
diff --git a/www/manager6/qemu/CDEdit.js b/www/manager6/qemu/CDEdit.js
index fc7a59cc..3cc16205 100644
--- a/www/manager6/qemu/CDEdit.js
+++ b/www/manager6/qemu/CDEdit.js
@@ -43,11 +43,7 @@ Ext.define('PVE.qemu.CDInputPanel', {
 	    values.mediaType = 'none';
 	} else {
 	    values.mediaType = 'iso';
-	    var match = drive.file.match(/^([^:]+):/);
-	    if (match) {
-		values.cdstorage = match[1];
-		values.cdimage = drive.file;
-	    }
+	    values.cdimage = drive.file;
 	}
 
 	me.drive = drive;
@@ -58,8 +54,7 @@ Ext.define('PVE.qemu.CDInputPanel', {
     setNodename: function(nodename) {
 	var me = this;
 
-	me.cdstoragesel.setNodename(nodename);
-	me.cdfilesel.setStorage(undefined, nodename);
+	me.isosel.setNodename(nodename);
     },
 
     initComponent: function() {
@@ -87,8 +82,7 @@ Ext.define('PVE.qemu.CDInputPanel', {
 		    if (!me.rendered) {
 			return;
 		    }
-		    me.down('field[name=cdstorage]').setDisabled(!value);
-		    var cdImageField = me.down('field[name=cdimage]');
+		    var cdImageField = me.down('pveIsoSelector');
 		    cdImageField.setDisabled(!value);
 		    if (value) {
 			cdImageField.validate();
@@ -99,32 +93,14 @@ Ext.define('PVE.qemu.CDInputPanel', {
 	    },
 	});
 
-	me.cdfilesel = Ext.create('PVE.form.FileSelector', {
-	    name: 'cdimage',
-	    nodename: me.nodename,
-	    storageContent: 'iso',
-	    fieldLabel: gettext('ISO image'),
-	    labelAlign: 'right',
-	    allowBlank: false,
-	});
 
-	me.cdstoragesel = Ext.create('PVE.form.StorageSelector', {
-	    name: 'cdstorage',
+	me.isosel = Ext.create('PVE.form.IsoSelector', {
 	    nodename: me.nodename,
-	    fieldLabel: gettext('Storage'),
-	    labelAlign: 'right',
-	    storageContent: 'iso',
-	    allowBlank: false,
-	    autoSelect: me.insideWizard,
-	    listeners: {
-		change: function(f, value) {
-		    me.cdfilesel.setStorage(value);
-		},
-	    },
+	    insideWizard: me.insideWizard,
+	    name: 'cdimage',
 	});
 
-	items.push(me.cdstoragesel);
-	items.push(me.cdfilesel);
+	items.push(me.isosel);
 
 	items.push({
 	    xtype: 'radiofield',
-- 
2.30.2

[pve-devel] [PATCH manager v2 2/2] ui: vm wizard: allow second iso for windows vms

[Dominik Csapak]

This is useful for adding the virtio-win iso for new installs, and thus
we change the default disk type to scsi and network type to virtio.

we add special logic to the OSTypeInputPanel when 'insideWizard' is
true to add an additional checkbox + iso selector

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* update the vm config for the MultiHDEdit so that it correctly can set
  the value back to ide0
* fix the OSTypeInputPanel in the non insideWizard case
* use onGetValues to construct the drive properly in the wizard

 www/manager6/qemu/CreateWizard.js |  3 ++
 www/manager6/qemu/MultiHDEdit.js  |  8 ++-
 www/manager6/qemu/OSTypeEdit.js   | 84 ++++++++++++++++++++++++++++++-
 3 files changed, 93 insertions(+), 2 deletions(-)

diff --git a/www/manager6/qemu/CreateWizard.js b/www/manager6/qemu/CreateWizard.js
index 74b1feb6..443e42c6 100644
--- a/www/manager6/qemu/CreateWizard.js
+++ b/www/manager6/qemu/CreateWizard.js
@@ -161,6 +161,9 @@ Ext.define('PVE.qemu.CreateWizard', {
 		{
 		    xtype: 'pveQemuOSTypePanel',
 		    insideWizard: true,
+		    bind: {
+			nodename: '{nodename}',
+		    },
 		},
 	    ],
 	},
diff --git a/www/manager6/qemu/MultiHDEdit.js b/www/manager6/qemu/MultiHDEdit.js
index caf74fad..27884f3f 100644
--- a/www/manager6/qemu/MultiHDEdit.js
+++ b/www/manager6/qemu/MultiHDEdit.js
@@ -37,11 +37,17 @@ Ext.define('PVE.qemu.MultiHDPanel', {
 	    let me = this;
 	    let vm = me.getViewModel();
 
-	    return {
+	    let res = {
 		ide2: 'media=cdrom',
 		scsihw: vm.get('current.scsihw'),
 		ostype: vm.get('current.ostype'),
 	    };
+
+	    if (vm.get('current.ide0') === "some") {
+		res.ide0 = "media=cdrom";
+	    }
+
+	    return res;
 	},
 
 	diskSorter: {
diff --git a/www/manager6/qemu/OSTypeEdit.js b/www/manager6/qemu/OSTypeEdit.js
index 3332a0bc..109f645d 100644
--- a/www/manager6/qemu/OSTypeEdit.js
+++ b/www/manager6/qemu/OSTypeEdit.js
@@ -14,9 +14,21 @@ Ext.define('PVE.qemu.OSTypeInputPanel', {
 		afterrender: 'onOSTypeChange',
 		change: 'onOSTypeChange',
 	    },
+	    'checkbox[reference=enableSecondCD]': {
+		change: 'onSecondCDChange',
+	    },
 	},
 	onOSBaseChange: function(field, value) {
-	    this.lookup('ostype').getStore().setData(PVE.Utils.kvm_ostypes[value]);
+	    let me = this;
+	    me.lookup('ostype').getStore().setData(PVE.Utils.kvm_ostypes[value]);
+	    if (me.getView().insideWizard) {
+		let isWindows = value === 'Microsoft Windows';
+		let enableSecondCD = me.lookup('enableSecondCD');
+		enableSecondCD.setVisible(isWindows);
+		if (!isWindows) {
+		    enableSecondCD.setValue(false);
+		}
+	    }
 	},
 	onOSTypeChange: function(field) {
 	    var me = this, ostype = field.getValue();
@@ -42,6 +54,48 @@ Ext.define('PVE.qemu.OSTypeInputPanel', {
 		// ignore multiple disks, we only want to set the type if there is a single disk
 	    }
 	},
+	onSecondCDChange: function(widget, value, lastValue) {
+	    let me = this;
+	    let vm = me.getViewModel();
+	    let updateVMConfig = function () {
+		let widgets = Ext.ComponentQuery.query('pveMultiHDPanel');
+		if (widgets.length === 1) {
+		    widgets[0].getController().updateVMConfig();
+		}
+	    };
+	    if (value) {
+		// only for windows
+		vm.set('current.ide0', "some");
+		vm.notify();
+		updateVMConfig();
+		me.setWidget('pveBusSelector', 'scsi');
+		me.setWidget('pveNetworkCardSelector', 'virtio');
+	    } else {
+		vm.set('current.ide0', "");
+		vm.notify();
+		updateVMConfig();
+		me.setWidget('pveBusSelector', 'scsi');
+		let ostype = me.lookup('ostype').getValue();
+		var targetValues = PVE.qemu.OSDefaults.getDefaults(ostype);
+		me.setWidget('pveBusSelector', targetValues.busType);
+	    }
+	},
+    },
+
+    setNodename: function(nodename) {
+	var me = this;
+	me.lookup('isoSelector').setNodename(nodename);
+    },
+
+    onGetValues: function(values) {
+	if (values.ide0) {
+	    let drive = {
+		media: 'cdrom',
+		file: values.ide0,
+	    };
+	    values.ide0 = PVE.Parser.printQemuDrive(drive);
+	}
+	return values;
     },
 
     initComponent: function() {
@@ -92,6 +146,34 @@ Ext.define('PVE.qemu.OSTypeInputPanel', {
 	    },
 	];
 
+	if (me.insideWizard) {
+	    me.items.push(
+		{
+		    xtype: 'proxmoxcheckbox',
+		    reference: 'enableSecondCD',
+		    isFormField: false,
+		    hidden: true,
+		    checked: false,
+		    boxLabel: gettext('Add Second CD/DVD Image file (iso)'),
+		    listeners: {
+			change: function(cb, value) {
+			    me.lookup('isoSelector').setDisabled(!value);
+			    me.lookup('isoSelector').setHidden(!value);
+			},
+		    },
+		},
+		{
+		    xtype: 'pveIsoSelector',
+		    reference: 'isoSelector',
+		    name: 'ide0',
+		    nodename: me.nodename,
+		    insideWizard: true,
+		    hidden: true,
+		    disabled: true,
+		},
+	    );
+	}
+
 	me.callParent();
     },
 });
-- 
2.30.2

[pve-devel] applied: [PATCH manager v2 1/2] ui: refactor iso selector out of the cd input panel

[Thomas Lamprecht]

Am 20/11/2023 um 16:45 schrieb Dominik Csapak:
> and make it into a proper field
> it's intended to be used like a single field and exactly as before
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> no changes
>  www/manager6/Makefile            |   1 +
>  www/manager6/form/IsoSelector.js | 107 +++++++++++++++++++++++++++++++
>  www/manager6/qemu/CDEdit.js      |  38 ++---------
>  3 files changed, 115 insertions(+), 31 deletions(-)
>  create mode 100644 www/manager6/form/IsoSelector.js
> 
>

applied series, with slight rename to the boxLabel to better hint
that we expect a virtio driver ISO here, thanks!