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

[Dominik Csapak <d.csapak@proxmox.com>]

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.heiserer@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);
>   	}
>       },
>