From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) by lore.proxmox.com (Postfix) with ESMTPS id C6D251FF187 for ; Mon, 28 Jul 2025 08:46:16 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id EA56D1A581; Mon, 28 Jul 2025 08:47:39 +0200 (CEST) From: Christian Ebner To: pbs-devel@lists.proxmox.com Date: Mon, 28 Jul 2025 08:46:45 +0200 Message-ID: <20250728064645.158414-11-c.ebner@proxmox.com> X-Mailer: git-send-email 2.47.2 In-Reply-To: <20250728064645.158414-1-c.ebner@proxmox.com> References: <20250728064645.158414-1-c.ebner@proxmox.com> MIME-Version: 1.0 X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1753685214940 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.045 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: [pbs-devel] [PATCH proxmox-backup 6/6] ui: replace bucket field by bucket selector X-BeenThere: pbs-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Backup Server development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox Backup Server development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pbs-devel-bounces@lists.proxmox.com Sender: "pbs-devel" With the goal to improve usability for the datastore creation window, replace the current bucket textfield with a bucket selector which fetches available buckets on demand. Signed-off-by: Christian Ebner --- www/Makefile | 1 + www/form/S3BucketSelector.js | 52 ++++++++++++++++++++++++++++++++++++ www/window/DataStoreEdit.js | 22 +++++++++++---- 3 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 www/form/S3BucketSelector.js diff --git a/www/Makefile b/www/Makefile index 4a5cd1ff1..9ebf0445f 100644 --- a/www/Makefile +++ b/www/Makefile @@ -42,6 +42,7 @@ JSSRC= \ Schema.js \ form/TokenSelector.js \ form/AuthidSelector.js \ + form/S3BucketSelector.js \ form/S3ClientSelector.js \ form/RemoteSelector.js \ form/RemoteTargetSelector.js \ diff --git a/www/form/S3BucketSelector.js b/www/form/S3BucketSelector.js new file mode 100644 index 000000000..75b02479f --- /dev/null +++ b/www/form/S3BucketSelector.js @@ -0,0 +1,52 @@ +Ext.define('PBS.form.S3BucketSelector', { + extend: 'Proxmox.form.ComboGrid', + alias: 'widget.pbsS3BucketSelector', + + allowBlank: false, + valueField: 'name', + displayField: 'name', + + listConfig: { + width: 350, + columns: [ + { + header: gettext('Bucket Name'), + sortable: true, + dataIndex: 'name', + renderer: Ext.String.htmlEncode, + flex: 1, + }, + ], + }, + + store: { + autoLoad: false, + sorters: 'name', + fields: ['name'], + proxy: { + type: 'proxmox', + url: `/api2/json/config/s3/${encodeURIComponent(this.endpoint)}/list-buckets`, + }, + }, + + setS3Endpoint: function (endpoint) { + let me = this; + + if (me.endpoint === endpoint) { + return; + } + + me.endpoint = endpoint; + me.store.removeAll(); + + me.setDisabled(false); + + if (!me.firstLoad) { + me.clearValue(); + } + + me.store.proxy.url = `/api2/json/config/s3/${encodeURIComponent(me.endpoint)}/list-buckets`; + me.store.load(); + me.firstLoad = false; + }, +}); diff --git a/www/window/DataStoreEdit.js b/www/window/DataStoreEdit.js index 8296e0b04..1b935ddd3 100644 --- a/www/window/DataStoreEdit.js +++ b/www/window/DataStoreEdit.js @@ -74,7 +74,7 @@ Ext.define('PBS.DataStoreEdit', { let inputPanel = checkbox.up('inputpanel'); let pathField = inputPanel.down('[name=path]'); let uuidEditField = inputPanel.down('[name=backing-device]'); - let bucketField = inputPanel.down('[name=bucket]'); + let s3BucketSelector = inputPanel.down('[name=bucket]'); let s3ClientSelector = inputPanel.down('[name=s3client]'); let overwriteInUseField = inputPanel.down('[name=overwrite-in-use]'); @@ -86,9 +86,11 @@ Ext.define('PBS.DataStoreEdit', { uuidEditField.allowBlank = !isRemovable; uuidEditField.setValue(''); - bucketField.setDisabled(!isS3); - bucketField.allowBlank = !isS3; - bucketField.setValue(''); + if (!isS3) { + s3BucketSelector.setDisabled(true); + s3BucketSelector.setValue(''); + } + s3BucketSelector.allowBlank = !isS3; s3ClientSelector.setDisabled(!isS3); s3ClientSelector.allowBlank = !isS3; @@ -130,6 +132,13 @@ Ext.define('PBS.DataStoreEdit', { cbind: { editable: '{isCreate}', }, + listeners: { + change: function (selector, endpointId) { + let inputPanel = selector.up('inputpanel'); + let s3BucketSelector = inputPanel.down('[name=bucket]'); + s3BucketSelector.setS3Endpoint(endpointId); + }, + }, }, ], column2: [ @@ -166,11 +175,14 @@ Ext.define('PBS.DataStoreEdit', { emptyText: gettext('Device path'), }, { - xtype: 'proxmoxtextfield', + xtype: 'pbsS3BucketSelector', name: 'bucket', fieldLabel: gettext('Bucket'), allowBlank: false, disabled: true, + cbind: { + editable: '{isCreate}', + }, }, ], columnB: [ -- 2.47.2 _______________________________________________ pbs-devel mailing list pbs-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel