[pve-devel] [PATCH manager 3/3] ui: qemu hd edit: allow importing a disk from the import storage

[Filip Schauer]

I ran into a bug when creating a VM in the Web UI:
On the "Disks" tab the wizard does not let me proceed with the default
configuration. When selecting an image to import and then unchecking the
"Import Image" box again, the wizard lets me proceed again.

On the other hand, adding a qcow2 image to an existing VM via the Web UI
works fine.

On 13/03/2025 12:17, Dominik Csapak wrote:
> adds a checkbox 'import image' above the storage selector which:
> * hides the original storage selector
> * shows a 'source storage' selector
> * shows a 'import file' selector
> * shows a 'target storage' selector
>
> Since the wizard and the hd edit share this panel, this also works in
> the wizard.
>
> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
>   www/manager6/qemu/HDEdit.js | 72 ++++++++++++++++++++++++++++++++++++-
>   1 file changed, 71 insertions(+), 1 deletion(-)
>
> diff --git a/www/manager6/qemu/HDEdit.js b/www/manager6/qemu/HDEdit.js
> index b78647ec..a235815d 100644
> --- a/www/manager6/qemu/HDEdit.js
> +++ b/www/manager6/qemu/HDEdit.js
> @@ -78,11 +78,17 @@ Ext.define('PVE.qemu.HDInputPanel', {
>   	    if (values.hdimage) {
>   		me.drive.file = values.hdimage;
>   	    } else {
> -		me.drive.file = values.hdstorage + ":" + values.disksize;
> +		let disksize = values.disksize;
> +		if (values['import-from']) {
> +		    PVE.Utils.propertyStringSet(me.drive, values['import-from'], 'import-from');
> +		    disksize = 0;
> +		}
> +		me.drive.file = `${values.hdstorage}:${disksize}`;
>   	    }
>   	    me.drive.format = values.diskformat;
>   	}
>   
> +
>   	PVE.Utils.propertyStringSet(me.drive, !values.backup, 'backup', '0');
>   	PVE.Utils.propertyStringSet(me.drive, values.noreplicate, 'replicate', 'no');
>   	PVE.Utils.propertyStringSet(me.drive, values.discard, 'discard', 'on');
> @@ -168,6 +174,11 @@ Ext.define('PVE.qemu.HDInputPanel', {
>   	var me = this;
>   	me.down('#hdstorage').setNodename(nodename);
>   	me.down('#hdimage').setStorage(undefined, nodename);
> +
> +	me.lookup('new-disk').setNodename(nodename);
> +	me.lookup('import-source').setNodename(nodename);
> +	me.lookup('import-source-file').setNodename(nodename);
> +	me.lookup('import-target').setNodename(nodename);
>       },
>   
>       hasAdvanced: true,
> @@ -221,12 +232,71 @@ Ext.define('PVE.qemu.HDInputPanel', {
>   	    column1.push(me.unusedDisks);
>   	} else if (me.isCreate) {
>   	    column1.push({
> +		xtype: 'proxmoxcheckbox',
> +		isFormField: false,
> +		fieldLabel: gettext("Import Image"),
> +		listeners: {
> +		    change: function(_cb, value) {
> +			me.lookup('new-disk').setVisible(!value);
> +			me.lookup('new-disk').setDisabled(!!value);
> +
> +			me.lookup('import-source').setVisible(!!value);
> +			me.lookup('import-source').setDisabled(!value);
> +			me.lookup('import-source-file').setVisible(!!value);
> +
> +			me.lookup('import-target').setVisible(!!value);
> +			me.lookup('import-target').setDisabled(!value);
> +		    },
> +		},
> +	    });
> +	    column1.push({
> +		reference: 'new-disk',
>   		xtype: 'pveDiskStorageSelector',
>   		storageContent: 'images',
>   		name: 'disk',
>   		nodename: me.nodename,
>   		autoSelect: me.insideWizard,
>   	    });
> +	    column1.push({
> +		xtype: 'pveStorageSelector',
> +		reference: 'import-source',
> +		fieldLabel: gettext('Import Storage'),
> +		name: 'import-source-storage',
> +		hidden: true,
> +		disabled: true,
> +		storageContent: 'import',
> +		nodename: me.nodename,
> +		autoSelect: me.insideWizard,
> +		listeners: {
> +		    change: function(_selector, storage) {
> +			me.lookup('import-source-file').setDisabled(!storage);
> +			me.lookup('import-source-file').setStorage(storage);
> +		    },
> +		},
> +	    });
> +	    column1.push({
> +		xtype: 'pveFileSelector',
> +		reference: 'import-source-file',
> +		fieldLabel: gettext("Select Image"),
> +		hidden: true,
> +		disabled: true,
> +		storageContent: 'import',
> +		name: 'import-from',
> +		filter: (rec) => rec?.data?.format === 'qcow2',
> +		nodename: me.nodename,
> +	    });
> +	    column1.push({
> +		xtype: 'pveDiskStorageSelector',
> +		reference: 'import-target',
> +		storageLabel: gettext('Target Storage'),
> +		hidden: true,
> +		disabled: true,
> +		hideSize: true,
> +		storageContent: 'images',
> +		name: 'target',
> +		nodename: me.nodename,
> +		autoSelect: me.insideWizard,
> +	    });
>   	} else {
>   	    column1.push({
>   		xtype: 'textfield',