* [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer
@ 2024-04-22 7:43 Dominik Csapak
2024-04-22 7:43 ` [pve-devel] [PATCH manager 2/2] ui: use pveDescriptionFieldContainer for the advanced backup options Dominik Csapak
2024-04-22 10:17 ` [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Thomas Lamprecht
0 siblings, 2 replies; 3+ messages in thread
From: Dominik Csapak @ 2024-04-22 7:43 UTC (permalink / raw)
To: pve-devel
this is a field container, showing a field on the left column and a
description on the right one, with a (default) flex ratio of 1:2
this is helpful when wanting a longer description on the right column
but still have the fields aligned.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
alternatively, we could make a more generic '2column' container, where
we give a 'leftFieldConfig' and a 'rightFieldConfig', and just
let the user put in a displayfield on the right?
would be the more generic solution that could also work when we don't
want to have a description in the right column
www/manager6/Makefile | 1 +
.../form/DescriptionFieldContainer.js | 69 +++++++++++++++++++
2 files changed, 70 insertions(+)
create mode 100644 www/manager6/form/DescriptionFieldContainer.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 66ad35b8..8a2d203b 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -89,6 +89,7 @@ JSSRC= \
form/MultiFileButton.js \
form/TagFieldSet.js \
form/IsoSelector.js \
+ form/DescriptionFieldContainer.js \
grid/BackupView.js \
grid/FirewallAliases.js \
grid/FirewallOptions.js \
diff --git a/www/manager6/form/DescriptionFieldContainer.js b/www/manager6/form/DescriptionFieldContainer.js
new file mode 100644
index 00000000..87e89262
--- /dev/null
+++ b/www/manager6/form/DescriptionFieldContainer.js
@@ -0,0 +1,69 @@
+// This is a field container intended to show a field on the first column and
+// it's description on the second column. One can set a ratio for description
+// size to field size.
+//
+// Works around a limitation of our input panel column1/2 handling that entries
+// are not vertically aligned when one of them has wrapping text (like it
+// happens sometimes with such longer descriptions)
+Ext.define('PVE.form.DescriptionFieldContainer', {
+ extend: 'Ext.form.FieldContainer',
+ alias: 'widget.pveDescriptionFieldContainer',
+
+ layout: {
+ type: 'hbox',
+ align: 'stretch',
+ },
+
+ // the default ratio of description to field
+ // does not have to be an integer value
+ descriptionRatio: 2,
+
+ // the xtype of the field
+ fieldType: undefined,
+
+ // the description to show
+ description: undefined,
+
+ initComponent: function() {
+ let me = this;
+
+ if (!me.fieldType) {
+ throw "no field type set";
+ }
+
+ if (!me.description) {
+ throw "no description set";
+ }
+
+ let fieldConfig = {
+ xtype: me.fieldType,
+ bind: {},
+ name: me.name,
+ flex: 1,
+ padding: '0 10 0 0',
+ };
+ Ext.applyIf(fieldConfig, me.initialConfig);
+
+ // so we won't accidentally queried by name
+ delete me.name;
+ delete me.reference;
+
+ // so we won't show it twice
+ delete me.fieldLabel;
+ delete me.autoEl;
+
+ Ext.apply(me, {
+ items: [
+ fieldConfig,
+ {
+ xtype: 'displayfield',
+ value: Ext.htmlEncode(me.description),
+ flex: me.descriptionRatio,
+ padding: '0 0 0 10',
+ },
+ ],
+ });
+
+ me.callParent();
+ },
+});
--
2.39.2
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 3+ messages in thread
* [pve-devel] [PATCH manager 2/2] ui: use pveDescriptionFieldContainer for the advanced backup options
2024-04-22 7:43 [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Dominik Csapak
@ 2024-04-22 7:43 ` Dominik Csapak
2024-04-22 10:17 ` [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Thomas Lamprecht
1 sibling, 0 replies; 3+ messages in thread
From: Dominik Csapak @ 2024-04-22 7:43 UTC (permalink / raw)
To: pve-devel
where we generally want to show a field on the left, but a description
on the right.
merges the column1/2/B into just items.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/manager6/panel/BackupAdvancedOptions.js | 45 ++++++---------------
1 file changed, 13 insertions(+), 32 deletions(-)
diff --git a/www/manager6/panel/BackupAdvancedOptions.js b/www/manager6/panel/BackupAdvancedOptions.js
index 0ea585a8..59c785d2 100644
--- a/www/manager6/panel/BackupAdvancedOptions.js
+++ b/www/manager6/panel/BackupAdvancedOptions.js
@@ -66,9 +66,11 @@ Ext.define('PVE.panel.BackupAdvancedOptions', {
}
},
- column1: [
+ items: [
{
- xtype: 'pveBandwidthField',
+ xtype: 'pveDescriptionFieldContainer',
+ description: gettext('Limit I/O bandwidth.'),
+ fieldType: 'pveBandwidthField',
name: 'bwlimit',
fieldLabel: gettext('Bandwidth Limit'),
emptyText: Ext.String.format(gettext('Fallback (default {0})'), 0),
@@ -81,7 +83,9 @@ Ext.define('PVE.panel.BackupAdvancedOptions', {
},
},
{
- xtype: 'proxmoxintegerfield',
+ xtype: 'pveDescriptionFieldContainer',
+ fieldType: 'proxmoxintegerfield',
+ description: gettext('Threads used for zstd compression (non-PBS).'),
name: 'zstd',
reference: 'zstdThreadCount',
fieldLabel: Ext.String.format(gettext('{0} Threads'), 'Zstd'),
@@ -97,7 +101,9 @@ Ext.define('PVE.panel.BackupAdvancedOptions', {
},
},
{
- xtype: 'proxmoxintegerfield',
+ xtype: 'pveDescriptionFieldContainer',
+ fieldType: 'proxmoxintegerfield',
+ description: gettext('I/O workers in the QEMU process (VMs only).'),
name: 'max-workers',
minValue: 1,
maxValue: 256,
@@ -123,7 +129,9 @@ Ext.define('PVE.panel.BackupAdvancedOptions', {
},
},
{
- xtype: 'proxmoxcheckbox',
+ xtype: 'pveDescriptionFieldContainer',
+ fieldType: 'proxmoxcheckbox',
+ description: gettext("Run jobs as soon as possible if they couldn't start on schedule, for example, due to the node being offline."),
fieldLabel: gettext('Repeat missed'),
name: 'repeat-missed',
uncheckedValue: 0,
@@ -132,33 +140,6 @@ Ext.define('PVE.panel.BackupAdvancedOptions', {
deleteDefaultValue: '{!isCreate}',
},
},
- ],
-
- column2: [
- {
- xtype: 'displayfield',
- value: gettext('Limit I/O bandwidth.'),
- },
- {
- xtype: 'displayfield',
- value: gettext('Threads used for zstd compression (non-PBS).'),
- },
- {
- xtype: 'displayfield',
- value: gettext('I/O workers in the QEMU process (VMs only).'),
- },
- {
- xtype: 'displayfield',
- value: 'TODO',
- hidden: true, // see definition of pbs-entries-max field
- },
- {
- xtype: 'displayfield',
- value: gettext("Run jobs as soon as possible if they couldn't start on schedule, for example, due to the node being offline."),
- },
- ],
-
- columnB: [
{
xtype: 'component',
padding: '5 1',
--
2.39.2
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer
2024-04-22 7:43 [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Dominik Csapak
2024-04-22 7:43 ` [pve-devel] [PATCH manager 2/2] ui: use pveDescriptionFieldContainer for the advanced backup options Dominik Csapak
@ 2024-04-22 10:17 ` Thomas Lamprecht
1 sibling, 0 replies; 3+ messages in thread
From: Thomas Lamprecht @ 2024-04-22 10:17 UTC (permalink / raw)
To: Proxmox VE development discussion, Dominik Csapak
Am 22/04/2024 um 09:43 schrieb Dominik Csapak:
> this is a field container, showing a field on the left column and a
> description on the right one, with a (default) flex ratio of 1:2
>
> this is helpful when wanting a longer description on the right column
> but still have the fields aligned.
>
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> alternatively, we could make a more generic '2column' container, where
> we give a 'leftFieldConfig' and a 'rightFieldConfig', and just
> let the user put in a displayfield on the right?
>
> would be the more generic solution that could also work when we don't
> want to have a description in the right column
>
just for the record, the more generic solution is the one that got in,
making this series obsolete:
https://git.proxmox.com/?p=pve-manager.git;a=commit;h=9540e48c0fae5356c3eebabf30f2a708d8d7c939
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2024-04-22 10:17 UTC | newest]
Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2024-04-22 7:43 [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Dominik Csapak
2024-04-22 7:43 ` [pve-devel] [PATCH manager 2/2] ui: use pveDescriptionFieldContainer for the advanced backup options Dominik Csapak
2024-04-22 10:17 ` [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Thomas Lamprecht
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal