From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [PATCH manager v3 07/13] ui: qemu: hardware: wrap in container
Date: Fri, 15 May 2026 10:44:25 +0200 [thread overview]
Message-ID: <20260515085349.1123127-8-d.csapak@proxmox.com> (raw)
In-Reply-To: <20260515085349.1123127-1-d.csapak@proxmox.com>
this is preparation for showing multiple grids in the hardware view, so
we move the actual PendingObjectGrid one level deeper.
Introduces some helpers that redirect to the PendingObjectGrid to keep
the diff a bit smaller.
Explicitly create the rstore outside the PendingObjectGrid because
we'll need it anyway later on.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/manager6/qemu/HardwareView.js | 328 +++++++++++++++++-------------
1 file changed, 181 insertions(+), 147 deletions(-)
diff --git a/www/manager6/qemu/HardwareView.js b/www/manager6/qemu/HardwareView.js
index 58f86779..b5b2600d 100644
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -1,46 +1,23 @@
Ext.define('PVE.qemu.HardwareView', {
- extend: 'Proxmox.grid.PendingObjectGrid',
+ extend: 'Ext.container.Container',
alias: ['widget.PVE.qemu.HardwareView'],
onlineHelp: 'qm_virtual_machines_settings',
- renderKey: function (key, metaData, rec, rowIndex, colIndex, store) {
- var me = this;
- var rows = me.rows;
- var rowdef = rows[key] || {};
- var iconCls = rowdef.iconCls;
- var icon = '';
- var txt = rowdef.header || key;
-
- metaData.tdAttr = 'valign=middle';
-
- if (rowdef.isOnStorageBus) {
- let value = me.getObjectValue(key, '', false);
- if (value === '') {
- value = me.getObjectValue(key, '', true);
- }
- if (value.match(/vm-.*-cloudinit/)) {
- iconCls = 'cloud';
- txt = rowdef.cloudheader;
- } else if (PVE.Utils.diskIsCdrom(value)) {
- metaData.tdCls = 'pve-itype-icon-cdrom';
- return rowdef.cdheader;
- }
- }
+ referenceHolder: true,
- if (rowdef.tdCls) {
- metaData.tdCls = rowdef.tdCls;
- } else if (iconCls) {
- icon = "<i class='pve-grid-fa fa fa-fw fa-" + iconCls + "'></i>";
- metaData.tdCls += ' pve-itype-fa';
- }
+ // helpers to redirect the methods to the hardwareGrid
- // only return icons in grid but not remove dialog
- if (rowIndex !== undefined) {
- return icon + txt;
- } else {
- return txt;
- }
+ getObjectValue: function () {
+ let me = this;
+ let hardwareGrid = me.lookup('hardwareGrid');
+ return hardwareGrid.getObjectValue(...arguments);
+ },
+
+ reload: function () {
+ let me = this;
+ let hardwareGrid = me.lookup('hardwareGrid');
+ return hardwareGrid.reload();
},
initComponent: function () {
@@ -612,7 +589,7 @@ Ext.define('PVE.qemu.HardwareView', {
baseurl,
rows,
renderKey: function () {
- return me.renderKey(...arguments);
+ return me.lookup('hardwareGrid').renderKey(...arguments);
},
reloadCallback: () => me.reload(),
});
@@ -649,7 +626,8 @@ Ext.define('PVE.qemu.HardwareView', {
};
let set_button_status = function () {
- let selection_model = me.getSelectionModel();
+ let hardwareGrid = me.lookup('hardwareGrid');
+ let selection_model = hardwareGrid.getSelectionModel();
let rec = selection_model.getSelection()[0];
counts = {}; // en/disable hardwarebuttons
@@ -699,7 +677,7 @@ Ext.define('PVE.qemu.HardwareView', {
const row = rows[key];
const deleted = !!rec.data.delete;
- const pending = deleted || me.hasPendingChanges(key);
+ const pending = deleted || hardwareGrid.hasPendingChanges(key);
const isRunning = me.pveSelNode.data.running;
const isCloudInit = isCloudInitKey(value);
@@ -766,118 +744,174 @@ Ext.define('PVE.qemu.HardwareView', {
});
};
- Ext.apply(me, {
+ me.rstore = Ext.create('Proxmox.data.ObjectStore', {
+ model: 'KeyValuePendingDelete',
+ readArray: true,
url: `/api2/json/nodes/${nodename}/qemu/${vmid}/pending`,
interval: 5000,
- selModel: sm,
- run_editor: run_editor,
- tbar: [
+ rows,
+ });
+
+ Ext.apply(me, {
+ items: [
{
- text: gettext('Add'),
- menu: new Ext.menu.Menu({
- cls: 'pve-add-hw-menu',
- items: [
- {
- text: gettext('Hard Disk'),
- iconCls: 'fa fa-fw fa-hdd-o black',
- disabled: !caps.vms['VM.Config.Disk'],
- handler: editorFactory('HDEdit'),
- },
- {
- text: gettext('Import Hard Disk'),
- iconCls: 'fa fa-fw fa-cloud-download',
- disabled: !caps.vms['VM.Config.Disk'],
- handler: editorFactory('HDEdit', { importDisk: true }),
- },
- {
- text: gettext('CD/DVD Drive'),
- iconCls: 'pve-itype-icon-cdrom',
- disabled: !caps.vms['VM.Config.CDROM'],
- handler: editorFactory('CDEdit'),
- },
- {
- text: gettext('Network Device'),
- itemId: 'addNet',
- iconCls: 'fa fa-fw fa-exchange black',
- disabled: !caps.vms['VM.Config.Network'],
- handler: editorFactory('NetworkEdit'),
- },
- efidisk_menuitem,
- {
- text: gettext('TPM State'),
- itemId: 'addTpmState',
- iconCls: 'fa fa-fw fa-hdd-o black',
- disabled: !caps.vms['VM.Config.Disk'],
- handler: editorFactory('TPMDiskEdit'),
- },
- {
- text: gettext('USB Device'),
- itemId: 'addUsb',
- iconCls: 'fa fa-fw fa-usb black',
- disabled:
- !caps.nodes['Sys.Console'] && !caps.mapping['Mapping.Use'],
- handler: editorFactory('USBEdit'),
- },
- {
- text: gettext('PCI Device'),
- itemId: 'addPci',
- iconCls: 'pve-itype-icon-pci',
- disabled:
- !caps.nodes['Sys.Console'] && !caps.mapping['Mapping.Use'],
- handler: editorFactory('PCIEdit'),
- },
- {
- text: gettext('Serial Port'),
- itemId: 'addSerial',
- iconCls: 'pve-itype-icon-serial',
- disabled: !caps.vms['VM.Config.Options'],
- handler: editorFactory('SerialEdit'),
- },
- {
- text: gettext('CloudInit Drive'),
- itemId: 'addCloudinitDrive',
- iconCls: 'fa fa-fw fa-cloud black',
- disabled:
- !caps.vms['VM.Config.CDROM'] ||
- !caps.vms['VM.Config.Cloudinit'],
- handler: editorFactory('CIDriveEdit'),
- },
- {
- text: gettext('Audio Device'),
- itemId: 'addAudio',
- iconCls: 'fa fa-fw fa-volume-up black',
- disabled: !caps.vms['VM.Config.HWType'],
- handler: editorFactory('AudioEdit'),
- },
- {
- text: gettext('VirtIO RNG'),
- itemId: 'addRng',
- iconCls: 'pve-itype-icon-die',
- disabled:
- !caps.vms['VM.Config.HWType'] && !caps.mapping['Mapping.Use'],
- handler: editorFactory('RNGEdit'),
- },
- {
- text: gettext('Virtiofs'),
- itemId: 'addVirtiofs',
- iconCls: 'fa fa-folder',
- disabled: !caps.nodes['Sys.Console'],
- handler: editorFactory('VirtiofsEdit'),
- },
- ],
- }),
+ xtype: 'proxmoxPendingObjectGrid',
+ reference: 'hardwareGrid',
+ border: false,
+ rstore: me.rstore,
+ interval: 5000,
+ selModel: sm,
+ run_editor: run_editor,
+ renderKey: function (key, metaData, rec, rowIndex, colIndex, store) {
+ var me = this;
+ var rows = me.rows;
+ var rowdef = rows[key] || {};
+ var iconCls = rowdef.iconCls;
+ var icon = '';
+ var txt = rowdef.header || key;
+
+ metaData.tdAttr = 'valign=middle';
+
+ if (rowdef.isOnStorageBus) {
+ let value = me.getObjectValue(key, '', false);
+ if (value === '') {
+ value = me.getObjectValue(key, '', true);
+ }
+ if (value.match(/vm-.*-cloudinit/)) {
+ iconCls = 'cloud';
+ txt = rowdef.cloudheader;
+ } else if (PVE.Utils.diskIsCdrom(value)) {
+ metaData.tdCls = 'pve-itype-icon-cdrom';
+ return rowdef.cdheader;
+ }
+ }
+
+ if (rowdef.tdCls) {
+ metaData.tdCls = rowdef.tdCls;
+ } else if (iconCls) {
+ icon = "<i class='pve-grid-fa fa fa-fw fa-" + iconCls + "'></i>";
+ metaData.tdCls += ' pve-itype-fa';
+ }
+
+ // only return icons in grid but not remove dialog
+ if (rowIndex !== undefined) {
+ return icon + txt;
+ } else {
+ return txt;
+ }
+ },
+ tbar: [
+ {
+ text: gettext('Add'),
+ menu: new Ext.menu.Menu({
+ cls: 'pve-add-hw-menu',
+ items: [
+ {
+ text: gettext('Hard Disk'),
+ iconCls: 'fa fa-fw fa-hdd-o black',
+ disabled: !caps.vms['VM.Config.Disk'],
+ handler: editorFactory('HDEdit'),
+ },
+ {
+ text: gettext('Import Hard Disk'),
+ iconCls: 'fa fa-fw fa-cloud-download',
+ disabled: !caps.vms['VM.Config.Disk'],
+ handler: editorFactory('HDEdit', { importDisk: true }),
+ },
+ {
+ text: gettext('CD/DVD Drive'),
+ iconCls: 'pve-itype-icon-cdrom',
+ disabled: !caps.vms['VM.Config.CDROM'],
+ handler: editorFactory('CDEdit'),
+ },
+ {
+ text: gettext('Network Device'),
+ itemId: 'addNet',
+ iconCls: 'fa fa-fw fa-exchange black',
+ disabled: !caps.vms['VM.Config.Network'],
+ handler: editorFactory('NetworkEdit'),
+ },
+ efidisk_menuitem,
+ {
+ text: gettext('TPM State'),
+ itemId: 'addTpmState',
+ iconCls: 'fa fa-fw fa-hdd-o black',
+ disabled: !caps.vms['VM.Config.Disk'],
+ handler: editorFactory('TPMDiskEdit'),
+ },
+ {
+ text: gettext('USB Device'),
+ itemId: 'addUsb',
+ iconCls: 'fa fa-fw fa-usb black',
+ disabled:
+ !caps.nodes['Sys.Console'] &&
+ !caps.mapping['Mapping.Use'],
+ handler: editorFactory('USBEdit'),
+ },
+ {
+ text: gettext('PCI Device'),
+ itemId: 'addPci',
+ iconCls: 'pve-itype-icon-pci',
+ disabled:
+ !caps.nodes['Sys.Console'] &&
+ !caps.mapping['Mapping.Use'],
+ handler: editorFactory('PCIEdit'),
+ },
+ {
+ text: gettext('Serial Port'),
+ itemId: 'addSerial',
+ iconCls: 'pve-itype-icon-serial',
+ disabled: !caps.vms['VM.Config.Options'],
+ handler: editorFactory('SerialEdit'),
+ },
+ {
+ text: gettext('CloudInit Drive'),
+ itemId: 'addCloudinitDrive',
+ iconCls: 'fa fa-fw fa-cloud black',
+ disabled:
+ !caps.vms['VM.Config.CDROM'] ||
+ !caps.vms['VM.Config.Cloudinit'],
+ handler: editorFactory('CIDriveEdit'),
+ },
+ {
+ text: gettext('Audio Device'),
+ itemId: 'addAudio',
+ iconCls: 'fa fa-fw fa-volume-up black',
+ disabled: !caps.vms['VM.Config.HWType'],
+ handler: editorFactory('AudioEdit'),
+ },
+ {
+ text: gettext('VirtIO RNG'),
+ itemId: 'addRng',
+ iconCls: 'pve-itype-icon-die',
+ disabled:
+ !caps.vms['VM.Config.HWType'] &&
+ !caps.mapping['Mapping.Use'],
+ handler: editorFactory('RNGEdit'),
+ },
+ {
+ text: gettext('Virtiofs'),
+ itemId: 'addVirtiofs',
+ iconCls: 'fa fa-folder',
+ disabled: !caps.nodes['Sys.Console'],
+ handler: editorFactory('VirtiofsEdit'),
+ },
+ ],
+ }),
+ },
+ remove_btn,
+ edit_btn,
+ diskaction_btn,
+ revert_btn,
+ ],
+ rows: rows,
+ sorterFn: sorterFn,
+ listeners: {
+ itemdblclick: run_editor,
+ selectionchange: set_button_status,
+ },
},
- remove_btn,
- edit_btn,
- diskaction_btn,
- revert_btn,
],
- rows: rows,
- sorterFn: sorterFn,
- listeners: {
- itemdblclick: run_editor,
- selectionchange: set_button_status,
- },
});
me.callParent();
@@ -885,6 +919,6 @@ Ext.define('PVE.qemu.HardwareView', {
me.on('activate', me.rstore.startUpdate, me.rstore);
me.on('destroy', me.rstore.stopUpdate, me.rstore);
- me.mon(me.getStore(), 'datachanged', set_button_status, me);
+ me.mon(me.rstore, 'datachanged', set_button_status, me);
},
});
--
2.47.3
next prev parent reply other threads:[~2026-05-15 8:55 UTC|newest]
Thread overview: 16+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-05-15 8:44 [PATCH manager v3 00/13] ui: split out disks and nics into grids Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 01/13] ui: utils: factor out 'media=cdrom' check Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 02/13] ui: factor out the guest key nic regex check Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 03/13] ui: parser: qemu drive: allow '-' in key names Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 04/13] ui: add pending grid Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 05/13] ui: revert button: add parentXType and reloadCallback Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 06/13] ui: button: add config remove button Dominik Csapak
2026-05-15 8:44 ` Dominik Csapak [this message]
2026-05-15 8:44 ` [PATCH manager v3 08/13] ui: qemu: introduce hardware disk grid Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 09/13] ui: qemu: introduce hardware net grid Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 10/13] ui: qemu: hardware view: separate disks into own grid Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 11/13] ui: qemu: hardware view: separate nics " Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 12/13] ui: qemu: hardware view: inline edit/remove/revert button in general grid Dominik Csapak
2026-05-15 8:44 ` [PATCH manager v3 13/13] ui: qemu: hardware view: inline 'add efi' menuitem Dominik Csapak
2026-05-15 9:18 ` [PATCH manager v3 00/13] ui: split out disks and nics into grids Dominik Csapak
2026-05-15 9:20 ` Dominik Csapak
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20260515085349.1123127-8-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.