[RFC PATCH pve-manager 1/2] ui: iso selector: add 'reload' button

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

so a user can manually reload the storage list as well as the file list.
This sometimes comes up when e.g. creating a new guest and a user
uploads a new ISO in a different tab.

The new button is added in a new row beneath the file selector and shows
the loading progress until the storage as well as the file selector are
done loading.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/form/FileSelector.js    | 12 ++++++++++++
 www/manager6/form/IsoSelector.js     | 27 +++++++++++++++++++++++++++
 www/manager6/form/StorageSelector.js | 11 +++++++++--
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/www/manager6/form/FileSelector.js b/www/manager6/form/FileSelector.js
index b8f6a8c2..af4e4be8 100644
--- a/www/manager6/form/FileSelector.js
+++ b/www/manager6/form/FileSelector.js
@@ -15,6 +15,18 @@ Ext.define('PVE.form.FileSelector', {
         },
     },
 
+    reload: function (finishCb) {
+        let me = this;
+        finishCb ??= Ext.emptyFn;
+        if (!me.storage || !me.nodename || me.isDisabled()) {
+            finishCb();
+            return;
+        }
+        me.store.load(() => {
+            finishCb();
+        });
+    },
+
     setStorage: function (storage, nodename) {
         var me = this;
 
diff --git a/www/manager6/form/IsoSelector.js b/www/manager6/form/IsoSelector.js
index b2d94ed3..48c10427 100644
--- a/www/manager6/form/IsoSelector.js
+++ b/www/manager6/form/IsoSelector.js
@@ -110,5 +110,32 @@ Ext.define('PVE.form.IsoSelector', {
                 },
             },
         },
+        {
+            xtype: 'container',
+            layout: 'hbox',
+            items: [
+                { xtype: 'box', flex: 1 }, // just a spacer
+                {
+                    xtype: 'button',
+                    reference: 'reloadBtn',
+                    iconCls: 'fa fa-refresh',
+                    text: gettext('Reload'),
+                    handler: function () {
+                        let me = this;
+                        me.setDisabled(true);
+                        me.setIconCls('fa fa-refresh fa-spin');
+                        let selector = me.up('pveIsoSelector');
+                        let storage = selector.lookup('storage');
+                        let fileSelector = selector.lookup('file');
+                        storage.reloadStorageList(() => {
+                            fileSelector.reload(() => {
+                                me.setDisabled(false);
+                                me.setIconCls('fa fa-refresh');
+                            });
+                        });
+                    },
+                },
+            ],
+        },
     ],
 });
diff --git a/www/manager6/form/StorageSelector.js b/www/manager6/form/StorageSelector.js
index 0b5e10da..42961f72 100644
--- a/www/manager6/form/StorageSelector.js
+++ b/www/manager6/form/StorageSelector.js
@@ -68,9 +68,11 @@ Ext.define(
             ],
         },
 
-        reloadStorageList: function () {
+        reloadStorageList: function (finishCb) {
             let me = this;
 
+            finishCb ??= Ext.emptyFn;
+
             if (me.clusterView) {
                 me.getStore().setProxy({
                     type: 'proxmox',
@@ -97,6 +99,7 @@ Ext.define(
                 me.getStore().setFilters(filters);
             } else {
                 if (!me.nodename) {
+                    finishCb();
                     return;
                 }
 
@@ -117,7 +120,11 @@ Ext.define(
                 });
             }
 
-            me.store.load(() => me.validate());
+            me.store.load(() => {
+                let result = me.validate();
+                finishCb();
+                return result;
+            });
         },
 
         setTargetNode: function (targetNode) {
-- 
2.47.3