[PATCH manager v2 7/7] ui: lxc/MPEdit: add "idmap" option

Filip Schauer
2026-03-30T14:13:33Z

www/manager6/lxc/MPEdit.js | 212 +++++++++++++++++++++++++++++++++++++
1 file changed, 212 insertions(+)

diff --git a/www/manager6/lxc/MPEdit.js b/www/manager6/lxc/MPEdit.js
index b1f67741..1227ebc0 100644
--- a/www/manager6/lxc/MPEdit.js
+++ b/www/manager6/lxc/MPEdit.js
@@ -47,6 +47,7 @@ Ext.define('PVE.lxc.MountPointInputPanel', {
setMPOpt('acl', values.acl);
setMPOpt('replicate', values.replicate);
setMPOpt('keepattrs', values.keepattrs);
+ setMPOpt('idmap', values.idmap);

let res = {};
res[confid] = PVE.Parser.printLxcMountPoint(me.mp);
@@ -131,6 +132,41 @@ Ext.define('PVE.lxc.MountPointInputPanel', {
me.getViewModel().set('type', rec.data.type);
},
},
+ 'grid proxmoxintegerfield,grid segmentedbutton': {
+ change: function (widget, value) {
+ let me = this;
+ let record = widget.getWidgetRecord();
+ let column = widget.getWidgetColumn();
+ if (!record || !column) {
+ return;
+ }
+ record.set(column.dataIndex, value);
+ record.commit();
+ me.updateIdMapField();
+ },
+ },
+ 'field[name=idmap]': {
+ change: function (field, value) {
+ let me = this;
+ let mode = !value ? 'none' : value === 'passthrough' ? value : 'custom';
+ let modeBtn = me.lookup('idmapMode');
+ modeBtn.suspendEvent('change');
+ modeBtn.setValue(mode);
+ modeBtn.resumeEvent('change');
+ me.updateIdMapUI(mode, value);
+ },
+ },
+ 'segmentedbutton[reference=idmapMode]': {
+ change: function (button, mode) {
+ let me = this;
+ let value = mode === 'passthrough' ? mode : '';
+ let field = me.lookup('idmap');
+ field.suspendEvent('change');
+ field.setValue(value);
+ field.resumeEvent('change');
+ me.updateIdMapUI(mode, value);
+ },
+ },
},
init: function (view) {
let _me = this;
@@ -153,6 +189,50 @@ Ext.define('PVE.lxc.MountPointInputPanel', {
view.setVMConfig(view.vmconfig);
}
},
+ updateIdMapUI: function (mode, value) {
+ let me = this;
+ let isCustom = mode === 'custom';
+ me.lookup('idmaps').setVisible(isCustom);
+ me.lookup('addIdmapButton').setVisible(isCustom);
+
+ let store = me.lookup('idmaps').getStore();
+ if (isCustom && value) {
+ store.setData(
+ value.split(';').map((v) => {
+ let [type, ct, host, length] = v.split(':');
+ return { type, ct, host, length };
+ }),
+ );
+ } else {
+ store.removeAll();
+ }
+ },
+ addIdMap: function () {
+ let me = this;
+ me.lookup('idmaps').getStore().add({ type: 'u', ct: '', host: '', length: '' });
+ me.updateIdMapField();
+ },
+ removeIdMap: function (button) {
+ let me = this;
+ let record = button.getWidgetRecord();
+ me.lookup('idmaps').getStore().remove(record);
+ me.updateIdMapField();
+ },
+ updateIdMapField: function () {
+ let me = this;
+
+ let value = me
+ .lookup('idmaps')
+ .getStore()
+ .getRange()
+ .map(({ data: { type, ct, host, length } }) => `${type}:${ct}:${host}:${length}`)
+ .join(';');
+
+ let field = me.lookup('idmap');
+ field.suspendEvent('change');
+ field.setValue(value);
+ field.resumeEvent('change');
+ },
},

viewModel: {
@@ -353,6 +433,138 @@ Ext.define('PVE.lxc.MountPointInputPanel', {
},
},
],
+
+ advancedColumnB: [
+ {
+ xtype: 'fieldcontainer',
+ fieldLabel: gettext('ID Mapping'),
+ items: [
+ {
+ xtype: 'segmentedbutton',
+ reference: 'idmapMode',
+ defaults: {
+ allowDepress: false,
+ },
+ items: [
+ {
+ text: gettext('None'),
+ value: 'none',
+ pressed: true,
+ },
+ {
+ text: gettext('Passthrough'),
+ value: 'passthrough',
+ tooltip: gettext('UIDs/GIDs in the container match those on disk'),
+ },
+ {
+ text: gettext('Custom'),
+ value: 'custom',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ xtype: 'grid',
+ height: 170,
+ scrollable: true,
+ reference: 'idmaps',
+ hidden: true,
+ viewConfig: {
+ emptyText: gettext('No ID maps configured'),
+ },
+ store: {
+ fields: ['type', 'ct', 'host', 'length'],
+ data: [],
+ },
+ columns: [
+ {
+ text: gettext('ID Type'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'type',
+ widget: {
+ xtype: 'segmentedbutton',
+ items: [
+ {
+ text: 'UID',
+ value: 'u',
+ },
+ {
+ text: 'GID',
+ value: 'g',
+ },
+ ],
+ },
+ flex: 1,
+ },
+ {
+ text: gettext('Container'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'ct',
+ widget: {
+ xtype: 'proxmoxintegerfield',
+ margin: '4 0',
+ emptyText: gettext('Container'),
+ isFormField: false,
+ allowBlank: false,
+ minValue: 0,
+ },
+ flex: 1,
+ },
+ {
+ text: gettext('Host'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'host',
+ widget: {
+ xtype: 'proxmoxintegerfield',
+ margin: '4 0',
+ emptyText: gettext('Host'),
+ isFormField: false,
+ allowBlank: false,
+ minValue: 0,
+ },
+ flex: 1,
+ },
+ {
+ text: gettext('Range Size'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'length',
+ widget: {
+ xtype: 'proxmoxintegerfield',
+ margin: '4 0',
+ emptyText: gettext('Range Size'),
+ isFormField: false,
+ allowBlank: false,
+ minValue: 1,
+ },
+ flex: 1,
+ },
+ {
+ xtype: 'widgetcolumn',
+ width: 40,
+ widget: {
+ xtype: 'button',
+ margin: '4 0',
+ iconCls: 'fa fa-trash-o',
+ handler: 'removeIdMap',
+ },
+ },
+ ],
+ },
+ {
+ xtype: 'button',
+ reference: 'addIdmapButton',
+ text: gettext('Add'),
+ iconCls: 'fa fa-plus-circle',
+ handler: 'addIdMap',
+ hidden: true,
+ },
+ {
+ xtype: 'hidden',
+ reference: 'idmap',
+ name: 'idmap',
+ },
+ ],
});

Ext.define('PVE.lxc.MountPointEdit', {
--
2.47.3