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

[Christian Ebner <c.ebner@proxmox.com>]

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