[pve-devel] [PATCH manager v3 11/14] ui: nodesummary: guestsummary: add tooltip info buttons

[Aaron Lauterer]

This way, we can provide a bit more context to what the graph is
showing. Hopefully making it easier for our users to draw useful
conclusions from the provided information.

Signed-off-by: Aaron Lauterer <a.lauterer at proxmox.com>
---

Notes:
    while not available for all graphs for now, this should help users
    understand the more complex ones.
    
    The phrasing might be improved of course.

 www/manager6/node/Summary.js       | 40 ++++++++++++++++++++++++++++++
 www/manager6/panel/GuestSummary.js | 30 ++++++++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index b00fcf2e..7bd3324c 100644
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -162,6 +162,16 @@ Ext.define('PVE.node.Summary', {
                         {
                             xtype: 'proxmoxRRDChart',
                             title: gettext('CPU usage'),
+                            tools: [
+                                {
+                                    glyph: 'xf05a at FontAwesome', // fa-info-circle
+                                    tooltip: gettext("IO Delay is a measure of how much time processes had to wait for IO to be finished."),
+                                    disabled: false,
+                                    style: {
+                                        paddingRight: '5px',
+                                    },
+                                },
+                            ],
                             fields: ['cpu', 'iowait'],
                             fieldTitles: [gettext('CPU usage'), gettext('IO delay')],
                             unit: 'percent',
@@ -199,6 +209,16 @@ Ext.define('PVE.node.Summary', {
                         {
                             xtype: 'proxmoxRRDChart',
                             title: gettext('CPU pressure'),
+                            tools: [
+                                {
+                                    glyph: 'xf05a at FontAwesome', // fa-info-circle
+                                    tooltip: gettext("Shows if some processes on the host had to wait for CPU resources."),
+                                    disabled: false,
+                                    style: {
+                                        paddingRight: '5px',
+                                    },
+                                },
+                            ],
                             fieldTitles: ['Some'],
                             fields: ['pressurecpusome'],
                             colors: ['#FFD13E', '#A61120'],
@@ -208,6 +228,16 @@ Ext.define('PVE.node.Summary', {
                         {
                             xtype: 'proxmoxRRDChart',
                             title: gettext('IO pressure'),
+                            tools: [
+                                {
+                                    glyph: 'xf05a at FontAwesome', // fa-info-circle
+                                    tooltip: gettext("Shows if some or all (Full) processes on the host had to wait for IO (disk & network) resources."),
+                                    disabled: false,
+                                    style: {
+                                        paddingRight: '5px',
+                                    },
+                                },
+                            ],
                             fieldTitles: ['Some', 'Full'],
                             fields: ['pressureiosome', 'pressureiofull'],
                             colors: ['#FFD13E', '#A61120'],
@@ -217,6 +247,16 @@ Ext.define('PVE.node.Summary', {
                         {
                             xtype: 'proxmoxRRDChart',
                             title: gettext('Memory pressure'),
+                            tools: [
+                                {
+                                    glyph: 'xf05a at FontAwesome', // fa-info-circle
+                                    tooltip: gettext("Shows if some or all (Full) processes on the host had to wait for memory resources."),
+                                    disabled: false,
+                                    style: {
+                                        paddingRight: '5px',
+                                    },
+                                },
+                            ],
                             fieldTitles: ['Some', 'Full'],
                             fields: ['pressurememorysome', 'pressurememoryfull'],
                             colors: ['#FFD13E', '#A61120'],
diff --git a/www/manager6/panel/GuestSummary.js b/www/manager6/panel/GuestSummary.js
index e26b0ada..cf54f38e 100644
--- a/www/manager6/panel/GuestSummary.js
+++ b/www/manager6/panel/GuestSummary.js
@@ -127,6 +127,16 @@ Ext.define('PVE.guest.Summary', {
                 {
                     xtype: 'proxmoxRRDChart',
                     title: gettext('CPU pressure'),
+                    tools: [
+                        {
+                            glyph: 'xf05a at FontAwesome', // fa-info-circle
+                            tooltip: gettext("Shows if some or all (Full) processes belonging to the guest had to wait for CPU resources."),
+                            disabled: false,
+                            style: {
+                                paddingRight: '5px',
+                            },
+                        },
+                    ],
                     pveSelNode: me.pveSelNode,
                     fieldTitles: ['Some', 'Full'],
                     fields: ['pressurecpusome', 'pressurecpufull'],
@@ -137,6 +147,16 @@ Ext.define('PVE.guest.Summary', {
                 {
                     xtype: 'proxmoxRRDChart',
                     title: gettext('IO pressure'),
+                    tools: [
+                        {
+                            glyph: 'xf05a at FontAwesome', // fa-info-circle
+                            tooltip: gettext("Shows if some or all (Full) processes belonging to the guest had to wait for IO (disk & network) resources."),
+                            disabled: false,
+                            style: {
+                                paddingRight: '5px',
+                            },
+                        },
+                    ],
                     pveSelNode: me.pveSelNode,
                     fieldTitles: ['Some', 'Full'],
                     fields: ['pressureiosome', 'pressureiofull'],
@@ -147,6 +167,16 @@ Ext.define('PVE.guest.Summary', {
                 {
                     xtype: 'proxmoxRRDChart',
                     title: gettext('Memory pressure'),
+                    tools: [
+                        {
+                            glyph: 'xf05a at FontAwesome', // fa-info-circle
+                            tooltip: gettext("Shows if some or all (Full) processes belonging to the guest had to wait for memory resources."),
+                            disabled: false,
+                            style: {
+                                paddingRight: '5px',
+                            },
+                        },
+                    ],
                     pveSelNode: me.pveSelNode,
                     fieldTitles: ['Some', 'Full'],
                     fields: ['pressurememorysome', 'pressurememoryfull'],
-- 
2.39.5