* [pve-devel] [PATCH pve-manager 1/3] ui: de-stackify RRD memory graphs
@ 2025-08-04 11:28 Dominik Csapak
2025-08-04 11:28 ` [pve-devel] [RFC PATCH pve-manager 2/3] ui: node memory RRD: add more infos to the tooltips Dominik Csapak
` (2 more replies)
0 siblings, 3 replies; 4+ messages in thread
From: Dominik Csapak @ 2025-08-04 11:28 UTC (permalink / raw)
To: pve-devel
From: Thomas Lamprecht <t.lamprecht@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@proxmox.com>
Signed-off-by: Dominik Csapak <d.csapak@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
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 4+ messages in thread* [pve-devel] [RFC PATCH pve-manager 2/3] ui: node memory RRD: add more infos to the tooltips
2025-08-04 11:28 [pve-devel] [PATCH pve-manager 1/3] ui: de-stackify RRD memory graphs Dominik Csapak
@ 2025-08-04 11:28 ` Dominik Csapak
2025-08-04 11:28 ` [pve-devel] [RFC PATCH pve-manager 3/3] ui: node memory RRD: add 'Available' graph Dominik Csapak
2025-08-04 12:43 ` [pve-devel] applied-series: [PATCH pve-manager 1/3] ui: de-stackify RRD memory graphs Thomas Lamprecht
2 siblings, 0 replies; 4+ messages in thread
From: Dominik Csapak @ 2025-08-04 11:28 UTC (permalink / raw)
To: pve-devel
the stacked graphs had more information, namely how much memory was
available and how much was used without the ZFS ARC. So put this
information into the tooltip where the users most likely want to see it.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
not sure if this is wanted/needed, since we did not have that
information before either. (But I think it's nice to have)
www/manager6/node/Summary.js | 60 +++++++++++++++++++++++++++++++++++-
1 file changed, 59 insertions(+), 1 deletion(-)
diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index c7a33c51..e51e8ba0 100644
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -177,7 +177,65 @@ Ext.define('PVE.node.Summary', {
{
xtype: 'proxmoxRRDChart',
title: gettext('Memory usage'),
- fields: ['memtotal', 'memused', 'arcsize'],
+ fields: [
+ {
+ yField: 'memtotal',
+ title: gettext('Total'),
+ tooltip: {
+ trackMouse: true,
+ renderer: function (toolTip, record, item) {
+ let value = record.get('memtotal');
+
+ if (value === null) {
+ toolTip.setHtml(gettext('No Data'));
+ } else {
+ let total = Proxmox.Utils.format_size(value);
+ let time = new Date(record.get('time'));
+
+ let avail = record.get('memavailable');
+ let availText = '';
+ if (Ext.isNumeric(avail)) {
+ let v = Proxmox.Utils.format_size(avail);
+ availText = ` (${gettext('Available')}: ${v})`;
+ }
+
+ toolTip.setHtml(
+ `${gettext('Total')}: ${total}${availText}<br>${time}`,
+ );
+ }
+ },
+ },
+ },
+ {
+ yField: 'memused',
+ title: gettext('Used'),
+ tooltip: {
+ trackMouse: true,
+ renderer: function (toolTip, record, item) {
+ let value = record.get('memused');
+
+ if (value === null) {
+ toolTip.setHtml(gettext('No Data'));
+ } else {
+ let total = Proxmox.Utils.format_size(value);
+ let time = new Date(record.get('time'));
+
+ let arc = record.get('arcsize');
+ let arcText = '';
+ if (Ext.isNumeric(arc)) {
+ let v = Proxmox.Utils.format_size(value - arc);
+ arcText = ` (${gettext('Without ZFS ARC')}: ${v})`;
+ }
+
+ toolTip.setHtml(
+ `${gettext('Used')}: ${total}${arcText}<br>${time}`,
+ );
+ }
+ },
+ },
+ },
+ 'arcsize',
+ ],
fieldTitles: [gettext('Total'), gettext('Used'), gettext('ZFS ARC')],
colors: ['#94ae0a', '#115fa6', '#7c7474'],
unit: 'bytes',
--
2.39.5
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 4+ messages in thread* [pve-devel] [RFC PATCH pve-manager 3/3] ui: node memory RRD: add 'Available' graph
2025-08-04 11:28 [pve-devel] [PATCH pve-manager 1/3] ui: de-stackify RRD memory graphs Dominik Csapak
2025-08-04 11:28 ` [pve-devel] [RFC PATCH pve-manager 2/3] ui: node memory RRD: add more infos to the tooltips Dominik Csapak
@ 2025-08-04 11:28 ` Dominik Csapak
2025-08-04 12:43 ` [pve-devel] applied-series: [PATCH pve-manager 1/3] ui: de-stackify RRD memory graphs Thomas Lamprecht
2 siblings, 0 replies; 4+ messages in thread
From: Dominik Csapak @ 2025-08-04 11:28 UTC (permalink / raw)
To: pve-devel
so one can see how much is available as an explicit graph.
The color is the same as the total, as most other colors produce weird
looking result since the graphs are transparent and overlay each other.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
not a huge fan of this, since it always runs reverse to the 'used'
metric, and the additional semi-transparent graph makes the colors
different to before.
We could also just do this and not the tooltip one, if that's preferred.
Write me if that's the case, then i'll whip up a v2
www/manager6/node/Summary.js | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index e51e8ba0..343d4189 100644
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -206,6 +206,7 @@ Ext.define('PVE.node.Summary', {
},
},
},
+ 'memavailable',
{
yField: 'memused',
title: gettext('Used'),
@@ -236,8 +237,13 @@ Ext.define('PVE.node.Summary', {
},
'arcsize',
],
- fieldTitles: [gettext('Total'), gettext('Used'), gettext('ZFS ARC')],
- colors: ['#94ae0a', '#115fa6', '#7c7474'],
+ fieldTitles: [
+ gettext('Total'),
+ gettext('Available'),
+ gettext('Used'),
+ gettext('ZFS ARC'),
+ ],
+ colors: ['#94ae0a', '#94ae0a', '#115fa6', '#7c7474'],
unit: 'bytes',
powerOfTwo: true,
store: rrdstore,
--
2.39.5
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 4+ messages in thread* [pve-devel] applied-series: [PATCH pve-manager 1/3] ui: de-stackify RRD memory graphs
2025-08-04 11:28 [pve-devel] [PATCH pve-manager 1/3] ui: de-stackify RRD memory graphs Dominik Csapak
2025-08-04 11:28 ` [pve-devel] [RFC PATCH pve-manager 2/3] ui: node memory RRD: add more infos to the tooltips Dominik Csapak
2025-08-04 11:28 ` [pve-devel] [RFC PATCH pve-manager 3/3] ui: node memory RRD: add 'Available' graph Dominik Csapak
@ 2025-08-04 12:43 ` Thomas Lamprecht
2 siblings, 0 replies; 4+ messages in thread
From: Thomas Lamprecht @ 2025-08-04 12:43 UTC (permalink / raw)
To: pve-devel, Dominik Csapak
On Mon, 04 Aug 2025 13:28:40 +0200, Dominik Csapak wrote:
> 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.
>
> [...]
Applied, thanks!
[1/3] ui: de-stackify RRD memory graphs
commit: bde686c6b47194b3757539cff8025eb5690ff69a
[2/3] ui: node memory RRD: add more infos to the tooltips
commit: 89ca129203b06293fda304e45fca893bb0f23817
[3/3] ui: node memory RRD: add 'Available' graph
commit: 212e43e33ea129596069383a1919623c59bd7c59
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 4+ messages in thread
end of thread, other threads:[~2025-08-04 12:42 UTC | newest]
Thread overview: 4+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2025-08-04 11:28 [pve-devel] [PATCH pve-manager 1/3] ui: de-stackify RRD memory graphs Dominik Csapak
2025-08-04 11:28 ` [pve-devel] [RFC PATCH pve-manager 2/3] ui: node memory RRD: add more infos to the tooltips Dominik Csapak
2025-08-04 11:28 ` [pve-devel] [RFC PATCH pve-manager 3/3] ui: node memory RRD: add 'Available' graph Dominik Csapak
2025-08-04 12:43 ` [pve-devel] applied-series: [PATCH pve-manager 1/3] ui: de-stackify RRD memory graphs Thomas Lamprecht
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.