in general i'm not really happy with the manual insertion of a div here,
wouldn't it also be possible to extend the progressbar
and change the rendertemplate?

that way we could have a way nicer interface than
"get the dom element if it exists, and manually set the css classes"

further comments inline

On 1/25/23 12:29, Matthias Heiserer wrote:
Signed-off-by: Matthias Heiserer <m.heise...@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;

here you have to check if arcsize is set, because if it's
not, the result here is 'NaN' which gets interpreted as width: 0%

+           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;'

i know this was before the dark theme, but this should probably be a css 
variable?

+                   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);
        }
      },



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

Reply via email to