ui: multi pci selector: indent functions multifunction devices

when there is more than one function for a device, indent the individual
functions. This sets them visually apart from the 'pass all through as
one' entry

We have to use a html entity here, as extjs trims the normal whitespace.

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

diff --git a/www/manager6/form/MultiPCISelector.js b/www/manager6/form/MultiPCISelector.js
index 97241bb041e423141a8b7cf13e6ece29cd2d98b5..e1ef691aecbe86dcb6380b02ba3669aa5655dd77 100644 (file)
--- a/www/manager6/form/MultiPCISelector.js
+++ b/www/manager6/form/MultiPCISelector.js
@@ -128,16 +128,17 @@ Ext.define('PVE.form.MultiPCISelector', {
        let slots = {};
        records.forEach((rec) => {
            let slotname = rec.data.id.slice(0, -2); // remove function
-           rec.set('slot', slotname);
            if (slots[slotname] !== undefined) {
                slots[slotname].count++;
+               rec.set('slot', slots[slotname]);
                return;
            }
-
            slots[slotname] = {
                count: 1,
            };
 
+           rec.set('slot', slots[slotname]);
+
            if (rec.data.id.endsWith('.0')) {
                slots[slotname].device = rec.data;
            }
@@ -213,6 +214,12 @@ Ext.define('PVE.form.MultiPCISelector', {
        {
            header: 'ID',
            dataIndex: 'id',
+           renderer: function(value, _md, rec) {
+               if (value.match(/\.[0-9a-f]/i) && rec.data.slot?.count > 1) {
+                   return ` ${value}`;
+               }
+               return value;
+           },
            width: 150,
        },
        {