[pve-devel] [PATCH manager v3 07/14] ui: node summary: use stacked memory graph with zfs arc

[Dominik Csapak]

We should probably refactor the colors to Proxmox.Utils if we'll use
them more often in the future, but aside from that:

Reviewed-by: Dominik Csapak <d.csapak at proxmox.com>

On 7/15/25 16:32, Aaron Lauterer wrote:
> To display the used memory and the ZFS arc as a separate data point,
> keeping the old line overlapping filled line graphs won't work
> anymore. We therefore switch them to area graphs which are stacked by
> default.
> 
> The order of the fields is important here as it affects the order in the
> stacking. This means we also need to override colors manually to keep
> them in line as it used to be.
> Additionally, we don't use the 3rd color in the default extjs color
> scheme, as that would be dark red [0]. We go with a color that is
> different enough and not associated as a warning or error: dark-grey.
> 
> [0] https://docs.sencha.com/extjs/7.0.0/classic/src/Base.js-6.html#line318
> 
> Signed-off-by: Aaron Lauterer <a.lauterer at proxmox.com>
> ---
>   www/manager6/node/Summary.js | 11 +++++++++--
>   1 file changed, 9 insertions(+), 2 deletions(-)
> 
> diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
> index c9d73494..ed3d33d9 100644
> --- a/www/manager6/node/Summary.js
> +++ b/www/manager6/node/Summary.js
> @@ -177,11 +177,18 @@ Ext.define('PVE.node.Summary', {
>                           {
>                               xtype: 'proxmoxRRDChart',
>                               title: gettext('Memory usage'),
> -                            fields: ['memtotal', 'memused'],
> -                            fieldTitles: [gettext('Total'), gettext('RAM usage')],
> +                            fields: [
> +                                {
> +                                    type: 'area',
> +                                    yField: ['memused-sub-arcsize', 'arcsize', 'memfree-capped'],
> +                                    title: [gettext('Used'), gettext('ZFS'), gettext('Free')],
> +                                },
> +                            ],
> +                            colors: ['#115fa6', '#7c7474', '#94ae0a'],
>                               unit: 'bytes',
>                               powerOfTwo: true,
>                               store: rrdstore,
> +                            stacked: true,
>                           },
>                           {
>                               xtype: 'proxmoxRRDChart',