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 D85E2920A1 for ; Tue, 28 Mar 2023 14:49:37 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id C263C1C391 for ; Tue, 28 Mar 2023 14:49:37 +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 ; Tue, 28 Mar 2023 14:49:37 +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 C1A79470AE for ; Tue, 28 Mar 2023 14:49:36 +0200 (CEST) From: Matthias Heiserer To: pve-devel@lists.proxmox.com Date: Tue, 28 Mar 2023 14:49:28 +0200 Message-Id: <20230328124929.161040-4-m.heiserer@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20230328124929.161040-1-m.heiserer@proxmox.com> References: <20230328124929.161040-1-m.heiserer@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.254 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 SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [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: Tue, 28 Mar 2023 12:49:37 -0000 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; + 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: [ + `
+
`, + '', + ], + + 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); } }, -- 2.30.2