[pve-devel] [PATCH manager 0/3] ui: small tree fixes

[pve-devel] [PATCH manager 0/3] ui: small tree fixes

[Dominik Csapak]

the first patch fixes the jumping node text.
the second patch makes tooltips and the generated markup text more
consistent (and should also avoid calling 'setText' in various
circumstances).
the third patch is just a comment cleanup

Dominik Csapak (3):
  ui: resource tree: fix nodes text moving in tree on update
  ui: resource tree: consistently apply the tooltip and 'setText' method
  ui: resource tree: remove wrong comment

 www/manager6/tree/ResourceTree.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

-- 
2.30.2

[pve-devel] [PATCH manager 1/3] ui: resource tree: fix nodes text moving in tree on update

[Dominik Csapak]

when a node element was updated, it was put through the 'setText' method
which accidentally added a space before it's name.

Fix this by putting the space into the status variable

This could be observed when one node had guests on it but others had not.
The nodes would then be misaligned.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/tree/ResourceTree.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index acfa545a..7b2934ae 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -122,7 +122,7 @@ Ext.define('PVE.tree.ResourceTree', {
 		status = '<div class="usage-wrapper">';
 		status += `<div class="usage-negative" style="height: ${remainingHeight}%"></div>`;
 		status += `<div class="usage" style="height: ${barHeight}%"></div>`;
-		status += '</div>';
+		status += '</div> ';
 	    }
 	}
 	if (Ext.isNumeric(info.vmid) && info.vmid > 0) {
@@ -130,7 +130,7 @@ Ext.define('PVE.tree.ResourceTree', {
 		info.text = `${info.name} (${String(info.vmid)})`;
 	    }
 	}
-	info.text = `<span>${status} ${info.text}</span>`;
+	info.text = `<span>${status}${info.text}</span>`;
 	info.text += PVE.Utils.renderTags(info.tags, PVE.UIOptions.tagOverrides);
     },
 
-- 
2.30.2

[pve-devel] [PATCH manager 2/3] ui: resource tree: consistently apply the tooltip and 'setText' method

[Dominik Csapak]

'setText' is meant to augment the content of the tree node with
additional information and add markup so that the tooltips work
properly.

Previously this was overwritten for grouping types (e.g. nodes when in
the server view), but we want to put the elements through every time the
text gets set so the html markup is consistent. (E.g. without this, the
node text in the server view gets wrapped in a span, but only if a
relevant property of the node changes, for instance 'running').

To not mark all tree elements changed all the time, replace 'text' with
'name' in the 'changedFields' array, so they get only changed when the
name changes. The text changing from the backend can only happen for
guests anyway and the name field is the correct one for this.

Also change it so that the nodes get their tooltip also when they are
the grouping type in the server view.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/tree/ResourceTree.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 7b2934ae..8856bedf 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -135,7 +135,7 @@ Ext.define('PVE.tree.ResourceTree', {
     },
 
     getToolTip: function(info) {
-	if (info.type === 'pool' || info.groupbyid !== undefined) {
+	if (info.type === 'pool' || (info.groupbyid !== undefined && info.type !== 'node')) {
 	    return undefined;
 	}
 
@@ -167,10 +167,12 @@ Ext.define('PVE.tree.ResourceTree', {
 
 	if (info.groupbyid) {
 	    info.text = info.groupbyid;
+	    me.setText(info);
 	    if (info.type === 'type') {
 		let defaults = PVE.tree.ResourceTree.typeDefaults[info.groupbyid];
 		if (defaults && defaults.text) {
 		    info.text = defaults.text;
+		    me.setText(info);
 		}
 	    }
 	}
@@ -265,7 +267,7 @@ Ext.define('PVE.tree.ResourceTree', {
 	let stateid = 'rid';
 
 	const changedFields = [
-	    'text', 'running', 'template', 'status', 'qmpstatus', 'hastate', 'lock', 'tags',
+	    'name', 'running', 'template', 'status', 'qmpstatus', 'hastate', 'lock', 'tags',
 	];
 
 	let updateTree = function() {
-- 
2.30.2

[pve-devel] [PATCH manager 3/3] ui: resource tree: remove wrong comment

[Dominik Csapak]

that function is not only there for the storage indicators, but
generally for adding additional information, such as tags, and for
wrapping in a span for making tooltip selection easier.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/tree/ResourceTree.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 8856bedf..e658dab2 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -109,7 +109,6 @@ Ext.define('PVE.tree.ResourceTree', {
 	}
     },
 
-    // add additional elements to text. Currently only the usage indicator for storages
     setText: function(info) {
 	let me = this;
 
-- 
2.30.2

[pve-devel] applied: [PATCH manager 1/3] ui: resource tree: fix nodes text moving in tree on update

[Thomas Lamprecht]

Am 23/11/2023 um 09:25 schrieb Dominik Csapak:
> when a node element was updated, it was put through the 'setText' method
> which accidentally added a space before it's name.
> 
> Fix this by putting the space into the status variable
> 
> This could be observed when one node had guests on it but others had not.
> The nodes would then be misaligned.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  www/manager6/tree/ResourceTree.js | 4 ++--
>  1 file changed, 2 insertions(+), 2 deletions(-)
> 
>

applied, thanks!

[pve-devel] applied: [PATCH manager 3/3] ui: resource tree: remove wrong comment

[Thomas Lamprecht]

Am 23/11/2023 um 09:25 schrieb Dominik Csapak:
> that function is not only there for the storage indicators, but
> generally for adding additional information, such as tags, and for
> wrapping in a span for making tooltip selection easier.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  www/manager6/tree/ResourceTree.js | 1 -
>  1 file changed, 1 deletion(-)
> 
>

applied, thanks!