* [pve-devel] [PATCH manager v8 1/3] ui: qemu hd edit: allow importing a disk from the import storage
2025-07-14 12:28 [pve-devel] [PATCH manager v8 0/3] allow importing vm disk images on the UI Dominik Csapak
@ 2025-07-14 12:28 ` Dominik Csapak
2025-07-14 12:28 ` [pve-devel] [PATCH manager v8 2/3] ui: vm create wizard: allow importing disks Dominik Csapak
` (2 subsequent siblings)
3 siblings, 0 replies; 5+ messages in thread
From: Dominik Csapak @ 2025-07-14 12:28 UTC (permalink / raw)
To: pve-devel
from the hardware view of a virtual machine, by adding a new 'Import
Hard Disk' option in the 'Add' menu.
It replaces the standard storage selector by a import storage selector,
the file selector for the image to be imported, and a target storage
selector.
partially fixes #2424
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/manager6/qemu/HDEdit.js | 67 +++++++++++++++++++++++++++----
www/manager6/qemu/HardwareView.js | 6 +++
2 files changed, 65 insertions(+), 8 deletions(-)
diff --git a/www/manager6/qemu/HDEdit.js b/www/manager6/qemu/HDEdit.js
index c3a5d0af..8cc99183 100644
--- a/www/manager6/qemu/HDEdit.js
+++ b/www/manager6/qemu/HDEdit.js
@@ -8,6 +8,8 @@ Ext.define('PVE.qemu.HDInputPanel', {
unused: false, // ADD usused disk imaged
+ importDisk: false, // use import options
+
vmconfig: {}, // used to select usused disks
viewModel: {
@@ -78,7 +80,9 @@ Ext.define('PVE.qemu.HDInputPanel', {
if (values.hdimage) {
me.drive.file = values.hdimage;
} else {
- me.drive.file = values.hdstorage + ':' + values.disksize;
+ let disksize = values['import-from'] ? 0 : values.disksize;
+ me.drive.file = `${values.hdstorage}:${disksize}`;
+ PVE.Utils.propertyStringSet(me.drive, values['import-from'], 'import-from');
}
me.drive.format = values.diskformat;
}
@@ -168,6 +172,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,
@@ -222,13 +231,52 @@ Ext.define('PVE.qemu.HDInputPanel', {
});
column1.push(me.unusedDisks);
} else if (me.isCreate) {
- column1.push({
- xtype: 'pveDiskStorageSelector',
- storageContent: 'images',
- name: 'disk',
- nodename: me.nodename,
- autoSelect: me.insideWizard,
- });
+ if (!me.importDisk) {
+ column1.push({
+ reference: 'new-disk',
+ xtype: 'pveDiskStorageSelector',
+ storageContent: 'images',
+ name: 'disk',
+ nodename: me.nodename,
+ autoSelect: me.insideWizard,
+ });
+ } else {
+ column1.push({
+ xtype: 'pveStorageSelector',
+ reference: 'import-source',
+ fieldLabel: gettext('Import Storage'),
+ name: 'import-source-storage',
+ storageContent: 'import',
+ nodename: me.nodename,
+ autoSelect: me.insideWizard,
+ disabled: false,
+ listeners: {
+ change: function (_selector, storage) {
+ me.lookup('import-source-file').setStorage(storage);
+ me.lookup('import-source-file').setDisabled(!storage);
+ },
+ },
+ });
+ column1.push({
+ xtype: 'pveFileSelector',
+ reference: 'import-source-file',
+ fieldLabel: gettext('Select Image'),
+ storageContent: 'import',
+ name: 'import-from',
+ filter: (rec) => ['qcow2', 'vmdk', 'raw'].indexOf(rec?.data?.format) !== -1,
+ nodename: me.nodename,
+ });
+ column1.push({
+ xtype: 'pveDiskStorageSelector',
+ reference: 'import-target',
+ storageLabel: gettext('Target Storage'),
+ hideSize: true,
+ storageContent: 'images',
+ name: 'disk',
+ nodename: me.nodename,
+ autoSelect: me.insideWizard,
+ });
+ }
} else {
column1.push({
xtype: 'textfield',
@@ -455,6 +503,8 @@ Ext.define('PVE.qemu.HDEdit', {
width: 600,
bodyPadding: 0,
+ importDisk: false,
+
initComponent: function () {
var me = this;
@@ -472,6 +522,7 @@ Ext.define('PVE.qemu.HDEdit', {
nodename: nodename,
unused: unused,
isCreate: me.isCreate,
+ importDisk: me.importDisk,
});
if (unused) {
diff --git a/www/manager6/qemu/HardwareView.js b/www/manager6/qemu/HardwareView.js
index ece3de3d..f1f715eb 100644
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -727,6 +727,12 @@ Ext.define('PVE.qemu.HardwareView', {
disabled: !caps.vms['VM.Config.Disk'],
handler: editorFactory('HDEdit'),
},
+ {
+ text: gettext('Import Hard Disk'),
+ iconCls: 'fa fa-fw fa-cloud-download',
+ disabled: !caps.vms['VM.Config.Disk'],
+ handler: editorFactory('HDEdit', { importDisk: true }),
+ },
{
text: gettext('CD/DVD Drive'),
iconCls: 'pve-itype-icon-cdrom',
--
2.39.5
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 5+ messages in thread* [pve-devel] [PATCH manager v8 2/3] ui: vm create wizard: allow importing disks
2025-07-14 12:28 [pve-devel] [PATCH manager v8 0/3] allow importing vm disk images on the UI Dominik Csapak
2025-07-14 12:28 ` [pve-devel] [PATCH manager v8 1/3] ui: qemu hd edit: allow importing a disk from the import storage Dominik Csapak
@ 2025-07-14 12:28 ` Dominik Csapak
2025-07-14 12:28 ` [pve-devel] [PATCH manager v8 3/3] ui: import storage content: allow importing of vm disk images Dominik Csapak
2025-07-15 18:46 ` [pve-devel] applied-series: [PATCH manager v8 0/3] allow importing vm disk images on the UI Thomas Lamprecht
3 siblings, 0 replies; 5+ messages in thread
From: Dominik Csapak @ 2025-07-14 12:28 UTC (permalink / raw)
To: pve-devel
by adding a new 'import' button in the disk tab, which adds the same
input panel as the one we have when doing an 'Import Hard Disk' for an
existing VM.
partially fixes #2424
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/manager6/panel/MultiDiskEdit.js | 36 +++++++++++++++++++++++++----
www/manager6/qemu/MultiHDEdit.js | 5 +++-
2 files changed, 36 insertions(+), 5 deletions(-)
diff --git a/www/manager6/panel/MultiDiskEdit.js b/www/manager6/panel/MultiDiskEdit.js
index a4954775..32fad5dc 100644
--- a/www/manager6/panel/MultiDiskEdit.js
+++ b/www/manager6/panel/MultiDiskEdit.js
@@ -1,6 +1,8 @@
Ext.define('PVE.panel.MultiDiskPanel', {
extend: 'Ext.panel.Panel',
+ mixins: ['Proxmox.Mixin.CBind'],
+
setNodename: function (nodename) {
this.items.each((panel) => panel.setNodename(nodename));
},
@@ -8,6 +10,8 @@ Ext.define('PVE.panel.MultiDiskPanel', {
border: false,
bodyBorder: false,
+ importDisk: false, // allow import panel
+
layout: 'card',
controller: {
@@ -16,25 +20,35 @@ Ext.define('PVE.panel.MultiDiskPanel', {
vmconfig: {},
onAdd: function () {
+ this.addDiskChecked(false);
+ },
+
+ onImport: function () {
+ this.addDiskChecked(true);
+ },
+
+ addDiskChecked: function (importDisk) {
let me = this;
me.lookup('addButton').setDisabled(true);
- me.addDisk();
+ me.lookup('addImportButton').setDisabled(true);
+ me.addDisk(importDisk);
let count = me.lookup('grid').getStore().getCount() + 1; // +1 is from ide2
me.lookup('addButton').setDisabled(count >= me.maxCount);
+ me.lookup('addImportButton').setDisabled(count >= me.maxCount);
},
getNextFreeDisk: function (vmconfig) {
throw 'implement in subclass';
},
- addPanel: function (itemId, vmconfig, nextFreeDisk) {
+ addPanel: function (itemId, vmconfig, nextFreeDisk, importDisk) {
throw 'implement in subclass';
},
// define in subclass
diskSorter: undefined,
- addDisk: function () {
+ addDisk: function (importDisk) {
let me = this;
let grid = me.lookup('grid');
let store = grid.getStore();
@@ -53,7 +67,7 @@ Ext.define('PVE.panel.MultiDiskPanel', {
itemId,
})[0];
- let panel = me.addPanel(itemId, vmconfig, nextFreeDisk);
+ let panel = me.addPanel(itemId, vmconfig, nextFreeDisk, importDisk);
panel.updateVMConfig(vmconfig);
// we need to setup a validitychange handler, so that we can show
@@ -175,6 +189,7 @@ Ext.define('PVE.panel.MultiDiskPanel', {
store.remove(record);
me.getView().remove(record.get('itemId'));
me.lookup('addButton').setDisabled(false);
+ me.lookup('addImportButton').setDisabled(false);
me.updateVMConfig();
me.checkValidity();
},
@@ -214,6 +229,7 @@ Ext.define('PVE.panel.MultiDiskPanel', {
dock: 'left',
border: false,
width: 130,
+ cbind: {}, // for nested cbinds
items: [
{
xtype: 'grid',
@@ -261,6 +277,18 @@ Ext.define('PVE.panel.MultiDiskPanel', {
iconCls: 'fa fa-plus-circle',
handler: 'onAdd',
},
+ {
+ xtype: 'button',
+ reference: 'addImportButton',
+ text: gettext('Import'),
+ iconCls: 'fa fa-cloud-download',
+ handler: 'onImport',
+ margin: '5 0 0 0',
+ cbind: {
+ disabled: '{!importDisk}',
+ hidden: '{!importDisk}',
+ },
+ },
{
// dummy field to control wizard validation
xtype: 'textfield',
diff --git a/www/manager6/qemu/MultiHDEdit.js b/www/manager6/qemu/MultiHDEdit.js
index 06b186fd..0b048709 100644
--- a/www/manager6/qemu/MultiHDEdit.js
+++ b/www/manager6/qemu/MultiHDEdit.js
@@ -4,6 +4,8 @@ Ext.define('PVE.qemu.MultiHDPanel', {
onlineHelp: 'qm_hard_disk',
+ importDisk: true,
+
controller: {
xclass: 'Ext.app.ViewController',
@@ -19,7 +21,7 @@ Ext.define('PVE.qemu.MultiHDPanel', {
return PVE.Utils.nextFreeDisk(clist, vmconfig);
},
- addPanel: function (itemId, vmconfig, nextFreeDisk) {
+ addPanel: function (itemId, vmconfig, nextFreeDisk, importDisk) {
let me = this;
return me.getView().add({
vmconfig,
@@ -33,6 +35,7 @@ Ext.define('PVE.qemu.MultiHDPanel', {
itemId,
isCreate: true,
insideWizard: true,
+ importDisk,
});
},
--
2.39.5
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 5+ messages in thread* [pve-devel] [PATCH manager v8 3/3] ui: import storage content: allow importing of vm disk images
2025-07-14 12:28 [pve-devel] [PATCH manager v8 0/3] allow importing vm disk images on the UI Dominik Csapak
2025-07-14 12:28 ` [pve-devel] [PATCH manager v8 1/3] ui: qemu hd edit: allow importing a disk from the import storage Dominik Csapak
2025-07-14 12:28 ` [pve-devel] [PATCH manager v8 2/3] ui: vm create wizard: allow importing disks Dominik Csapak
@ 2025-07-14 12:28 ` Dominik Csapak
2025-07-15 18:46 ` [pve-devel] applied-series: [PATCH manager v8 0/3] allow importing vm disk images on the UI Thomas Lamprecht
3 siblings, 0 replies; 5+ messages in thread
From: Dominik Csapak @ 2025-07-14 12:28 UTC (permalink / raw)
To: pve-devel
By enabling the import button for qcow2/vmdk/raw files, and showing a
window with a VMID selector and the disk edit panel.
Change the edit panel so that when we give an explicit volume id
directly, we don't let the user select one. Instead it show it in a
displayfield.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/manager6/qemu/HDEdit.js | 180 +++++++++++++++++++++++++++-----
www/manager6/storage/Browser.js | 23 ++--
2 files changed, 172 insertions(+), 31 deletions(-)
diff --git a/www/manager6/qemu/HDEdit.js b/www/manager6/qemu/HDEdit.js
index 8cc99183..d5ebfdb9 100644
--- a/www/manager6/qemu/HDEdit.js
+++ b/www/manager6/qemu/HDEdit.js
@@ -9,6 +9,7 @@ Ext.define('PVE.qemu.HDInputPanel', {
unused: false, // ADD usused disk imaged
importDisk: false, // use import options
+ importSelection: undefined, // preselect a disk to import
vmconfig: {}, // used to select usused disks
@@ -241,31 +242,44 @@ Ext.define('PVE.qemu.HDInputPanel', {
autoSelect: me.insideWizard,
});
} else {
- column1.push({
- xtype: 'pveStorageSelector',
- reference: 'import-source',
- fieldLabel: gettext('Import Storage'),
- name: 'import-source-storage',
- storageContent: 'import',
- nodename: me.nodename,
- autoSelect: me.insideWizard,
- disabled: false,
- listeners: {
- change: function (_selector, storage) {
- me.lookup('import-source-file').setStorage(storage);
- me.lookup('import-source-file').setDisabled(!storage);
+ if (me.importSelection) {
+ column1.push({
+ xtype: 'displayfield',
+ fieldLabel: gettext('Selected Image'),
+ value: me.importSelection,
+ });
+ column1.push({
+ xtype: 'hiddenfield',
+ name: 'import-from',
+ value: me.importSelection,
+ });
+ } else {
+ column1.push({
+ xtype: 'pveStorageSelector',
+ reference: 'import-source',
+ fieldLabel: gettext('Import Storage'),
+ name: 'import-source-storage',
+ storageContent: 'import',
+ nodename: me.nodename,
+ autoSelect: me.insideWizard,
+ disabled: false,
+ listeners: {
+ change: function (_selector, storage) {
+ me.lookup('import-source-file').setStorage(storage);
+ me.lookup('import-source-file').setDisabled(!storage);
+ },
},
- },
- });
- column1.push({
- xtype: 'pveFileSelector',
- reference: 'import-source-file',
- fieldLabel: gettext('Select Image'),
- storageContent: 'import',
- name: 'import-from',
- filter: (rec) => ['qcow2', 'vmdk', 'raw'].indexOf(rec?.data?.format) !== -1,
- nodename: me.nodename,
- });
+ });
+ column1.push({
+ xtype: 'pveFileSelector',
+ reference: 'import-source-file',
+ fieldLabel: gettext('Select Image'),
+ storageContent: 'import',
+ name: 'import-from',
+ filter: (rec) => ['qcow2', 'vmdk', 'raw'].indexOf(rec?.data?.format) !== -1,
+ nodename: me.nodename,
+ });
+ }
column1.push({
xtype: 'pveDiskStorageSelector',
reference: 'import-target',
@@ -557,3 +571,121 @@ Ext.define('PVE.qemu.HDEdit', {
});
},
});
+
+Ext.define('PVE.qemu.HDImportEdit', {
+ extend: 'Proxmox.window.Edit',
+ mixins: ['Proxmox.Mixin.CBind'],
+
+ isAdd: true,
+ isCreate: true,
+
+ backgroundDelay: 5,
+
+ width: 600,
+ bodyPadding: 0,
+
+ title: gettext('Import Hard Disk'),
+
+ url: 'dummy', // will be set on vmid change
+
+ cbindData: function () {
+ let me = this;
+
+ if (!me.nodename) {
+ throw 'no nodename given';
+ }
+
+ if (!me.selection) {
+ throw 'no image preselected';
+ }
+
+ return {
+ nodename: me.nodename,
+ selection: me.selection,
+ };
+ },
+
+ controller: {
+ xclass: 'Ext.app.ViewController',
+
+ onVmidChange: function (_selector, value) {
+ let me = this;
+ let view = me.getView();
+ let ipanel = me.lookup('ipanel');
+ ipanel.setDisabled(true);
+ ipanel.setVisible(!!value);
+ let validation = me.lookup('validationProxy');
+ validation.setValue(false);
+ view.url = `/api2/extjs/nodes/${view.nodename}/qemu/${value}/config`;
+ Proxmox.Utils.setErrorMask(ipanel, true);
+
+ Proxmox.Utils.API2Request({
+ url: view.url,
+ method: 'GET',
+ success: function (response, opts) {
+ ipanel.setVMConfig(response.result.data);
+
+ validation.setValue(true);
+
+ ipanel.setDisabled(false);
+ Proxmox.Utils.setErrorMask(ipanel, false);
+ },
+ failure: function (response, _opts) {
+ Proxmox.Utils.setErrorMask(ipanel, response.htmlStatus);
+ },
+ });
+ },
+ },
+
+ items: [
+ {
+ xtype: 'vmComboSelector',
+ padding: 10,
+ allowBlank: false,
+ fieldLabel: gettext('Target Guest'),
+ submitValue: false,
+ cbind: {}, // for nested cbinds
+ store: {
+ model: 'PVEResources',
+ autoLoad: true,
+ sorters: 'vmid',
+ cbind: {}, // for nested cbinds
+ filters: [
+ {
+ property: 'type',
+ value: 'qemu',
+ },
+ {
+ property: 'node',
+ cbind: {
+ value: '{nodename}',
+ },
+ },
+ ],
+ },
+ listeners: {
+ change: 'onVmidChange',
+ },
+ },
+ {
+ // used to prevent submitting while vm config is being loaded or that returns an error
+ xtype: 'textfield',
+ reference: 'validationProxy',
+ submitValue: false,
+ hidden: true,
+ validator: (val) => !!val,
+ },
+ {
+ xtype: 'pveQemuHDInputPanel',
+ reference: 'ipanel',
+ hidden: true,
+ disabled: true,
+ isCreate: true,
+ importDisk: true,
+ cbind: {
+ importSelection: '{selection}',
+ nodename: '{nodename}',
+ },
+ },
+ ],
+});
diff --git a/www/manager6/storage/Browser.js b/www/manager6/storage/Browser.js
index 73adc76a..d0237948 100644
--- a/www/manager6/storage/Browser.js
+++ b/www/manager6/storage/Browser.js
@@ -130,7 +130,8 @@ Ext.define('PVE.storage.Browser', {
});
}
if (contents.includes('import')) {
- let isImportable = (format) => ['ova', 'ovf', 'vmx'].indexOf(format) !== -1;
+ let isImportable = (format) =>
+ ['ova', 'ovf', 'vmx', 'raw', 'qcow2', 'vmdk'].indexOf(format) !== -1;
let createGuestImportWindow = (selection) => {
if (!selection) {
return;
@@ -138,12 +139,20 @@ Ext.define('PVE.storage.Browser', {
let volumeName = selection.data.volid.replace(/^.*?:/, '');
- Ext.create('PVE.window.GuestImport', {
- storage: storeid,
- volumeName,
- nodename,
- autoShow: true,
- });
+ if (['raw', 'vmdk', 'qcow2'].indexOf(selection.data.format) !== -1) {
+ Ext.create('PVE.qemu.HDImportEdit', {
+ selection: selection.data.volid,
+ nodename,
+ autoShow: true,
+ });
+ } else {
+ Ext.create('PVE.window.GuestImport', {
+ storage: storeid,
+ volumeName,
+ nodename,
+ autoShow: true,
+ });
+ }
};
me.items.push({
xtype: 'pveStorageContentView',
--
2.39.5
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 5+ messages in thread* [pve-devel] applied-series: [PATCH manager v8 0/3] allow importing vm disk images on the UI
2025-07-14 12:28 [pve-devel] [PATCH manager v8 0/3] allow importing vm disk images on the UI Dominik Csapak
` (2 preceding siblings ...)
2025-07-14 12:28 ` [pve-devel] [PATCH manager v8 3/3] ui: import storage content: allow importing of vm disk images Dominik Csapak
@ 2025-07-15 18:46 ` Thomas Lamprecht
3 siblings, 0 replies; 5+ messages in thread
From: Thomas Lamprecht @ 2025-07-15 18:46 UTC (permalink / raw)
To: pve-devel, Dominik Csapak
On Mon, 14 Jul 2025 14:28:32 +0200, Dominik Csapak wrote:
> this is a continuation of my previous series [0]
>
> It enables importing disks on the UI in the HardwareView of a vm,
> in the create wizard, and in the storage content view.
>
> I split the patches so that the wizard and storage content view one are
> separate, so they can be reviewed independently.
>
> [...]
Rechecking the UI/UX again and changed my mind now a bit, the wizard ones
might indeed be quite useful for some users. FWIW, in the wizard we could
reduce the amount of buttons slightly by moving the "import" one into the
"add" one, i.e., make the latter a split button defaulting to "add" with
"import" as sub-menu option–but just to throw out an idea, I did not
actually test if would really look and work OK that way.
Applied, thanks!
[1/3] ui: qemu hd edit: allow importing a disk from the import storage
commit: e44afffab0102b041402e9726d2fcc372ea7a664
[2/3] ui: vm create wizard: allow importing disks
commit: 77d70937a7ba36b314fbaa7cfdcb41f9b2172b57
[3/3] ui: import storage content: allow importing of vm disk images
commit: 51a75f07ebcef67b1ea8508318618e8533763ed6
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 5+ messages in thread