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

[Aaron Lauterer]

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',
-- 
2.39.5