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

[Theodor Fumics via pve-devel <pve-devel@lists.proxmox.com>]

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

From: Theodor Fumics <theodor.fumics@gmx.net>
To: pve-devel@lists.proxmox.com
Subject: [PATCH manager v3] ui: pool: separate "Add Virtual Machine" menu into distinct options
Date: Tue, 30 Jul 2024 08:37:41 +0200
Message-ID: <20240730063741.14946-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.

Reasons for splitting the menu:
- Separate VM and Container options enhance interface clarity
  and simplify bulk selection.
- Reduces confusion by clearly distinguishing between VMs and
  Containers.

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

Signed-off-by: Theodor Fumics <theodor.fumics@gmx.net>
---

Notes:
    Changes from v1 -> v2
     * changed logical expression to fit within 100 characters
       as per style guide
    Changes from v2 -> v3
     * removed parenthesis as they are not needed
     * clarified reason for menu split in the commit
       message for better understanding of changes.
     * updated style for modern Windows to align with current standards.
     * Refactored callback into a higher-order closure to reduce
       redundancy.

 www/manager6/grid/PoolMembers.js | 46 +++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/www/manager6/grid/PoolMembers.js b/www/manager6/grid/PoolMembers.js
index 75f20cab..bd2e6586 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 === item.data.type && 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,
@@ -218,6 +214,15 @@ Ext.define('PVE.grid.PoolMembers', {
 	    },
 	});

+        let getAddGuestCallback = type => () => Ext.create('PVE.pool.AddGuest', {
+                autoShow: true,
+                pool: me.pool,
+                type,
+                listeners: {
+                    destroy: () => store.reload(),
+                },
+            });
+
 	Ext.apply(me, {
 	    store: store,
 	    selModel: sm,
@@ -228,21 +233,24 @@ Ext.define('PVE.grid.PoolMembers', {
 			items: [
 			    {
 				text: gettext('Virtual Machine'),
-				iconCls: 'pve-itype-icon-qemu',
-				handler: function() {
-				    var win = Ext.create('PVE.pool.AddVM', { pool: me.pool });
-				    win.on('destroy', reload);
-				    win.show();
-				},
+				iconCls: 'fa fa-fw fa-desktop',
+				handler: getAddGuestCallback('qemu'),
+			    },
+			    {
+				text: gettext('Container'),
+				iconCls: 'fa fa-fw fa-cube',
+				handler: getAddGuestCallback('lxc'),
 			    },
 			    {
 				text: gettext('Storage'),
-				iconCls: 'pve-itype-icon-storage',
-				handler: function() {
-				    var win = Ext.create('PVE.pool.AddStorage', { pool: me.pool });
-				    win.on('destroy', reload);
-				    win.show();
-				},
+				iconCls: 'fa fa-fw fa-hdd-o',
+				handler: () => Ext.create('PVE.pool.AddStorage', {
+                                            autoShow: true,
+                                            pool: me.pool,
+                                            listeners: {
+                                                destroy: () => store.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