[pve-devel] [RFC widget-toolkit] ui: add InfoMultiWidget, to be used for RAM

[Matthias Heiserer]

Signed-off-by: Matthias Heiserer <m.heiserer at proxmox.com>
---
 src/Makefile                  |  1 +
 src/panel/NodeMemoryWidget.js | 28 ++++++++++++++++++++++++++++
 src/panel/StatusView.js       |  2 +-
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/panel/NodeMemoryWidget.js

diff --git a/src/Makefile b/src/Makefile
index 95da5aa..5a0213a 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -54,6 +54,7 @@ JSSRC=					\
 	panel/EOLNotice.js		\
 	panel/InputPanel.js		\
 	panel/InfoWidget.js		\
+	panel/NodeMemoryWidget.js	\
 	panel/LogView.js		\
 	panel/NodeInfoRepoStatus.js	\
 	panel/JournalView.js		\
diff --git a/src/panel/NodeMemoryWidget.js b/src/panel/NodeMemoryWidget.js
new file mode 100644
index 0000000..e54899e
--- /dev/null
+++ b/src/panel/NodeMemoryWidget.js
@@ -0,0 +1,28 @@
+Ext.define('Proxmox.widget.NodeMemory', {
+    extend: 'Proxmox.widget.Info',
+    alias: 'widget.pmxNodeMemoryWidget',
+
+    updateValue: function(text, usage, mem) {
+	let me = this;
+
+	let arcUse = me.el?.getById("arcsize")?.dom;
+	if (arcUse) {
+	    usage = (mem.used - mem.arcsize) / mem.total;
+	    arcUse.style["margin-right"] = `${(mem.free / mem.total) * 100}%`;
+	}
+	me.callParent([text, usage]);
+    },
+
+    initComponent: function() {
+	let me = this;
+	me.callParent();
+
+	me.down("#progress").on('boxready', (self) => {
+	    self.bar.dom.insertAdjacentHTML("beforebegin",
+		`<div id='arcsize'
+		    style='margin-right: 100%; background-color: #86424c; width: auto;'
+		    class='x-progress-bar'>
+		</div>`);
+	});
+    },
+});
diff --git a/src/panel/StatusView.js b/src/panel/StatusView.js
index e2e81e2..7258f36 100644
--- a/src/panel/StatusView.js
+++ b/src/panel/StatusView.js
@@ -72,7 +72,7 @@ Ext.define('Proxmox.panel.StatusView', {
 	    if (Ext.isFunction(field.calculate)) {
 		calculate = field.calculate;
 	    }
-	    field.updateValue(renderer.call(field, used, max), calculate(used, max));
+	    field.updateValue(renderer.call(field, used, max), calculate(used, max), used);
 	}
     },
 
-- 
2.30.2