[pve-devel] [PATCH manager v16 1/2] ui: qemu: change DisplayEdit logic to use ViewModel instead of listener function

[pve-devel] [PATCH manager v16 1/2] ui: qemu: change DisplayEdit logic to use ViewModel instead of listener function

[Markus Frank]

Signed-off-by: Markus Frank <m.frank@proxmox.com>
---
 www/manager6/qemu/DisplayEdit.js | 57 ++++++++++++++++++--------------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/www/manager6/qemu/DisplayEdit.js b/www/manager6/qemu/DisplayEdit.js
index 9bb1763e..17b02ee4 100644
--- a/www/manager6/qemu/DisplayEdit.js
+++ b/www/manager6/qemu/DisplayEdit.js
@@ -11,6 +11,33 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
 	return { vga: ret };
     },
 
+    viewModel: {
+	data: {
+	    type: '__default__',
+	    nonGUIOptionRegex: /^(serial\d|none)$/,
+	},
+	formulas: {
+	    matchNonGUIOption: function(get) {
+		return get('type').match(get('nonGUIOptionRegex'));
+	    },
+	    memoryEmptyText: function(get) {
+		let val = get('type');
+		if (val === "cirrus") {
+		    return "4";
+		} else if (val === "std" || val.match(/^qxl\d?$/) || val === "vmware") {
+		    return "16";
+		} else if (val.match(/^virtio/)) {
+		    return "256";
+		} else if (get('matchNonGUIOption')) {
+		    return "N/A";
+		} else {
+		    console.debug("unexpected display type", val);
+		    return Proxmox.Utils.defaultText;
+		}
+	    },
+	},
+    },
+
     items: [{
 	name: 'type',
 	xtype: 'proxmoxKVComboBox',
@@ -27,39 +54,21 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
 	    }
 	    return true;
 	},
-	listeners: {
-	    change: function(cb, val) {
-		if (!val) {
-		    return;
-		}
-		let memoryfield = this.up('panel').down('field[name=memory]');
-		let disableMemoryField = false;
-
-		if (val === "cirrus") {
-		    memoryfield.setEmptyText("4");
-		} else if (val === "std" || val.match(/^qxl\d?$/) || val === "vmware") {
-		    memoryfield.setEmptyText("16");
-		} else if (val.match(/^virtio/)) {
-		    memoryfield.setEmptyText("256");
-		} else if (val.match(/^(serial\d|none)$/)) {
-		    memoryfield.setEmptyText("N/A");
-		    disableMemoryField = true;
-		} else {
-		    console.debug("unexpected display type", val);
-		    memoryfield.setEmptyText(Proxmox.Utils.defaultText);
-		}
-		memoryfield.setDisabled(disableMemoryField);
-	    },
+	bind: {
+	    value: '{type}',
 	},
     },
     {
 	xtype: 'proxmoxintegerfield',
-	emptyText: Proxmox.Utils.defaultText,
 	fieldLabel: gettext('Memory') + ' (MiB)',
 	minValue: 4,
 	maxValue: 512,
 	step: 4,
 	name: 'memory',
+	bind: {
+	    emptyText: '{memoryEmptyText}',
+	    disabled: '{matchNonGUIOption}',
+	},
     }],
 });
 
-- 
2.39.2

[pve-devel] [PATCH manager v16 2/2] ui: qemu: add clipboard ComboBox as a advanced option in DisplayEdit

[Markus Frank]

For SPICE and VNC, a different message is displayed.

The backend code for the clipboard option can be found in the
'config: enable vnc clipboard parameter in vga_fmt'-commit in qemu-server.

Signed-off-by: Markus Frank <m.frank@proxmox.com>
---
 www/manager6/qemu/DisplayEdit.js | 41 ++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/www/manager6/qemu/DisplayEdit.js b/www/manager6/qemu/DisplayEdit.js
index 17b02ee4..3357794a 100644
--- a/www/manager6/qemu/DisplayEdit.js
+++ b/www/manager6/qemu/DisplayEdit.js
@@ -15,6 +15,7 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
 	data: {
 	    type: '__default__',
 	    nonGUIOptionRegex: /^(serial\d|none)$/,
+	    clipboard: '__default__',
 	},
 	formulas: {
 	    matchNonGUIOption: function(get) {
@@ -35,6 +36,9 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
 		    return Proxmox.Utils.defaultText;
 		}
 	    },
