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 8516BF650 for ; Fri, 29 Sep 2023 15:02:05 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 6C41616D4 for ; Fri, 29 Sep 2023 15:02:05 +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 ; Fri, 29 Sep 2023 15:02:04 +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 6A7C148D1C for ; Fri, 29 Sep 2023 15:02:04 +0200 (CEST) From: Aaron Lauterer To: pve-devel@lists.proxmox.com Date: Fri, 29 Sep 2023 15:02:03 +0200 Message-Id: <20230929130203.3902108-4-a.lauterer@proxmox.com> X-Mailer: git-send-email 2.39.2 In-Reply-To: <20230929130203.3902108-1-a.lauterer@proxmox.com> References: <20230929130203.3902108-1-a.lauterer@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.078 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 manager v4 3/3] ui: ceph pool edit: rework with controller and formulas 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: Fri, 29 Sep 2023 13:02:05 -0000 instead of relying purely on listeners that then manually change other components, we can use binds, formulas and a basic controller. This makes it quite a bit easier to let multiple components react to changes. A cbind is used for the size component to set the initial start value. Other options, like using setValue in the controller init, will trigger the change listener and therefore can affect the min size without any user interaction. Signed-off-by: Aaron Lauterer --- changes since v3: * rebased v2: * don't set default values in controller init() as we expect them to always be set via cbinds. v1: * moved view between controller and layout * small code style cleanups www/manager6/ceph/Pool.js | 82 ++++++++++++++++++++++++++++----------- 1 file changed, 59 insertions(+), 23 deletions(-) diff --git a/www/manager6/ceph/Pool.js b/www/manager6/ceph/Pool.js index 0ad59baf..c61d4f71 100644 --- a/www/manager6/ceph/Pool.js +++ b/www/manager6/ceph/Pool.js @@ -11,6 +11,48 @@ Ext.define('PVE.CephPoolInputPanel', { defaultSize: undefined, defaultMinSize: undefined, + controller: { + xclass: 'Ext.app.ViewController', + + init: function(view) { + let vm = this.getViewModel(); + vm.set('size', Number(view.defaultSize)); + vm.set('minSize', Number(view.defaultMinSize)); + }, + sizeChange: function(field, val) { + let vm = this.getViewModel(); + let minSize = Math.round(val / 2); + if (minSize > 1) { + vm.set('minSize', minSize); + } + vm.set('size', val); // bind does not work in a pmxDisplayEditField, update manually + }, + }, + + viewModel: { + data: { + minSize: null, + size: null, + }, + formulas: { + minSizeLabel: (get) => { + if (get('showMinSizeOneWarning') || get('showMinSizeHalfWarning')) { + return `${gettext('Min. Size')} `; + } + return gettext('Min. Size'); + }, + showMinSizeOneWarning: (get) => get('minSize') === 1, + showMinSizeHalfWarning: (get) => { + let minSize = get('minSize'); + let size = get('size'); + if (minSize === 1) { + return false; + } + return minSize < (size / 2) && minSize !== size; + }, + }, + }, + column1: [ { xtype: 'pmxDisplayEditField', @@ -38,12 +80,7 @@ Ext.define('PVE.CephPoolInputPanel', { maxValue: 7, allowBlank: false, listeners: { - change: function(field, val) { - let size = Math.round(val / 2); - if (size > 1) { - field.up('inputpanel').down('field[name=min_size]').setValue(size); - } - }, + change: 'sizeChange', }, }, }, @@ -81,7 +118,10 @@ Ext.define('PVE.CephPoolInputPanel', { advancedColumn1: [ { xtype: 'proxmoxintegerfield', - fieldLabel: gettext('Min. Size'), + bind: { + fieldLabel: '{minSizeLabel}', + value: '{minSize}', + }, name: 'min_size', cbind: { value: (get) => get('defaultMinSize'), @@ -95,28 +135,24 @@ Ext.define('PVE.CephPoolInputPanel', { }, maxValue: 7, allowBlank: false, - listeners: { - change: function(field, minSize) { - let panel = field.up('inputpanel'); - let size = panel.down('field[name=size]').getValue(); - - let showWarning = minSize < (size / 2) && minSize !== size; - - let fieldLabel = gettext('Min. Size'); - if (showWarning) { - fieldLabel = gettext('Min. Size') + ' '; - } - panel.down('field[name=min_size-warning]').setHidden(!showWarning); - field.setFieldLabel(fieldLabel); - }, - }, }, { xtype: 'displayfield', - name: 'min_size-warning', + bind: { + hidden: '{!showMinSizeHalfWarning}', + }, + hidden: true, userCls: 'pmx-hint', value: gettext('min_size < size/2 can lead to data loss, incomplete PGs or unfound objects.'), + }, + { + xtype: 'displayfield', + bind: { + hidden: '{!showMinSizeOneWarning}', + }, hidden: true, + userCls: 'pmx-hint', + value: gettext('a min_size of 1 is not recommended and can lead to data loss'), }, { xtype: 'pmxDisplayEditField', -- 2.39.2