[pve-devel] [PATCH manager v7 2/3] ui: vm create wizard: allow importing disks

[Dominik Csapak]

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 at 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 ea1f974d..ffa2f234 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
@@ -171,6 +185,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();
 	},
@@ -210,6 +225,7 @@ Ext.define('PVE.panel.MultiDiskPanel', {
 	    dock: 'left',
 	    border: false,
 	    width: 130,
+	    cbind: {}, // for nested cbinds
 	    items: [
 		{
 		    xtype: 'grid',
@@ -257,6 +273,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 27884f3f..159236b6 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',
 
@@ -16,7 +18,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,
@@ -30,6 +32,7 @@ Ext.define('PVE.qemu.MultiHDPanel', {
 		itemId,
 		isCreate: true,
 		insideWizard: true,
+		importDisk,
 	    });
 	},
 
-- 
2.39.5