From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: 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 183E47F36D for ; Fri, 12 Nov 2021 10:53:44 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 67AD51734C for ; Fri, 12 Nov 2021 10:53:43 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (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 6C285171E2 for ; Fri, 12 Nov 2021 10:53:38 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 46115402E5 for ; Fri, 12 Nov 2021 10:53:38 +0100 (CET) From: Aaron Lauterer To: pve-devel@lists.proxmox.com Date: Fri, 12 Nov 2021 10:53:33 +0100 Message-Id: <20211112095335.1839765-3-a.lauterer@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20211112095335.1839765-1-a.lauterer@proxmox.com> References: <20211112095335.1839765-1-a.lauterer@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.086 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH manager 2/4] ui: lxc/qemu: add disk reassign X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Fri, 12 Nov 2021 09:53:44 -0000 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 --- 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