[pve-devel] [PATCH manager 0/4] ui: lxc/qemu: add reassign for disks and

[pve-devel] [PATCH manager 0/4] ui: lxc/qemu: add reassign for disks and

[Aaron Lauterer]

This series adds the UI for the recently applied backend series that
allows to reassign a disk / volume from one guest to another.

The first patch is needed to reassing a disk as an unused disk on the
target VM side.


Patch 3 and 4 are optional. Patch 3 only changes a double negated option
and patch 4 happend in the process of working on an interface for the
reassign functionality. Since the work of modernizing this componend is
done, why not use it :)

Aaron Lauterer (4):
  ui: qm: disk selection: add optional selection of unused
  ui: lxc/qemu: add disk reassign
  ui: BusTypeSelector: change noVirtIO to withVirtIO
  ui: hdmove: modernize/refactor

 www/manager6/Makefile                   |   1 +
 www/manager6/Utils.js                   |   1 +
 www/manager6/form/BusTypeSelector.js    |   9 +-
 www/manager6/form/ControllerSelector.js |   6 +-
 www/manager6/lxc/Resources.js           |  69 ++++-
 www/manager6/qemu/CDEdit.js             |   2 +-
 www/manager6/qemu/CIDriveEdit.js        |   2 +-
 www/manager6/qemu/HDMove.js             | 239 +++++++++--------
 www/manager6/qemu/HDReassign.js         | 327 ++++++++++++++++++++++++
 www/manager6/qemu/HardwareView.js       |  65 ++++-
 10 files changed, 605 insertions(+), 116 deletions(-)
 create mode 100644 www/manager6/qemu/HDReassign.js

-- 
2.30.2

[pve-devel] [PATCH manager 1/4] ui: qm: disk selection: add optional selection of unused

[Aaron Lauterer]

