[pbs-devel] [RFC v2 proxmox-backup 34/42] ui: add S3 client view for configuration
Christian Ebner
c.ebner at proxmox.com
Thu May 29 16:31:59 CEST 2025
Adds the view to configure S3 clients in the Configuration section of
the UI.
Signed-off-by: Christian Ebner <c.ebner at proxmox.com>
---
www/config/S3BucketView.js | 144 +++++++++++++++++++++++++++++++++++++
1 file changed, 144 insertions(+)
create mode 100644 www/config/S3BucketView.js
diff --git a/www/config/S3BucketView.js b/www/config/S3BucketView.js
new file mode 100644
index 000000000..85ac6c49c
--- /dev/null
+++ b/www/config/S3BucketView.js
@@ -0,0 +1,144 @@
+Ext.define('pmx-s3bucket', {
+ extend: 'Ext.data.Model',
+ fields: ['id', 'host', 'bucket', 'port', 'access-key', 'secret-key', 'region', 'fingerprint'],
+ idProperty: 'id',
+ proxy: {
+ type: 'proxmox',
+ url: '/api2/json/config/s3',
+ },
+});
+
+Ext.define('PBS.config.S3BucketView', {
+ extend: 'Ext.grid.GridPanel',
+ alias: 'widget.pbsS3BucketView',
+
+ title: gettext('S3 Buckets'),
+
+ stateful: true,
+ stateId: 'grid-s3buckets',
+ tools: [PBS.Utils.get_help_tool("backup-s3-bucket")],
+
+ controller: {
+ xclass: 'Ext.app.ViewController',
+
+ addS3Bucket: function() {
+ let me = this;
+ Ext.create('PBS.window.S3BucketEdit', {
+ listeners: {
+ destroy: function() {
+ me.reload();
+ },
+ },
+ }).show();
+ },
+
+ editS3Bucket: function() {
+ let me = this;
+ let view = me.getView();
+ let selection = view.getSelection();
+ if (selection.length < 1) return;
+
+ Ext.create('PBS.window.S3BucketEdit', {
+ id: selection[0].data.id,
+ listeners: {
+ destroy: function() {
+ me.reload();
+ },
+ },
+ }).show();
+ },
+
+ reload: function() { this.getView().getStore().rstore.load(); },
+
+ init: function(view) {
+ Proxmox.Utils.monStoreErrors(view, view.getStore().rstore);
+ },
+ },
+
+ listeners: {
+ activate: 'reload',
+ itemdblclick: 'editS3Bucket',
+ },
+
+ store: {
+ type: 'diff',
+ autoDestroy: true,
+ autoDestroyRstore: true,
+ sorters: 'id',
+ rstore: {
+ type: 'update',
+ storeid: 'pmx-s3bucket',
+ model: 'pmx-s3bucket',
+ autoStart: true,
+ interval: 5000,
+ },
+ },
+
+ tbar: [
+ {
+ xtype: 'proxmoxButton',
+ text: gettext('Add'),
+ handler: 'addS3Bucket',
+ selModel: false,
+ },
+ {
+ xtype: 'proxmoxButton',
+ text: gettext('Edit'),
+ handler: 'editS3Bucket',
+ disabled: true,
+ },
+ {
+ xtype: 'proxmoxStdRemoveButton',
+ baseurl: '/config/s3',
+ callback: 'reload',
+ },
+ ],
+
+ viewConfig: {
+ trackOver: false,
+ },
+
+ columns: [
+ {
+ dataIndex: 'id',
+ header: gettext('Unique Identifier'),
+ renderer: Ext.String.htmlEncode,
+ sortable: true,
+ width: 200,
+ },
+ {
+ dataIndex: 'bucket',
+ header: gettext('Bucket'),
+ renderer: Ext.String.htmlEncode,
+ sortable: true,
+ width: 200,
+ },
+ {
+ dataIndex: 'host',
+ header: gettext('Host'),
+ sortable: true,
+ width: 200,
+ },
+ {
+ dataIndex: 'port',
+ header: gettext('Port'),
+ renderer: Ext.String.htmlEncode,
+ sortable: true,
+ width: 100,
+ },
+ {
+ dataIndex: 'region',
+ header: gettext('Region'),
+ renderer: Ext.String.htmlEncode,
+ sortable: true,
+ width: 100,
+ },
+ {
+ dataIndex: 'fingerprint',
+ header: gettext('Fingerprint'),
+ renderer: Ext.String.htmlEncode,
+ sortable: false,
+ flex: 1,
+ },
+ ],
+});
--
2.39.5
More information about the pbs-devel
mailing list