From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <s.reiter@proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by lists.proxmox.com (Postfix) with ESMTPS id 8BD826082F
for <pve-devel@lists.proxmox.com>; Thu, 24 Sep 2020 16:11:59 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 7FBFE12E04
for <pve-devel@lists.proxmox.com>; Thu, 24 Sep 2020 16:11:59 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
[212.186.127.180])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by firstgate.proxmox.com (Proxmox) with ESMTPS id 8C9A212DF2
for <pve-devel@lists.proxmox.com>; Thu, 24 Sep 2020 16:11:56 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 4DB2445512
for <pve-devel@lists.proxmox.com>; Thu, 24 Sep 2020 16:11:56 +0200 (CEST)
From: Stefan Reiter <s.reiter@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Thu, 24 Sep 2020 16:11:42 +0200
Message-Id: <20200924141142.15842-2-s.reiter@proxmox.com>
X-Mailer: git-send-email 2.20.1
In-Reply-To: <20200924141142.15842-1-s.reiter@proxmox.com>
References: <20200924141142.15842-1-s.reiter@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL -0.053 Adjusted score from AWL reputation of From: address
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/,
medium trust
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See
http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more
information. [combobox.name, item.name, x.name, entry.name, me.store]
Subject: [pve-devel] [PATCH manager 2/2] ui: improve boot order editor with
'bootorder' support
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Thu, 24 Sep 2020 14:11:59 -0000
The new 'bootorder' property can express many more scenarios than the
old 'boot'/'bootdisk' ones. Update the editor so it can handle it.
Features a grid with all supported boot devices which can be reordered
using drag-and-drop, as well as toggled on and off with an inline
checkbox.
Support for configs still using the old properties is given, with the
first write automatically updating the VM config to use the new one.
The renderer for the Options panel is updated with support for the new
format, and the display format for the fallback is changed to make it
look uniform.
Note that it is very well possible to disable all boot devices, in which
case an empty 'bootorder: ' will be stored to the config file. I'm not
sure what that would be useful for, but there's no reason to forbid it
either, just warn the user that it's probably not what he wants.
Signed-off-by: Stefan Reiter <s.reiter@proxmox.com>
---
www/manager6/qemu/BootOrderEdit.js | 310 +++++++++++++++++------------
www/manager6/qemu/Options.js | 32 ++-
2 files changed, 210 insertions(+), 132 deletions(-)
diff --git a/www/manager6/qemu/BootOrderEdit.js b/www/manager6/qemu/BootOrderEdit.js
index 19d5d50a..b1236bbd 100644
--- a/www/manager6/qemu/BootOrderEdit.js
+++ b/www/manager6/qemu/BootOrderEdit.js
@@ -1,149 +1,208 @@
+Ext.define('pve-boot-order-entry', {
+ extend: 'Ext.data.Model',
+ fields: [
+ {name: 'name', type: 'string'},
+ {name: 'enabled', type: 'bool'},
+ {name: 'desc', type: 'string'},
+ ]
+});
+
Ext.define('PVE.qemu.BootOrderPanel', {
extend: 'Proxmox.panel.InputPanel',
alias: 'widget.pveQemuBootOrderPanel',
+
vmconfig: {}, // store loaded vm config
+ store: undefined,
+ originalValue: undefined,
- bootdisk: undefined,
- selection: [],
- list: [],
- comboboxes: [],
-
- isBootDisk: function(value) {
+ isDisk: function(value, cdrom) {
return PVE.Utils.bus_match.test(value);
},
- setVMConfig: function(vmconfig) {
- var me = this;
- me.vmconfig = vmconfig;
- var order = me.vmconfig.boot || 'cdn';
- me.bootdisk = me.vmconfig.bootdisk || undefined;
-
- // get the first 3 characters
- // ignore the rest (there should never be more than 3)
- me.selection = order.split('').slice(0,3);
-
- // build bootdev list
- me.list = [];
- Ext.Object.each(me.vmconfig, function(key, value) {
- if (me.isBootDisk(key) &&
- !(/media=cdrom/).test(value)) {
- me.list.push([key, "Disk '" + key + "'"]);
- }
- });
-
- me.list.push(['d', 'CD-ROM']);
- me.list.push(['n', gettext('Network')]);
- me.list.push(['__none__', Proxmox.Utils.noneText]);
-
- me.recomputeList();
-
- me.comboboxes.forEach(function(box) {
- box.resetOriginalValue();
- });
+ isBootdev: function(dev, value) {
+ return this.isDisk(dev) ||
+ (/^net\d+/).test(dev) ||
+ (/^hostpci\d+/).test(dev) ||
+ ((/^usb\d+/).test(dev) && !(/spice/).test(value));
},
- onGetValues: function(values) {
- var me = this;
- var order = me.selection.join('');
- var res = { boot: order };
+ setVMConfig: function(vmconfig) {
+ let me = this;
+ me.vmconfig = vmconfig;
- if (me.bootdisk && order.indexOf('c') !== -1) {
- res.bootdisk = me.bootdisk;
+ me.store.removeAll();
+
+ let bootorder;
+ if (me.vmconfig.bootorder) {
+ bootorder = (/^\s*$/).test(me.vmconfig.bootorder) ? [] :
+ me.vmconfig.bootorder
+ .split(',')
+ .map(dev => ({name: dev, enabled: true}));
} else {
- res['delete'] = 'bootdisk';
+ // legacy style, transform to new bootorder
+ let order = me.vmconfig.boot || 'cdn';
+ let bootdisk = me.vmconfig.bootdisk || undefined;
+
+ // get the first 3 characters
+ // ignore the rest (there should never be more than 3)
+ let orderList = order.split('').slice(0,3);
+
+ // build bootdev list
+ bootorder = [];
+ for (let i = 0; i < orderList.length; i++) {
+ let list = [];
+ if (orderList[i] === 'c') {
+ if (bootdisk !== undefined && me.vmconfig[bootdisk]) {
+ list.push(bootdisk);
+ }
+ } else if (orderList[i] === 'd') {
+ Ext.Object.each(me.vmconfig, function(key, value) {
+ if (me.isDisk(key) && (/media=cdrom/).test(value)) {
+ list.push(key);
+ }
+ });
+ } else if (orderList[i] === 'n') {
+ Ext.Object.each(me.vmconfig, function(key, value) {
+ if ((/^net\d+/).test(key)) {
+ list.push(key);
+ }
+ });
+ }
+
+ // Object.each iterates in random order, sort alphabetically
+ list.sort();
+ list.forEach(dev => bootorder.push({name: dev, enabled: true}));
+ }
}
+ // add disabled devices as well
+ let disabled = [];
+ Ext.Object.each(me.vmconfig, function(key, value) {
+ if (me.isBootdev(key, value) &&
+ !Ext.Array.some(bootorder, x => x.name === key))
+ {
+ disabled.push(key);
+ }
+ });
+ disabled.sort();
+ disabled.forEach(dev => bootorder.push({name: dev, enabled: false}));
+
+ bootorder.forEach(entry => {
+ entry.desc = me.vmconfig[entry.name];
+ });
+
+ me.store.insert(0, bootorder);
+ me.store.fireEvent("update");
+ },
+
+ calculateValue: function() {
+ let me = this;
+ return me.store.getData().items
+ .filter(x => x.data.enabled)
+ .map(x => x.data.name)
+ .join(',');
+ },
+
+ onGetValues: function() {
+ let me = this;
+ // Note: we allow an empty value, so no 'delete' option
+ let res = { bootorder: me.calculateValue() };
return res;
},
- recomputeSelection: function(combobox, newVal, oldVal) {
- var me = this.up('#inputpanel');
- me.selection = [];
- me.comboboxes.forEach(function(item) {
- var val = item.getValue();
-
- // when selecting an already selected item,
- // switch it around
- if ((val === newVal || (me.isBootDisk(val) && me.isBootDisk(newVal))) &&
- item.name !== combobox.name &&
- newVal !== '__none__') {
- // swap items
- val = oldVal;
- }
-
- // push 'c','d' or 'n' in the array
- if (me.isBootDisk(val)) {
- me.selection.push('c');
- me.bootdisk = val;
- } else if (val === 'd' ||
- val === 'n') {
- me.selection.push(val);
- }
- });
-
- me.recomputeList();
- },
-
- recomputeList: function(){
- var me = this;
- // set the correct values in the kvcomboboxes
- var cnt = 0;
- me.comboboxes.forEach(function(item) {
- if (cnt === 0) {
- // never show 'none' on first combobox
- item.store.loadData(me.list.slice(0, me.list.length-1));
- } else {
- item.store.loadData(me.list);
- }
- item.suspendEvent('change');
- if (cnt < me.selection.length) {
- item.setValue((me.selection[cnt] !== 'c')?me.selection[cnt]:me.bootdisk);
- } else if (cnt === 0){
- item.setValue('');
- } else {
- item.setValue('__none__');
- }
- cnt++;
- item.resumeEvent('change');
- item.validate();
- });
- },
-
initComponent : function() {
- var me = this;
+ let me = this;
- // this has to be done here, because of
- // the way our inputPanel class handles items
- me.comboboxes = [
- Ext.createWidget('proxmoxKVComboBox', {
- fieldLabel: gettext('Boot device') + " 1",
- labelWidth: 120,
- name: 'bd1',
- allowBlank: false,
- listeners: {
- change: me.recomputeSelection
+ // for dirty marking and reset detection
+ let inUpdate = false;
+ let marker = Ext.create('Ext.form.field.Base', {
+ hidden: true,
+ itemId: 'marker',
+ setValue: function(val) {
+ // on form reset, go back to original state
+ if (!inUpdate) {
+ me.setVMConfig(me.vmconfig);
}
- }),
- Ext.createWidget('proxmoxKVComboBox', {
- fieldLabel: gettext('Boot device') + " 2",
- labelWidth: 120,
- name: 'bd2',
- allowBlank: false,
- listeners: {
- change: me.recomputeSelection
+
+ // not a subclass, so no callParent; just do it manually
+ this.setRawValue(this.valueToRaw(val));
+ return this.mixins.field.setValue.call(this, val);
+ }
+ });
+
+ let emptyWarning = Ext.create('Ext.form.field.Display', {
+ userCls: 'pmx-hint',
+ value: gettext('Warning: No devices selected, the VM will probably not boot!'),
+ });
+
+ me.store = Ext.create('Ext.data.Store', {
+ model: 'pve-boot-order-entry',
+ listeners: {
+ update: function() {
+ this.commitChanges();
+ let val = me.calculateValue();
+ if (!marker.originalValue) {
+ marker.originalValue = val;
+ }
+ inUpdate = true;
+ marker.setValue(val);
+ inUpdate = false;
+ marker.checkDirty();
+ emptyWarning.setHidden(val !== '');
}
- }),
- Ext.createWidget('proxmoxKVComboBox', {
- fieldLabel: gettext('Boot device') + " 3",
- labelWidth: 120,
- name: 'bd3',
- allowBlank: false,
- listeners: {
- change: me.recomputeSelection
+ }
+ });
+
+ let grid = Ext.create('Ext.grid.Panel', {
+ store: me.store,
+ margin: '0 0 5 0',
+ columns: [
+ {
+ xtype: 'checkcolumn',
+ header: gettext('Enabled'),
+ dataIndex: 'enabled',
+ width: 70,
+ sortable: false,
+ hideable: false,
+ draggable: false,
+ },
+ {
+ header: gettext('Device'),
+ dataIndex: 'name',
+ width: 70,
+ sortable: false,
+ hideable: false,
+ draggable: false,
+ },
+ {
+ header: gettext('Description'),
+ dataIndex: 'desc',
+ flex: true,
+ sortable: false,
+ hideable: false,
+ draggable: false,
+ },
+ ],
+ viewConfig: {
+ plugins: {
+ ptype: 'gridviewdragdrop',
+ dragText:gettext('Drag and drop to reorder'),
}
- })
- ];
- Ext.apply(me, { items: me.comboboxes });
+ },
+ listeners: {
+ drop: function() {
+ // doesn't fire automatically on reorder
+ me.store.fireEvent("update");
+ }
+ },
+ });
+
+ let info = Ext.create('Ext.Component', {
+ html: gettext('Drag and drop to reorder'),
+ });
+
+ Ext.apply(me, { items: [grid, info, emptyWarning, marker] });
+
me.callParent();
}
});
@@ -157,9 +216,10 @@ Ext.define('PVE.qemu.BootOrderEdit', {
}],
subject: gettext('Boot Order'),
+ width: 600,
initComponent : function() {
- var me = this;
+ let me = this;
me.callParent();
me.load({
success: function(response, options) {
diff --git a/www/manager6/qemu/Options.js b/www/manager6/qemu/Options.js
index 20f6ffbb..490d2f54 100644
--- a/www/manager6/qemu/Options.js
+++ b/www/manager6/qemu/Options.js
@@ -86,12 +86,30 @@ Ext.define('PVE.qemu.Options', {
bootdisk: {
visible: false
},
+ bootorder: {
+ visible: false
+ },
boot: {
header: gettext('Boot Order'),
defaultValue: 'cdn',
editor: caps.vms['VM.Config.Disk'] ? 'PVE.qemu.BootOrderEdit' : undefined,
- multiKey: ['boot', 'bootdisk'],
+ multiKey: ['boot', 'bootdisk', 'bootorder'],
renderer: function(order, metaData, record, rowIndex, colIndex, store, pending) {
+ let bootorder = me.getObjectValue('bootorder', undefined, pending);
+ if (bootorder) {
+ let list = bootorder.split(',');
+ let ret = '';
+ list.forEach(dev => {
+ if (ret !== '') {
+ ret += ' > ';
+ }
+ let desc = dev;
+ ret += desc;
+ });
+ return ret;
+ }
+
+ // legacy style and fallback
var i;
var text = '';
var bootdisk = me.getObjectValue('bootdisk', undefined, pending);
@@ -99,20 +117,20 @@ Ext.define('PVE.qemu.Options', {
for (i = 0; i < order.length; i++) {
var sel = order.substring(i, i + 1);
if (text) {
- text += ', ';
+ text += ' > ';
}
if (sel === 'c') {
if (bootdisk) {
- text += "Disk '" + bootdisk + "'";
+ text += bootdisk;
} else {
- text += "Disk";
+ text += "disk";
}
} else if (sel === 'n') {
- text += 'Network';
+ text += 'any net';
} else if (sel === 'a') {
- text += 'Floppy';
+ text += 'floppy';
} else if (sel === 'd') {
- text += 'CD-ROM';
+ text += 'any cdrom';
} else {
text += sel;
}
--
2.20.1