ui: pci/usb mapping: rework mapping panel for better user experience

[pve-manager.git] / www / manager6 / window / PCIMapEdit.js

diff --git a/www/manager6/window/PCIMapEdit.js b/www/manager6/window/PCIMapEdit.js
index 2b26871999c9bb9f48fa86460df193048846b90e..d43f04eb2f7e2468cbc08955904804ac98f5c996 100644 (file)
--- a/www/manager6/window/PCIMapEdit.js
+++ b/www/manager6/window/PCIMapEdit.js
@@ -13,8 +13,12 @@ Ext.define('PVE.window.PCIMapEditWindow', {
 
     cbindData: function(initialConfig) {
        let me = this;
-       me.isCreate = !me.name || !me.nodename;
+       me.isCreate = (!me.name || !me.nodename) && !me.entryOnly;
        me.method = me.name ? 'PUT' : 'POST';
+       me.hideMapping = !!me.entryOnly;
+       me.hideComment = me.name && !me.entryOnly;
+       me.hideNodeSelector = me.nodename || me.entryOnly;
+       me.hideNode = !me.nodename || !me.hideNodeSelector;
        return {
            name: me.name,
            nodename: me.nodename,
@@ -201,35 +205,41 @@ Ext.define('PVE.window.PCIMapEditWindow', {
                    allowBlank: false,
                },
                {
-                   xtype: 'pmxDisplayEditField',
+                   xtype: 'displayfield',
                    fieldLabel: gettext('Mapping on Node'),
                    labelWidth: 120,
                    name: 'node',
-                   editConfig: {
-                       xtype: 'pveNodeSelector',
-                       reference: 'nodeselector',
-                   },
                    cbind: {
-                       editable: '{!nodename}',
                        value: '{nodename}',
+                       disabled: '{hideNode}',
+                       hidden: '{hideNode}',
+                   },
+                   allowBlank: false,
+               },
+               {
+                   xtype: 'pveNodeSelector',
+                   reference: 'nodeselector',
+                   fieldLabel: gettext('Mapping on Node'),
+                   labelWidth: 120,
+                   name: 'node',
+                   cbind: {
+                       disabled: '{hideNodeSelector}',
+                       hidden: '{hideNodeSelector}',
                    },
                    allowBlank: false,
                },
            ],
 
            column2: [
-               {
-                   // as spacer
-                   xtype: 'displayfield',
-               },
                {
                    xtype: 'proxmoxcheckbox',
-                   fieldLabel: gettext('Mediated Devices'),
-                   labelWidth: 120,
+                   fieldLabel: gettext('Use with Mediated Devices'),
+                   labelWidth: 200,
                    reference: 'mdev',
                    name: 'mdev',
                    cbind: {
                        deleteEmpty: '{!isCreate}',
+                       disabled: '{hideComment}',
                    },
                },
            ],
@@ -244,6 +254,8 @@ Ext.define('PVE.window.PCIMapEditWindow', {
                    name: 'map',
                    cbind: {
                        nodename: '{nodename}',
+                       disabled: '{hideMapping}',
+                       hidden: '{hideMapping}',
                    },
                    allowBlank: false,
                    onLoadCallBack: 'checkIommu',
@@ -257,6 +269,8 @@ Ext.define('PVE.window.PCIMapEditWindow', {
                    name: 'description',
                    cbind: {
                        deleteEmpty: '{!isCreate}',
+                       disabled: '{hideComment}',
+                       hidden: '{hideComment}',
                    },
                },
            ],