With this optional setting, it is possible to allow the user to also
select 'unused' as a disk bus type.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
 www/manager6/Utils.js                   | 1 +
 www/manager6/form/BusTypeSelector.js    | 5 +++++
 www/manager6/form/ControllerSelector.js | 2 ++
 3 files changed, 8 insertions(+)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 274d4db2..1aaa5085 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1548,6 +1548,7 @@ Ext.define('PVE.Utils', {
 	sata: 6,
 	scsi: 31,
 	virtio: 16,
+	unused: 256,
     },
 
     // types is either undefined (all busses), an array of busses, or a single bus
diff --git a/www/manager6/form/BusTypeSelector.js b/www/manager6/form/BusTypeSelector.js
index 13027f5a..a420e56f 100644
--- a/www/manager6/form/BusTypeSelector.js
+++ b/www/manager6/form/BusTypeSelector.js
@@ -3,6 +3,7 @@ Ext.define('PVE.form.BusTypeSelector', {
     alias: 'widget.pveBusSelector',
 
     noVirtIO: false,
+    withUnused: false,
 
     initComponent: function() {
 	var me = this;
@@ -15,6 +16,10 @@ Ext.define('PVE.form.BusTypeSelector', {
 
 	me.comboItems.push(['scsi', 'SCSI']);
 
+	if (me.withUnused) {
+	    me.comboItems.push(['unused', 'Unused']);
+	}
+
 	me.callParent();
     },
 });
diff --git a/www/manager6/form/ControllerSelector.js b/www/manager6/form/ControllerSelector.js
index 71332db5..798dc4b2 100644
--- a/www/manager6/form/ControllerSelector.js
+++ b/www/manager6/form/ControllerSelector.js
@@ -3,6 +3,7 @@ Ext.define('PVE.form.ControllerSelector', {
     alias: 'widget.pveControllerSelector',
 
     noVirtIO: false,
+    withUnused: false,
 
     vmconfig: {}, // used to check for existing devices
 
@@ -73,6 +74,7 @@ Ext.define('PVE.form.ControllerSelector', {
 		    itemId: 'controller',
 		    value: PVE.qemu.OSDefaults.generic.busType,
 		    noVirtIO: me.noVirtIO,
+		    withUnused: me.withUnused,
 		    allowBlank: false,
 		    flex: 2,
 		    listeners: {
-- 
2.30.2

[pve-devel] [PATCH manager 2/4] ui: lxc/qemu: add disk reassign

[Aaron Lauterer]

For the new HDReassign component, we follow the approach of HDMove to
have one componend for qemu and lxc as they are the same for most parts.

The 'Move disk/volume' button is now a SplitButton which has the
'Reassign' button as menu item.  In the lxc resource panel the menu item
is defined extra so we can easily disable it, should the selected mp be
the rootfs.

In the lxc resource and qemu hardware panel we currently add a new
button to handle unused disks/volumes. The button is "switched" with the
'Move' in this case. The width of the buttons is aligned to avoid
movement of other buttons.

Once we are able to also move unused disks/volumes to other storages, we
can remove this.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---

The handling of the value for the pmxDisplayEditField is a workaround as
apparently it is not possible to bind the value. Therefore the value is
initially set with a cbind and the viewModel of HDReassign is updated in
the change handler of the pmxDisplayEditField.

Switching the move button with the reassign button in the lxc resource
and qemu hardware panel works and the button following does not change
position. I did notice though that the split button of the same width is
apparently rendered slightly different and the right end moves by about
1px.

 www/manager6/Makefile             |   1 +
 www/manager6/lxc/Resources.js     |  69 ++++++-
 www/manager6/qemu/HDReassign.js   | 327 ++++++++++++++++++++++++++++++
 www/manager6/qemu/HardwareView.js |  64 +++++-
 4 files changed, 457 insertions(+), 4 deletions(-)
 create mode 100644 www/manager6/qemu/HDReassign.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 4011d4e5..75fd6e67 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -211,6 +211,7 @@ JSSRC= 							\
 	qemu/HDTPM.js					\
 	qemu/HDMove.js					\
 	qemu/HDResize.js				\
+	qemu/HDReassign.js				\
 	qemu/HardwareView.js				\
 	qemu/IPConfigEdit.js				\
 	qemu/KeyboardEdit.js				\
diff --git a/www/manager6/lxc/Resources.js b/www/manager6/lxc/Resources.js
index 15ee3c67..7fa60594 100644
--- a/www/manager6/lxc/Resources.js
+++ b/www/manager6/lxc/Resources.js
@@ -156,6 +156,11 @@ Ext.define('PVE.lxc.RessourceView', {
 		return;
 	    }
 
+	    if (rec.data.key.match(/^unused/)) {
+		Ext.Msg.alert('Error', gettext('Not yet supported for unused volumes'));
+		return;
+	    }
+
 	    var win = Ext.create('PVE.window.HDMove', {
 		disk: rec.data.key,
 		nodename: nodename,
@@ -168,6 +173,24 @@ Ext.define('PVE.lxc.RessourceView', {
 	    win.on('destroy', me.reload, me);
 	};
 
+	let run_reassign = function() {
+	    let rec = me.selModel.getSelection()[0];
+	    if (!rec) {
+		return;
+	    }
+
+	    let win = Ext.create('PVE.window.HDReassign', {
+		disk: rec.data.key,
+		nodename: nodename,
+		vmid: vmid,
+		type: 'lxc',
+	    });
+
+	    win.show();
+
+	    win.on('destroy', me.reload, me);
+	};
+
 	var edit_btn = new Proxmox.button.Button({
 	    text: gettext('Edit'),
 	    selModel: me.selModel,
@@ -227,12 +250,47 @@ Ext.define('PVE.lxc.RessourceView', {
 	    },
 	});
 
-	var move_btn = new Proxmox.button.Button({
+	let reassign_menuitem = new Ext.menu.Item ({
+	    text: gettext('Reassign volume'),
+	    tooltip: gettext('Reassign volume to another VM'),
+	    handler: run_reassign,
+	    iconCls: 'fa fa-mail-forward',
+	    reference: 'reassing_item',
+	});
+
+	let move_btn = new PVE.button.Split({
 	    text: gettext('Move Volume'),
 	    selModel: me.selModel,
 	    disabled: true,
 	    dangerous: true,
 	    handler: run_move,
+	    menu: {
+		items: [reassign_menuitem],
+	    },
+	});
+
+	// needed until we can move unused volumes to other storages
+	let reassign_btn = new Proxmox.button.Button({
+	    text: gettext('Reassign volume'),
+	    tooltip: gettext('Reassign volume to another VM'),
+	    handler: run_reassign,
+	    selModel: me.selModel,
+	    hidden: true,
+	    listeners: {
+		render: function(btn) {
+		    // hack: check if the reassign or the move button is wider
+		    // and set smaller one to the width of the larger to avoid
+		    // flickering of following buttons when they are exchanged
+		    let reassign_width = btn.getSize().width;
+		    let move_width = move_btn.getSize().width;
+
+		    if (reassign_width > move_width) {
+			move_btn.setSize({ width: reassign_width});
+		    } else {
+			btn.setSize({ width: move_width});
+		    }
+		},
+	    },
 	});
 
 	var revert_btn = new PVE.button.PendingRevert();
@@ -253,6 +311,7 @@ Ext.define('PVE.lxc.RessourceView', {
 
 	    var pending = rec.data.delete || me.hasPendingChanges(key);
 	    var isDisk = rowdef.tdCls === 'pve-itype-icon-storage';
+	    let isRootFS = rec.data.key === 'rootfs';
 	    var isUnusedDisk = key.match(/^unused\d+/);
 	    var isUsedDisk = isDisk && !isUnusedDisk;
 
@@ -265,7 +324,12 @@ Ext.define('PVE.lxc.RessourceView', {
 	    }
 	    edit_btn.setDisabled(noedit);
 
-	    remove_btn.setDisabled(!isDisk || rec.data.key === 'rootfs' || !diskCap || pending);
+	    reassign_btn.setHidden(!isUnusedDisk);
+	    reassign_btn.setDisabled(!isUnusedDisk);
+	    move_btn.setHidden(isUnusedDisk);
+	    reassign_menuitem.setDisabled(isRootFS);
+
+	    remove_btn.setDisabled(!isDisk || isRootFS || !diskCap || pending);
 	    resize_btn.setDisabled(!isDisk || !diskCap || isUnusedDisk);
 	    move_btn.setDisabled(!isDisk || !diskCap);
 	    revert_btn.setDisabled(!pending);
@@ -329,6 +393,7 @@ Ext.define('PVE.lxc.RessourceView', {
 		remove_btn,
 		resize_btn,
 		move_btn,
+		reassign_btn,
 		revert_btn,
 	    ],
 	    rows: rows,
diff --git a/www/manager6/qemu/HDReassign.js b/www/manager6/qemu/HDReassign.js
new file mode 100644
index 00000000..b965147e
--- /dev/null
+++ b/www/manager6/qemu/HDReassign.js
@@ -0,0 +1,327 @@
+Ext.define('PVE.window.HDReassign', {
+    extend: 'Ext.window.Window',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    resizable: false,
+    modal: true,
+    width: 350,
+    border: false,
+    layout: 'fit',
+
+    deleteSourceState: false,
+
+    viewModel: {
+	data: {
+	    mpType: '',
+	},
+	formulas: {
+	    mpMaxCount: function(get) {
+		if (get('mpType') === 'mp') {
+		    return PVE.Utils.mp_counts.mps - 1;
+		} else {
+		    return PVE.Utils.mp_counts.unused - 1;
+		}
+	    },
+	},
+    },
+
+    cbindData: function() {
+	let me = this;
+	let qemu = me.type === 'qemu';
+	return {
+	    vmid: me.vmid,
+	    disk: me.disk,
+	    diskOrVolume: qemu ? 'disk' : 'volume',
+	    isRootFS: me.disk === 'rootfs',
+	    isQemu: qemu,
+	    isUnused: me.disk.match(/^unused\d+/),
+	    diskOrVolumeLabel: qemu ? gettext('Source Disk') : gettext('Source Mount Point'),
+	    targetGuestLabel: qemu ? gettext('Target VM') : gettext('Target CT'),
+	    nodename: me.nodename,
+	    title: qemu ? gettext("Reassign disk") : gettext('Reassign volume'),
+	    guestTypeLabel: qemu ? 'VM' : 'CT',
+	    guestTypeFilter: qemu ? /qemu/ : /lxc/,
+	};
+    },
+
+    cbind: {
+	title: '{title}',
+	qemu: '{isQemu}',
+    },
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	initViewModel: function(model) {
+	    let view = this.getView();
+	    let mpTypeValue = view.disk.match(/^unused\d+/) ? 'unused' : 'mp';
+	    model.set('mpType', mpTypeValue);
+	},
+
+	reassign_disk: function(values) {
+	    let me = this;
+	    let view = me.getView();
+	    let qemu = view.qemu;
+	    let params = {};
+
+	    params[qemu ? 'disk':'volume'] = view.disk;
+	    params.vmid = view.vmid;
+
+	    params['target-vmid'] = values.targetVmid;
+
+	    if (view.qemu) {
+		params['target-disk'] = `${values.controller}${values.deviceid}`;
+	    } else {
+		params['target-volume'] = `${values.mpType}${values.mpId}`;
+	    }
+
+	    let url = '/nodes/' + view.nodename + '/' + view.type + '/' + view.vmid + '/';
+	    url += qemu ? 'move_disk' : 'move_volume';
+
+	    Proxmox.Utils.API2Request({
+		params: params,
+		url: url,
+		waitMsgTarget: me.getView(),
+		method: 'POST',
+		failure: function(response, opts) {
+		    Ext.Msg.alert('Error', response.htmlStatus);
+		},
+		success: function(response, options) {
+		    let upid = response.result.data;
+		    view.hide();
+		    Ext.create('Proxmox.window.TaskProgress', {
+			upid,
+			taskDone: function(success) {
+			    if (success) {
+				view.close();
+			    } else {
+				view.show();
+			    }
+			},
+		    }).show();
+		},
+	    });
+	},
+
+	validateForm: function(fp, isValid) {
+	    this.getView().lookup('submitButton').setDisabled(!isValid);
+	},
+
+	onReassignClick: function() {
+		let me = this;
+		let view = me.getView();
+		let form = view.lookup('moveFormPanel').getForm();
+		if (form.isValid()) {
+		    me.reassign_disk(form.getValues());
+		}
+	},
+
+	onMpTypeChange: function (value) {
+	    this.getView().getViewModel().set('mpType', value.getValue());
+	    this.getView().lookup('mpIdSelector').validate()
+	},
+
+	onTargetVMChange: function(f, vmid) {
+	    let me = this;
+	    let view = me.getView();
+	    let diskSelector = view.lookup('diskSelector');
+	    if (!vmid) {
+		diskSelector.setVMConfig(null);
+		me.VMConfig = null;
+		return;
+	    }
+
+	    let type = view.type === 'qemu' ? 'qemu' : 'lxc';
+
+	    let url = `/nodes/${view.nodename}/${type}/${vmid}/config`;
+	    Proxmox.Utils.API2Request({
+		url: url,
+		method: 'GET',
+		failure: function(response, opts) {
+		    Ext.Msg.alert('Error', response.htmlStatus);
+		},
+		success: function(response, options) {
+		    if (type === 'qemu') {
+			diskSelector.setVMConfig(response.result.data);
+			diskSelector.setDisabled(false);
+		    } else {
+			let mpIdSelector = view.lookup('mpIdSelector');
+			let mpType = view.lookup('mpType');
+
+			view.VMConfig = response.result.data;
+
+			PVE.Utils.forEachMP((bus, i) => {
+			    let name = view.getViewModel().get('mpType') + i.toString();
+			    if (!Ext.isDefined(view.VMConfig[name])) {
+				mpIdSelector.setValue(i);
+				return false;
+			    }
+			    return undefined;
+			});
+
+			mpType.setDisabled(false);
+			mpIdSelector.setDisabled(false);
+			mpIdSelector.validate();
+		    }
+		},
+	    });
+	},
+    },
+
+    buttons: [
+	{
+	    xtype: 'button',
+	    reference: 'submitButton',
+	    cbind: { text: '{title}' },
+	    handler: 'onReassignClick',
+	    disabled: true,
+	},
+    ],
+
+    items: [
+	{
+	    xtype: 'form',
+	    reference: 'moveFormPanel',
+	    bodyPadding: 10,
+	    border: false,
+	    fieldDefaults: {
+		labelWidth: 100,
+		anchor: '100%',
+	    },
+	    listeners: {
+		validitychange: 'validateForm',
+	    },
+	    items: [
+		{
+		    xtype: 'displayfield',
+		    name: 'sourceDisk',
+		    cbind: {
+			name: '{diskOrVolume}',
+			fieldLabel: '{diskOrVolumeLabel}',
+			value: '{disk}',
+		    },
+		    vtype: 'StorageId',
+		    allowBlank: false,
+		},
+		{
+		    xtype: 'vmComboSelector',
+		    reference: 'targetVMID',
+		    name: 'targetVmid',
+		    allowBlank: false,
+		    bind: {
+			value: '{targetVMID}',
+		    },
+		    cbind: {
+			fieldLabel: '{targetGuestLabel}',
+			nodename: '{nodename}',
+		    },
+		    store: {
+			model: 'PVEResources',
+			autoLoad: true,
+			sorters: 'vmid',
+			cbind: {}, // for nested cbinds
+			filters: [
+			    {
+				property: 'type',
+				cbind: { value: '{guestTypeFilter}' },
+			    },
+			    {
+				property: 'node',
+				cbind: { value: '{nodename}' },
+			    },
+			    {
+				property: 'vmid',
+				operator: '!=',
+				cbind: { value: '{vmid}' },
+			    },
+			],
+		    },
+		    listeners: { change: 'onTargetVMChange' },
+		},
+		{
+		    xtype: 'pveControllerSelector',
+		    reference: 'diskSelector',
+		    withUnused: true,
+		    disabled: true,
+		    cbind: {
+			hidden: '{!isQemu}',
+		    },
+		},
+		{
+		    xtype: 'container',
+		    layout: 'hbox',
+		    cbind: {
+			hidden: '{isQemu}',
+			disabled: '{isQemu}',
+		    },
+		    items: [
+			{
+			    xtype: 'pmxDisplayEditField',
+			    cbind: {
+				editable: '{!isUnused}',
+				value: (get) => get('isUnused') ? 'unused' : 'mp',
+			    },
+			    disabled: true,
+			    name: 'mpType',
+			    reference: 'mpType',
+			    fieldLabel: gettext('Add as'),
+			    submitValue: true,
+			    flex: 4,
+			    editConfig: {
+				xtype: 'proxmoxKVComboBox',
+				name: 'mpTypeCombo',
+				reference: 'mpTypeCombo',
+				deleteEmpty: false,
+				cbind: {
+				    hidden: '{isQemu}',
+				},
+				comboItems: [
+				    ['mp', gettext('Mount Point')],
+				    ['unused', gettext('Unused')],
+				],
+				listeners: { change: 'onMpTypeChange' },
+			    },
+			},
+			{
+			    xtype: 'proxmoxintegerfield',
+			    name: 'mpId',
+			    reference: 'mpIdSelector',
+			    minValue: 0,
+			    flex: 1,
+			    allowBlank: false,
+			    validateOnChange: true,
+			    disabled: true,
+			    bind: { maxValue: '{mpMaxCount}' },
+			    validator: function(value) {
+				let me = this.up('window');
+				let type = me.getViewModel().get('mpType');
+				if (Ext.isDefined(me.VMConfig[type+value])) {
+				    return "Mount point is already in use.";
+				}
+				return true;
+			    },
+			},
+		    ],
+		}
+	    ],
+	},
+    ],
+
+    initComponent: function() {
+	let me = this;
+
+	if (!me.nodename) {
+	    throw "no node name specified";
+	}
+
+	if (!me.vmid) {
+	    throw "no VM ID specified";
+	}
+
+	if (!me.type) {
+	    throw "no type specified";
+	}
+
+	me.callParent();
+    },
+});
diff --git a/www/manager6/qemu/HardwareView.js b/www/manager6/qemu/HardwareView.js
index 6cea4287..44d70665 100644
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -406,6 +406,11 @@ Ext.define('PVE.qemu.HardwareView', {
 		return;
 	    }
 
+	    if (rec.data.key.match(/^unused/)) {
+		Ext.Msg.alert('Error', gettext('Not yet supported for unused disks'));
+		return;
+	    }
+
 	    var win = Ext.create('PVE.window.HDMove', {
 		disk: rec.data.key,
 		nodename: nodename,
@@ -417,6 +422,24 @@ Ext.define('PVE.qemu.HardwareView', {
 	    win.on('destroy', me.reload, me);
 	};
 
+	let run_reassign = function() {
+	    let rec = sm.getSelection()[0];
+	    if (!rec) {
+		return;
+	    }
+
+	    let win = Ext.create('PVE.window.HDReassign', {
+		disk: rec.data.key,
+		nodename: nodename,
+		vmid: vmid,
+		type: 'qemu',
+	    });
+
+	    win.show();
+
+	    win.on('destroy', me.reload, me);
+	};
+
 	var edit_btn = new Proxmox.button.Button({
 	    text: gettext('Edit'),
 	    selModel: sm,
@@ -431,11 +454,43 @@ Ext.define('PVE.qemu.HardwareView', {
 	    handler: run_resize,
 	});
 
-	var move_btn = new Proxmox.button.Button({
+	let move_btn = new PVE.button.Split({
 	    text: gettext('Move disk'),
 	    selModel: sm,
 	    disabled: true,
 	    handler: run_move,
+	    menu: {
+		items: [{
+		    text: gettext('Reassign disk'),
+		    tooltip: gettext('Reassign disk to another VM'),
+		    handler: run_reassign,
+		    iconCls: 'fa fa-mail-forward',
+		}],
+	    },
+	});
+
+	// needed until we can move unused disk to other storages
+	let reassign_btn = new Proxmox.button.Button({
+	    text: gettext('Reassign disk'),
+	    tooltip: gettext('Reassign disk to another VM'),
+	    handler: run_reassign,
+	    selModel: sm,
+	    hidden: true,
+	    listeners: {
+		render: function(btn) {
+		    // hack: check if the reassign or the move button is wider
+		    // and set smaller one to the width of the larger to avoid
+		    // flickering of following buttons when they are exchanged
+		    let reassign_width = btn.getSize().width;
+		    let move_width = move_btn.getSize().width;
+
+		    if (reassign_width > move_width) {
+			move_btn.setSize({ width: reassign_width});
+		    } else {
+			btn.setSize({ width: move_width});
+		    }
+		},
+	    },
 	});
 
 	var remove_btn = new Proxmox.button.Button({
@@ -613,7 +668,11 @@ Ext.define('PVE.qemu.HardwareView', {
 
 	    resize_btn.setDisabled(pending || !isUsedDisk || !diskCap);
 
-	    move_btn.setDisabled(pending || !(isUsedDisk || isEfi || tpmMoveable) || !diskCap);
+	    reassign_btn.setHidden(!isUnusedDisk);
+	    reassign_btn.setDisabled(!isUnusedDisk);
+	    move_btn.setHidden(isUnusedDisk);
+
+	    move_btn.setDisabled(pending || isCloudInit || !(isDisk || isEfi || tpmMoveable) || !diskCap);
 
 	    revert_btn.setDisabled(!pending);
 	};
@@ -777,6 +836,7 @@ Ext.define('PVE.qemu.HardwareView', {
 		edit_btn,
 		resize_btn,
 		move_btn,
+		reassign_btn,
 		revert_btn,
 	    ],
 	    rows: rows,
-- 
2.30.2

[pve-devel] [PATCH manager 3/4] ui: BusTypeSelector: change noVirtIO to withVirtIO

[Aaron Lauterer]

Double negated properties make it harder than necessary to parse
conditions.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
 www/manager6/form/BusTypeSelector.js    | 4 ++--
 www/manager6/form/ControllerSelector.js | 4 ++--
 www/manager6/qemu/CDEdit.js             | 2 +-
 www/manager6/qemu/CIDriveEdit.js        | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/www/manager6/form/BusTypeSelector.js b/www/manager6/form/BusTypeSelector.js
index a420e56f..0f040229 100644
--- a/www/manager6/form/BusTypeSelector.js
+++ b/www/manager6/form/BusTypeSelector.js
@@ -2,7 +2,7 @@ Ext.define('PVE.form.BusTypeSelector', {
     extend: 'Proxmox.form.KVComboBox',
     alias: 'widget.pveBusSelector',
 
-    noVirtIO: false,
+    withVirtIO: true,
     withUnused: false,
 
     initComponent: function() {
@@ -10,7 +10,7 @@ Ext.define('PVE.form.BusTypeSelector', {
 
 	me.comboItems = [['ide', 'IDE'], ['sata', 'SATA']];
 
-	if (!me.noVirtIO) {
+	if (me.withVirtIO) {
 	    me.comboItems.push(['virtio', 'VirtIO Block']);
 	}
 
diff --git a/www/manager6/form/ControllerSelector.js b/www/manager6/form/ControllerSelector.js
index 798dc4b2..d84c49d6 100644
--- a/www/manager6/form/ControllerSelector.js
+++ b/www/manager6/form/ControllerSelector.js
@@ -2,7 +2,7 @@ Ext.define('PVE.form.ControllerSelector', {
     extend: 'Ext.form.FieldContainer',
     alias: 'widget.pveControllerSelector',
 
-    noVirtIO: false,
+    withVirtIO: true,
     withUnused: false,
 
     vmconfig: {}, // used to check for existing devices
@@ -73,7 +73,7 @@ Ext.define('PVE.form.ControllerSelector', {
 		    name: 'controller',
 		    itemId: 'controller',
 		    value: PVE.qemu.OSDefaults.generic.busType,
-		    noVirtIO: me.noVirtIO,
+		    withVirtIO: me.withVirtIO,
 		    withUnused: me.withUnused,
 		    allowBlank: false,
 		    flex: 2,
diff --git a/www/manager6/qemu/CDEdit.js b/www/manager6/qemu/CDEdit.js
index 72c01037..fc7a59cc 100644
--- a/www/manager6/qemu/CDEdit.js
+++ b/www/manager6/qemu/CDEdit.js
@@ -71,7 +71,7 @@ Ext.define('PVE.qemu.CDInputPanel', {
 
 	if (!me.confid) {
 	    me.bussel = Ext.create('PVE.form.ControllerSelector', {
-		noVirtIO: true,
+		withVirtIO: false,
 	    });
 	    items.push(me.bussel);
 	}
diff --git a/www/manager6/qemu/CIDriveEdit.js b/www/manager6/qemu/CIDriveEdit.js
index 754b8353..a9ca8bf1 100644
--- a/www/manager6/qemu/CIDriveEdit.js
+++ b/www/manager6/qemu/CIDriveEdit.js
@@ -36,7 +36,7 @@ Ext.define('PVE.qemu.CIDriveInputPanel', {
 	me.items = [
 	    {
 		xtype: 'pveControllerSelector',
-		noVirtIO: true,
+		withVirtIO: false,
 		itemId: 'drive',
 		fieldLabel: gettext('CloudInit Drive'),
 		name: 'drive',
-- 
2.30.2

[pve-devel] [PATCH manager 4/4] ui: hdmove: modernize/refactor

[Aaron Lauterer]

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
 www/manager6/qemu/HDMove.js       | 239 +++++++++++++++++-------------
 www/manager6/qemu/HardwareView.js |   1 +
 2 files changed, 134 insertions(+), 106 deletions(-)

diff --git a/www/manager6/qemu/HDMove.js b/www/manager6/qemu/HDMove.js
index 181b7bdc..6e9b748f 100644
--- a/www/manager6/qemu/HDMove.js
+++ b/www/manager6/qemu/HDMove.js
@@ -1,48 +1,147 @@
 Ext.define('PVE.window.HDMove', {
     extend: 'Ext.window.Window',
+    mixins: ['Proxmox.Mixin.CBind'],
 
     resizable: false,
+    modal: true,
+    width: 350,
+    border: false,
+    layout: 'fit',
+
+    cbindData: function() {
+	let me = this;
+	let qemu = me.type === 'qemu';
+	return {
+	    disk: me.disk,
+	    diskOrVolume: qemu ? 'disk' : 'volume',
+	    diskOrVolumeLabel: qemu ? gettext('Disk') : gettext('Mount Point'),
+	    storageContent: qemu ? 'images' : 'rootdir',
+	    hideFormat: me.disk === 'tpmstate0',
+	    nodename: me.nodename,
+	    title: qemu ? gettext("Move disk") : gettext('Move Volume'),
+	};
+    },
 
+    cbind: {
+	title: '{title}',
+    },
 
-    move_disk: function(disk, storage, format, delete_disk) {
-	var me = this;
-	var qemu = me.type === 'qemu';
-	var params = {};
-	params.storage = storage;
-	params[qemu ? 'disk':'volume'] = disk;
-
-	if (format && qemu) {
-	    params.format = format;
-	}
-
-	if (delete_disk) {
-	    params.delete = 1;
-	}
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	move_disk: function(disk, storage, format, delete_disk) {
+	    let me = this;
+	    let view = me.getView();
+	    let qemu = view.type === 'qemu';
+	    let params = {};
+	    params.storage = storage;
+	    params[qemu ? 'disk':'volume'] = disk;
+
+	    if (format && qemu) {
+		params.format = format;
+	    }
+
+	    if (delete_disk) {
+		params.delete = 1;
+	    }
+
+	    let url = '/nodes/' + view.nodename + '/' + view.type + '/' + view.vmid + '/';
+	    url += qemu ? 'move_disk' : 'move_volume';
+
+	    Proxmox.Utils.API2Request({
+		params: params,
+		url: url,
+		waitMsgTarget: me.getView(),
+		method: 'POST',
+		failure: function(response, opts) {
+		    Ext.Msg.alert('Error', response.htmlStatus);
+		},
+		success: function(response, options) {
+		    let upid = response.result.data;
+		    let win = Ext.create('Proxmox.window.TaskViewer', {
+			upid: upid,
+		    });
+		    win.show();
+		    win.on('destroy', function() { view.close(); });
+		},
+	    });
+	},
+
+	onMoveClick: function() {
+		let me = this;
+		let view = me.getView();
+		let form = me.lookup('moveFormPanel').getForm();
+		if (form.isValid()) {
+		    let values = form.getValues();
+		    me.move_disk(view.disk, values.hdstorage, values.diskformat,
+				 values.deleteDisk);
+		}
+	},
 
-	var url = '/nodes/' + me.nodename + '/' + me.type + '/' + me.vmid + '/';
-	url += qemu ? 'move_disk' : 'move_volume';
+	validateForm: function (fp, isValid) {
+	    this.getView().lookup('submitButton').setDisabled(!isValid);
+	},
+    },
 
-	Proxmox.Utils.API2Request({
-	    params: params,
-	    url: url,
-	    waitMsgTarget: me,
-	    method: 'POST',
-	    failure: function(response, opts) {
-		Ext.Msg.alert('Error', response.htmlStatus);
+    buttons: [
+	{
+	    xtype: 'button',
+	    reference: 'submitButton',
+	    cbind: {
+		text: '{title}',
 	    },
-	    success: function(response, options) {
-		var upid = response.result.data;
-		var win = Ext.create('Proxmox.window.TaskViewer', {
-		    upid: upid,
-		});
-		win.show();
-		win.on('destroy', function() { me.close(); });
+	    handler: 'onMoveClick',
+	    disabled: true,
+	},
+    ],
+
+    items: [
+	{
+	    xtype: 'form',
+	    reference: 'moveFormPanel',
+	    bodyPadding: 10,
+	    border: false,
+	    fieldDefaults: {
+		labelWidth: 100,
+		anchor: '100%',
 	    },
-	});
-    },
+	    listeners: {
+		validitychange: 'validateForm',
+	    },
+	    items: [
+		{
+		    xtype: 'displayfield',
+		    cbind: {
+			name: '{diskOrVolume}',
+			fieldLabel: '{diskOrVolumeLabel}',
+			value: '{disk}',
+		    },
+		    vtype: 'StorageId',
+		    allowBlank: false,
+		},
+		{
+		    xtype: 'pveDiskStorageSelector',
+		    storageLabel: gettext('Target Storage'),
+		    cbind: {
+			nodename: '{nodename}',
+			storageContent: '{storageContent}',
+			hideFormat: '{hideFormat}',
+		    },
+		    hideSize: true,
+		},
+		{
+		    xtype: 'proxmoxcheckbox',
+		    fieldLabel: gettext('Delete source'),
+		    name: 'deleteDisk',
+		    uncheckedValue: 0,
+		    checked: false,
+		},
+	    ],
+	},
+    ],
 
     initComponent: function() {
-	var me = this;
+	let me = this;
 
 	if (!me.nodename) {
 	    throw "no node name specified";
@@ -53,81 +152,9 @@ Ext.define('PVE.window.HDMove', {
 	}
 
 	if (!me.type) {
-	    me.type = 'qemu';
+	    throw "no type specified";
 	}
 
-	var qemu = me.type === 'qemu';
-
-        var items = [
-            {
-                xtype: 'displayfield',
-                name: qemu ? 'disk' : 'volume',
-                value: me.disk,
-                fieldLabel: qemu ? gettext('Disk') : gettext('Mount Point'),
-                vtype: 'StorageId',
-                allowBlank: false,
-            },
-        ];
-
-	items.push({
-	    xtype: 'pveDiskStorageSelector',
-	    storageLabel: gettext('Target Storage'),
-	    nodename: me.nodename,
-	    storageContent: qemu ? 'images' : 'rootdir',
-	    hideSize: true,
-	    hideFormat: me.disk === 'tpmstate0',
-	});
-
-	items.push({
-	    xtype: 'proxmoxcheckbox',
-	    fieldLabel: gettext('Delete source'),
-	    name: 'deleteDisk',
-	    uncheckedValue: 0,
-	    checked: false,
-	});
-
-	me.formPanel = Ext.create('Ext.form.Panel', {
-	    bodyPadding: 10,
-	    border: false,
-	    fieldDefaults: {
-		labelWidth: 100,
-		anchor: '100%',
-	    },
-	    items: items,
-	});
-
-	var form = me.formPanel.getForm();
-
-	var submitBtn;
-
-	me.title = qemu ? gettext("Move disk") : gettext('Move Volume');
-	submitBtn = Ext.create('Ext.Button', {
-	    text: me.title,
-	    handler: function() {
-		if (form.isValid()) {
-		    var values = form.getValues();
-		    me.move_disk(me.disk, values.hdstorage, values.diskformat,
-				 values.deleteDisk);
-		}
-	    },
-	});
-
-	Ext.apply(me, {
-	    modal: true,
-	    width: 350,
-	    border: false,
-	    layout: 'fit',
-	    buttons: [submitBtn],
-	    items: [me.formPanel],
-	});
-
-
 	me.callParent();
-
-	me.mon(me.formPanel, 'validitychange', function(fp, isValid) {
-	    submitBtn.setDisabled(!isValid);
-	});
-
-	me.formPanel.isValid();
     },
 });
diff --git a/www/manager6/qemu/HardwareView.js b/www/manager6/qemu/HardwareView.js
index 44d70665..e7ee1dbe 100644
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -415,6 +415,7 @@ Ext.define('PVE.qemu.HardwareView', {
 		disk: rec.data.key,
 		nodename: nodename,
 		vmid: vmid,
+		type: 'qemu',
 	    });
 
 	    win.show();
-- 
2.30.2

[pve-devel] applied: [PATCH manager 1/4] ui: qm: disk selection: add optional selection of unused

[Thomas Lamprecht]

On 12.11.21 10:53, Aaron Lauterer wrote:
> With this optional setting, it is possible to allow the user to also
> select 'unused' as a disk bus type.
> 
> Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
> ---
>  www/manager6/Utils.js                   | 1 +
>  www/manager6/form/BusTypeSelector.js    | 5 +++++
>  www/manager6/form/ControllerSelector.js | 2 ++
>  3 files changed, 8 insertions(+)
> 
>

applied, thanks!