From: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [PATCH pve-manager v3 12/17] ui: add basic custom CPU model editor
Date: Thu, 30 Apr 2026 17:35:00 +0200 [thread overview]
Message-ID: <20260430153505.527032-13-a.bied-charreton@proxmox.com> (raw)
In-Reply-To: <20260430153505.527032-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 | 93 ++++++++++++++++
www/manager6/dc/CPUTypeView.js | 149 +++++++++++++++++++++++++
www/manager6/dc/Config.js | 9 ++
www/manager6/form/PhysBitsSelector.js | 153 ++++++++++++++++++++++++++
5 files changed, 407 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..1b250462
--- /dev/null
+++ b/www/manager6/dc/CPUTypeEdit.js
@@ -0,0 +1,93 @@
+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'),
+ },
+
+ getValues: function () {
+ let me = this;
+ let values = me.callParent();
+
+ PVE.Utils.delete_if_default(values, 'reported-model', '', me.isCreate);
+ PVE.Utils.delete_if_default(values, 'hv-vendor-id', '', me.isCreate);
+ PVE.Utils.delete_if_default(values, 'phys-bits', '', me.isCreate);
+ PVE.Utils.delete_if_default(values, 'flags', '', me.isCreate);
+
+ return values;
+ },
+
+ items: [
+ {
+ xtype: 'inputpanel',
+ 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 15:37 UTC|newest]
Thread overview: 19+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-04-30 15:34 [PATCH docs/manager/qemu-server v3 00/17] Add API and UI for custom CPU models Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH pve-docs v3 01/17] qm: add anchor to "CPU Type" section Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH qemu-server v3 02/17] cpu config: rename CPU models config path variable Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH qemu-server v3 03/17] cpu flags: move cpu flags-related utilities to their own module Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH qemu-server v3 04/17] cpu flags: add helper querying CPU flags with nodes supporting them Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH qemu-server v3 05/17] cpu config: add helpers to lock and write config Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH qemu-server v3 06/17] cpu: register standard option for CPU format Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH qemu-server v3 07/17] cpu config: set 'type' field before writing Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH qemu-server v3 08/17] cpu flags: improve flags list returned by endpoint Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH pve-manager v3 09/17] api: add endpoint querying available CPU flags cluster-wide Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH pve-manager v3 10/17] api: add CRUD handlers for custom CPU models Arthur Bied-Charreton
2026-04-30 15:34 ` [PATCH pve-manager v3 11/17] ui: cpu model selector: allow filtering out custom models Arthur Bied-Charreton
2026-04-30 15:35 ` Arthur Bied-Charreton [this message]
2026-04-30 15:35 ` [PATCH pve-manager v3 13/17] ui: cpu flags selector: add CPU flag editor for " Arthur Bied-Charreton
2026-04-30 15:35 ` [PATCH pve-manager v3 14/17] ui: cpu flags selector: fix buffered rendering error Arthur Bied-Charreton
2026-04-30 15:35 ` [PATCH pve-manager v3 15/17] ui: cpu flags selector: allow filtering out flags supported on 0 nodes Arthur Bied-Charreton
2026-04-30 15:35 ` [PATCH pve-manager v3 16/17] ui: cpu flags selector: add search bar for large lists of flags Arthur Bied-Charreton
2026-04-30 15:35 ` [PATCH pve-manager v3 17/17] RFC: ui: group custom CPU with resource mappings Arthur Bied-Charreton
2026-04-30 16:03 ` supersed: [PATCH docs/manager/qemu-server v3 00/17] Add API and UI for custom CPU models 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=20260430153505.527032-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 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.