ui: add VM ComboSelector

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@proxmox.com>
Acked-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/form/VMSelector.js b/www/manager6/form/VMSelector.js
index 63f6817bac7dc32ba57f0b645a49848251728239..2856f3ff43a0698b3210dc918476dc6cc582e2f3 100644 (file)
--- a/www/manager6/form/VMSelector.js
+++ b/www/manager6/form/VMSelector.js
@@ -212,3 +212,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'
+               }
+           }
+       ]
+    }
+});