[pve-devel] [PATCH manager v3 10/14] 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>
---
 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,
+            },
+        };
+
+        let memoryFields = [
+            {
+                type: 'area',
+                yField: ['mem', 'maxmem-capped'],
+                title: [gettext('RAM usage'), gettext('Configured')],
+            },
+        ];
+        if (type === 'qemu') {
+            memoryFields.push(memhostField);
+        }
+
         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,
-- 
2.39.5