[pbs-devel] [RFC v2 proxmox-backup 36/42] ui: add s3 bucket selector and allow to set s3 backend

[Christian Ebner]

In order to be able to create datastore with an s3 object store
backend. Implements a bucket selector and exposes it in the advanced
options of the datastore edit window.

Signed-off-by: Christian Ebner <c.ebner at proxmox.com>
---
 www/Makefile                 |  1 +
 www/form/S3BucketSelector.js | 40 ++++++++++++++++++++++++++++++++++++
 www/window/DataStoreEdit.js  | 35 +++++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 www/form/S3BucketSelector.js

diff --git a/www/Makefile b/www/Makefile
index ca4683941..41deeee00 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -42,6 +42,7 @@ JSSRC=							\
 	Schema.js					\
 	form/TokenSelector.js				\
 	form/AuthidSelector.js				\
+	form/S3BucketSelector.js			\
 	form/RemoteSelector.js				\
 	form/RemoteTargetSelector.js   			\
 	form/DataStoreSelector.js			\
diff --git a/www/form/S3BucketSelector.js b/www/form/S3BucketSelector.js
new file mode 100644
index 000000000..c9905feb9
--- /dev/null
+++ b/www/form/S3BucketSelector.js
@@ -0,0 +1,40 @@
+Ext.define('PBS.form.S3BucketSelector', {
+    extend: 'Proxmox.form.ComboGrid',
+    alias: 'widget.pbsS3BucketSelector',
+
+    allowBlank: false,
+    autoSelect: false,
+    valueField: 'id',
+    displayField: 'id',
+
+    store: {
+	model: 'pmx-s3bucket',
+	autoLoad: true,
+	sorters: 'id',
+    },
+
+    listConfig: {
+	columns: [
+	    {
+		header: gettext('S3 Bucket ID'),
+		sortable: true,
+		dataIndex: 'id',
+		renderer: Ext.String.htmlEncode,
+		flex: 1,
+	    },
+	    {
+		header: gettext('Bucket'),
+		sortable: true,
+		dataIndex: 'bucket',
+		renderer: Ext.String.htmlEncode,
+		flex: 1,
+	    },
+	    {
+		header: gettext('Host'),
+		sortable: true,
+		dataIndex: 'host',
+		flex: 1,
+	    },
+	],
+    },
+});
diff --git a/www/window/DataStoreEdit.js b/www/window/DataStoreEdit.js
index 4a0b8d819..dffd2b2e0 100644
--- a/www/window/DataStoreEdit.js
+++ b/www/window/DataStoreEdit.js
@@ -101,6 +101,7 @@ Ext.define('PBS.DataStoreEdit', {
 		columnB: [
 		    {
 			xtype: 'checkbox',
+			name: 'removable-datastore',
 			boxLabel: gettext('Removable datastore'),
 			submitValue: false,
 			listeners: {
@@ -135,6 +136,37 @@ Ext.define('PBS.DataStoreEdit', {
 			fieldLabel: gettext('Reuse existing datastore'),
 		    },
 		],
+		advancedColumn2: [
+		    {
+			xtype: 'checkbox',
+			boxLabel: gettext('With S3 object store'),
+			submitValue: false,
+			listeners: {
+			    change: function(checkbox, withS3Backend) {
+				let inputPanel = checkbox.up('inputpanel');
+
+				let bucketSelector = inputPanel.down('[name=backend]');
+				bucketSelector.setDisabled(!withS3Backend);
+				bucketSelector.allowBlank = !withS3Backend;
+				bucketSelector.setValue('');
+
+				let removableDatastore = inputPanel.down('[name=removable-datastore]');
+				removableDatastore.setDisabled(withS3Backend);
+				removableDatastore.allowBlank = withS3Backend;
+				removableDatastore.setValue('');
+			    },
+			},
+		    },
+		    {
+			xtype: 'pbsS3BucketSelector',
+			name: 'backend',
+			fieldLabel: gettext('S3 Bucket ID'),
+			disabled: true,
+			cbind: {
+			    editable: '{isCreate}',
+			},
+		    },
+		],
 
 		onGetValues: function(values) {
 		    let me = this;
@@ -143,6 +175,9 @@ Ext.define('PBS.DataStoreEdit', {
 			// New datastores default to using the notification system
 			values['notification-mode'] = 'notification-system';
 		    }
+		    if (values.backend) {
+			values.backend = PBS.Utils.printPropertyString({ 's3': values.backend });
+		    }
 		    return values;
 		},
 	    },
-- 
2.39.5