[pve-devel] [PATCH manager v3 10/14] ui: GuestSummary: memory switch to stacked and add hostmem

[Dominik Csapak]

two comments inline:

On 7/15/25 16:32, Aaron Lauterer wrote:
> We switch the memory graph to a stacked area graph, similar to what we
> have now on the node summary page.
> 
> Since the order is important, we need to define the colors manually, as
> the default color scheme would switch the colors as we usually have
> them.
> 
> Additionally we add the host memory view as another data series. But we
> keep it as a single line without fill. We chose the grey tone so that is
> works for both, bright and dark theme.
> 
> Signed-off-by: Aaron Lauterer <a.lauterer at proxmox.com>
> ---
>   www/manager6/panel/GuestSummary.js | 26 ++++++++++++++++++++++++--
>   1 file changed, 24 insertions(+), 2 deletions(-)
> 
> diff --git a/www/manager6/panel/GuestSummary.js b/www/manager6/panel/GuestSummary.js
> index 0b62dbb7..e26b0ada 100644
> --- a/www/manager6/panel/GuestSummary.js
> +++ b/www/manager6/panel/GuestSummary.js
> @@ -30,6 +30,28 @@ Ext.define('PVE.guest.Summary', {
>           var template = !!me.pveSelNode.data.template;
>           var rstore = me.statusStore;
>   
> +        let memhostField = {
> +            type: 'line',
> +            fill: false,
> +            yField: 'memhost',
> +            title: gettext('Host memory usage'),
> +            style: {
> +                lineWidth: 2.5,
> +                opacity: 1,
> +            },
> +        };

you could define that inline in the 'push' call below,
then there is no need for the extra variable....

> +
> +        let memoryFields = [
> +            {
> +                type: 'area',
> +                yField: ['mem', 'maxmem-capped'],
> +                title: [gettext('RAM usage'), gettext('Configured')],)

as discussed off-list, 'configured' is not a good name, just keeping 
'total' is better.

> +            },
> +        ];
> +        if (type === 'qemu') {
> +            memoryFields.push(memhostField);


...here, like:

memoryFields.push({ type: 'line', ... });


> +        }
> +
>           var items = [
>               {
>                   xtype: template ? 'pveTemplateStatusView' : 'pveGuestStatusView',
> @@ -82,8 +104,8 @@ Ext.define('PVE.guest.Summary', {
>                       xtype: 'proxmoxRRDChart',
>                       title: gettext('Memory usage'),
>                       pveSelNode: me.pveSelNode,
> -                    fields: ['maxmem', 'mem'],
> -                    fieldTitles: [gettext('Total'), gettext('RAM usage')],
> +                    fields: memoryFields,
> +                    colors: ['#115fa6', '#94ae0a', '#c4c0c0'],
>                       unit: 'bytes',
>                       powerOfTwo: true,
>                       store: rrdstore,