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

[Dominik Csapak]

mhmm not too sure about this. IMHO this info belongs in the
documentation instead of in a tooltip, but I get why we
want to maybe have an explanation for these easily reachable.

First, I'd use the panel tool icons here instead of font awesomes,
like e.g. the undo zoom and close button (from the windows)

Second, maybe having that button link to the correct section
in the docs is better in the long run.

On 7/15/25 16:32, Aaron Lauterer wrote:
> 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'],