From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id EA26C906C7 for ; Wed, 15 Mar 2023 12:11:28 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id CC753883E for ; Wed, 15 Mar 2023 12:10:58 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Wed, 15 Mar 2023 12:10:54 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id C7C3040B94; Wed, 15 Mar 2023 12:10:53 +0100 (CET) Message-ID: <50132e2c-73aa-85df-4b6a-515f569fc5b6@proxmox.com> Date: Wed, 15 Mar 2023 12:10:52 +0100 MIME-Version: 1.0 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:110.0) Gecko/20100101 Thunderbird/110.0 Content-Language: en-US To: Proxmox VE development discussion , Matthias Heiserer References: <20230125112932.127145-1-m.heiserer@proxmox.com> <20230125112932.127145-5-m.heiserer@proxmox.com> From: Dominik Csapak In-Reply-To: <20230125112932.127145-5-m.heiserer@proxmox.com> Content-Type: text/plain; charset=UTF-8; format=flowed Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.061 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment NICE_REPLY_A -0.001 Looks like a legit reply (A) SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more information. [mem.free, arcuse.style] Subject: Re: [pve-devel] [RFC widget-toolkit] ui: add InfoMultiWidget, to be used for RAM X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Wed, 15 Mar 2023 11:11:29 -0000 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 > --- > 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", > + `
+ 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'> > +
`); > + }); > + }, > +}); > 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); > } > }, >