[pve-devel] [PATCH manager v7 3/3] ui: import storage content: allow importing of vm disk images

[Dominik Csapak <d.csapak@proxmox.com>]

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 |  22 ++--
 2 files changed, 171 insertions(+), 31 deletions(-)

diff --git a/www/manager6/qemu/HDEdit.js b/www/manager6/qemu/HDEdit.js
index 38bfb883..0a9c718d 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
 
@@ -240,31 +241,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',
@@ -553,3 +567,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 c0b66acc..c25b99be 100644
--- a/www/manager6/storage/Browser.js
+++ b/www/manager6/storage/Browser.js
@@ -124,7 +124,7 @@ 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;
@@ -132,12 +132,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