[PATCH proxmox-backup 0/3] S3 endpoint ui fixups

[PATCH proxmox-backup 0/3] S3 endpoint ui fixups

[Christian Ebner]

A small patch series to fixup some issues currently present for the
S3 endpoint create/edit window.

In particular this fixes:
- Layout and labels for the shared request rate limits
- Title and border for the provider quirks

Christian Ebner (3):
  www: add rate limit field for request limits
  ui: s3: shorten label to better render request rate limit
  ui: s3: fix title and border rendering for provider quirks

 www/Makefile               |  1 +
 www/form/RateLimitField.js | 32 ++++++++++++++++++++++++++++++++
 www/window/S3ClientEdit.js | 27 ++++++++++++++++++---------
 3 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 www/form/RateLimitField.js

-- 
2.47.3

[PATCH proxmox-backup 1/3] www: add rate limit field for request limits

[Christian Ebner]

Add a dedicated component for the request rate limits, as the
currently used `proxmoxintegerfield` does not render nicely in
combination with the `pmxBandwidthField`s used for bandwidth limits.

Signed-off-by: Christian Ebner <c.ebner@proxmox.com>
---
 www/Makefile               |  1 +
 www/form/RateLimitField.js | 32 ++++++++++++++++++++++++++++++++
 www/window/S3ClientEdit.js |  8 ++------
 3 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 www/form/RateLimitField.js

diff --git a/www/Makefile b/www/Makefile
index 568836455..94599650e 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -44,6 +44,7 @@ JSSRC=							\
 	form/AuthidSelector.js				\
 	form/S3BucketSelector.js			\
 	form/S3ClientSelector.js			\
+	form/RateLimitField.js   			\
 	form/RemoteSelector.js				\
 	form/RemoteTargetSelector.js   			\
 	form/DataStoreSelector.js			\
diff --git a/www/form/RateLimitField.js b/www/form/RateLimitField.js
new file mode 100644
index 000000000..ef09f8bf6
--- /dev/null
+++ b/www/form/RateLimitField.js
@@ -0,0 +1,32 @@
+Ext.define('PBS.form.RateLimitField', {
+    extend: 'Ext.form.FieldContainer',
+    alias: 'widget.pbsRateLimitField',
+
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    layout: 'hbox',
+    emptyText: gettext('Unlimited'),
+
+    items: [
+        {
+            xtype: 'proxmoxintegerfield',
+            cbind: {
+                name: '{name}',
+                emptyText: '{emptyText}',
+            },
+            minValue: 1,
+            step: 1,
+            deleteEmpty: true,
+            fieldStyle: 'text-align: right',
+            flex: 1,
+        },
+        {
+            xtype: 'displayfield',
+            name: 'unit',
+            submitValue: false,
+            padding: '0 0 0 10',
+            value: '#/s',
+            width: 40,
+        },
+    ],
+});
diff --git a/www/window/S3ClientEdit.js b/www/window/S3ClientEdit.js
index 9624c84e2..003a8abbc 100644
--- a/www/window/S3ClientEdit.js
+++ b/www/window/S3ClientEdit.js
@@ -136,11 +136,9 @@ Ext.define('PBS.window.S3ClientEdit', {
                 submitAutoScaledSizeUnit: true,
             },
             {
-                xtype: 'proxmoxintegerfield',
+                xtype: 'pbsRateLimitField',
                 name: 'limit-active-requests',
                 fieldLabel: gettext('PUT/POST/DELETE request limit (#/s)'),
-                emptyText: gettext('Unlimited'),
-                minValue: 1,
             },
             {
                 xtype: 'proxmoxcheckbox',
@@ -172,11 +170,9 @@ Ext.define('PBS.window.S3ClientEdit', {
                 submitAutoScaledSizeUnit: true,
             },
             {
-                xtype: 'proxmoxintegerfield',
+                xtype: 'pbsRateLimitField',
                 name: 'limit-passive-requests',
                 fieldLabel: gettext('GET/HEAD request limit (#/s)'),
-                emptyText: gettext('Unlimited'),
-                minValue: 1,
             },
         ],
         advancedColumnB: [
-- 
2.47.3

[PATCH proxmox-backup 2/3] ui: s3: shorten label to better render request rate limit

[Christian Ebner]

Given the limited space, the long labels wrap around and introduce
paddings, leading to misalignments and inconsistencies with the rest
of the edit window components.

Instead of showing the exact methods limited in the label, shorten it
by only menioning active/passive request method and move the more
descriptive information to a qtip.

Signed-off-by: Christian Ebner <c.ebner@proxmox.com>
---
 www/window/S3ClientEdit.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/www/window/S3ClientEdit.js b/www/window/S3ClientEdit.js
index 003a8abbc..5937ce8e7 100644
--- a/www/window/S3ClientEdit.js
+++ b/www/window/S3ClientEdit.js
@@ -138,7 +138,13 @@ Ext.define('PBS.window.S3ClientEdit', {
             {
                 xtype: 'pbsRateLimitField',
                 name: 'limit-active-requests',
-                fieldLabel: gettext('PUT/POST/DELETE request limit (#/s)'),
+                fieldLabel: gettext('Active Methods'),
+                autoEl: {
+                    tag: 'div',
+                    'data-qtip': gettext(
+                        'Shared request rate limit for active methods (PUT/POST/DELETE)',
+                    ),
+                },
             },
             {
                 xtype: 'proxmoxcheckbox',
@@ -172,7 +178,13 @@ Ext.define('PBS.window.S3ClientEdit', {
             {
                 xtype: 'pbsRateLimitField',
                 name: 'limit-passive-requests',
-                fieldLabel: gettext('GET/HEAD request limit (#/s)'),
+                fieldLabel: gettext('Passive Methods'),
+                autoEl: {
+                    tag: 'div',
+                    'data-qtip': gettext(
+                        'Shared request rate limit for passive methods (GET/HEAD)',
+                    ),
+                },
             },
         ],
         advancedColumnB: [
-- 
2.47.3

[PATCH proxmox-backup 3/3] ui: s3: fix title and border rendering for provider quirks

[Christian Ebner]

The title was not rendered since declared incorrectly as fieldLabel
and the border surrounding the fieldset overflowed. Fix by declaring
the title correctly and force a margin on the fieldset, so it aligns
with the other items.

Signed-off-by: Christian Ebner <c.ebner@proxmox.com>
---
 www/window/S3ClientEdit.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/www/window/S3ClientEdit.js b/www/window/S3ClientEdit.js
index 5937ce8e7..73a46ba86 100644
--- a/www/window/S3ClientEdit.js
+++ b/www/window/S3ClientEdit.js
@@ -191,7 +191,8 @@ Ext.define('PBS.window.S3ClientEdit', {
             {
                 xtype: 'fieldset',
                 name: 'provider-quirks',
-                fieldLabel: gettext('Provider Quirks'),
+                title: gettext('Provider Quirks'),
+                margin: '0 3 0 0',
                 items: [
                     {
                         xtype: 'checkbox',
-- 
2.47.3