+	    isVNC: get => get('clipboard') === 'vnc',
+	    hideDefaultHint: get => get('isVNC') || get('matchNonGUIOption'),
+	    hideVNCHint: get => !get('isVNC') || get('matchNonGUIOption'),
 	},
     },
 
@@ -70,6 +74,43 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
 	    disabled: '{matchNonGUIOption}',
 	},
     }],
+
+    advancedItems: [
+	{
+	    xtype: 'proxmoxKVComboBox',
+	    name: 'clipboard',
+	    deleteEmpty: false,
+	    fieldLabel: gettext('Clipboard'),
+	    comboItems: [
+		['__default__', Proxmox.Utils.defaultText + ' (SPICE)'],
+		['vnc', 'VNC'],
+	    ],
+	    bind: {
+		value: '{clipboard}',
+		disabled: '{matchNonGUIOption}',
+	    },
+	},
+	{
+	    xtype: 'displayfield',
+	    name: 'vncHint',
+	    userCls: 'pmx-hint',
+	    value: gettext('You cannot use the default SPICE clipboard if the VNC Clipboard is selected.') + ' ' +
+		gettext('VNC Clipboard requires spice-tools installed in the Guest-VM.'),
+	    bind: {
+		hidden: '{hideVNCHint}',
+	    },
+	},
+	{
+	    xtype: 'displayfield',
+	    name: 'defaultHint',
+	    userCls: 'pmx-hint',
+	    value: gettext('This option depends on your display type.') + ' ' +
+		gettext('If the display type uses SPICE you are able to use the default SPICE Clipboard.'),
+	    bind: {
+		hidden: '{hideDefaultHint}',
+	    },
+	},
+    ],
 });
 
 Ext.define('PVE.qemu.DisplayEdit', {
-- 
2.39.2

Re: [pve-devel] [PATCH manager v16 1/2] ui: qemu: change DisplayEdit logic to use ViewModel instead of listener function

[Dominik Csapak]

one minor nit inline, otherwise

Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-by: Dominik Csapak <d.csapak@proxmox.com>

On 4/8/24 12:33, Markus Frank wrote:
> Signed-off-by: Markus Frank <m.frank@proxmox.com>
> ---
>   www/manager6/qemu/DisplayEdit.js | 57 ++++++++++++++++++--------------
>   1 file changed, 33 insertions(+), 24 deletions(-)
> 
> diff --git a/www/manager6/qemu/DisplayEdit.js b/www/manager6/qemu/DisplayEdit.js
> index 9bb1763e..17b02ee4 100644
> --- a/www/manager6/qemu/DisplayEdit.js
> +++ b/www/manager6/qemu/DisplayEdit.js
> @@ -11,6 +11,33 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
>   	return { vga: ret };
>       },
>   
> +    viewModel: {
> +	data: {
> +	    type: '__default__',
> +	    nonGUIOptionRegex: /^(serial\d|none)$/,
> +	},
> +	formulas: {
> +	    matchNonGUIOption: function(get) {
> +		return get('type').match(get('nonGUIOptionRegex'));

since this regex is only used once, i'd inline it where it's used

> +	    },
> +	    memoryEmptyText: function(get) {
> +		let val = get('type');
> +		if (val === "cirrus") {
> +		    return "4";
> +		} else if (val === "std" || val.match(/^qxl\d?$/) || val === "vmware") {
> +		    return "16";
> +		} else if (val.match(/^virtio/)) {
> +		    return "256";
> +		} else if (get('matchNonGUIOption')) {
> +		    return "N/A";
> +		} else {
> +		    console.debug("unexpected display type", val);
> +		    return Proxmox.Utils.defaultText;
> +		}
> +	    },
> +	},
> +    },
> +
>       items: [{
>   	name: 'type',
>   	xtype: 'proxmoxKVComboBox',
> @@ -27,39 +54,21 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
>   	    }
>   	    return true;
>   	},
> -	listeners: {
> -	    change: function(cb, val) {
> -		if (!val) {
> -		    return;
> -		}
> -		let memoryfield = this.up('panel').down('field[name=memory]');
> -		let disableMemoryField = false;
> -
> -		if (val === "cirrus") {
> -		    memoryfield.setEmptyText("4");
> -		} else if (val === "std" || val.match(/^qxl\d?$/) || val === "vmware") {
> -		    memoryfield.setEmptyText("16");
> -		} else if (val.match(/^virtio/)) {
> -		    memoryfield.setEmptyText("256");
> -		} else if (val.match(/^(serial\d|none)$/)) {
> -		    memoryfield.setEmptyText("N/A");
> -		    disableMemoryField = true;
> -		} else {
> -		    console.debug("unexpected display type", val);
> -		    memoryfield.setEmptyText(Proxmox.Utils.defaultText);
> -		}
> -		memoryfield.setDisabled(disableMemoryField);
> -	    },
> +	bind: {
> +	    value: '{type}',
>   	},
>       },
>       {
>   	xtype: 'proxmoxintegerfield',
> -	emptyText: Proxmox.Utils.defaultText,
>   	fieldLabel: gettext('Memory') + ' (MiB)',
>   	minValue: 4,
>   	maxValue: 512,
>   	step: 4,
>   	name: 'memory',
> +	bind: {
> +	    emptyText: '{memoryEmptyText}',
> +	    disabled: '{matchNonGUIOption}',
> +	},
>       }],
>   });
>   



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

