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 0A9DC98334 for ; Thu, 13 Apr 2023 17:49:10 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id A260C1DE2B for ; Thu, 13 Apr 2023 17:48:39 +0200 (CEST) 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 ; Thu, 13 Apr 2023 17:48:38 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 9519A40BB0 for ; Thu, 13 Apr 2023 17:48:38 +0200 (CEST) Message-ID: <720f5f13-e58a-088b-278b-575657a672d4@proxmox.com> Date: Thu, 13 Apr 2023 17:48:37 +0200 MIME-Version: 1.0 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Thunderbird/102.9.0 To: Proxmox VE development discussion , Matthias Heiserer References: <20230328124929.161040-1-m.heiserer@proxmox.com> <20230328124929.161040-4-m.heiserer@proxmox.com> Content-Language: en-US From: Stefan Sterz In-Reply-To: <20230328124929.161040-4-m.heiserer@proxmox.com> Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.507 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment NICE_REPLY_A -1.22 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 Subject: Re: [pve-devel] [PATCH v2 widget-toolkit] fix #1454: InfoWidget for Memory 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: Thu, 13 Apr 2023 15:49:10 -0000 On 28.03.23 14:49, Matthias Heiserer wrote: > Signed-off-by: Matthias Heiserer > --- > > I'm a bit unsure about the color. If clashes a bit with the red when the > RAM is near full in light mode. Open for better suggestions, but > should work for now. > > changes from v1: > ignore arcsize when not set > separate progress/memory widget: > override rendertpl and dont inject second bar > > src/Makefile | 1 + > src/css/ext6-pmx.css | 6 ++++ > src/panel/NodeMemoryWidget.js | 54 +++++++++++++++++++++++++++++++++++ > src/panel/StatusView.js | 2 +- > 4 files changed, 62 insertions(+), 1 deletion(-) > create mode 100644 src/panel/NodeMemoryWidget.js > > diff --git a/src/Makefile b/src/Makefile > index 30e8fd5..a10f019 100644 > --- a/src/Makefile > +++ b/src/Makefile > @@ -55,6 +55,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/css/ext6-pmx.css b/src/css/ext6-pmx.css > index 2ffd2a8..8d2c3ef 100644 > --- a/src/css/ext6-pmx.css > +++ b/src/css/ext6-pmx.css > @@ -348,3 +348,9 @@ div.right-aligned { > color: #555; > } > /* action column fix end */ > + > +.zfs-arc { > + background-color: #c976b7; > + color: #c976b7; thanks for this, it will surely help user's better understand the ram usage chart. i'd have two suggestions: 1) can we start using hsl for color going forward? the dark theme already does that, and it helps us stay more consistent (e.g., if you want a dark/lighter version of a color, that is much easier in hsl, in rgb it's very easy to accidentally get a different hue etc.) 2) i think it would also be good to start using css variables in general. if we ever do need to change these colors in a theme, it's much easier to change a variable, then to have to override each css style. in regard to the general color choice: yeah this purple is not ideal. maybe you could use something that is closer to the blue in hue. currently, the two colors used have these two closest hsl equivalents, blue: hsl(206deg, 65%, 85%) red: hsl(360deg, 100%, 77%). so, potentially hsl(280deg, 82.5%, 60%) would work. but im not to sure either. purple in other contexts is used as a more intense version of red (e.g., heat maps) so perhaps we should think of a different hue altogether. however, putting this all together would yield: :root { --pwt-zfs-arc: hsl(280deg, 82.5%, 60%); } .zfs-arc { background-color: var(--pwt-zfs-arc); color: var(--pwt-zfs-arc); } then in the dark theme we could simply do (this color is imo more consistent with the dark theme chart/gauge colors): :root { --pwt-zfs-arc: hsl(280deg, 100%, 40.5%); } > + height: 100%; > +} > diff --git a/src/panel/NodeMemoryWidget.js b/src/panel/NodeMemoryWidget.js > new file mode 100644 > index 0000000..e7619fd > --- /dev/null > +++ b/src/panel/NodeMemoryWidget.js > @@ -0,0 +1,54 @@ > +Ext.define('Proxmox.panel.ArcProgress', { > + extend: 'Ext.ProgressBar', > + alias: 'widget.pmxArcProgress', > + > + childEls: [ > + 'arcbar', > + ], > + > + // modified from https://docs.sencha.com/extjs/7.0.0/classic/src/ProgressBar.js.html > + renderTpl: [ > + `
+ style='margin-right: 100%; width: auto;' > + class='zfs-arc'> > +
`, > + '', > + ], > + > + updateArc: function(width) { > + this.arcbar.setStyle('margin-right', `${width}%`); > + }, > + > + initComponent: function() { > + this.callParent(); > + }, > +}); > + > + > +Ext.define('Proxmox.widget.NodeMemory', { > + extend: 'Proxmox.widget.Info', > + alias: 'widget.pmxNodeMemoryWidget', > + > + updateValue: function(text, usage, mem) { > + let me = this; > + > + if (mem) { > + usage = (mem.used - (mem.arcsize || 0)) / mem.total; > + me.getComponent("progress").updateArc((mem.free / mem.total) * 100); > + me.callParent([text, usage]); > + } > + }, > + > + initComponent: function() { > + let me = this; > + me.items.filter(i => i.xtype === 'progressbar') > + .forEach(i => { i.xtype = 'pmxArcProgress'; }); > + me.callParent(); > + }, > +}); > 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); > } > }, >