[RFC PATCH pve-manager 2/2] ui: iso selector: add 'upload' button in the create VM wizard

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

When first opening the VM create wizard on a new install, it often
happens that no ISO is uploaded yet. Currently this either requires a
second tab to upload it (or doing it manually via the cli) or closing
the wizard, uploading the ISO to the correct storage and then
re-starting the wizard.

Instead, having a direct upload button here, simplifies this by enabling
users to directly upload an iso to the selected storage (if permissions
allow) and automatically select it.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/form/IsoSelector.js | 48 ++++++++++++++++++++++++++++++++
 www/manager6/qemu/CDEdit.js      |  1 +
 www/manager6/qemu/OSPanel.js     |  1 +
 3 files changed, 50 insertions(+)

diff --git a/www/manager6/form/IsoSelector.js b/www/manager6/form/IsoSelector.js
index 48c10427..f42cd4ba 100644
--- a/www/manager6/form/IsoSelector.js
+++ b/www/manager6/form/IsoSelector.js
@@ -8,6 +8,10 @@ Ext.define('PVE.form.IsoSelector', {
         align: 'stretch',
     },
 
+    // enable an upload button for the currently selected storage, requires the
+    // user to have the Datastore.AllocateTemplate privilege
+    allowUpload: false,
+
     nodename: undefined,
     insideWizard: false,
     labelWidth: undefined,
@@ -15,7 +19,14 @@ Ext.define('PVE.form.IsoSelector', {
 
     cbindData: function () {
         let me = this;
+
+        let caps = Ext.state.Manager.get('GuiCap');
+        if (!caps.storage['Datastore.AllocateTemplate']) {
+            me.allowUpload = false;
+        }
+
         return {
+            hideUploadButton: !me.allowUpload,
             nodename: me.nodename,
             insideWizard: me.insideWizard,
         };
@@ -54,6 +65,7 @@ Ext.define('PVE.form.IsoSelector', {
         let me = this;
         me.lookup('storage').setNodename(nodename);
         me.lookup('file').setStorage(undefined, nodename);
+        me.nodename = nodename;
     },
 
     setDisabled: function (disabled) {
@@ -87,6 +99,7 @@ Ext.define('PVE.form.IsoSelector', {
                     let selector = me.up('pveIsoSelector');
                     selector.lookup('file').setStorage(value);
                     selector.checkChange();
+                    selector.lookup('uploadBtn').setDisabled(!value);
                 },
             },
         },
@@ -115,6 +128,41 @@ Ext.define('PVE.form.IsoSelector', {
             layout: 'hbox',
             items: [
                 { xtype: 'box', flex: 1 }, // just a spacer
+                {
+                    xtype: 'button',
+                    reference: 'uploadBtn',
+                    iconCls: 'fa fa-upload',
+                    text: gettext('Upload'),
+                    disabled: true,
+                    cbind: {
+                        hidden: '{hideUploadButton}',
+                    },
+                    handler: function () {
+                        let me = this;
+                        let selector = me.up('pveIsoSelector');
+                        let storage = selector.lookup('storage').getValue();
+                        let nodename = selector.nodename;
+                        if (!storage) {
+                            return;
+                        }
+                        let fileSelector = selector.lookup('file');
+                        let win = Ext.create('PVE.window.UploadToStorage', {
+                            nodename,
+                            storage,
+                            content: 'iso',
+                            autoShow: true,
+                            taskDone: (success) => {
+                                if (!success) {
+                                    return;
+                                }
+                                fileSelector.reload(() => {
+                                    let filename = win.getViewModel().get('filename');
+                                    fileSelector.setValue(`${storage}:iso/${filename}`);
+                                });
+                            },
+                        });
+                    },
+                },
                 {
                     xtype: 'button',
                     reference: 'reloadBtn',
diff --git a/www/manager6/qemu/CDEdit.js b/www/manager6/qemu/CDEdit.js
index c185de53..c8e87d97 100644
--- a/www/manager6/qemu/CDEdit.js
+++ b/www/manager6/qemu/CDEdit.js
@@ -100,6 +100,7 @@ Ext.define('PVE.qemu.CDInputPanel', {
         me.isosel = Ext.create('PVE.form.IsoSelector', {
             nodename: me.nodename,
             insideWizard: me.insideWizard,
+            allowUpload: me.insideWizard,
             name: 'cdimage',
         });
 
diff --git a/www/manager6/qemu/OSPanel.js b/www/manager6/qemu/OSPanel.js
index 556ad4c3..81508b64 100644
--- a/www/manager6/qemu/OSPanel.js
+++ b/www/manager6/qemu/OSPanel.js
@@ -160,6 +160,7 @@ Ext.define('PVE.qemu.OSPanel', {
                             xtype: 'pveIsoSelector',
                             reference: 'isoSelector',
                             name: 'ide0',
+                            allowUpload: true,
                             insideWizard: true,
                             hidden: true,
                             disabled: true,
-- 
2.47.3