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