Re: [pve-devel] [PATCH manager v16 2/2] ui: qemu: add clipboard ComboBox as a advanced option in DisplayEdit

[Dominik Csapak]

a few comments inline

On 4/8/24 12:33, Markus Frank wrote:
> For SPICE and VNC, a different message is displayed.
> 
> The backend code for the clipboard option can be found in the
> 'config: enable vnc clipboard parameter in vga_fmt'-commit in qemu-server.
> 
> Signed-off-by: Markus Frank <m.frank@proxmox.com>
> ---
>   www/manager6/qemu/DisplayEdit.js | 41 ++++++++++++++++++++++++++++++++
>   1 file changed, 41 insertions(+)
> 
> diff --git a/www/manager6/qemu/DisplayEdit.js b/www/manager6/qemu/DisplayEdit.js
> index 17b02ee4..3357794a 100644
> --- a/www/manager6/qemu/DisplayEdit.js
> +++ b/www/manager6/qemu/DisplayEdit.js
> @@ -15,6 +15,7 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
>   	data: {
>   	    type: '__default__',
>   	    nonGUIOptionRegex: /^(serial\d|none)$/,
> +	    clipboard: '__default__',
>   	},
>   	formulas: {
>   	    matchNonGUIOption: function(get) {
> @@ -35,6 +36,9 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
>   		    return Proxmox.Utils.defaultText;
>   		}
>   	    },
> +	    isVNC: get => get('clipboard') === 'vnc',
> +	    hideDefaultHint: get => get('isVNC') || get('matchNonGUIOption'),
> +	    hideVNCHint: get => !get('isVNC') || get('matchNonGUIOption'),
>   	},
>       },
>   
> @@ -70,6 +74,43 @@ Ext.define('PVE.qemu.DisplayInputPanel', {
>   	    disabled: '{matchNonGUIOption}',
>   	},
>       }],
> +
> +    advancedItems: [
> +	{
> +	    xtype: 'proxmoxKVComboBox',
> +	    name: 'clipboard',
> +	    deleteEmpty: false,
> +	    fieldLabel: gettext('Clipboard'),
> +	    comboItems: [
> +		['__default__', Proxmox.Utils.defaultText + ' (SPICE)'],

this '(SPICE)' here implies that the spice clipboard is available anywhere
but the hint below implies it's only available with SPICE

i'd probably omit it here and just say default and further explain it
in the hint.

> +		['vnc', 'VNC'],
> +	    ],
> +	    bind: {
> +		value: '{clipboard}',
> +		disabled: '{matchNonGUIOption}',
> +	    },

here you have to set the value initially to '__default__' too, otherwise
the bind set will mark it as dirty and allow a reset to the empty value

i.e. use
----8<----
value: '__default__',
---->8----



> +	},
> +	{
> +	    xtype: 'displayfield',
> +	    name: 'vncHint',
> +	    userCls: 'pmx-hint',
> +	    value: gettext('You cannot use the default SPICE clipboard if the VNC Clipboard is selected.') + ' ' +
> +		gettext('VNC Clipboard requires spice-tools installed in the Guest-VM.'),
> +	    bind: {
> +		hidden: '{hideVNCHint}',
> +	    },
> +	},
> +	{
> +	    xtype: 'displayfield',
> +	    name: 'defaultHint',
> +	    userCls: 'pmx-hint',
> +	    value: gettext('This option depends on your display type.') + ' ' +
> +		gettext('If the display type uses SPICE you are able to use the default SPICE Clipboard.'),
> +	    bind: {
> +		hidden: '{hideDefaultHint}',
> +	    },
> +	},
> +    ],
>   });
>   
>   Ext.define('PVE.qemu.DisplayEdit', {



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