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

[Dominik Csapak]

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 at 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