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 2462669E31 for ; Fri, 25 Mar 2022 15:00:30 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 1C3762105 for ; Fri, 25 Mar 2022 15:00:30 +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 6D0A320FC for ; Fri, 25 Mar 2022 15:00:28 +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 4194641AA1 for ; Fri, 25 Mar 2022 15:00:28 +0100 (CET) From: Aaron Lauterer To: pve-devel@lists.proxmox.com Date: Fri, 25 Mar 2022 15:00:15 +0100 Message-Id: <20220325140017.336307-4-a.lauterer@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20220325140017.336307-1-a.lauterer@proxmox.com> References: <20220325140017.336307-1-a.lauterer@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.030 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 T_SCC_BODY_TEXT_LINE -0.01 - Subject: [pve-devel] [PATCH v5 manager 3/5] ui: lxc/qemu: add disk reassign and action submenu 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, 25 Mar 2022 14:00:30 -0000 For the new HDReassign component, we follow the approach of HDMove to have one componend for qemu and lxc. To avoid button clutter, a new "Disk/Volume action" button is introduced. It holds the Move, Reassign and Resize buttons in a submenu. Signed-off-by: Aaron Lauterer --- changes since v4: * use button labels and icons as suggested by @Thomas only for Move Storage I went with the same Icon we use for the storages. That should make the connection clearer since we are also using the LXC/VM icons for the reassign buttons. * smaller style nits like reordering button/menuitem definitions to be grouped closer together * reworked logic when to disable buttons/menuitems v3: * use PVE.Util.nextFreeMP * create 'url' in one place, no need for submitURL * filter out templates in target guest selection * fix padding * code cleanup changes v2: * switch from generic to Proxmox Edit window * add new submenu for disk/volume specific actions * code style improvements * simplify some labels, removing "disk" and "volume" as the context already gives this away v1: incorporated feedback I got off list www/manager6/Makefile | 1 + www/manager6/lxc/Resources.js | 78 +++++++-- www/manager6/qemu/HDReassign.js | 272 ++++++++++++++++++++++++++++++ www/manager6/qemu/HardwareView.js | 72 ++++++-- 4 files changed, 391 insertions(+), 32 deletions(-) create mode 100644 www/manager6/qemu/HDReassign.js diff --git a/www/manager6/Makefile b/www/manager6/Makefile index e6e01bd1..a7101553 100644 --- a/www/manager6/Makefile +++ b/www/manager6/Makefile @@ -213,6 +213,7 @@ JSSRC= \ qemu/HDEfi.js \ qemu/HDTPM.js \ qemu/HDMove.js \ + qemu/HDReassign.js \ qemu/HDResize.js \ qemu/HardwareView.js \ qemu/IPConfigEdit.js \ diff --git a/www/manager6/lxc/Resources.js b/www/manager6/lxc/Resources.js index 15ee3c67..28ac6960 100644 --- a/www/manager6/lxc/Resources.js +++ b/www/manager6/lxc/Resources.js @@ -151,7 +151,8 @@ Ext.define('PVE.lxc.RessourceView', { }); }; - var run_move = function(b, e, rec) { + let run_move = function() { + let rec = me.selModel.getSelection()[0]; if (!rec) { return; } @@ -168,6 +169,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; + } + + Ext.create('PVE.window.HDReassign', { + disk: rec.data.key, + nodename: nodename, + autoShow: true, + vmid: vmid, + type: 'lxc', + listeners: { + destroy: () => me.reload(), + }, + }); + }; + var edit_btn = new Proxmox.button.Button({ text: gettext('Edit'), selModel: me.selModel, @@ -182,13 +201,6 @@ Ext.define('PVE.lxc.RessourceView', { handler: function() { me.run_editor(); }, }); - var resize_btn = new Proxmox.button.Button({ - text: gettext('Resize disk'), - selModel: me.selModel, - disabled: true, - handler: run_resize, - }); - var remove_btn = new Proxmox.button.Button({ text: gettext('Remove'), defaultText: gettext('Remove'), @@ -227,14 +239,41 @@ Ext.define('PVE.lxc.RessourceView', { }, }); - var move_btn = new Proxmox.button.Button({ - text: gettext('Move Volume'), + let move_menuitem = new Ext.menu.Item({ + text: gettext('Move Storage'), + tooltip: gettext('Move volume to another storage'), + iconCls: 'fa fa-database', selModel: me.selModel, - disabled: true, - dangerous: true, handler: run_move, }); + let reassign_menuitem = new Ext.menu.Item({ + text: gettext('Reassign Owner'), + tooltip: gettext('Reassign volume to another CT'), + iconCls: 'fa fa-cube', + handler: run_reassign, + reference: 'reassing_item', + }); + + let resize_menuitem = new Ext.menu.Item({ + text: gettext('Resize'), + iconCls: 'fa fa-plus', + selModel: me.selModel, + handler: run_resize, + }); + + let volumeaction_btn = new Proxmox.button.Button({ + text: gettext('Volume Action'), + disabled: true, + menu: { + items: [ + move_menuitem, + reassign_menuitem, + resize_menuitem, + ], + }, + }); + var revert_btn = new PVE.button.PendingRevert(); var set_button_status = function() { @@ -243,7 +282,7 @@ Ext.define('PVE.lxc.RessourceView', { if (!rec) { edit_btn.disable(); remove_btn.disable(); - resize_btn.disable(); + volumeaction_btn.disable(); revert_btn.disable(); return; } @@ -253,6 +292,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,9 +305,12 @@ Ext.define('PVE.lxc.RessourceView', { } edit_btn.setDisabled(noedit); - remove_btn.setDisabled(!isDisk || rec.data.key === 'rootfs' || !diskCap || pending); - resize_btn.setDisabled(!isDisk || !diskCap || isUnusedDisk); - move_btn.setDisabled(!isDisk || !diskCap); + volumeaction_btn.setDisabled(!isDisk || !diskCap); + move_menuitem.setDisabled(isUnusedDisk); + reassign_menuitem.setDisabled(isRootFS); + resize_menuitem.setDisabled(isUnusedDisk); + + remove_btn.setDisabled(!isDisk || isRootFS || !diskCap || pending); revert_btn.setDisabled(!pending); remove_btn.setText(isUsedDisk ? remove_btn.altText : remove_btn.defaultText); @@ -327,8 +370,7 @@ Ext.define('PVE.lxc.RessourceView', { }, edit_btn, remove_btn, - resize_btn, - move_btn, + volumeaction_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..b6c67964 --- /dev/null +++ b/www/manager6/qemu/HDReassign.js @@ -0,0 +1,272 @@ +Ext.define('PVE.window.HDReassign', { + extend: 'Proxmox.window.Edit', + mixins: ['Proxmox.Mixin.CBind'], + + resizable: false, + modal: true, + width: 350, + border: false, + layout: 'fit', + showReset: false, + showProgress: true, + method: 'POST', + + viewModel: { + data: { + mpType: '', + }, + formulas: { + mpMaxCount: get => get('mpType') === 'mp' + ? PVE.Utils.mp_counts.mps - 1 + : PVE.Utils.mp_counts.unused - 1, + }, + }, + + cbindData: function() { + let me = this; + return { + vmid: me.vmid, + disk: me.disk, + isQemu: me.type === 'qemu', + nodename: me.nodename, + url: () => { + let endpoint = me.type === 'qemu' ? 'move_disk' : 'move_volume'; + return `/nodes/${me.nodename}/${me.type}/${me.vmid}/${endpoint}`; + }, + }; + }, + + cbind: { + title: get => get('isQemu') ? gettext('Reassign disk') : gettext('Reassign volume'), + submitText: get => get('title'), + qemu: '{isQemu}', + url: '{url}', + }, + + getValues: function() { + let me = this; + let values = me.formPanel.getForm().getValues(); + + let params = { + vmid: me.vmid, + 'target-vmid': values.targetVmid, + }; + + params[me.qemu ? 'disk' : 'volume'] = me.disk; + + if (me.qemu) { + params['target-disk'] = `${values.controller}${values.deviceid}`; + } else { + params['target-volume'] = `${values.mpType}${values.mpId}`; + } + return params; + }, + + 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); + }, + + 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.qemu ? 'qemu' : 'lxc'; + + let url = `/nodes/${view.nodename}/${type}/${vmid}/config`; + Proxmox.Utils.API2Request({ + url: url, + method: 'GET', + failure: response => Ext.Msg.alert(gettext('Error'), response.htmlStatus), + success: function(response, options) { + if (view.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; + + mpIdSelector.setValue( + PVE.Utils.nextFreeMP( + view.getViewModel().get('mpType'), + view.VMConfig, + ).id, + ); + + mpType.setDisabled(false); + mpIdSelector.setDisabled(false); + mpIdSelector.validate(); + } + }, + }); + }, + }, + + items: [ + { + xtype: 'form', + reference: 'moveFormPanel', + border: false, + fieldDefaults: { + labelWidth: 100, + anchor: '100%', + }, + items: [ + { + xtype: 'displayfield', + name: 'sourceDisk', + fieldLabel: gettext('Source'), + cbind: { + name: get => get('isQemu') ? 'disk' : 'volume', + value: '{disk}', + }, + allowBlank: false, + }, + { + xtype: 'vmComboSelector', + reference: 'targetVMID', + name: 'targetVmid', + allowBlank: false, + fieldLabel: gettext('Target'), + bind: { + value: '{targetVMID}', + }, + store: { + model: 'PVEResources', + autoLoad: true, + sorters: 'vmid', + cbind: {}, // for nested cbinds + filters: [ + { + property: 'type', + cbind: { + value: get => get('isQemu') ? 'qemu' : 'lxc', + }, + }, + { + property: 'node', + cbind: { + value: '{nodename}', + }, + }, + { + property: 'vmid', + operator: '!=', + cbind: { + value: '{vmid}', + }, + }, + { + property: 'template', + value: 0, + }, + ], + }, + 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: get => !get('disk').match(/^unused\d+/), + value: get => get('disk').match(/^unused\d+/) ? '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 view = this.up('window'); + let type = view.getViewModel().get('mpType'); + if (Ext.isDefined(view.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..a06b2657 100644 --- a/www/manager6/qemu/HardwareView.js +++ b/www/manager6/qemu/HardwareView.js @@ -417,6 +417,24 @@ Ext.define('PVE.qemu.HardwareView', { win.on('destroy', me.reload, me); }; + let run_reassign = function() { + let rec = sm.getSelection()[0]; + if (!rec) { + return; + } + + Ext.create('PVE.window.HDReassign', { + disk: rec.data.key, + nodename: nodename, + autoShow: true, + vmid: vmid, + type: 'qemu', + listeners: { + destroy: () => me.reload(), + }, + }); + }; + var edit_btn = new Proxmox.button.Button({ text: gettext('Edit'), selModel: sm, @@ -424,20 +442,42 @@ Ext.define('PVE.qemu.HardwareView', { handler: run_editor, }); - var resize_btn = new Proxmox.button.Button({ - text: gettext('Resize disk'), + let move_menuitem = new Ext.menu.Item({ + text: gettext('Move Storage'), + tooltip: gettext('Move disk to another storage'), + iconCls: 'fa fa-database', + selModel: sm, + handler: run_move, + }); + + let reassign_menuitem = new Ext.menu.Item({ + text: gettext('Reassign Owner'), + tooltip: gettext('Reassign disk to another VM'), + iconCls: 'fa fa-desktop', + handler: run_reassign, selModel: sm, - disabled: true, - handler: run_resize, }); - var move_btn = new Proxmox.button.Button({ - text: gettext('Move disk'), + let resize_menuitem = new Ext.menu.Item({ + text: gettext('Resize'), + iconCls: 'fa fa-plus', selModel: sm, + handler: run_resize, + }); + + let diskaction_btn = new Proxmox.button.Button({ + text: gettext('Disk Action'), disabled: true, - handler: run_move, + menu: { + items: [ + move_menuitem, + reassign_menuitem, + resize_menuitem, + ], + }, }); + var remove_btn = new Proxmox.button.Button({ text: gettext('Remove'), defaultText: gettext('Remove'), @@ -573,8 +613,7 @@ Ext.define('PVE.qemu.HardwareView', { if (!rec) { remove_btn.disable(); edit_btn.disable(); - resize_btn.disable(); - move_btn.disable(); + diskaction_btn.disable(); revert_btn.disable(); return; } @@ -611,9 +650,15 @@ Ext.define('PVE.qemu.HardwareView', { (isDisk && !diskCap), ); - resize_btn.setDisabled(pending || !isUsedDisk || !diskCap); - - move_btn.setDisabled(pending || !(isUsedDisk || isEfi || tpmMoveable) || !diskCap); + diskaction_btn.setDisabled( + pending || + !diskCap || + isCloudInit || + !(isDisk || isEfi || tpmMoveable), + ); + move_menuitem.setDisabled(isUnusedDisk); + reassign_menuitem.setDisabled(pending || (isEfi || tpmMoveable)); + resize_menuitem.setDisabled(pending || !isUsedDisk); revert_btn.setDisabled(!pending); }; @@ -775,8 +820,7 @@ Ext.define('PVE.qemu.HardwareView', { }, remove_btn, edit_btn, - resize_btn, - move_btn, + diskaction_btn, revert_btn, ], rows: rows, -- 2.30.2