[pve-devel] [PATCH manager] ui: lxc: resources: add Detach text for mountpoints

[pve-devel] [PATCH manager] ui: lxc: resources: add Detach text for mountpoints

[Aaron Lauterer]

Instead of showing 'Remove' for a mountpoint, change the text to
'Detach' and only show 'Remove' for unused volumes.

This aligns the behaviour with VMs and will make it clear, that a
mountpoint first needs to be detached before it can be fully removed.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
I took the code from the qemu/HardwareView.js and only made minor
changes to the check if it is a used disk/volume.
Since it is only a minor change, I did not go all the way to modernize
it and also stayed with `var ...` instead of `let ...` when defining the
`isUsedDisk` variable for consistency.

 www/manager6/lxc/Resources.js | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/www/manager6/lxc/Resources.js b/www/manager6/lxc/Resources.js
index 58344385..831ae962 100644
--- a/www/manager6/lxc/Resources.js
+++ b/www/manager6/lxc/Resources.js
@@ -191,12 +191,21 @@ Ext.define('PVE.lxc.RessourceView', {
 
 	var remove_btn = new Proxmox.button.Button({
 	    text: gettext('Remove'),
+	    defaultText: gettext('Remove'),
+	    altText: gettext('Detach'),
 	    selModel: me.selModel,
 	    disabled: true,
 	    dangerous: true,
 	    confirmMsg: function(rec) {
-		var msg = Ext.String.format(gettext('Are you sure you want to remove entry {0}'),
-					    "'" + me.renderKey(rec.data.key, {}, rec) + "'");
+		let warn = Ext.String.format(gettext('Are you sure you want to remove entry {0}'));
+		if (this.text === this.altText) {
+		    warn = gettext('Are you sure you want to detach entry {0}');
+		}
+
+		let key = rec.data.key;
+
+		let rendered = me.renderKey(key, {}, rec);
+		let msg = Ext.String.format(warn, "'" + rendered + "'");
 		if (rec.data.key.match(/^unused\d+$/)) {
 		    msg += " " + gettext('This will permanently erase all data.');
 		}
@@ -204,6 +213,21 @@ Ext.define('PVE.lxc.RessourceView', {
 		return msg;
 	    },
 	    handler: run_remove,
+	    listeners: {
+		render: function(btn) {
+		    // hack: calculate the max button width on first display to prevent the whole
+		    // toolbar to move when we switch between the "Remove" and "Detach" labels
+		    let def = btn.getSize().width;
+
+		    btn.setText(btn.altText);
+		    let alt = btn.getSize().width;
+
+		    btn.setText(btn.defaultText);
+
+		    let optimal = alt > def ? alt : def;
+		    btn.setSize({ width: optimal });
+		},
+	    },
 	});
 
 	var move_btn = new Proxmox.button.Button({
@@ -233,6 +257,7 @@ Ext.define('PVE.lxc.RessourceView', {
 	    var pending = rec.data.delete || me.hasPendingChanges(key);
 	    var isDisk = rowdef.tdCls === 'pve-itype-icon-storage';
 	    var isUnusedDisk = key.match(/^unused\d+/);
+	    var isUsedDisk = isDisk && !isUnusedDisk;
 
 	    var noedit = rec.data.delete || !rowdef.editor;
 	    if (!noedit && Proxmox.UserName !== 'root@pam' && key.match(/^mp\d+$/)) {
@@ -247,6 +272,8 @@ Ext.define('PVE.lxc.RessourceView', {
 	    resize_btn.setDisabled(!isDisk || !diskCap || isUnusedDisk);
 	    move_btn.setDisabled(!isDisk || !diskCap);
 	    revert_btn.setDisabled(!pending);
+
+	    remove_btn.setText(isUsedDisk ? remove_btn.altText : remove_btn.defaultText);
 	};
 
 	var sorterFn = function(rec1, rec2) {
-- 
2.30.2

[pve-devel] applied: [PATCH manager] ui: lxc: resources: add Detach text for mountpoints

[Thomas Lamprecht]

On 08.11.21 10:56, Aaron Lauterer wrote:
> Instead of showing 'Remove' for a mountpoint, change the text to
> 'Detach' and only show 'Remove' for unused volumes.
> 
> This aligns the behaviour with VMs and will make it clear, that a
> mountpoint first needs to be detached before it can be fully removed.
> 
> Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
> ---
> I took the code from the qemu/HardwareView.js and only made minor
> changes to the check if it is a used disk/volume.
> Since it is only a minor change, I did not go all the way to modernize
> it and also stayed with `var ...` instead of `let ...` when defining the
> `isUsedDisk` variable for consistency.
> 
>  www/manager6/lxc/Resources.js | 31 +++++++++++++++++++++++++++++--
>  1 file changed, 29 insertions(+), 2 deletions(-)
> 
>

applied, thanks! albeit...

> @@ -191,12 +191,21 @@ Ext.define('PVE.lxc.RessourceView', {
>  
>  	var remove_btn = new Proxmox.button.Button({
>  	    text: gettext('Remove'),
> +	    defaultText: gettext('Remove'),
> +	    altText: gettext('Detach'),
>  	    selModel: me.selModel,
>  	    disabled: true,
>  	    dangerous: true,
>  	    confirmMsg: function(rec) {
> -		var msg = Ext.String.format(gettext('Are you sure you want to remove entry {0}'),
> -					    "'" + me.renderKey(rec.data.key, {}, rec) + "'");
> +		let warn = Ext.String.format(gettext('Are you sure you want to remove entry {0}'));
> +		if (this.text === this.altText) {
> +		    warn = gettext('Are you sure you want to detach entry {0}');
> +		}
> +
> +		let key = rec.data.key;

above was only used partially, i.e., in renderKey but not for the match which is actually
new vs. just copypasta'd code from the QEMU variant.

FYI: I dropped it completely and modernized the QEMU variant too in a followup.

> +
> +		let rendered = me.renderKey(key, {}, rec);
> +		let msg = Ext.String.format(warn, "'" + rendered + "'");
>  		if (rec.data.key.match(/^unused\d+$/)) {
>  		    msg += " " + gettext('This will permanently erase all data.');
>  		}