[pbs-devel] [PATCH proxmox-backup v8 23/45] ui: add datastore type selector and reorganize component layout

[Lukas Wagner]

On  2025-07-15 14:53, Christian Ebner wrote:
> 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 at proxmox.com>
> ---
> changes since version 7:
> - no changes
> 
>  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'],

These should use gettext

> +                        ],
> +                        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'));
> +                                }
> +                            },
> +                        },
> +                    },

I think this could be transformed into a viewModel, bound properties, formulas, etc. while at it, but since this
was pre-existing code, it's not too bad IMO.

>                      {
>                          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',

-- 
- Lukas