[pbs-devel] [PATCH proxmox-backup v6 22/37] ui: add datastore type selector and reorganize component layout

From: Christian Ebner <c.ebner@proxmox.com>
To: pbs-devel@lists.proxmox.com
Subject: [pbs-devel] [PATCH proxmox-backup v6 22/37] ui: add datastore type selector and reorganize component layout
Date: Tue,  8 Jul 2025 19:00:59 +0200	[thread overview]
Message-ID: <20250708170114.1556057-32-c.ebner@proxmox.com> (raw)
In-Reply-To: <20250708170114.1556057-1-c.ebner@proxmox.com>

In preparation for adding the S3 backed datastore variant to the edit
window. Introduce a datastore type selector in order to distinguish
between creation of regular and removable datastores, instead of
using the checkbox as is currently the case.

This allows to more easily expand for further datastore type variants
while keeping the datastore edit window compact.

Since selecting the type is one of the first steps during datastore
creation, position the component right below the datastore name field
and re-organize the components related to the removable datastore
creation, while keeping additional required components for the S3
backed datastore creation in mind.

Signed-off-by: Christian Ebner <c.ebner@proxmox.com>
---
 www/window/DataStoreEdit.js | 78 +++++++++++++++++++++----------------
 1 file changed, 45 insertions(+), 33 deletions(-)

diff --git a/www/window/DataStoreEdit.js b/www/window/DataStoreEdit.js
index 372984e37..cd94f0335 100644
--- a/www/window/DataStoreEdit.js
+++ b/www/window/DataStoreEdit.js
@@ -52,6 +52,41 @@ Ext.define('PBS.DataStoreEdit', {
                         allowBlank: false,
                         fieldLabel: gettext('Name'),
                     },
+                    {
+                        xtype: 'proxmoxKVComboBox',
+                        name: 'datastore-type',
+                        fieldLabel: gettext('Datastore Type'),
+                        value: '__default__',
+                        submitValue: false,
+                        comboItems: [
+                            ['__default__', 'Local'],
+                            ['removable', 'Removable'],
+                        ],
+                        cbind: {
+                            disabled: '{!isCreate}',
+                        },
+                        listeners: {
+                            change: function (checkbox, selected) {
+                                let isRemovable = selected === 'removable';
+
+                                let inputPanel = checkbox.up('inputpanel');
+                                let pathField = inputPanel.down('[name=path]');
+                                let uuidEditField = inputPanel.down('[name=backing-device]');
+
+                                uuidEditField.setDisabled(!isRemovable);
+                                uuidEditField.allowBlank = !isRemovable;
+                                uuidEditField.setValue('');
+
+                                if (isRemovable) {
+                                    pathField.setFieldLabel(gettext('Path on Device'));
+                                    pathField.setEmptyText(gettext('A relative path'));
+                                } else {
+                                    pathField.setFieldLabel(gettext('Backing Path'));
+                                    pathField.setEmptyText(gettext('An absolute path'));
+                                }
+                            },
+                        },
+                    },
                     {
                         xtype: 'pmxDisplayEditField',
                         cbind: {
@@ -63,17 +98,6 @@ Ext.define('PBS.DataStoreEdit', {
                         emptyText: gettext('An absolute path'),
                         validator: (val) => val?.trim() !== '/',
                     },
-                    {
-                        xtype: 'pbsPartitionSelector',
-                        fieldLabel: gettext('Device'),
-                        name: 'backing-device',
-                        disabled: true,
-                        allowBlank: true,
-                        cbind: {
-                            editable: '{isCreate}',
-                        },
-                        emptyText: gettext('Device path'),
-                    },
                 ],
                 column2: [
                     {
@@ -97,31 +121,19 @@ Ext.define('PBS.DataStoreEdit', {
                             value: '{scheduleValue}',
                         },
                     },
-                ],
-                columnB: [
                     {
-                        xtype: 'checkbox',
-                        boxLabel: gettext('Removable datastore'),
-                        submitValue: false,
-                        listeners: {
-                            change: function (checkbox, isRemovable) {
-                                let inputPanel = checkbox.up('inputpanel');
-                                let pathField = inputPanel.down('[name=path]');
-                                let uuidEditField = inputPanel.down('[name=backing-device]');
-
-                                uuidEditField.setDisabled(!isRemovable);
-                                uuidEditField.allowBlank = !isRemovable;
-                                uuidEditField.setValue('');
-                                if (isRemovable) {
-                                    pathField.setFieldLabel(gettext('Path on Device'));
-                                    pathField.setEmptyText(gettext('A relative path'));
-                                } else {
-                                    pathField.setFieldLabel(gettext('Backing Path'));
-                                    pathField.setEmptyText(gettext('An absolute path'));
-                                }
-                            },
+                        xtype: 'pbsPartitionSelector',
+                        fieldLabel: gettext('Device'),
+                        name: 'backing-device',
+                        disabled: true,
+                        allowBlank: true,
+                        cbind: {
+                            editable: '{isCreate}',
                         },
+                        emptyText: gettext('Device path'),
                     },
+                ],
+                columnB: [
                     {
                         xtype: 'textfield',
                         name: 'comment',
-- 
2.47.2



_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel

