[pve-devel] [PATCH manager v4 08/15] ui: GuestSummary: memory switch to stacked and add hostmem

[Aaron Lauterer]

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>
---

Notes:
    changes since:
    v3:
    * align column from maxmem-capped to memfree-capped
    * rename columns:
      * 'RAM Used' -> 'Used'
      * 'Configured' -> 'Free'

 www/manager6/panel/GuestSummary.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/www/manager6/panel/GuestSummary.js b/www/manager6/panel/GuestSummary.js
index 0b62dbb7..77ec3e3f 100644
--- a/www/manager6/panel/GuestSummary.js
+++ b/www/manager6/panel/GuestSummary.js
@@ -30,6 +30,27 @@ Ext.define('PVE.guest.Summary', {
         var template = !!me.pveSelNode.data.template;
         var rstore = me.statusStore;
 
+        let memoryFields = [
+            {
+                type: 'area',
+                yField: ['mem', 'memfree-capped'],
+                title: [gettext('Used'), gettext('Free')],
+            },
+        ];
+        if (type === 'qemu') {
+            memoryFields.push({
+                type: 'line',
+                fill: false,
+                yField: 'memhost',
+                title: gettext('Host memory usage'),
+                hidden: true,
+                style: {
+                    lineWidth: 2.5,
+                    opacity: 1,
+                },
+            });
+        }
+
         var items = [
             {
                 xtype: template ? 'pveTemplateStatusView' : 'pveGuestStatusView',
@@ -82,8 +103,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,
-- 
2.39.5