ui: improve form/MDevSelector

by
* showing the (optional) name in front of the type
* making the 'availble' column a bit narrower
* enabling 'cellWrap' for the description
* making the dropdown a bit wider (so all the information can fit)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/form/MDevSelector.js b/www/manager6/form/MDevSelector.js
index 8ee73c0c0874da69ea5cd5b05fbae7871acf9363..0a157813ee45845cecaa8b8439bcbfe7de689ec4 100644 (file)
--- a/www/manager6/form/MDevSelector.js
+++ b/www/manager6/form/MDevSelector.js
@@ -16,21 +16,29 @@ Ext.define('PVE.form.MDevSelector', {
     valueField: 'type',
     displayField: 'type',
     listConfig: {
+       width: 550,
        columns: [
            {
                header: gettext('Type'),
                dataIndex: 'type',
+               renderer: function(value, md, rec) {
+                   if (rec.data.name !== undefined) {
+                       return `${rec.data.name} (${value})`;
+                   }
+                   return value;
+               },
                flex: 1,
            },
            {
-               header: gettext('Available'),
+               header: gettext('Avail.'),
                dataIndex: 'available',
-               width: 80,
+               width: 60,
            },
            {
                header: gettext('Description'),
                dataIndex: 'description',
                flex: 1,
+               cellWrap: true,
                renderer: function(value) {
                    if (!value) {
                        return '';