From: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [PATCH pve-manager v4 12/17] ui: add basic custom CPU model editor
Date: Thu, 30 Apr 2026 18:01:04 +0200 [thread overview]
Message-ID: <20260430160109.565536-13-a.bied-charreton@proxmox.com> (raw)
In-Reply-To: <20260430160109.565536-1-a.bied-charreton@proxmox.com>
Add basic structure for viewing (CPUTypeView), creating and editing
(CPUTypeEdit, PhysBitsSelector) custom CPU models, allowing to interact
with the new custom-cpu-models API in the UI.
Based on & adapted from patch by Stefan Reiter:
https://lore.proxmox.com/pve-devel/20211028114150.3245864-9-s.reiter@proxmox.com/
Signed-off-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
---
www/manager6/Makefile | 3 +
www/manager6/dc/CPUTypeEdit.js | 96 ++++++++++++++++
www/manager6/dc/CPUTypeView.js | 149 +++++++++++++++++++++++++
www/manager6/dc/Config.js | 9 ++
www/manager6/form/PhysBitsSelector.js | 153 ++++++++++++++++++++++++++
5 files changed, 410 insertions(+)
create mode 100644 www/manager6/dc/CPUTypeEdit.js
create mode 100644 www/manager6/dc/CPUTypeView.js
create mode 100644 www/manager6/form/PhysBitsSelector.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index f63437d6..644dcd18 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -61,6 +61,7 @@ JSSRC= \
form/PCISelector.js \
form/PCIMapSelector.js \
form/PermPathSelector.js \
+ form/PhysBitsSelector.js \
form/PoolSelector.js \
form/PreallocationSelector.js \
form/PrivilegesSelector.js \
@@ -174,6 +175,8 @@ JSSRC= \
dc/CmdMenu.js \
dc/Config.js \
dc/CorosyncLinkEdit.js \
+ dc/CPUTypeEdit.js \
+ dc/CPUTypeView.js \
dc/GroupEdit.js \
dc/GroupView.js \
dc/Guests.js \
diff --git a/www/manager6/dc/CPUTypeEdit.js b/www/manager6/dc/CPUTypeEdit.js
new file mode 100644
index 00000000..594772ed
--- /dev/null
+++ b/www/manager6/dc/CPUTypeEdit.js
@@ -0,0 +1,96 @@
+Ext.define('PVE.dc.CPUTypeEdit', {
+ extend: 'Proxmox.window.Edit',
+ alias: ['widget.pveCpuTypeEdit'],
+ mixins: ['Proxmox.Mixin.CBind'],
+
+ subject: gettext('CPU Type'),
+
+ // Avoid default-focusing the reported model dropdown while still
+ // focusing the name textfield if it is editable
+ defaultFocus: 'textfield',
+
+ onlineHelp: 'qm_cpu_type',
+
+ height: 600,
+ width: 800,
+
+ cbindData: {
+ cputype: '',
+ isCreate: (cfg) => !cfg.cputype,
+ },
+
+ cbind: {
+ autoLoad: (get) => !get('isCreate'),
+ url: (get) => `/api2/extjs/cluster/qemu/custom-cpu-models/${get('cputype')}`,
+ method: (get) => (get('isCreate') ? 'POST' : 'PUT'),
+ isCreate: (get) => get('isCreate'),
+ },
+
+
+ items: [
+ {
+ xtype: 'inputpanel',
+ onGetValues: function (values) {
+ let win = this.up('window');
+
+ PVE.Utils.delete_if_default(values, 'reported-model', '', win.isCreate);
+ PVE.Utils.delete_if_default(values, 'hv-vendor-id', '', win.isCreate);
+ PVE.Utils.delete_if_default(values, 'phys-bits', '', win.isCreate);
+ PVE.Utils.delete_if_default(values, 'flags', '', win.isCreate);
+
+ if (win.isCreate) {
+ delete values.delete;
+ }
+
+ return values;
+ },
+ column1: [
+ {
+ xtype: 'pmxDisplayEditField',
+ fieldLabel: gettext('Name'),
+ cbind: {
+ editable: '{isCreate}',
+ value: '{cputype}',
+ },
+ name: 'cputype',
+ renderer: (val) => val.replace(/^custom-/, ''),
+ allowBlank: false,
+ },
+ {
+ xtype: 'CPUModelSelector',
+ fieldLabel: gettext('Base Model'),
+ showCustomModels: false,
+ name: 'reported-model',
+ autoEl: {
+ tag: 'div',
+ 'data-qtip': gettext(
+ 'CPU model the rest of the configuration will be based on.',
+ ),
+ },
+ },
+ {
+ xtype: 'textfield',
+ fieldLabel: gettext('Hyper-V Vendor'),
+ name: 'hv-vendor-id',
+ allowBlank: true,
+ emptyText: gettext('None'),
+ maxLength: 12,
+ },
+ ],
+ column2: [
+ {
+ xtype: 'checkbox',
+ fieldLabel: gettext('Hidden'),
+ name: 'hidden',
+ inputValue: 1,
+ uncheckedValue: 0,
+ },
+ {
+ xtype: 'PhysBitsSelector',
+ fieldLabel: gettext('Phys-Bits'),
+ name: 'phys-bits',
+ },
+ ],
+ },
+ ],
+});
diff --git a/www/manager6/dc/CPUTypeView.js b/www/manager6/dc/CPUTypeView.js
new file mode 100644
index 00000000..207673a7
--- /dev/null
+++ b/www/manager6/dc/CPUTypeView.js
@@ -0,0 +1,149 @@
+Ext.define('pve-custom-cpu-type', {
+ extend: 'Ext.data.Model',
+ fields: [
+ 'cputype',
+ 'reported-model',
+ 'hv-vendor-id',
+ 'flags',
+ 'phys-bits',
+ { name: 'hidden', type: 'boolean' },
+ ],
+});
+
+Ext.define('PVE.dc.CPUTypeView', {
+ extend: 'Ext.grid.GridPanel',
+ alias: ['widget.pveCPUTypeView'],
+
+ onlineHelp: 'qm_cpu_type',
+
+ store: {
+ model: 'pve-custom-cpu-type',
+ proxy: {
+ type: 'proxmox',
+ url: '/api2/json/cluster/qemu/custom-cpu-models',
+ },
+ autoLoad: true,
+ sorters: ['cputype'],
+ },
+
+ controller: {
+ xclass: 'Ext.app.ViewController',
+
+ getSelection: function () {
+ let me = this;
+ let grid = me.getView();
+ let selection = grid.getSelection();
+ if (selection.length === 1) {
+ return selection[0].data;
+ }
+ return null;
+ },
+
+ showEditor: function (cputype) {
+ let me = this;
+ let param = cputype ? { cputype } : {};
+ let win = Ext.create('PVE.dc.CPUTypeEdit', param);
+ win.on('destroy', () => me.reload());
+ win.show();
+ },
+
+ onAdd: function () {
+ let me = this;
+ me.showEditor();
+ },
+
+ onEdit: function () {
+ let me = this;
+ let selection = me.getSelection();
+ me.showEditor(selection.cputype);
+ },
+
+ reload: function () {
+ let me = this;
+ me.getView().getStore().reload();
+ },
+ },
+
+ columns: [
+ {
+ header: gettext('Name'),
+ flex: 1,
+ dataIndex: 'cputype',
+ renderer: (val) => val.replace(/^custom-/, ''),
+ },
+ {
+ header: gettext('Base Model'),
+ flex: 1,
+ dataIndex: 'reported-model',
+ autoEl: {
+ tag: 'div',
+ 'data-qtip': gettext('CPU model the rest of the configuration will be based on.'),
+ },
+ },
+ {
+ header: gettext('Phys-Bits'),
+ flex: 1,
+ dataIndex: 'phys-bits',
+ },
+ {
+ header: gettext('Hidden'),
+ flex: 1,
+ dataIndex: 'hidden',
+ },
+ {
+ header: gettext('HyperV-Vendor'),
+ flex: 1,
+ dataIndex: 'hv-vendor-id',
+ },
+ {
+ header: gettext('Flags'),
+ flex: 2,
+ dataIndex: 'flags',
+ },
+ ],
+
+ tbar: [
+ {
+ text: gettext('Add'),
+ handler: 'onAdd',
+ },
+ '-',
+ {
+ xtype: 'proxmoxStdRemoveButton',
+ baseurl: '/api2/extjs/cluster/qemu/custom-cpu-models/',
+ getRecordName: (rec) => rec.data.cputype,
+ getUrl: function (rec) {
+ let me = this;
+ return me.baseurl + rec.data.cputype;
+ },
+ confirmMsg: function (rec) {
+ return Ext.String.format(
+ gettext('Are you sure you want to remove the custom CPU model {0}'),
+ `"${rec.data.cputype.replace(/^custom-/, '')}"?`,
+ );
+ },
+ callback: 'reload',
+ },
+ {
+ text: gettext('Edit'),
+ handler: 'onEdit',
+ },
+ ],
+
+ selModel: {
+ xtype: 'rowmodel',
+ },
+
+ listeners: {
+ itemdblclick: function (_, rec) {
+ let me = this;
+ me.getController().showEditor(rec.data.cputype);
+ },
+ },
+
+ initComponent: function () {
+ let me = this;
+ me.callParent();
+ Proxmox.Utils.monStoreErrors(me, me.store);
+ },
+});
diff --git a/www/manager6/dc/Config.js b/www/manager6/dc/Config.js
index b5e27a21..ad830ba8 100644
--- a/www/manager6/dc/Config.js
+++ b/www/manager6/dc/Config.js
@@ -427,6 +427,15 @@ Ext.define('PVE.dc.Config', {
);
}
+ if (caps.dc['Sys.Audit']) {
+ me.items.push({
+ xtype: 'pveCPUTypeView',
+ iconCls: 'fa fa-microchip',
+ title: gettext('Custom CPU models'),
+ itemId: 'cputypes',
+ });
+ }
+
if (
caps.mapping['Mapping.Audit'] ||
caps.mapping['Mapping.Use'] ||
diff --git a/www/manager6/form/PhysBitsSelector.js b/www/manager6/form/PhysBitsSelector.js
new file mode 100644
index 00000000..78f932a6
--- /dev/null
+++ b/www/manager6/form/PhysBitsSelector.js
@@ -0,0 +1,153 @@
+Ext.define('PVE.form.PhysBitsSelector', {
+ extend: 'Ext.form.FieldContainer',
+ alias: 'widget.PhysBitsSelector',
+ mixins: ['Ext.form.field.Field'],
+
+ layout: 'vbox',
+ originalValue: '',
+
+ controller: {
+ xclass: 'Ext.app.ViewController',
+
+ onRadioChange: function (radio, value) {
+ let me = this;
+ if (value === undefined) {
+ return;
+ }
+
+ ['modeDefault', 'modeHost', 'modeCustom'].forEach(function (ref) {
+ let r = me.lookupReference(ref);
+ if (r !== radio) {
+ r.suspendEvents();
+ r.setValue(false);
+ r.resumeEvents();
+ }
+ });
+
+ me.updateNumberField();
+ },
+
+ updateNumberField: function () {
+ let me = this;
+ let modeCustom = me.lookupReference('modeCustom');
+ let customNum = me.lookupReference('customNum');
+
+ customNum.setDisabled(!modeCustom.getValue());
+ me.getView().validate();
+ },
+
+ listen: {
+ component: {
+ '*': {
+ change: function () {
+ let me = this;
+ me.getView().checkChange();
+ },
+ },
+ },
+ },
+ },
+
+ getValue: function () {
+ let me = this;
+ let ctrl = me.getController();
+ if (ctrl.lookupReference('modeDefault').getValue()) {
+ return '';
+ } else if (ctrl.lookupReference('modeHost').getValue()) {
+ return 'host';
+ } else if (ctrl.lookupReference('modeCustom').getValue()) {
+ return ctrl.lookupReference('customNum').getValue();
+ }
+ return ''; // shouldn't happen
+ },
+
+ setValue: function (value) {
+ let me = this;
+ let ctrl = me.getController();
+ let modeField;
+
+ if (!value) {
+ modeField = ctrl.lookupReference('modeDefault');
+ } else if (value === 'host') {
+ modeField = ctrl.lookupReference('modeHost');
+ } else {
+ let customNum = ctrl.lookupReference('customNum');
+ customNum.setValue(value);
+ modeField = ctrl.lookupReference('modeCustom');
+ }
+
+ modeField.setValue(true);
+ me.checkChange();
+
+ return value;
+ },
+
+ getErrors: function () {
+ let me = this;
+ let ctrl = me.getController();
+ if (ctrl.lookupReference('modeCustom').getValue()) {
+ return ctrl.lookupReference('customNum').getErrors();
+ }
+ return [];
+ },
+
+ isValid: function () {
+ let me = this;
+ let ctrl = me.getController();
+ if (ctrl.lookupReference('modeCustom').getValue()) {
+ return ctrl.lookupReference('customNum').isValid();
+ }
+ return true;
+ },
+
+ items: [
+ {
+ xtype: 'radiofield',
+ boxLabel: gettext('Default'),
+ inputValue: 'default',
+ checked: true,
+ reference: 'modeDefault',
+ listeners: {
+ change: 'onRadioChange',
+ },
+ isFormField: false,
+ },
+ {
+ xtype: 'radiofield',
+ boxLabel: gettext('Host'),
+ inputValue: 'host',
+ reference: 'modeHost',
+ listeners: {
+ change: 'onRadioChange',
+ },
+ isFormField: false,
+ },
+ {
+ xtype: 'fieldcontainer',
+ layout: 'hbox',
+ items: [
+ {
+ xtype: 'radiofield',
+ boxLabel: gettext('Custom'),
+ inputValue: 'custom',
+ listeners: {
+ change: 'onRadioChange',
+ },
+ reference: 'modeCustom',
+ isFormField: false,
+ },
+ {
+ xtype: 'numberfield',
+ width: 60,
+ margin: '0 0 0 10px',
+ minValue: 8,
+ maxValue: 64,
+ reference: 'customNum',
+ allowBlank: false,
+ isFormField: false,
+ disabled: true,
+ },
+ ],
+ },
+ ],
+});
--
2.47.3
next prev parent reply other threads:[~2026-04-30 16:02 UTC|newest]
Thread overview: 17+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-04-30 16:00 [PATCH docs/manager/qemu-server v4 00/17] Add API and UI for custom CPU models Arthur Bied-Charreton
2026-04-30 16:00 ` [PATCH pve-docs v4 01/17] qm: add anchor to "CPU Type" section Arthur Bied-Charreton
2026-04-30 16:00 ` [PATCH qemu-server v4 02/17] cpu config: rename CPU models config path variable Arthur Bied-Charreton
2026-04-30 16:00 ` [PATCH qemu-server v4 03/17] cpu flags: move cpu flags-related utilities to their own module Arthur Bied-Charreton
2026-04-30 16:00 ` [PATCH qemu-server v4 04/17] cpu flags: add helper querying CPU flags with nodes supporting them Arthur Bied-Charreton
2026-04-30 16:00 ` [PATCH qemu-server v4 05/17] cpu config: add helpers to lock and write config Arthur Bied-Charreton
2026-04-30 16:00 ` [PATCH qemu-server v4 06/17] cpu: register standard option for CPU format Arthur Bied-Charreton
2026-04-30 16:00 ` [PATCH qemu-server v4 07/17] cpu config: set 'type' field before writing Arthur Bied-Charreton
2026-04-30 16:01 ` [PATCH qemu-server v4 08/17] cpu flags: improve flags list returned by endpoint Arthur Bied-Charreton
2026-04-30 16:01 ` [PATCH pve-manager v4 09/17] api: add endpoint querying available CPU flags cluster-wide Arthur Bied-Charreton
2026-04-30 16:01 ` [PATCH pve-manager v4 10/17] api: add CRUD handlers for custom CPU models Arthur Bied-Charreton
2026-04-30 16:01 ` [PATCH pve-manager v4 11/17] ui: cpu model selector: allow filtering out custom models Arthur Bied-Charreton
2026-04-30 16:01 ` Arthur Bied-Charreton [this message]
2026-04-30 16:01 ` [PATCH pve-manager v4 13/17] ui: cpu flags selector: add CPU flag editor for " Arthur Bied-Charreton
2026-04-30 16:01 ` [PATCH pve-manager v4 14/17] ui: cpu flags selector: fix buffered rendering error Arthur Bied-Charreton
2026-04-30 16:01 ` [PATCH pve-manager v4 15/17] ui: cpu flags selector: allow filtering out flags supported on 0 nodes Arthur Bied-Charreton
2026-04-30 16:01 ` [PATCH pve-manager v4 17/17] RFC: ui: group custom CPU with resource mappings Arthur Bied-Charreton
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=20260430160109.565536-13-a.bied-charreton@proxmox.com \
--to=a.bied-charreton@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 a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox