[pve-devel] [PATCH pve-manager 1/3] ui: de-stackify RRD memory graphs

[Dominik Csapak]

From: Thomas Lamprecht <t.lamprecht at proxmox.com>

highly confusing if y-axis does not matches the metric and "jumps" if
metrics get toggled via the legend.

Keep the 'host memory' in vm graphs as a line, as otherwise the
overlapping colors make the graph also confusing, and keep it's
'hidden by default' logic.

While at it, use title case for the legend.

Originally-by: Thomas Lamprecht <t.lamprecht at proxmox.com>
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/data/model/RRDModels.js | 28 ----------------------------
 www/manager6/node/Summary.js         | 12 +++---------
 www/manager6/panel/GuestSummary.js   | 20 +++++++++-----------
 3 files changed, 12 insertions(+), 48 deletions(-)

diff --git a/www/manager6/data/model/RRDModels.js b/www/manager6/data/model/RRDModels.js
index cc5d31d2..362f9740 100644
--- a/www/manager6/data/model/RRDModels.js
+++ b/www/manager6/data/model/RRDModels.js
@@ -33,25 +33,6 @@ Ext.define('pve-rrd-node', {
         'pressurememorysome',
         'pressurememoryfull',
         { type: 'date', dateFormat: 'timestamp', name: 'time' },
-        {
-            name: 'memfree-capped',
-            calculate: function (data) {
-                if (data.memtotal >= 0 && data.memused >= 0 && data.memtotal >= data.memused) {
-                    return data.memtotal - data.memused;
-                }
-                return null;
-            },
-        },
-        {
-            name: 'memused-sub-arcsize',
-            calculate: function (data) {
-                let arcsize = data.arcsize ?? 0; // pre pve9 nodes don't report any arcsize
-                if (data.memused >= 0 && arcsize >= 0 && data.memused >= arcsize) {
-                    return data.memused - arcsize;
-                }
-                return null;
-            },
-        },
     ],
 });
 
@@ -82,15 +63,6 @@ Ext.define('pve-rrd-guest', {
         'pressurememorysome',
         'pressurememoryfull',
         { type: 'date', dateFormat: 'timestamp', name: 'time' },
-        {
-            name: 'memfree-capped',
-            calculate: function (data) {
-                if (data.maxmem >= 0 && data.mem >= 0 && data.maxmem >= data.mem) {
-                    return data.maxmem - data.mem;
-                }
-                return null;
-            },
-        },
     ],
 });
 
diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index 9a3f84a4..c7a33c51 100644
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -177,18 +177,12 @@ Ext.define('PVE.node.Summary', {
                         {
                             xtype: 'proxmoxRRDChart',
                             title: gettext('Memory usage'),
-                            fields: [
-                                {
-                                    type: 'area',
-                                    yField: ['memused-sub-arcsize', 'arcsize', 'memfree-capped'],
-                                    title: [gettext('Used'), gettext('ZFS ARC'), gettext('Free')],
-                                },
-                            ],
-                            colors: ['#115fa6', '#7c7474', '#94ae0a'],
+                            fields: ['memtotal', 'memused', 'arcsize'],
+                            fieldTitles: [gettext('Total'), gettext('Used'), gettext('ZFS ARC')],
+                            colors: ['#94ae0a', '#115fa6', '#7c7474'],
                             unit: 'bytes',
                             powerOfTwo: true,
                             store: rrdstore,
-                            stacked: true,
                         },
                         {
                             xtype: 'proxmoxRRDChart',
diff --git a/www/manager6/panel/GuestSummary.js b/www/manager6/panel/GuestSummary.js
index f46006b4..9a9ced38 100644
--- a/www/manager6/panel/GuestSummary.js
+++ b/www/manager6/panel/GuestSummary.js
@@ -33,19 +33,16 @@ Ext.define('PVE.guest.Summary', {
         let hideMemhostStateKey = 'pve-vm-hide-memhost';
         let sp = Ext.state.Manager.getProvider();
 
-        let memoryFields = [
-            {
-                type: 'area',
-                yField: ['mem', 'memfree-capped'],
-                title: [gettext('Used'), gettext('Free')],
-            },
-        ];
+        let memoryStats = {
+            fields: ['maxmem', 'mem'],
+            fieldTitles: [gettext('Total'), gettext('Used')],
+        };
         if (type === 'qemu') {
-            memoryFields.push({
+            memoryStats.fields.push({
                 type: 'line',
                 fill: false,
                 yField: 'memhost',
-                title: gettext('Host memory usage'),
+                title: gettext('Host Memory Usage'),
                 hidden: sp.get(hideMemhostStateKey, true),
                 style: {
                     lineWidth: 2.5,
@@ -106,8 +103,9 @@ Ext.define('PVE.guest.Summary', {
                     xtype: 'proxmoxRRDChart',
                     title: gettext('Memory Usage'),
                     pveSelNode: me.pveSelNode,
-                    fields: memoryFields,
-                    colors: ['#115fa6', '#94ae0a', '#c4c0c0'],
+                    fields: memoryStats.fields,
+                    fieldTitles: memoryStats.fieldTitles,
+                    colors: ['#94ae0a', '#115fa6', '#c4c0c0'],
                     unit: 'bytes',
                     powerOfTwo: true,
                     store: rrdstore,
-- 
2.39.5