[pve-devel] [PATCH manager] ui: pool: separate "Add Virtual Machine" menu into distinct options

[pve-devel] [PATCH manager] ui: pool: separate "Add Virtual Machine" menu into distinct options

[Theodor Fumics via pve-devel]

[-- Attachment #1: Type: message/rfc822, Size: 7201 bytes --]

From: Theodor Fumics <theodor.fumics@gmx.net>
To: pve-devel@lists.proxmox.com
Subject: [PATCH manager] ui: pool: separate "Add Virtual Machine" menu into distinct options
Date: Mon, 29 Jul 2024 11:53:14 +0200
Message-ID: <20240729095314.108158-1-theodor.fumics@gmx.net>

Split the "Add Virtual Machine" menu into separate options
for Virtual Machines and Containers to reduce confusion.
This change follows feedback from a user in [1], who had difficulty
finding the container option.

[1] https://forum.proxmox.com/threads/how-to-add-containers-to-a-resource-pool.151946/

Signed-off-by: Theodor Fumics <theodor.fumics@gmx.net>
---
 www/manager6/grid/PoolMembers.js | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/www/manager6/grid/PoolMembers.js b/www/manager6/grid/PoolMembers.js
index 75f20cab..417e5d3d 100644
--- a/www/manager6/grid/PoolMembers.js
+++ b/www/manager6/grid/PoolMembers.js
@@ -1,4 +1,4 @@
-Ext.define('PVE.pool.AddVM', {
+Ext.define('PVE.pool.AddGuest', {
     extend: 'Proxmox.window.Edit',

     width: 640,
@@ -37,7 +37,7 @@ Ext.define('PVE.pool.AddVM', {
 	    ],
 	    filters: [
 		function(item) {
-		    return (item.data.type === 'lxc' || item.data.type === 'qemu') &&item.data.pool !== me.pool;
+		    return (me.type === 'qemu' ? item.data.type === 'qemu' : item.data.type === 'lxc') && item.data.pool !== me.pool;
 		},
 	    ],
 	});
@@ -84,15 +84,11 @@ Ext.define('PVE.pool.AddVM', {
 		    dataIndex: 'name',
 		    flex: 1,
 		},
-		{
-		    header: gettext('Type'),
-		    dataIndex: 'type',
-		},
 	    ],
 	});

 	Ext.apply(me, {
-	    subject: gettext('Virtual Machine'),
+	    subject: gettext(me.type === 'qemu' ? 'Virtual Machine' : 'LXC Container'),
 	    items: [
 		vmsField,
 		vmGrid,
@@ -228,16 +224,25 @@ Ext.define('PVE.grid.PoolMembers', {
 			items: [
 			    {
 				text: gettext('Virtual Machine'),
-				iconCls: 'pve-itype-icon-qemu',
+				iconCls: 'fa fa-fw fa-desktop',
+				handler: function() {
+				    var win = Ext.create('PVE.pool.AddGuest', { pool: me.pool, type: 'qemu' });
+				    win.on('destroy', reload);
+				    win.show();
+				},
+			    },
+			    {
+				text: gettext('Container'),
+				iconCls: 'fa fa-fw fa-cube',
 				handler: function() {
-				    var win = Ext.create('PVE.pool.AddVM', { pool: me.pool });
+				    var win = Ext.create('PVE.pool.AddGuest', { pool: me.pool, type: 'lxc' });
 				    win.on('destroy', reload);
 				    win.show();
 				},
 			    },
 			    {
 				text: gettext('Storage'),
-				iconCls: 'pve-itype-icon-storage',
+				iconCls: 'fa fa-fw fa-hdd-o',
 				handler: function() {
 				    var win = Ext.create('PVE.pool.AddStorage', { pool: me.pool });
 				    win.on('destroy', reload);
--
2.39.2



[-- Attachment #2: Type: text/plain, Size: 160 bytes --]

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

Re: [pve-devel] [PATCH manager] ui: pool: separate "Add Virtual Machine" menu into distinct options

[Shannon Sterz]

On Mon Jul 29, 2024 at 11:53 AM CEST, Theodor Fumics wrote:
> Split the "Add Virtual Machine" menu into separate options
> for Virtual Machines and Containers to reduce confusion.
> This change follows feedback from a user in [1], who had difficulty
> finding the container option.
>
> [1] https://forum.proxmox.com/threads/how-to-add-containers-to-a-resource-pool.151946/
>
> Signed-off-by: Theodor Fumics <theodor.fumics@gmx.net>
> ---
>  www/manager6/grid/PoolMembers.js | 25 +++++++++++++++----------
>  1 file changed, 15 insertions(+), 10 deletions(-)
>
> diff --git a/www/manager6/grid/PoolMembers.js b/www/manager6/grid/PoolMembers.js
> index 75f20cab..417e5d3d 100644
> --- a/www/manager6/grid/PoolMembers.js
> +++ b/www/manager6/grid/PoolMembers.js
> @@ -1,4 +1,4 @@
> -Ext.define('PVE.pool.AddVM', {
> +Ext.define('PVE.pool.AddGuest', {
>      extend: 'Proxmox.window.Edit',
>
>      width: 640,
> @@ -37,7 +37,7 @@ Ext.define('PVE.pool.AddVM', {
>  	    ],
>  	    filters: [
>  		function(item) {
> -		    return (item.data.type === 'lxc' || item.data.type === 'qemu') &&item.data.pool !== me.pool;
> +		    return (me.type === 'qemu' ? item.data.type === 'qemu' : item.data.type === 'lxc') && item.data.pool !== me.pool;

nit: this line is too long, according to our style guide we don't allow
lines longer than 100 columns [1].

you could shorten this to:

		    return (me.type === item.data.type) && item.data.pool !== me.pool;

which is also a lot more readable imo

[1]: https://pve.proxmox.com/wiki/Javascript_Style_Guide

>  		},
>  	    ],
>  	});
> @@ -84,15 +84,11 @@ Ext.define('PVE.pool.AddVM', {
>  		    dataIndex: 'name',
>  		    flex: 1,
>  		},
> -		{
> -		    header: gettext('Type'),
> -		    dataIndex: 'type',
> -		},
>  	    ],
>  	});
>
>  	Ext.apply(me, {
> -	    subject: gettext('Virtual Machine'),
> +	    subject: gettext(me.type === 'qemu' ? 'Virtual Machine' : 'LXC Container'),
>  	    items: [
>  		vmsField,
>  		vmGrid,
> @@ -228,16 +224,25 @@ Ext.define('PVE.grid.PoolMembers', {
>  			items: [
>  			    {
>  				text: gettext('Virtual Machine'),
> -				iconCls: 'pve-itype-icon-qemu',
> +				iconCls: 'fa fa-fw fa-desktop',
> +				handler: function() {
> +				    var win = Ext.create('PVE.pool.AddGuest', { pool: me.pool, type: 'qemu' });
> +				    win.on('destroy', reload);
> +				    win.show();
> +				},
> +			    },
> +			    {
> +				text: gettext('Container'),
> +				iconCls: 'fa fa-fw fa-cube',
>  				handler: function() {
> -				    var win = Ext.create('PVE.pool.AddVM', { pool: me.pool });
> +				    var win = Ext.create('PVE.pool.AddGuest', { pool: me.pool, type: 'lxc' });
>  				    win.on('destroy', reload);
>  				    win.show();
>  				},
>  			    },
>  			    {
>  				text: gettext('Storage'),
> -				iconCls: 'pve-itype-icon-storage',
> +				iconCls: 'fa fa-fw fa-hdd-o',
>  				handler: function() {
>  				    var win = Ext.create('PVE.pool.AddStorage', { pool: me.pool });
>  				    win.on('destroy', reload);
> --
> 2.39.2



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