]> git.proxmox.com Git - pve-manager.git/commitdiff
ui: guest import: avoid one indentation level in deeply nested widget tree
authorThomas Lamprecht <t.lamprecht@proxmox.com>
Wed, 27 Mar 2024 09:50:03 +0000 (10:50 +0100)
committerThomas Lamprecht <t.lamprecht@proxmox.com>
Wed, 27 Mar 2024 09:50:41 +0000 (10:50 +0100)
best viewed with git show --ignore-space-change

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
www/manager6/window/GuestImport.js

index 29eb1c0665256fc053121dbcdfbb77fe266b34fe..2386196f6923645f581f698142b673ec0d522651 100644 (file)
@@ -303,571 +303,569 @@ Ext.define('PVE.window.GuestImport', {
     width: 700,
     bodyPadding: 0,
 
-    items: [
-       {
-           xtype: 'tabpanel',
-           defaults: {
-               bodyPadding: 10,
-           },
-           items: [
-               {
-                   title: gettext('General'),
-                   xtype: 'inputpanel',
-                   reference: 'mainInputPanel',
-                   onGetValues: function(values) {
-                       let me = this;
-                       let grid = me.up('pveGuestImportWindow');
-                       let vm = grid.getViewModel();
-
-                       // from pveDiskStorageSelector
-                       let defaultStorage = values.hdstorage;
-                       let defaultFormat = values.diskformat;
-                       delete values.hdstorage;
-                       delete values.diskformat;
-
-                       let defaultBridge = values.defaultBridge;
-                       delete values.defaultBridge;
-
-                       let config = Ext.apply(grid.vmConfig, values);
-
-                       if (config.scsi0) {
-                           config.scsi0 = config.scsi0.replace('local:0,', 'local:0,format=qcow2,');
-                       }
+    items: [{
+       xtype: 'tabpanel',
+       defaults: {
+           bodyPadding: 10,
+       },
+       items: [
+           {
+               title: gettext('General'),
+               xtype: 'inputpanel',
+               reference: 'mainInputPanel',
+               onGetValues: function(values) {
+                   let me = this;
+                   let grid = me.up('pveGuestImportWindow');
+                   let vm = grid.getViewModel();
+
+                   // from pveDiskStorageSelector
+                   let defaultStorage = values.hdstorage;
+                   let defaultFormat = values.diskformat;
+                   delete values.hdstorage;
+                   delete values.diskformat;
+
+                   let defaultBridge = values.defaultBridge;
+                   delete values.defaultBridge;
+
+                   let config = Ext.apply(grid.vmConfig, values);
+
+                   if (config.scsi0) {
+                       config.scsi0 = config.scsi0.replace('local:0,', 'local:0,format=qcow2,');
+                   }
 
-                       let parsedBoot = PVE.Parser.parsePropertyString(config.boot ?? '');
-                       if (parsedBoot.order) {
-                           parsedBoot.order = parsedBoot.order.split(';');
-                       }
+                   let parsedBoot = PVE.Parser.parsePropertyString(config.boot ?? '');
+                   if (parsedBoot.order) {
+                       parsedBoot.order = parsedBoot.order.split(';');
+                   }
 
-                       grid.lookup('diskGrid').getStore().each((rec) => {
-                           if (!rec.data.enable) {
-                               return;
-                           }
-                           let id = grid.getController().mapDisk(rec.data.id);
-                           if (id !== rec.data.id && parsedBoot?.order) {
-                               let idx = parsedBoot.order.indexOf(rec.data.id);
-                               if (idx !== -1) {
-                                   parsedBoot.order[idx] = id;
-                               }
-                           }
-                           let data = {
-                               ...rec.data,
-                           };
-                           delete data.enable;
-                           delete data.id;
-                           delete data.size;
-                           if (!data.file) {
-                               data.file = defaultStorage;
-                               data.format = defaultFormat;
-                           }
-                           data.file += ':0'; // for our special api format
-                           if (id === 'efidisk0') {
-                               delete data['import-from'];
+                   grid.lookup('diskGrid').getStore().each((rec) => {
+                       if (!rec.data.enable) {
+                           return;
+                       }
+                       let id = grid.getController().mapDisk(rec.data.id);
+                       if (id !== rec.data.id && parsedBoot?.order) {
+                           let idx = parsedBoot.order.indexOf(rec.data.id);
+                           if (idx !== -1) {
+                               parsedBoot.order[idx] = id;
                            }
-                           config[id] = PVE.Parser.printQemuDrive(data);
-                       });
-
-                       if (parsedBoot.order) {
-                           parsedBoot.order = parsedBoot.order.join(';');
                        }
-                       config.boot = PVE.Parser.printPropertyString(parsedBoot);
+                       let data = {
+                           ...rec.data,
+                       };
+                       delete data.enable;
+                       delete data.id;
+                       delete data.size;
+                       if (!data.file) {
+                           data.file = defaultStorage;
+                           data.format = defaultFormat;
+                       }
+                       data.file += ':0'; // for our special api format
+                       if (id === 'efidisk0') {
+                           delete data['import-from'];
+                       }
+                       config[id] = PVE.Parser.printQemuDrive(data);
+                   });
 
-                       grid.lookup('netGrid').getStore().each((rec) => {
-                           if (!rec.data.enable) {
-                               return;
-                           }
-                           let id = rec.data.id;
-                           let data = {
-                               ...rec.data,
-                           };
-                           delete data.enable;
-                           delete data.id;
-                           if (!data.bridge) {
-                               data.bridge = defaultBridge;
-                           }
-                           if (vm.get('uniqueMACAdresses')) {
-                               data.macaddr = undefined;
-                           }
-                           config[id] = PVE.Parser.printQemuNetwork(data);
-                       });
+                   if (parsedBoot.order) {
+                       parsedBoot.order = parsedBoot.order.join(';');
+                   }
+                   config.boot = PVE.Parser.printPropertyString(parsedBoot);
 
-                       grid.lookup('cdGrid').getStore().each((rec) => {
-                           if (!rec.data.enable) {
-                               return;
-                           }
-                           let id = rec.data.id;
-                           let cd = {
-                               media: 'cdrom',
-                               file: rec.data.file ? rec.data.file : 'none',
-                           };
-                           config[id] = PVE.Parser.printPropertyString(cd);
-                       });
-
-                       config.scsihw = grid.lookup('scsihw').getValue();
-
-                       if (grid.lookup('liveimport').getValue()) {
-                           config['live-restore'] = 1;
+                   grid.lookup('netGrid').getStore().each((rec) => {
+                       if (!rec.data.enable) {
+                           return;
                        }
+                       let id = rec.data.id;
+                       let data = {
+                           ...rec.data,
+                       };
+                       delete data.enable;
+                       delete data.id;
+                       if (!data.bridge) {
+                           data.bridge = defaultBridge;
+                       }
+                       if (vm.get('uniqueMACAdresses')) {
+                           data.macaddr = undefined;
+                       }
+                       config[id] = PVE.Parser.printQemuNetwork(data);
+                   });
 
-                       // remove __default__ values
-                       for (const [key, value] of Object.entries(config)) {
-                           if (value === '__default__') {
-                               delete config[key];
-                           }
+                   grid.lookup('cdGrid').getStore().each((rec) => {
+                       if (!rec.data.enable) {
+                           return;
                        }
+                       let id = rec.data.id;
+                       let cd = {
+                           media: 'cdrom',
+                           file: rec.data.file ? rec.data.file : 'none',
+                       };
+                       config[id] = PVE.Parser.printPropertyString(cd);
+                   });
 
-                       return config;
-                   },
+                   config.scsihw = grid.lookup('scsihw').getValue();
 
-                   column1: [
-                       {
-                           xtype: 'pveGuestIDSelector',
-                           name: 'vmid',
-                           fieldLabel: 'VM',
-                           guestType: 'qemu',
-                           loadNextFreeID: true,
-                       },
-                       {
-                           xtype: 'proxmoxintegerfield',
-                           fieldLabel: gettext('Sockets'),
-                           name: 'sockets',
-                           reference: 'socketsField',
-                           value: 1,
-                           minValue: 1,
-                           maxValue: 128,
-                           allowBlank: true,
-                           bind: {
-                               value: '{socketCount}',
-                           },
-                       },
-                       {
-                           xtype: 'proxmoxintegerfield',
-                           fieldLabel: gettext('Cores'),
-                           name: 'cores',
-                           reference: 'coresField',
-                           value: 1,
-                           minValue: 1,
-                           maxValue: 1024,
-                           allowBlank: true,
-                           bind: {
-                               value: '{coreCount}',
-                           },
-                       },
-                       {
-                           xtype: 'pveMemoryField',
-                           fieldLabel: gettext('Memory') + ' (MiB)',
-                           name: 'memory',
-                           reference: 'memoryField',
-                           value: 512,
-                           allowBlank: true,
-                       },
-                       { xtype: 'displayfield' }, // spacer
-                       { xtype: 'displayfield' }, // spacer
-                       {
-                           xtype: 'pveDiskStorageSelector',
-                           reference: 'defaultStorage',
-                           storageLabel: gettext('Default Storage'),
-                           storageContent: 'images',
-                           autoSelect: true,
-                           hideSize: true,
-                           name: 'defaultStorage',
-                       },
-                   ],
-
-                   column2: [
-                       {
-                           xtype: 'textfield',
-                           fieldLabel: gettext('Name'),
-                           name: 'name',
-                           vtype: 'DnsName',
-                           reference: 'nameField',
-                           allowBlank: true,
-                       },
-                       {
-                           xtype: 'CPUModelSelector',
-                           name: 'cpu',
-                           reference: 'cputype',
-                           value: 'x86-64-v2-AES',
-                           fieldLabel: gettext('CPU Type'),
+                   if (grid.lookup('liveimport').getValue()) {
+                       config['live-restore'] = 1;
+                   }
+
+                   // remove __default__ values
+                   for (const [key, value] of Object.entries(config)) {
+                       if (value === '__default__') {
+                           delete config[key];
+                       }
+                   }
+
+                   return config;
+               },
+
+               column1: [
+                   {
+                       xtype: 'pveGuestIDSelector',
+                       name: 'vmid',
+                       fieldLabel: 'VM',
+                       guestType: 'qemu',
+                       loadNextFreeID: true,
+                   },
+                   {
+                       xtype: 'proxmoxintegerfield',
+                       fieldLabel: gettext('Sockets'),
+                       name: 'sockets',
+                       reference: 'socketsField',
+                       value: 1,
+                       minValue: 1,
+                       maxValue: 128,
+                       allowBlank: true,
+                       bind: {
+                           value: '{socketCount}',
                        },
-                       {
-                           xtype: 'displayfield',
-                           fieldLabel: gettext('Total cores'),
-                           name: 'totalcores',
-                           isFormField: false,
-                           bind: {
-                               value: '{totalCoreCount}',
-                           },
+                   },
+                   {
+                       xtype: 'proxmoxintegerfield',
+                       fieldLabel: gettext('Cores'),
+                       name: 'cores',
+                       reference: 'coresField',
+                       value: 1,
+                       minValue: 1,
+                       maxValue: 1024,
+                       allowBlank: true,
+                       bind: {
+                           value: '{coreCount}',
                        },
-                       {
-                           xtype: 'combobox',
-                           submitValue: false,
-                           name: 'osbase',
-                           fieldLabel: gettext('OS Type'),
-                           editable: false,
-                           queryMode: 'local',
-                           value: 'Linux',
-                           store: Object.keys(PVE.Utils.kvm_ostypes),
+                   },
+                   {
+                       xtype: 'pveMemoryField',
+                       fieldLabel: gettext('Memory') + ' (MiB)',
+                       name: 'memory',
+                       reference: 'memoryField',
+                       value: 512,
+                       allowBlank: true,
+                   },
+                   { xtype: 'displayfield' }, // spacer
+                   { xtype: 'displayfield' }, // spacer
+                   {
+                       xtype: 'pveDiskStorageSelector',
+                       reference: 'defaultStorage',
+                       storageLabel: gettext('Default Storage'),
+                       storageContent: 'images',
+                       autoSelect: true,
+                       hideSize: true,
+                       name: 'defaultStorage',
+                   },
+               ],
+
+               column2: [
+                   {
+                       xtype: 'textfield',
+                       fieldLabel: gettext('Name'),
+                       name: 'name',
+                       vtype: 'DnsName',
+                       reference: 'nameField',
+                       allowBlank: true,
+                   },
+                   {
+                       xtype: 'CPUModelSelector',
+                       name: 'cpu',
+                       reference: 'cputype',
+                       value: 'x86-64-v2-AES',
+                       fieldLabel: gettext('CPU Type'),
+                   },
+                   {
+                       xtype: 'displayfield',
+                       fieldLabel: gettext('Total cores'),
+                       name: 'totalcores',
+                       isFormField: false,
+                       bind: {
+                           value: '{totalCoreCount}',
                        },
-                       {
-                           xtype: 'combobox',
-                           name: 'ostype',
-                           reference: 'ostype',
-                           fieldLabel: gettext('Version'),
-                           value: 'l26',
-                           allowBlank: false,
-                           editable: false,
-                           queryMode: 'local',
-                           valueField: 'val',
-                           displayField: 'desc',
-                           bind: {
-                               value: '{os}',
-                           },
-                           store: {
-                               fields: ['desc', 'val'],
-                               data: PVE.Utils.kvm_ostypes.Linux,
-                           },
+                   },
+                   {
+                       xtype: 'combobox',
+                       submitValue: false,
+                       name: 'osbase',
+                       fieldLabel: gettext('OS Type'),
+                       editable: false,
+                       queryMode: 'local',
+                       value: 'Linux',
+                       store: Object.keys(PVE.Utils.kvm_ostypes),
+                   },
+                   {
+                       xtype: 'combobox',
+                       name: 'ostype',
+                       reference: 'ostype',
+                       fieldLabel: gettext('Version'),
+                       value: 'l26',
+                       allowBlank: false,
+                       editable: false,
+                       queryMode: 'local',
+                       valueField: 'val',
+                       displayField: 'desc',
+                       bind: {
+                           value: '{os}',
                        },
-                       { xtype: 'displayfield' }, // spacer
-                       {
-                           xtype: 'PVE.form.BridgeSelector',
-                           reference: 'defaultBridge',
-                           name: 'defaultBridge',
-                           allowBlank: false,
-                           fieldLabel: gettext('Default Bridge'),
+                       store: {
+                           fields: ['desc', 'val'],
+                           data: PVE.Utils.kvm_ostypes.Linux,
                        },
-                   ],
-
-                   columnB: [
-                       {
-                           xtype: 'proxmoxcheckbox',
-                           fieldLabel: gettext('Live Import'),
-                           reference: 'liveimport',
-                           isFormField: false,
-                           boxLabelCls: 'pmx-hint black x-form-cb-label',
-                           bind: {
-                               value: '{liveImport}',
-                               boxLabel: '{liveImportNote}',
-                           },
+                   },
+                   { xtype: 'displayfield' }, // spacer
+                   {
+                       xtype: 'PVE.form.BridgeSelector',
+                       reference: 'defaultBridge',
+                       name: 'defaultBridge',
+                       allowBlank: false,
+                       fieldLabel: gettext('Default Bridge'),
+                   },
+               ],
+
+               columnB: [
+                   {
+                       xtype: 'proxmoxcheckbox',
+                       fieldLabel: gettext('Live Import'),
+                       reference: 'liveimport',
+                       isFormField: false,
+                       boxLabelCls: 'pmx-hint black x-form-cb-label',
+                       bind: {
+                           value: '{liveImport}',
+                           boxLabel: '{liveImportNote}',
                        },
-                       {
-                           xtype: 'displayfield',
-                           fieldLabel: gettext('Warnings'),
-                           labelWidth: 200,
-                           hidden: true,
-                           bind: {
-                               hidden: '{hideWarnings}',
-                           },
+                   },
+                   {
+                       xtype: 'displayfield',
+                       fieldLabel: gettext('Warnings'),
+                       labelWidth: 200,
+                       hidden: true,
+                       bind: {
+                           hidden: '{hideWarnings}',
                        },
-                       {
-                           xtype: 'displayfield',
-                           reference: 'warningText',
-                           userCls: 'pmx-hint',
-                           hidden: true,
-                           bind: {
-                               hidden: '{hideWarnings}',
-                               value: '{warningsText}',
-                           },
+                   },
+                   {
+                       xtype: 'displayfield',
+                       reference: 'warningText',
+                       userCls: 'pmx-hint',
+                       hidden: true,
+                       bind: {
+                           hidden: '{hideWarnings}',
+                           value: '{warningsText}',
                        },
-                   ],
-               },
-               {
-                   title: gettext('Advanced'),
-                   xtype: 'inputpanel',
-
-                   // the first inputpanel handles all values, so prevent value leakage here
-                   onGetValues: () => ({}),
-
-                   columnT: [
-                       {
-                           xtype: 'displayfield',
-                           fieldLabel: gettext('Disks'),
-                           labelWidth: 200,
+                   },
+               ],
+           },
+           {
+               title: gettext('Advanced'),
+               xtype: 'inputpanel',
+
+               // the first inputpanel handles all values, so prevent value leakage here
+               onGetValues: () => ({}),
+
+               columnT: [
+                   {
+                       xtype: 'displayfield',
+                       fieldLabel: gettext('Disks'),
+                       labelWidth: 200,
+                   },
+                   {
+                       xtype: 'grid',
+                       reference: 'diskGrid',
+                       minHeight: 60,
+                       maxHeight: 150,
+                       store: {
+                           data: [],
+                           sorters: [
+                               'id',
+                           ],
                        },
-                       {
-                           xtype: 'grid',
-                           reference: 'diskGrid',
-                           minHeight: 60,
-                           maxHeight: 150,
-                           store: {
-                               data: [],
-                               sorters: [
-                                   'id',
-                               ],
-                           },
-                           columns: [
-                               {
-                                   xtype: 'checkcolumn',
-                                   header: gettext('Use'),
-                                   width: 50,
-                                   dataIndex: 'enable',
-                                   listeners: {
-                                       checkchange: function(_column, _rowIndex, _checked, record) {
-                                           record.commit();
-                                       },
-                                   },
-                               },
-                               {
-                                   text: gettext('Disk'),
-                                   dataIndex: 'id',
-                                   renderer: 'mapDisk',
-                               },
-                               {
-                                   text: gettext('Source'),
-                                   dataIndex: 'import-from',
-                                   flex: 1,
-                                   renderer: function(value) {
-                                       return value.replace(/^.*\//, '');
+                       columns: [
+                           {
+                               xtype: 'checkcolumn',
+                               header: gettext('Use'),
+                               width: 50,
+                               dataIndex: 'enable',
+                               listeners: {
+                                   checkchange: function(_column, _rowIndex, _checked, record) {
+                                       record.commit();
                                    },
                                },
-                               {
-                                   text: gettext('Size'),
-                                   dataIndex: 'size',
-                                   renderer: (value) => {
-                                       if (Ext.isNumeric(value)) {
-                                           return Proxmox.Utils.render_size(value);
-                                       }
-                                       return value ?? Proxmox.Utils.unknownText;
-                                   },
+                           },
+                           {
+                               text: gettext('Disk'),
+                               dataIndex: 'id',
+                               renderer: 'mapDisk',
+                           },
+                           {
+                               text: gettext('Source'),
+                               dataIndex: 'import-from',
+                               flex: 1,
+                               renderer: function(value) {
+                                   return value.replace(/^.*\//, '');
                                },
-                               {
-                                   text: gettext('Storage'),
-                                   dataIndex: 'file',
-                                   xtype: 'widgetcolumn',
-                                   width: 150,
-                                   widget: {
-                                       xtype: 'pveStorageSelector',
-                                       isFormField: false,
-                                       autoSelect: false,
-                                       allowBlank: true,
-                                       emptyText: gettext('From Default'),
-                                       name: 'file',
-                                       storageContent: 'images',
-                                   },
-                                   onWidgetAttach: 'setNodename',
+                           },
+                           {
+                               text: gettext('Size'),
+                               dataIndex: 'size',
+                               renderer: (value) => {
+                                   if (Ext.isNumeric(value)) {
+                                       return Proxmox.Utils.render_size(value);
+                                   }
+                                   return value ?? Proxmox.Utils.unknownText;
                                },
-                               {
-                                   text: gettext('Format'),
-                                   dataIndex: 'format',
-                                   xtype: 'widgetcolumn',
-                                   width: 150,
-                                   widget: {
-                                       xtype: 'pveDiskFormatSelector',
-                                       name: 'format',
-                                       disabled: true,
-                                       isFormField: false,
-                                       matchFieldWidth: false,
-                                   },
+                           },
+                           {
+                               text: gettext('Storage'),
+                               dataIndex: 'file',
+                               xtype: 'widgetcolumn',
+                               width: 150,
+                               widget: {
+                                   xtype: 'pveStorageSelector',
+                                   isFormField: false,
+                                   autoSelect: false,
+                                   allowBlank: true,
+                                   emptyText: gettext('From Default'),
+                                   name: 'file',
+                                   storageContent: 'images',
                                },
-                           ],
-                       },
-                   ],
-
-                   column1: [
-                       {
-                           xtype: 'proxmoxcheckbox',
-                           fieldLabel: gettext('Prepare for VirtIO-SCSI'),
-                           labelWidth: 200,
-                           reference: 'mapSata',
-                           name: 'mapSata',
-                           submitValue: false,
-                           disabled: true,
-                           bind: {
-                               disabled: '{!isWindows}',
+                               onWidgetAttach: 'setNodename',
                            },
-                           autoEl: {
-                               tag: 'div',
-                               'data-qtip': gettext('Maps SCSI disks to SATA and changes the SCSI Controller. Useful for a quicker switch to VirtIO-SCSI attached disks'),
+                           {
+                               text: gettext('Format'),
+                               dataIndex: 'format',
+                               xtype: 'widgetcolumn',
+                               width: 150,
+                               widget: {
+                                   xtype: 'pveDiskFormatSelector',
+                                   name: 'format',
+                                   disabled: true,
+                                   isFormField: false,
+                                   matchFieldWidth: false,
+                               },
                            },
+                       ],
+                   },
+               ],
+
+               column1: [
+                   {
+                       xtype: 'proxmoxcheckbox',
+                       fieldLabel: gettext('Prepare for VirtIO-SCSI'),
+                       labelWidth: 200,
+                       reference: 'mapSata',
+                       name: 'mapSata',
+                       submitValue: false,
+                       disabled: true,
+                       bind: {
+                           disabled: '{!isWindows}',
                        },
-                   ],
-
-                   column2: [
-                       {
-                           xtype: 'pveScsiHwSelector',
-                           reference: 'scsihw',
-                           name: 'scsihw',
-                           value: '__default__',
-                           submitValue: false,
-                           fieldLabel: gettext('SCSI Controller'),
+                       autoEl: {
+                           tag: 'div',
+                           'data-qtip': gettext('Maps SCSI disks to SATA and changes the SCSI Controller. Useful for a quicker switch to VirtIO-SCSI attached disks'),
                        },
-                   ],
+                   },
+               ],
+
+               column2: [
+                   {
+                       xtype: 'pveScsiHwSelector',
+                       reference: 'scsihw',
+                       name: 'scsihw',
+                       value: '__default__',
+                       submitValue: false,
+                       fieldLabel: gettext('SCSI Controller'),
+                   },
+               ],
 
-                   columnB: [
-                       {
-                           xtype: 'displayfield',
-                           fieldLabel: gettext('CD/DVD Drives'),
-                           labelWidth: 200,
+               columnB: [
+                   {
+                       xtype: 'displayfield',
+                       fieldLabel: gettext('CD/DVD Drives'),
+                       labelWidth: 200,
+                   },
+                   {
+                       xtype: 'grid',
+                       reference: 'cdGrid',
+                       minHeight: 60,
+                       maxHeight: 150,
+                       store: {
+                           data: [],
+                           sorters: [
+                               'id',
+                           ],
+                           filters: [
+                               function(rec) {
+                                   return !rec.data.hidden;
+                               },
+                           ],
                        },
-                       {
-                           xtype: 'grid',
-                           reference: 'cdGrid',
-                           minHeight: 60,
-                           maxHeight: 150,
-                           store: {
-                               data: [],
-                               sorters: [
-                                   'id',
-                               ],
-                               filters: [
-                                   function(rec) {
-                                       return !rec.data.hidden;
-                                   },
-                               ],
-                           },
-                           columns: [
-                               {
-                                   xtype: 'checkcolumn',
-                                   header: gettext('Use'),
-                                   width: 50,
-                                   dataIndex: 'enable',
-                                   listeners: {
-                                       checkchange: function(_column, _rowIndex, _checked, record) {
-                                           record.commit();
-                                       },
+                       columns: [
+                           {
+                               xtype: 'checkcolumn',
+                               header: gettext('Use'),
+                               width: 50,
+                               dataIndex: 'enable',
+                               listeners: {
+                                   checkchange: function(_column, _rowIndex, _checked, record) {
+                                       record.commit();
                                    },
                                },
-                               {
-                                   text: gettext('Slot'),
-                                   dataIndex: 'id',
-                                   sorted: true,
-                               },
-                               {
-                                   text: gettext('Storage'),
-                                   xtype: 'widgetcolumn',
-                                   width: 150,
-                                   widget: {
-                                       xtype: 'pveStorageSelector',
-                                       isFormField: false,
-                                       autoSelect: false,
-                                       allowBlank: true,
-                                       emptyText: Proxmox.Utils.noneText,
-                                       storageContent: 'iso',
-                                   },
-                                   onWidgetAttach: 'setNodename',
+                           },
+                           {
+                               text: gettext('Slot'),
+                               dataIndex: 'id',
+                               sorted: true,
+                           },
+                           {
+                               text: gettext('Storage'),
+                               xtype: 'widgetcolumn',
+                               width: 150,
+                               widget: {
+                                   xtype: 'pveStorageSelector',
+                                   isFormField: false,
+                                   autoSelect: false,
+                                   allowBlank: true,
+                                   emptyText: Proxmox.Utils.noneText,
+                                   storageContent: 'iso',
                                },
-                               {
-                                   text: gettext('ISO'),
-                                   dataIndex: 'file',
-                                   xtype: 'widgetcolumn',
-                                   flex: 1,
-                                   widget: {
-                                       xtype: 'pveFileSelector',
-                                       name: 'file',
-                                       isFormField: false,
-                                       allowBlank: true,
-                                       emptyText: Proxmox.Utils.noneText,
-                                       storageContent: 'iso',
-                                   },
-                                   onWidgetAttach: 'setNodename',
+                               onWidgetAttach: 'setNodename',
+                           },
+                           {
+                               text: gettext('ISO'),
+                               dataIndex: 'file',
+                               xtype: 'widgetcolumn',
+                               flex: 1,
+                               widget: {
+                                   xtype: 'pveFileSelector',
+                                   name: 'file',
+                                   isFormField: false,
+                                   allowBlank: true,
+                                   emptyText: Proxmox.Utils.noneText,
+                                   storageContent: 'iso',
                                },
-                           ],
-                       },
-                       {
-                           xtype: 'displayfield',
-                           fieldLabel: gettext('Network Interfaces'),
-                           labelWidth: 200,
-                           style: {
-                               paddingTop: '10px',
+                               onWidgetAttach: 'setNodename',
                            },
+                       ],
+                   },
+                   {
+                       xtype: 'displayfield',
+                       fieldLabel: gettext('Network Interfaces'),
+                       labelWidth: 200,
+                       style: {
+                           paddingTop: '10px',
                        },
-                       {
-                           xtype: 'grid',
-                           minHeight: 58,
-                           maxHeight: 150,
-                           reference: 'netGrid',
-                           store: {
-                               data: [],
-                               sorters: [
-                                   'id',
-                               ],
-                           },
-                           columns: [
-                               {
-                                   xtype: 'checkcolumn',
-                                   header: gettext('Use'),
-                                   width: 50,
-                                   dataIndex: 'enable',
-                                   listeners: {
-                                       checkchange: function(_column, _rowIndex, _checked, record) {
-                                           record.commit();
-                                       },
+                   },
+                   {
+                       xtype: 'grid',
+                       minHeight: 58,
+                       maxHeight: 150,
+                       reference: 'netGrid',
+                       store: {
+                           data: [],
+                           sorters: [
+                               'id',
+                           ],
+                       },
+                       columns: [
+                           {
+                               xtype: 'checkcolumn',
+                               header: gettext('Use'),
+                               width: 50,
+                               dataIndex: 'enable',
+                               listeners: {
+                                   checkchange: function(_column, _rowIndex, _checked, record) {
+                                       record.commit();
                                    },
                                },
-                               {
-                                   text: gettext('ID'),
-                                   dataIndex: 'id',
-                               },
-                               {
-                                   text: gettext('MAC address'),
-                                   flex: 1,
-                                   dataIndex: 'macaddr',
-                                   renderer: 'renderMacAddress',
-                               },
-                               {
-                                   text: gettext('Model'),
-                                   flex: 1,
-                                   dataIndex: 'model',
-                                   xtype: 'widgetcolumn',
-                                   widget: {
-                                       xtype: 'pveNetworkCardSelector',
-                                       name: 'model',
-                                       isFormField: false,
-                                       allowBlank: false,
-                                   },
+                           },
+                           {
+                               text: gettext('ID'),
+                               dataIndex: 'id',
+                           },
+                           {
+                               text: gettext('MAC address'),
+                               flex: 1,
+                               dataIndex: 'macaddr',
+                               renderer: 'renderMacAddress',
+                           },
+                           {
+                               text: gettext('Model'),
+                               flex: 1,
+                               dataIndex: 'model',
+                               xtype: 'widgetcolumn',
+                               widget: {
+                                   xtype: 'pveNetworkCardSelector',
+                                   name: 'model',
+                                   isFormField: false,
+                                   allowBlank: false,
                                },
-                               {
-                                   text: gettext('Bridge'),
-                                   dataIndex: 'bridge',
-                                   xtype: 'widgetcolumn',
-                                   flex: 1,
-                                   widget: {
-                                       xtype: 'PVE.form.BridgeSelector',
-                                       name: 'bridge',
-                                       isFormField: false,
-                                       autoSelect: false,
-                                       allowBlank: true,
-                                       emptyText: gettext('From Default'),
-                                   },
-                                   onWidgetAttach: 'setNodename',
+                           },
+                           {
+                               text: gettext('Bridge'),
+                               dataIndex: 'bridge',
+                               xtype: 'widgetcolumn',
+                               flex: 1,
+                               widget: {
+                                   xtype: 'PVE.form.BridgeSelector',
+                                   name: 'bridge',
+                                   isFormField: false,
+                                   autoSelect: false,
+                                   allowBlank: true,
+                                   emptyText: gettext('From Default'),
                                },
-                           ],
-                       },
-                       {
-                           xtype: 'proxmoxcheckbox',
-                           name: 'uniqueMACs',
-                           boxLabel: gettext('Unique MAC addresses'),
-                           uncheckedValue: false,
-                           value: false,
-                       },
-                   ],
-               },
-               {
-                   title: gettext('Resulting Config'),
-                   reference: 'summaryTab',
-                   items: [
-                       {
-                           xtype: 'grid',
-                           reference: 'summaryGrid',
-                           maxHeight: 400,
-                           scrollable: true,
-                           store: {
-                               model: 'KeyValue',
-                               sorters: [{
-                                   property: 'key',
-                                   direction: 'ASC',
-                               }],
+                               onWidgetAttach: 'setNodename',
                            },
-                           columns: [
-                               { header: 'Key', width: 150, dataIndex: 'key' },
-                               { header: 'Value', flex: 1, dataIndex: 'value' },
-                           ],
+                       ],
+                   },
+                   {
+                       xtype: 'proxmoxcheckbox',
+                       name: 'uniqueMACs',
+                       boxLabel: gettext('Unique MAC addresses'),
+                       uncheckedValue: false,
+                       value: false,
+                   },
+               ],
+           },
+           {
+               title: gettext('Resulting Config'),
+               reference: 'summaryTab',
+               items: [
+                   {
+                       xtype: 'grid',
+                       reference: 'summaryGrid',
+                       maxHeight: 400,
+                       scrollable: true,
+                       store: {
+                           model: 'KeyValue',
+                           sorters: [{
+                               property: 'key',
+                               direction: 'ASC',
+                           }],
                        },
-                   ],
-               },
-           ],
-       },
-    ],
+                       columns: [
+                           { header: 'Key', width: 150, dataIndex: 'key' },
+                           { header: 'Value', flex: 1, dataIndex: 'value' },
+                       ],
+                   },
+               ],
+           },
+       ],
+    }],
 
     initComponent: function() {
        let me = this;