[pve-devel] [PATCH manager 1/7] ui: add VM ComboSelector

[Thomas Lamprecht]

this is a mixture of the multi select VMSelector and the single
select pveGuestIDSelector.
Useful when a single VM must be selected but also complementary
information should be shown to the user.

Most of the times the VMID is not really useful for an user as
numbers are harder to remember and to associate as names.
So a dialog which need a VMID (e.g. HA resource addition) forced the
user to lookup the Guest Name -> Guest VMID mapping and then enter it
correctly in the respective input field.

This can be improved by using a combo grid based selector which shows
additional information in the edit window itself, can be sorted and
filtered to quickly select a guest.

Signed-off-by: Thomas Lamprecht <t.lamprecht at proxmox.com>
---
 www/manager6/form/VMSelector.js | 99 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)

diff --git a/www/manager6/form/VMSelector.js b/www/manager6/form/VMSelector.js
index 59d2b587..3a729655 100644
--- a/www/manager6/form/VMSelector.js
+++ b/www/manager6/form/VMSelector.js
@@ -211,3 +211,102 @@ Ext.define('PVE.form.VMSelector', {
 	}
     }
 });
+
+
+Ext.define('PVE.form.VMComboSelector', {
+    extend: 'PVE.form.ComboGrid',
+    alias: 'widget.vmComboSelector',
+
+    valueField: 'vmid',
+    displayField: 'vmid',
+
+    autoSelect: false,
+    editable: true,
+    anyMatch: true,
+    forceSelection: true,
+
+    store: {
+	model: 'PVEResources',
+	autoLoad: true,
+	sorters: 'vmid',
+	filters: [{
+	    property: 'type',
+	    value: /lxc|qemu/
+	}]
+    },
+
+    listConfig: {
+	width: 600,
+	plugins: 'gridfilters',
+	columns: [
+	    {
+		header: 'ID',
+		dataIndex: 'vmid',
+		width: 80,
+		filter: {
+		    type: 'number'
+		}
+	    },
+	    {
+		header: gettext('Name'),
+		dataIndex: 'name',
+		flex: 1,
+		filter: {
+		    type: 'string'
+		}
+	    },
+	    {
+		header: gettext('Node'),
+		dataIndex: 'node'
+	    },
+	    {
+		header: gettext('Status'),
+		dataIndex: 'status',
+		filter: {
+		    type: 'list'
+		}
+	    },
+	    {
+		header: gettext('Pool'),
+		dataIndex: 'pool',
+		hidden: true,
+		filter: {
+		    type: 'list'
+		}
+	    },
+	    {
+		header: gettext('Type'),
+		dataIndex: 'type',
+		width: 120,
+		renderer: function(value) {
+		    if (value === 'qemu') {
+			return gettext('Virtual Machine');
+		    } else if (value === 'lxc') {
+			return gettext('LXC Container');
+		    }
+
+		    return '';
+		},
+		filter: {
+		    type: 'list',
+		    store: {
+			data: [
+			    {id: 'qemu', text: gettext('Virtual Machine')},
+			    {id: 'lxc', text: gettext('LXC Container')}
+			],
+			un: function(){} // due to EXTJS-18711
+		    }
+		}
+	    },
+	    {
+		header: 'HA ' + gettext('Status'),
+		dataIndex: 'hastate',
+		hidden: true,
+		flex: 1,
+		filter: {
+		    type: 'list'
+		}
+	    }
+	]
+    }
+});
-- 
2.11.0