[PATCH manager 3/3] ui: workspace: prompt user for reload when UI packages were updated

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

When the UI packages (pve-manager, proxmox-widget-toolkit) are updated,
an already running Web UI instance still uses the potentially older
versions.

Detect that by comparing the version from the site load to the ones
reported from /cluster/resources (which is polled regularly) and prompt
the user to reload the UI.

The message box offers a 'Later' option so that ongoing work can be
finished before reloading. In that case the notice is shown in the top
bar until the user reloads.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/Workspace.js | 66 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 189d3373..392d9783 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -193,6 +193,55 @@ Ext.define('PVE.StdWorkspace', {
         }
     },
 
+    // compare the versions the backend reports with the ones this page was loaded with
+    checkGUIVersions: function () {
+        let me = this;
+
+        if (me.guiUpdateDetected) {
+            return;
+        }
+
+        let node = PVE.data.ResourceStore.getNodeById(Proxmox.NodeName);
+        let versions = node?.data?.versions;
+        if (!versions) {
+            return; // e.g., older backend
+        }
+
+        let changed = Object.entries(Proxmox.GUIVersions ?? {}).some(
+            ([pkg, loaded]) => versions[pkg] !== undefined && versions[pkg] !== loaded,
+        );
+        if (!changed) {
+            return;
+        }
+
+        me.guiUpdateDetected = true;
+        let msgBox = Ext.create('Ext.window.MessageBox', {
+            closeAction: 'destroy',
+        });
+        msgBox.show({
+            title: gettext('New Version Available'),
+            message: gettext(
+                'A new version of the web interface is available. Reload the page to use it.',
+            ),
+            icon: Ext.Msg.INFO,
+            closable: false,
+            buttons: Ext.Msg.YESNO,
+            buttonText: {
+                yes: gettext('Reload UI'),
+                no: gettext('Later'),
+            },
+            fn: function (btn) {
+                if (btn === 'yes') {
+                    window.location.reload();
+                } else if (btn === 'no') {
+                    me.down('#uiUpdateHint').setVisible(true);
+                    me.down('#uiUpdateBtn').setVisible(true);
+                    msgBox.close();
+                }
+            },
+        });
+    },
+
     updateUserInfo: function () {
         let me = this;
         let ui = me.query('#userinfo')[0];
@@ -352,6 +401,21 @@ Ext.define('PVE.StdWorkspace', {
                                 'line-height': '20px',
                             },
                         },
+                        {
+                            itemId: 'uiUpdateHint',
+                            html: gettext('A new version of the web interface is available.'),
+                            hidden: true,
+                        },
+                        {
+                            xtype: 'button',
+                            itemId: 'uiUpdateBtn',
+                            baseCls: 'x-btn',
+                            iconCls: 'fa fa-refresh',
+                            text: gettext('Reload UI'),
+                            margin: '0 5',
+                            hidden: true,
+                            handler: () => window.location.reload(),
+                        },
                         {
                             flex: 2,
                         },
@@ -546,6 +610,8 @@ Ext.define('PVE.StdWorkspace', {
 
         me.updateUserInfo();
 
+        me.mon(PVE.data.ResourceStore, 'load', me.checkGUIVersions, me);
+
         // on resize, center all modal windows
         Ext.on('resize', function () {
             let modalWindows = Ext.ComponentQuery.query('window[modal]');
-- 
2.47.3