[pve-devel] [PATCH manager v2 1/2] ui: form: add TwoColumnContainer

[pve-devel] [PATCH manager v2 1/2] ui: form: add TwoColumnContainer

[Dominik Csapak]

this is a container, showing a widget on the left column and another one
on the right one, with a (default) flex ratio of 1:2

this is helpful when wanting fields to align vertically in an input
panel that have different height (e.g. because of text wrapping)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* make the container more generic as a simple container that holds two
  widgets, so it can be useful in more situations

 www/manager6/Makefile                   |  1 +
 www/manager6/form/TwoColumnContainer.js | 53 +++++++++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 www/manager6/form/TwoColumnContainer.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 66ad35b8..36f85b30 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -89,6 +89,7 @@ JSSRC= 							\
 	form/MultiFileButton.js				\
 	form/TagFieldSet.js				\
 	form/IsoSelector.js				\
+	form/TwoColumnContainer.js			\
 	grid/BackupView.js				\
 	grid/FirewallAliases.js				\
 	grid/FirewallOptions.js				\
diff --git a/www/manager6/form/TwoColumnContainer.js b/www/manager6/form/TwoColumnContainer.js
new file mode 100644
index 00000000..7b5f67e7
--- /dev/null
+++ b/www/manager6/form/TwoColumnContainer.js
@@ -0,0 +1,53 @@
+// This is a container intended to show a field on the first column and one on
+// the second column. One can set a ratio for the field sizes.
+//
+// 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.TwoColumnContainer', {
+    extend: 'Ext.container.Container',
+    alias: 'widget.pveTwoColumnContainer',
+
+    layout: {
+	type: 'hbox',
+	align: 'stretch',
+    },
+
+    // the default ratio of end to start widget
+    // does not have to be an integer value
+    widgetRatio: 2,
+
+    // the config of the first widget
+    startWidget: undefined,
+
+    // the config of the second widget
+    endWidget: undefined,
+
+    // same as fields in a panel
+    padding: '0 0 5 0',
+
+    initComponent: function() {
+	let me = this;
+
+	if (!me.startWidget) {
+	    throw "no start widget configured";
+	}
+
+	if (!me.endWidget) {
+	    throw "no end widget configured";
+	}
+
+	Ext.apply(me, {
+	    items: [
+		Ext.applyIf({ flex: 1 }, me.startWidget),
+		{
+		    xtype: 'box',
+		    width: 20,
+		},
+		Ext.applyIf({ flex: me.widgetRatio }, me.endWidget),
+	    ],
+	});
+
+	me.callParent();
+    },
+});
-- 
2.39.2



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options

[Dominik Csapak]

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>
---
changes from v1:
* adapt to changes in 1/2

better viewed with -w, since most of the patch is just adding a level of
indent

 www/manager6/panel/BackupAdvancedOptions.js | 133 ++++++++++----------
 1 file changed, 67 insertions(+), 66 deletions(-)

diff --git a/www/manager6/panel/BackupAdvancedOptions.js b/www/manager6/panel/BackupAdvancedOptions.js
index 0ea585a8..38db0168 100644
--- a/www/manager6/panel/BackupAdvancedOptions.js
+++ b/www/manager6/panel/BackupAdvancedOptions.js
@@ -66,46 +66,67 @@ Ext.define('PVE.panel.BackupAdvancedOptions', {
 	}
     },
 
