From: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [PATCH pve-manager v5 17/21] ui: add basic custom CPU model editor
Date: Fri, 15 May 2026 11:28:34 +0200 [thread overview]
Message-ID: <20260515092839.238064-18-a.bied-charreton@proxmox.com> (raw)
In-Reply-To: <20260515092839.238064-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 | 107 ++++++++++++++++++
www/manager6/dc/CPUTypeView.js | 150 +++++++++++++++++++++++++
www/manager6/dc/Config.js | 9 ++
www/manager6/form/PhysBitsSelector.js | 153 ++++++++++++++++++++++++++
5 files changed, 422 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 280a9ca6..e6ffc4a3 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 \
@@ -175,6 +176,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..0b72d579
--- /dev/null
+++ b/www/manager6/dc/CPUTypeEdit.js
@@ -0,0 +1,107 @@
+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: '_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, 'hidden', 0, 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 is based on.',
+ ),
+ },
+ cbind: {
+ allowBlank: (get) => !get('isCreate'),
+ },
+ listeners: {
+ afterrender: function (field) {
+ let win = field.up('window');
+ if (win.isCreate) {
+ field.setEmptyText('');
+ }
+ },
+ },
+ },
+ {
+ 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..9bed8408
--- /dev/null
+++ b/www/manager6/dc/CPUTypeView.js
@@ -0,0 +1,150 @@
+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: '_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 is based on.'),
+ },
+ },
+ {
+ header: gettext('Phys-Bits'),
+ flex: 1,
+ dataIndex: 'phys-bits',
+ },
+ {
+ header: gettext('Hidden'),
+ flex: 1,
+ dataIndex: 'hidden',
+ renderer: (val) => Proxmox.Utils.format_boolean(val),
+ },
+ {
+ 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 2d1ced3e..cbd04066 100644
--- a/www/manager6/dc/Config.js
+++ b/www/manager6/dc/Config.js
@@ -439,6 +439,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..5a9c13e1
--- /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 from QEMU'),
+ inputValue: 'default',
+ checked: true,
+ reference: 'modeDefault',
+ listeners: {
+ change: 'onRadioChange',
+ },
+ isFormField: false,
+ },
+ {
+ xtype: 'radiofield',
+ boxLabel: gettext('Inherit from host CPU'),
+ inputValue: 'host',
+ reference: 'modeHost',
+ listeners: {
+ change: 'onRadioChange',
+ },
+ isFormField: false,
+ },
+ {
+ xtype: 'fieldcontainer',
+ layout: 'hbox',
+ items: [
+ {
+ xtype: 'radiofield',
+ boxLabel: gettext('Custom value'),
+ 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-05-15 9:30 UTC|newest]
Thread overview: 24+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-05-15 9:28 [PATCH docs/manager/qemu-server v5 00/21] Add API and UI for custom CPU models Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH pve-docs v5 01/21] qm: add anchor to "CPU Type" section Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH qemu-server v5 02/21] cpu config: rename CPU models config path variable Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH qemu-server v5 03/21] cpu flags: move cpu flags-related utilities to their own module Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH qemu-server v5 04/21] cpu flags: compare against JSON::true when querying supported flags Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH qemu-server v5 05/21] cpu flags: normalize CPU flags to QEMU's format Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH qemu-server v5 06/21] cpu flags: add helper querying CPU flags with nodes supporting them Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH qemu-server v5 07/21] cpu config: rename custom CPU model config loader Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH qemu-server v5 08/21] cpu config: add helpers to lock and write config Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH qemu-server v5 09/21] cpu: register standard option for CPU format Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH qemu-server v5 10/21] api: cpu flags: improve flags list returned by endpoint Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH qemu-server v5 11/21] custom cpu models: avoid redundant config load Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH pve-manager v5 12/21] cluster: reorder imports Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH pve-manager v5 13/21] cluster: makefile: reorder perl sources and align backslashes Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH pve-manager v5 14/21] api: add endpoint querying available CPU flags cluster-wide Arthur Bied-Charreton
2026-05-15 9:45 ` Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH pve-manager v5 15/21] api: add CRUD handlers for custom CPU models Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH pve-manager v5 16/21] ui: cpu model selector: allow filtering out custom models Arthur Bied-Charreton
2026-05-15 9:28 ` Arthur Bied-Charreton [this message]
2026-05-15 9:28 ` [PATCH pve-manager v5 18/21] ui: cpu flags selector: add CPU flag editor for " Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH pve-manager v5 19/21] ui: cpu flags selector: allow filtering out flags supported on 0 nodes Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH pve-manager v5 20/21] ui: cpu flags selector: add search bar for large lists of flags Arthur Bied-Charreton
2026-05-15 9:28 ` [PATCH pve-manager v5 21/21] ui: group custom CPU with resource mappings Arthur Bied-Charreton
2026-05-15 17:05 ` [PATCH docs/manager/qemu-server v5 00/21] Add API and UI for custom CPU models Max R. Carrara
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=20260515092839.238064-18-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