[PATCH manager v4 8/8] ui: cluster info: display warnings from the join info endpoint

["Michael Köppl" <m.koeppl@proxmox.com>]

The join info endpoint may return a list of warnings, each with a
message, a warning level, and a warning type. Display these warnings,
with critical warnings being displayed in red, regular warnings in
yellow (as is the case for other warnings throughout the UI), and
informational messages without a background color. In addition, add a
mapping from certain warning types to anchors in the documentation, to
point users in the right direction.

Signed-off-by: Michael Köppl <m.koeppl@proxmox.com>
---
This is mostly based on off-list feedback that different levels of
warnings might warrant different colors. Because a "could be optimize"
in a color that usually warns users might be a bit much. At the same
time, a strong recommendation for lowering the token coefficient means
the timeout is really high and should *really* be lowered. I'm still not
entirely sure regarding the background for the informational message. I
thought about adding a `pmx-info` class or something similar that has a
similar color scheme to the .x-column-header-sort-ASC and
.x-column-header-sort-DESC classes.

 www/manager6/dc/Cluster.js     |  3 +++
 www/manager6/dc/ClusterEdit.js | 38 ++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/www/manager6/dc/Cluster.js b/www/manager6/dc/Cluster.js
index 2ec5588c3..1d654a9ec 100644
--- a/www/manager6/dc/Cluster.js
+++ b/www/manager6/dc/Cluster.js
@@ -86,11 +86,13 @@ Ext.define('PVE.ClusterAdministration', {
                             addr: '',
                             fp: '',
                         });
+                        vm.set('warnings', []);
                         return;
                     }
                     vm.set('totem', data.totem);
                     vm.set('isInCluster', !!data.totem.cluster_name);
                     vm.set('nodelist', data.nodelist);
+                    vm.set('warnings', data.warnings);
 
                     let nodeinfo = data.nodelist.find((el) => el.name === data.preferred_node);
 
@@ -133,6 +135,7 @@ Ext.define('PVE.ClusterAdministration', {
                             peerLinks: vm.get('preferred_node.peerLinks'),
                             ring_addr: vm.get('preferred_node.ring_addr'),
                             totem: vm.get('totem'),
+                            warnings: vm.get('warnings'),
                         },
                     });
                 },
diff --git a/www/manager6/dc/ClusterEdit.js b/www/manager6/dc/ClusterEdit.js
index aff1515ab..51dfe7137 100644
--- a/www/manager6/dc/ClusterEdit.js
+++ b/www/manager6/dc/ClusterEdit.js
@@ -55,6 +55,7 @@ Ext.define('PVE.ClusterInfoWindow', {
         ipAddress: undefined,
         fingerprint: undefined,
         totem: {},
+        warnings: undefined,
     },
 
     initComponent: function () {
@@ -113,6 +114,43 @@ Ext.define('PVE.ClusterInfoWindow', {
             },
         );
 
+        // Encode anchor links for certain warning types
+        const WARNING_HELP_LINKS = {
+            'corosync-membership-recovery-timeout': Proxmox.Utils.get_help_link(
+                'pvecm_changing_token_coefficient',
+            ),
+        };
+
+        for (const w of joinInfo.warnings ?? []) {
+            const helpAnchor = WARNING_HELP_LINKS[w.type];
+            let html = Ext.String.htmlEncode(w.message);
+            if (helpAnchor) {
+                const link = `<a target="_blank" href="${helpAnchor}">${gettext('the documentation')}</a>`;
+                html += ' ' + Ext.String.format(gettext('See {0} for details.'), link);
+            }
+
+            let cls;
+
+            switch (w.level) {
+                case 'info':
+                    cls = null;
+                    break;
+                case 'warning':
+                    cls = 'pmx-hint';
+                    break;
+                case 'critical':
+                    cls = 'pmx-critical';
+                    break;
+            }
+
+            me.items.push({
+                xtype: 'container',
+                border: false,
+                padding: '0 10 10 10',
+                items: [{ xtype: 'displayfield', userCls: cls, value: html }],
+            });
+        }
+
         me.callParent();
     },
     dockedItems: [
-- 
2.47.3