-    column1: [
+    items: [
 	{
-	    xtype: 'pveBandwidthField',
-	    name: 'bwlimit',
-	    fieldLabel: gettext('Bandwidth Limit'),
-	    emptyText: Ext.String.format(gettext('Fallback (default {0})'), 0),
-	    backendUnit: 'KiB',
-	    allowZero: true,
-	    emptyValue: '',
-	    autoEl: {
-		tag: 'div',
-		'data-qtip': Ext.String.format(gettext('Use {0} for unlimited'), 0),
+	    xtype: 'pveTwoColumnContainer',
+	    startWidget: {
+		xtype: 'pveBandwidthField',
+		name: 'bwlimit',
+		fieldLabel: gettext('Bandwidth Limit'),
+		emptyText: Ext.String.format(gettext('Fallback (default {0})'), 0),
+		backendUnit: 'KiB',
+		allowZero: true,
+		emptyValue: '',
+		autoEl: {
+		    tag: 'div',
+		    'data-qtip': Ext.String.format(gettext('Use {0} for unlimited'), 0),
+		},
+	    },
+	    endWidget: {
+		xtype: 'displayfield',
+		value: gettext('Limit I/O bandwidth.'),
 	    },
 	},
 	{
-	    xtype: 'proxmoxintegerfield',
-	    name: 'zstd',
-	    reference: 'zstdThreadCount',
-	    fieldLabel: Ext.String.format(gettext('{0} Threads'), 'Zstd'),
-	    fieldStyle: 'text-align: right',
-	    emptyText: Ext.String.format(gettext('Fallback (default {0})'), 1),
-	    minValue: 0,
-	    cbind: {
-		deleteEmpty: '{!isCreate}',
+	    xtype: 'pveTwoColumnContainer',
+	    startWidget: {
+		xtype: 'proxmoxintegerfield',
+		name: 'zstd',
+		reference: 'zstdThreadCount',
+		fieldLabel: Ext.String.format(gettext('{0} Threads'), 'Zstd'),
+		fieldStyle: 'text-align: right',
+		emptyText: Ext.String.format(gettext('Fallback (default {0})'), 1),
+		minValue: 0,
+		cbind: {
+		    deleteEmpty: '{!isCreate}',
+		},
+		autoEl: {
+		    tag: 'div',
+		    'data-qtip': gettext('With 0, half of the available cores are used'),
+		},
 	    },
-	    autoEl: {
-		tag: 'div',
-		'data-qtip': gettext('With 0, half of the available cores are used'),
+	    endWidget: {
+		xtype: 'displayfield',
+		value: gettext('Threads used for zstd compression (non-PBS).'),
 	    },
 	},
 	{
-	    xtype: 'proxmoxintegerfield',
-	    name: 'max-workers',
-	    minValue: 1,
-	    maxValue: 256,
-	    fieldLabel: gettext('IO-Workers'),
-	    fieldStyle: 'text-align: right',
-	    emptyText: Ext.String.format(gettext('Fallback (default {0})'), 16),
-	    cbind: {
-		deleteEmpty: '{!isCreate}',
+	    xtype: 'pveTwoColumnContainer',
+	    startWidget: {
+		xtype: 'proxmoxintegerfield',
+		name: 'max-workers',
+		minValue: 1,
+		maxValue: 256,
+		fieldLabel: gettext('IO-Workers'),
+		fieldStyle: 'text-align: right',
+		emptyText: Ext.String.format(gettext('Fallback (default {0})'), 16),
+		cbind: {
+		    deleteEmpty: '{!isCreate}',
+		},
+	    },
+	    endWidget: {
+		xtype: 'displayfield',
+		value: gettext('I/O workers in the QEMU process (VMs only).'),
 	    },
 	},
 	{
@@ -123,42 +144,22 @@ Ext.define('PVE.panel.BackupAdvancedOptions', {
 	    },
 	},
 	{
-	    xtype: 'proxmoxcheckbox',
-	    fieldLabel: gettext('Repeat missed'),
-	    name: 'repeat-missed',
-	    uncheckedValue: 0,
-	    defaultValue: 0,
-	    cbind: {
-		deleteDefaultValue: '{!isCreate}',
+	    xtype: 'pveTwoColumnContainer',
+	    startWidget: {
+		xtype: 'proxmoxcheckbox',
+		fieldLabel: gettext('Repeat missed'),
+		name: 'repeat-missed',
+		uncheckedValue: 0,
+		defaultValue: 0,
+		cbind: {
+		    deleteDefaultValue: '{!isCreate}',
+		},
 	    },
+	    endWidget:{
+		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."),
+	    }
 	},
-    ],
-
-    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

Re: [pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options

[Fiona Ebner]

Am 22.04.24 um 10:16 schrieb Dominik Csapak:
> 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>

Getting eslint errors:

> [./panel/BackupAdvancedOptions.js]:
> WARN: line 158 col 16: key-spacing - Missing space before value for key 'endWidget'. (*)
> WARN: line 161 col 7: comma-dangle - Missing trailing comma. (*)

I noticed that the "Fallback (default)" emptytext does not fit in the
value fields. Could you improve the spacing there?


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

Re: [pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options

[Fiona Ebner]

Am 22.04.24 um 10:22 schrieb Fiona Ebner:
> Am 22.04.24 um 10:16 schrieb Dominik Csapak:
>> 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>
> 
> Getting eslint errors:
> 
>> [./panel/BackupAdvancedOptions.js]:
>> WARN: line 158 col 16: key-spacing - Missing space before value for key 'endWidget'. (*)
>> WARN: line 161 col 7: comma-dangle - Missing trailing comma. (*)
> 
> I noticed that the "Fallback (default)" emptytext does not fit in the
> value fields. Could you improve the spacing there?
> 

Other than that, both patches:

Tested-by: Fiona Ebner <f.ebner@proxmox.com>
Reviewed-by: Fiona Ebner <f.ebner@proxmox.com>


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] applied: [PATCH manager v2 1/2] ui: form: add TwoColumnContainer

[Thomas Lamprecht]

Am 22/04/2024 um 10:16 schrieb Dominik Csapak:
> this is a container, showing a widget on the left column and another one
> on the right one, with a (default) flex ratio of 1:2
> 
> this is helpful when wanting fields to align vertically in an input
> panel that have different height (e.g. because of text wrapping)
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> changes from v1:
> * make the container more generic as a simple container that holds two
>   widgets, so it can be useful in more situations
> 
>  www/manager6/Makefile                   |  1 +
>  www/manager6/form/TwoColumnContainer.js | 53 +++++++++++++++++++++++++
>  2 files changed, 54 insertions(+)
>  create mode 100644 www/manager6/form/TwoColumnContainer.js
> 
>

applied both patches with some rework, thanks!

Reworked was:
- startWidget -> startColumn and same for the end one

- expose both start and end flex, and name it flex again as it's then not
  guaranteed to be a 1/x ratio anymore, and flex is more widely used.

- exposed the columnPadding, can be nice to make it narrower for some UIs

- fixed the eslint warnings of the second patch and integrated changes from
  the first one also in there.


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel