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

[Dominik Csapak]

sorry forgot one high level thing

while having it split up is nice in the gui, the user has no real
way of knowing what it actually represents.

i'd suggest adding a tooltip to the bar and/or modifying
the text in a way such that it's clear that this is the arc usage

On 1/25/23 12:29, Matthias Heiserer wrote:
> 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);
>   	}
>       },
>