[pve-devel] [PATCH manager v8 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 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