public inbox for pve-devel@lists.proxmox.com
 help / color / mirror / Atom feed
* [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview
@ 2024-11-07 11:25 Dominik Csapak
  2024-11-07 11:25 ` [pve-devel] [PATCH docs v3 1/1] gui: add anchor for tags chapter Dominik Csapak
                   ` (4 more replies)
  0 siblings, 5 replies; 11+ messages in thread
From: Dominik Csapak @ 2024-11-07 11:25 UTC (permalink / raw)
  To: pve-devel

this adds a 'tagview' to the web ui, organizing guests by their tags
(for details see the pve-manager patch)

I'm not super happy all in all with how much special casing must be
done, but i could not (yet?) figure out a better way.

changes from v2:
* rebased on master (tooltip generation changed so adapted to that)
* implemented fionas feedback, so selection should stay even when tags
  are removed or the selection is changed from the tag view

changes from v1:
* rebase on master
* adapt to recent tooltip changes
* add a comment to TagConfig class to better explain what it does

pve-docs:

Dominik Csapak (1):
  gui: add anchor for tags chapter

 pve-gui.adoc | 1 +
 1 file changed, 1 insertion(+)

proxmox-widget-toolkit:

Dominik Csapak (1):
  css: add some conditions to the tag classes for the tag view

 src/css/ext6-pmx.css | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

pve-manager:

Dominik Csapak (1):
  ui: implement 'Tag View' for the resource tree

 www/manager6/Makefile             |  1 +
 www/manager6/Workspace.js         |  4 +-
 www/manager6/form/ViewSelector.js | 28 +++++++++++
 www/manager6/grid/ResourceGrid.js |  2 +-
 www/manager6/panel/TagConfig.js   |  6 +++
 www/manager6/tree/ResourceTree.js | 81 ++++++++++++++++++++++++++++---
 6 files changed, 113 insertions(+), 9 deletions(-)
 create mode 100644 www/manager6/panel/TagConfig.js

-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel


^ permalink raw reply	[flat|nested] 11+ messages in thread

* [pve-devel] [PATCH docs v3 1/1] gui: add anchor for tags chapter
  2024-11-07 11:25 [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview Dominik Csapak
@ 2024-11-07 11:25 ` Dominik Csapak
  2024-11-07 11:25 ` [pve-devel] [PATCH widget-toolkit v3 1/1] css: add some conditions to the tag classes for the tag view Dominik Csapak
                   ` (3 subsequent siblings)
  4 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2024-11-07 11:25 UTC (permalink / raw)
  To: pve-devel

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 pve-gui.adoc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pve-gui.adoc b/pve-gui.adoc
index bda370f..9e4650d 100644
--- a/pve-gui.adoc
+++ b/pve-gui.adoc
@@ -383,6 +383,7 @@ and the corresponding interfaces for each menu item on the right.
 * *Permissions:* manage the permissions for the pool.
 
 
+[[gui_tags]]
 Tags
 ----
 
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel


^ permalink raw reply	[flat|nested] 11+ messages in thread

* [pve-devel] [PATCH widget-toolkit v3 1/1] css: add some conditions to the tag classes for the tag view
  2024-11-07 11:25 [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview Dominik Csapak
  2024-11-07 11:25 ` [pve-devel] [PATCH docs v3 1/1] gui: add anchor for tags chapter Dominik Csapak
@ 2024-11-07 11:25 ` Dominik Csapak
  2024-11-07 11:25 ` [pve-devel] [PATCH manager v3 1/1] ui: implement 'Tag View' for the resource tree Dominik Csapak
                   ` (2 subsequent siblings)
  4 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2024-11-07 11:25 UTC (permalink / raw)
  To: pve-devel

in the tag view, we have a custom 'full' style in a place where we
can have another tagstyle class above. to compensate for that, we have
to add another condition to those styles, namely that there is not the
'proxmox-tags-full' in between.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/css/ext6-pmx.css | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 9ff596b..b5057cb 100644
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -15,7 +15,9 @@
 }
 
 .proxmox-tags-full .x-grid-cell-inner-treecolumn .proxmox-tag-light,
-.proxmox-tags-full .x-grid-cell-inner-treecolumn .proxmox-tag-dark {
+.proxmox-tags-full .x-grid-cell-inner-treecolumn .proxmox-tag-dark,
+.x-grid-cell-inner-treecolumn .proxmox-tags-full .proxmox-tag-light,
+.x-grid-cell-inner-treecolumn .proxmox-tags-full .proxmox-tag-dark {
     display: inherit;
 }
 
@@ -25,8 +27,10 @@
 }
 
 
-.proxmox-tags-circle .proxmox-tag-light,
-.proxmox-tags-circle .proxmox-tag-dark {
+.proxmox-tags-circle :not(span.proxmox-tags-full) > .proxmox-tag-light,
+.proxmox-tags-circle :not(span.proxmox-tags-full) > .proxmox-tag-dark,
+.proxmox-tags-circle > .proxmox-tag-light,
+.proxmox-tags-circle > .proxmox-tag-dark {
     margin: 0px 1px;
     position: relative;
     top: 2px;
@@ -38,13 +42,17 @@
     overflow: hidden;
 }
 
-.proxmox-tags-none .proxmox-tag-light,
-.proxmox-tags-none .proxmox-tag-dark {
+.proxmox-tags-none :not(span.proxmox-tags-full) > .proxmox-tag-light,
+.proxmox-tags-none :not(span.proxmox-tags-full) > .proxmox-tag-dark,
+.proxmox-tags-none > .proxmox-tag-light,
+.proxmox-tags-none > .proxmox-tag-dark {
     display: none;
 }
 
-.proxmox-tags-dense .proxmox-tag-light,
-.proxmox-tags-dense .proxmox-tag-dark {
+.proxmox-tags-dense :not(span.proxmox-tags-full) > .proxmox-tag-light,
+.proxmox-tags-dense :not(span.proxmox-tags-full) > .proxmox-tag-dark,
+.proxmox-tags-dense > .proxmox-tag-light,
+.proxmox-tags-dense > .proxmox-tag-dark {
     width: 6px;
     margin-right: 1px;
     display: inline-block;
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel


^ permalink raw reply	[flat|nested] 11+ messages in thread

* [pve-devel] [PATCH manager v3 1/1] ui: implement 'Tag View' for the resource tree
  2024-11-07 11:25 [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview Dominik Csapak
  2024-11-07 11:25 ` [pve-devel] [PATCH docs v3 1/1] gui: add anchor for tags chapter Dominik Csapak
  2024-11-07 11:25 ` [pve-devel] [PATCH widget-toolkit v3 1/1] css: add some conditions to the tag classes for the tag view Dominik Csapak
@ 2024-11-07 11:25 ` Dominik Csapak
  2024-11-07 13:52 ` [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview Aaron Lauterer
  2024-11-10 11:22 ` [pve-devel] applied-series: " Thomas Lamprecht
  4 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2024-11-07 11:25 UTC (permalink / raw)
  To: pve-devel

and keep the functionality in ResourceTree as generic as possible.

We achieve this by having an 'itemMap' function that can split one item
from the store into multiple to add to the tree.

for the updates, we have to have an 'idMapFn' (to get the original id
back)

we also have to modify how the move checks work a bit, since we only
want to move the items when the tags changed only in the tagview case

in the ResourceGrid we have to get the id a bit differently since we now
have 'virtual' ids for the entries tag contain the tag (which can't be
found in the resource store)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/Makefile             |  1 +
 www/manager6/Workspace.js         |  4 +-
 www/manager6/form/ViewSelector.js | 28 +++++++++++
 www/manager6/grid/ResourceGrid.js |  2 +-
 www/manager6/panel/TagConfig.js   |  6 +++
 www/manager6/tree/ResourceTree.js | 81 ++++++++++++++++++++++++++++---
 6 files changed, 113 insertions(+), 9 deletions(-)
 create mode 100644 www/manager6/panel/TagConfig.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 2c3a822b..bcf44c39 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -108,6 +108,7 @@ JSSRC= 							\
 	panel/GuestSummary.js				\
 	panel/TemplateStatusView.js			\
 	panel/MultiDiskEdit.js				\
+	panel/TagConfig.js				\
 	tree/ResourceTree.js				\
 	tree/SnapshotTree.js				\
 	tree/ResourceMapTree.js				\
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 52c66108..ca29b3f8 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -247,6 +247,7 @@ Ext.define('PVE.StdWorkspace', {
 			    storage: 'PVE.storage.Browser',
 			    sdn: 'PVE.sdn.Browser',
 			    pool: 'pvePoolConfig',
+			    tag: 'pveTagConfig',
 			};
 			PVE.curSelectedNode = treeNode;
 			me.setContent({
@@ -531,7 +532,8 @@ Ext.define('PVE.StdWorkspace', {
 	let tagSelectors = [];
 	['circle', 'dense'].forEach((style) => {
 	    ['dark', 'light'].forEach((variant) => {
-		tagSelectors.push(`.proxmox-tags-${style} .proxmox-tag-${variant}`);
+		let selector = `.proxmox-tags-${style} :not(.proxmox-tags-full) > .proxmox-tag-${variant}`;
+		tagSelectors.push(selector);
 	    });
 	});
 
diff --git a/www/manager6/form/ViewSelector.js b/www/manager6/form/ViewSelector.js
index e25547c4..ee16c227 100644
--- a/www/manager6/form/ViewSelector.js
+++ b/www/manager6/form/ViewSelector.js
@@ -32,6 +32,34 @@ Ext.define('PVE.form.ViewSelector', {
 		// Pool View only lists VMs and Containers
 		filterfn: ({ data }) => data.type === 'qemu' || data.type === 'lxc' || data.type === 'pool',
 	    },
+	    tags: {
+		text: gettext('Tag View'),
+		groups: ['tag'],
+		filterfn: ({ data }) => data.type === 'qemu' || data.type === 'lxc',
+		groupRenderer: function(info) {
+		    let tag = PVE.Utils.renderTags(info.tag, PVE.UIOptions.tagOverrides);
+		    return `<span class="proxmox-tags-full">${tag}</span>`;
+		},
+		itemMap: function(item) {
+		    let tags = (item.data.tags ?? '').split(/[;, ]/);
+		    if (tags.length === 1 && tags[0] === '') {
+			return item;
+		    }
+		    let items = [];
+		    for (const tag of tags) {
+			let id = `${item.data.id}-${tag}`;
+			let info = Ext.apply({ leaf: true }, item.data);
+			info.tag = tag;
+			info.realId = info.id;
+			info.id = id;
+			items.push(Ext.create('Ext.data.TreeModel', info));
+		    }
+		    return items;
+		},
+		attrMoveChecks: {
+		    tag: (newitem, olditem) => newitem.data.tags !== olditem.data.tags,
+		},
+	    },
 	};
 	let groupdef = Object.entries(default_views).map(([name, config]) => [name, config.text]);
 
diff --git a/www/manager6/grid/ResourceGrid.js b/www/manager6/grid/ResourceGrid.js
index 9376bcc2..b212e9e9 100644
--- a/www/manager6/grid/ResourceGrid.js
+++ b/www/manager6/grid/ResourceGrid.js
@@ -44,7 +44,7 @@ Ext.define('PVE.grid.ResourceGrid', {
 		    return;
 		}
 		for (let child of node.childNodes) {
-		    let orgNode = rstore.data.get(child.data.id);
+		    let orgNode = rstore.data.get(child.data.realId ?? child.data.id);
 		    if (orgNode) {
 			if ((!filterfn || filterfn(child)) && (!textfilter || textfilterMatch(child))) {
 			    nodeidx[child.data.id] = orgNode;
diff --git a/www/manager6/panel/TagConfig.js b/www/manager6/panel/TagConfig.js
new file mode 100644
index 00000000..203c47c2
--- /dev/null
+++ b/www/manager6/panel/TagConfig.js
@@ -0,0 +1,6 @@
+Ext.define('PVE.panel.TagConfig', {
+    extend: 'PVE.panel.Config',
+    alias: 'widget.pveTagConfig',
+
+    onlineHelp: 'gui_tags',
+});
diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index d3c15aec..7b0c5dc8 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -37,6 +37,9 @@ Ext.define('PVE.tree.ResourceTree', {
 	    template: {
 		iconCls: 'fa fa-file-o',
 	    },
+	    tag: {
+		iconCls: 'fa fa-tag',
+	    },
 	},
     },
 
@@ -165,12 +168,15 @@ Ext.define('PVE.tree.ResourceTree', {
 	me.setText(info);
 
 	if (info.groupbyid) {
-	    info.text = info.groupbyid;
-	    if (info.type === 'type') {
+	    if (me.viewFilter.groupRenderer) {
+		info.text = me.viewFilter.groupRenderer(info);
+	    } else if (info.type === 'type') {
 		let defaults = PVE.tree.ResourceTree.typeDefaults[info.groupbyid];
 		if (defaults && defaults.text) {
 		    info.text = defaults.text;
 		}
+	    } else {
+		info.text = info.groupbyid;
 	    }
 	}
 	let child = Ext.create('PVETree', info);
@@ -267,6 +273,30 @@ Ext.define('PVE.tree.ResourceTree', {
 	    'text', 'running', 'template', 'status', 'qmpstatus', 'hastate', 'lock', 'tags',
 	];
 
+	// special case ids from the tag view, since they change the id in the state
+	let idMapFn = function(id) {
+	    if (!id) {
+		return undefined;
+	    }
+	    if (id.startsWith('qemu') || id.startsWith('lxc')) {
+		let [realId, _tag] = id.split('-');
+		return realId;
+	    }
+	    return id;
+	};
+
+	let findNode = function(rootNode, id) {
+	    if (!id) {
+		return undefined;
+	    }
+	    let node = rootNode.findChild('id', id, true);
+	    if (!node) {
+		node = rootNode.findChildBy((r) => idMapFn(r.data.id) === idMapFn(id), undefined, true);
+	    }
+	    return node;
+	};
+
+
 	let updateTree = function() {
 	    store.suspendEvents();
 
@@ -282,6 +312,8 @@ Ext.define('PVE.tree.ResourceTree', {
 
 	    let groups = me.viewFilter.groups || [];
 	    // explicitly check for node/template, as those are not always grouping attributes
+	    let attrMoveChecks = me.viewFilter.attrMoveChecks ?? {};
+
 	    // also check for name for when the tree is sorted by name
 	    let moveCheckAttrs = groups.concat(['node', 'template', 'name']);
 	    let filterfn = me.viewFilter.filterfn;
@@ -291,13 +323,20 @@ Ext.define('PVE.tree.ResourceTree', {
 	    // remove vanished or moved items and update changed items in-place
 	    for (const [key, olditem] of Object.entries(index)) {
 		// getById() use find(), which is slow (ExtJS4 DP5)
-		let item = rstore.data.get(olditem.data.id);
+		let oldid = olditem.data.id;
+		let id = idMapFn(olditem.data.id);
+		let item = rstore.data.get(id);
 
 		let changed = sorting_changed, moved = sorting_changed;
 		if (item) {
 		    // test if any grouping attributes changed, catches migrated tree-nodes in server view too
 		    for (const attr of moveCheckAttrs) {
-			if (item.data[attr] !== olditem.data[attr]) {
+			if (attrMoveChecks[attr]) {
+			    if (attrMoveChecks[attr](olditem, item)) {
+				moved = true;
+				break;
+			    }
+			} else if (item.data[attr] !== olditem.data[attr]) {
 			    moved = true;
 			    break;
 			}
@@ -317,6 +356,9 @@ Ext.define('PVE.tree.ResourceTree', {
 		    olditem.beginEdit();
 		    let info = olditem.data;
 		    Ext.apply(info, item.data);
+		    if (info.id !== oldid) {
+			info.id = oldid;
+		    }
 		    me.setIconCls(info);
 		    me.setText(info);
 		    olditem.commit();
@@ -333,10 +375,15 @@ Ext.define('PVE.tree.ResourceTree', {
 		    // store events are suspended, so remove the item manually
 		    store.remove(olditem);
 		    parentNode.removeChild(olditem, true);
+		    if (parentNode.childNodes.length < 1 && parentNode.parentNode) {
+			let grandParent = parentNode.parentNode;
+			grandParent.removeChild(parentNode, true);
+		    }
 		}
 	    }
 
-	    rstore.each(function(item) { // add new items
+	    let items = rstore.getData().items.flatMap(me.viewFilter.itemMap ?? Ext.identityFn);
+	    items.forEach(function(item) { // add new items
 		let olditem = index[item.data.id];
 		if (olditem) {
 		    return;
@@ -355,8 +402,10 @@ Ext.define('PVE.tree.ResourceTree', {
 	    store.resumeEvents();
 	    store.fireEvent('refresh', store);
 
+	    let foundChild = findNode(rootnode, lastsel?.data.id);
+
 	    // select parent node if original selected node vanished
-	    if (lastsel && !rootnode.findChild('id', lastsel.data.id, true)) {
+	    if (lastsel && !foundChild) {
 		lastsel = rootnode;
 		for (const node of parents) {
 		    if (rootnode.findChild('id', node.data.id, true)) {
@@ -476,7 +525,7 @@ Ext.define('PVE.tree.ResourceTree', {
 		if (nodeid === 'root') {
 		    node = rootnode;
 		} else {
-		    node = rootnode.findChild('id', nodeid, true);
+		    node = findNode(rootnode, nodeid);
 		}
 		if (node) {
 		    me.selectExpand(node);
@@ -498,6 +547,24 @@ Ext.define('PVE.tree.ResourceTree', {
 
 	rstore.on("load", updateTree);
 	rstore.startUpdate();
+
+	me.mon(Ext.GlobalEvents, 'loadedUiOptions', () => {
+	    me.store.getRootNode().cascadeBy({
+		before: function(node) {
+		    if (node.data.groupbyid) {
+			node.beginEdit();
+			let info = node.data;
+			me.setIconCls(info);
+			me.setText(info);
+			if (me.viewFilter.groupRenderer) {
+			    info.text = me.viewFilter.groupRenderer(info);
+			}
+			node.commit();
+		    }
+		    return true;
+		},
+	    });
+	});
     },
 
 });
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel


^ permalink raw reply	[flat|nested] 11+ messages in thread

* Re: [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview
  2024-11-07 11:25 [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview Dominik Csapak
                   ` (2 preceding siblings ...)
  2024-11-07 11:25 ` [pve-devel] [PATCH manager v3 1/1] ui: implement 'Tag View' for the resource tree Dominik Csapak
@ 2024-11-07 13:52 ` Aaron Lauterer
  2024-11-07 14:16   ` Dominik Csapak
  2024-11-10 11:22 ` [pve-devel] applied-series: " Thomas Lamprecht
  4 siblings, 1 reply; 11+ messages in thread
From: Aaron Lauterer @ 2024-11-07 13:52 UTC (permalink / raw)
  To: Proxmox VE development discussion, Dominik Csapak

gave this a quick test.

two things I noticed:

* root element in tree per tag: wouldn't it be better to override the 
display style to 'full'? Otherwise I might have a lot of colorful dots, 
but don't know what the tags are called.

* I am not 100% sure, but would it be possible to distinguish guests 
that have no tag assigned a bit better? maybe have a default "no-tags" 
tree for them?

On  2024-11-07  12:25, Dominik Csapak wrote:
> this adds a 'tagview' to the web ui, organizing guests by their tags
> (for details see the pve-manager patch)
> 
> I'm not super happy all in all with how much special casing must be
> done, but i could not (yet?) figure out a better way.
> 
> changes from v2:
> * rebased on master (tooltip generation changed so adapted to that)
> * implemented fionas feedback, so selection should stay even when tags
>    are removed or the selection is changed from the tag view
> 
> changes from v1:
> * rebase on master
> * adapt to recent tooltip changes
> * add a comment to TagConfig class to better explain what it does
> 
> pve-docs:
> 
> Dominik Csapak (1):
>    gui: add anchor for tags chapter
> 
>   pve-gui.adoc | 1 +
>   1 file changed, 1 insertion(+)
> 
> proxmox-widget-toolkit:
> 
> Dominik Csapak (1):
>    css: add some conditions to the tag classes for the tag view
> 
>   src/css/ext6-pmx.css | 22 +++++++++++++++-------
>   1 file changed, 15 insertions(+), 7 deletions(-)
> 
> pve-manager:
> 
> Dominik Csapak (1):
>    ui: implement 'Tag View' for the resource tree
> 
>   www/manager6/Makefile             |  1 +
>   www/manager6/Workspace.js         |  4 +-
>   www/manager6/form/ViewSelector.js | 28 +++++++++++
>   www/manager6/grid/ResourceGrid.js |  2 +-
>   www/manager6/panel/TagConfig.js   |  6 +++
>   www/manager6/tree/ResourceTree.js | 81 ++++++++++++++++++++++++++++---
>   6 files changed, 113 insertions(+), 9 deletions(-)
>   create mode 100644 www/manager6/panel/TagConfig.js
> 



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel


^ permalink raw reply	[flat|nested] 11+ messages in thread

* Re: [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview
  2024-11-07 13:52 ` [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview Aaron Lauterer
@ 2024-11-07 14:16   ` Dominik Csapak
  2024-11-07 14:20     ` Aaron Lauterer
  2024-11-08  9:44     ` Daniel Herzig
  0 siblings, 2 replies; 11+ messages in thread
From: Dominik Csapak @ 2024-11-07 14:16 UTC (permalink / raw)
  To: Aaron Lauterer, Proxmox VE development discussion

On 11/7/24 14:52, Aaron Lauterer wrote:
> gave this a quick test.
> 
> two things I noticed:
> 
> * root element in tree per tag: wouldn't it be better to override the display style to 'full'? 
> Otherwise I might have a lot of colorful dots, but don't know what the tags are called.

that should be the case, but you need the widget toolkit patch installed for that

> 
> * I am not 100% sure, but would it be possible to distinguish guests that have no tag assigned a bit 
> better? maybe have a default "no-tags" tree for them?

mhmm. possibly, but i used the same style as we have in the 'pool view' where guests/storages
outside of pools are also just displayed one level higher

> 
> On  2024-11-07  12:25, Dominik Csapak wrote:
>> this adds a 'tagview' to the web ui, organizing guests by their tags
>> (for details see the pve-manager patch)
>>
>> I'm not super happy all in all with how much special casing must be
>> done, but i could not (yet?) figure out a better way.
>>
>> changes from v2:
>> * rebased on master (tooltip generation changed so adapted to that)
>> * implemented fionas feedback, so selection should stay even when tags
>>    are removed or the selection is changed from the tag view
>>
>> changes from v1:
>> * rebase on master
>> * adapt to recent tooltip changes
>> * add a comment to TagConfig class to better explain what it does
>>
>> pve-docs:
>>
>> Dominik Csapak (1):
>>    gui: add anchor for tags chapter
>>
>>   pve-gui.adoc | 1 +
>>   1 file changed, 1 insertion(+)
>>
>> proxmox-widget-toolkit:
>>
>> Dominik Csapak (1):
>>    css: add some conditions to the tag classes for the tag view
>>
>>   src/css/ext6-pmx.css | 22 +++++++++++++++-------
>>   1 file changed, 15 insertions(+), 7 deletions(-)
>>
>> pve-manager:
>>
>> Dominik Csapak (1):
>>    ui: implement 'Tag View' for the resource tree
>>
>>   www/manager6/Makefile             |  1 +
>>   www/manager6/Workspace.js         |  4 +-
>>   www/manager6/form/ViewSelector.js | 28 +++++++++++
>>   www/manager6/grid/ResourceGrid.js |  2 +-
>>   www/manager6/panel/TagConfig.js   |  6 +++
>>   www/manager6/tree/ResourceTree.js | 81 ++++++++++++++++++++++++++++---
>>   6 files changed, 113 insertions(+), 9 deletions(-)
>>   create mode 100644 www/manager6/panel/TagConfig.js
>>
> 



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

^ permalink raw reply	[flat|nested] 11+ messages in thread

* Re: [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview
  2024-11-07 14:16   ` Dominik Csapak
@ 2024-11-07 14:20     ` Aaron Lauterer
  2024-11-08  9:44     ` Daniel Herzig
  1 sibling, 0 replies; 11+ messages in thread
From: Aaron Lauterer @ 2024-11-07 14:20 UTC (permalink / raw)
  To: Dominik Csapak, Proxmox VE development discussion



On  2024-11-07  15:16, Dominik Csapak wrote:
> On 11/7/24 14:52, Aaron Lauterer wrote:
>> gave this a quick test.
>>
>> two things I noticed:
>>
>> * root element in tree per tag: wouldn't it be better to override the 
>> display style to 'full'? Otherwise I might have a lot of colorful 
>> dots, but don't know what the tags are called.
> 
> that should be the case, but you need the widget toolkit patch installed 
> for that
> 

Ah okay, for some reason it didn't install in my test cluster. Yeah, 
looks good!

>>
>> * I am not 100% sure, but would it be possible to distinguish guests 
>> that have no tag assigned a bit better? maybe have a default "no-tags" 
>> tree for them?
> 
> mhmm. possibly, but i used the same style as we have in the 'pool view' 
> where guests/storages
> outside of pools are also just displayed one level higher
> 
>>
>> On  2024-11-07  12:25, Dominik Csapak wrote:
>>> this adds a 'tagview' to the web ui, organizing guests by their tags
>>> (for details see the pve-manager patch)
>>>
>>> I'm not super happy all in all with how much special casing must be
>>> done, but i could not (yet?) figure out a better way.
>>>
>>> changes from v2:
>>> * rebased on master (tooltip generation changed so adapted to that)
>>> * implemented fionas feedback, so selection should stay even when tags
>>>    are removed or the selection is changed from the tag view
>>>
>>> changes from v1:
>>> * rebase on master
>>> * adapt to recent tooltip changes
>>> * add a comment to TagConfig class to better explain what it does
>>>
>>> pve-docs:
>>>
>>> Dominik Csapak (1):
>>>    gui: add anchor for tags chapter
>>>
>>>   pve-gui.adoc | 1 +
>>>   1 file changed, 1 insertion(+)
>>>
>>> proxmox-widget-toolkit:
>>>
>>> Dominik Csapak (1):
>>>    css: add some conditions to the tag classes for the tag view
>>>
>>>   src/css/ext6-pmx.css | 22 +++++++++++++++-------
>>>   1 file changed, 15 insertions(+), 7 deletions(-)
>>>
>>> pve-manager:
>>>
>>> Dominik Csapak (1):
>>>    ui: implement 'Tag View' for the resource tree
>>>
>>>   www/manager6/Makefile             |  1 +
>>>   www/manager6/Workspace.js         |  4 +-
>>>   www/manager6/form/ViewSelector.js | 28 +++++++++++
>>>   www/manager6/grid/ResourceGrid.js |  2 +-
>>>   www/manager6/panel/TagConfig.js   |  6 +++
>>>   www/manager6/tree/ResourceTree.js | 81 ++++++++++++++++++++++++++++---
>>>   6 files changed, 113 insertions(+), 9 deletions(-)
>>>   create mode 100644 www/manager6/panel/TagConfig.js
>>>
>>
> 
> 



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

^ permalink raw reply	[flat|nested] 11+ messages in thread

* Re: [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview
  2024-11-07 14:16   ` Dominik Csapak
  2024-11-07 14:20     ` Aaron Lauterer
@ 2024-11-08  9:44     ` Daniel Herzig
  1 sibling, 0 replies; 11+ messages in thread
From: Daniel Herzig @ 2024-11-08  9:44 UTC (permalink / raw)
  To: Proxmox VE development discussion

Dominik Csapak <d.csapak@proxmox.com> writes:

> On 11/7/24 14:52, Aaron Lauterer wrote:
>> gave this a quick test.
>> two things I noticed:
>> * root element in tree per tag: wouldn't it be better to override
>> the display style to 'full'? Otherwise I might have a lot of
>> colorful dots, but don't know what the tags are called.
>
> that should be the case, but you need the widget toolkit patch installed for that
>
>> * I am not 100% sure, but would it be possible to distinguish guests
>> that have no tag assigned a bit better? maybe have a default
>> "no-tags" tree for them?
>
> mhmm. possibly, but i used the same style as we have in the 'pool view' where guests/storages
> outside of pools are also just displayed one level higher
>
This looks neat! Earlier I actually misused the pools-view to achieve
this kind of visual guest separation.

Not directly applying to this thread, but Aaron's suggestion made me
think if it wouldn't be nice to have something like 'not assigned to any
pool' in the pool-view as well.

>> On  2024-11-07  12:25, Dominik Csapak wrote:
>>> this adds a 'tagview' to the web ui, organizing guests by their tags
>>> (for details see the pve-manager patch)
>>>
>>> I'm not super happy all in all with how much special casing must be
>>> done, but i could not (yet?) figure out a better way.
>>>
>>> changes from v2:
>>> * rebased on master (tooltip generation changed so adapted to that)
>>> * implemented fionas feedback, so selection should stay even when tags
>>>    are removed or the selection is changed from the tag view
>>>
>>> changes from v1:
>>> * rebase on master
>>> * adapt to recent tooltip changes
>>> * add a comment to TagConfig class to better explain what it does
>>>
>>> pve-docs:
>>>
>>> Dominik Csapak (1):
>>>    gui: add anchor for tags chapter
>>>
>>>   pve-gui.adoc | 1 +
>>>   1 file changed, 1 insertion(+)
>>>
>>> proxmox-widget-toolkit:
>>>
>>> Dominik Csapak (1):
>>>    css: add some conditions to the tag classes for the tag view
>>>
>>>   src/css/ext6-pmx.css | 22 +++++++++++++++-------
>>>   1 file changed, 15 insertions(+), 7 deletions(-)
>>>
>>> pve-manager:
>>>
>>> Dominik Csapak (1):
>>>    ui: implement 'Tag View' for the resource tree
>>>
>>>   www/manager6/Makefile             |  1 +
>>>   www/manager6/Workspace.js         |  4 +-
>>>   www/manager6/form/ViewSelector.js | 28 +++++++++++
>>>   www/manager6/grid/ResourceGrid.js |  2 +-
>>>   www/manager6/panel/TagConfig.js   |  6 +++
>>>   www/manager6/tree/ResourceTree.js | 81 ++++++++++++++++++++++++++++---
>>>   6 files changed, 113 insertions(+), 9 deletions(-)
>>>   create mode 100644 www/manager6/panel/TagConfig.js
>>>
>> 
>
>
>
> _______________________________________________
> pve-devel mailing list
> pve-devel@lists.proxmox.com
> https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

^ permalink raw reply	[flat|nested] 11+ messages in thread

* [pve-devel] applied-series: [PATCH docs/widget-toolkit/manager v3] implement tagview
  2024-11-07 11:25 [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview Dominik Csapak
                   ` (3 preceding siblings ...)
  2024-11-07 13:52 ` [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview Aaron Lauterer
@ 2024-11-10 11:22 ` Thomas Lamprecht
  2024-11-11 13:58   ` Dominik Csapak
  4 siblings, 1 reply; 11+ messages in thread
From: Thomas Lamprecht @ 2024-11-10 11:22 UTC (permalink / raw)
  To: Proxmox VE development discussion, Dominik Csapak

Am 07.11.24 um 12:25 schrieb Dominik Csapak:
> this adds a 'tagview' to the web ui, organizing guests by their tags
> (for details see the pve-manager patch)
> 
> I'm not super happy all in all with how much special casing must be
> done, but i could not (yet?) figure out a better way.
> 
> changes from v2:
> * rebased on master (tooltip generation changed so adapted to that)
> * implemented fionas feedback, so selection should stay even when tags
>   are removed or the selection is changed from the tag view
> 
> changes from v1:
> * rebase on master
> * adapt to recent tooltip changes
> * add a comment to TagConfig class to better explain what it does
> 
> pve-docs:
> 
> Dominik Csapak (1):
>   gui: add anchor for tags chapter
> 
>  pve-gui.adoc | 1 +
>  1 file changed, 1 insertion(+)
> 
> proxmox-widget-toolkit:
> 
> Dominik Csapak (1):
>   css: add some conditions to the tag classes for the tag view
> 
>  src/css/ext6-pmx.css | 22 +++++++++++++++-------
>  1 file changed, 15 insertions(+), 7 deletions(-)
> 
> pve-manager:
> 
> Dominik Csapak (1):
>   ui: implement 'Tag View' for the resource tree
> 
>  www/manager6/Makefile             |  1 +
>  www/manager6/Workspace.js         |  4 +-
>  www/manager6/form/ViewSelector.js | 28 +++++++++++
>  www/manager6/grid/ResourceGrid.js |  2 +-
>  www/manager6/panel/TagConfig.js   |  6 +++
>  www/manager6/tree/ResourceTree.js | 81 ++++++++++++++++++++++++++++---
>  6 files changed, 113 insertions(+), 9 deletions(-)
>  create mode 100644 www/manager6/panel/TagConfig.js
> 


applied, thanks!

What would be nice to have is to optionally show also nodes and storage entries
for the tag and pool views, so that these views can be used as only one to fully
manage all resources. This probably should even become an opt-out setting.

semi-related, allowing one to group (shared) storages with the same name might
also be great to make the resource tree clearer and quicker to find things if
one has more than a few nodes/storages. I.e., I'd join the list of nodes in the
tree where the current node name is and add a node selector filtered to the
available nodes in the storage view to allow selecting another node, that way
we might even group storages that are distinct on every node, or leave that up
to select, i.e.:

Group Storages: [ Default (No) ]
                | No           |
                | Shared Only  |
                | All          |


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel


^ permalink raw reply	[flat|nested] 11+ messages in thread

* Re: [pve-devel] applied-series: [PATCH docs/widget-toolkit/manager v3] implement tagview
  2024-11-10 11:22 ` [pve-devel] applied-series: " Thomas Lamprecht
@ 2024-11-11 13:58   ` Dominik Csapak
  2024-11-11 14:26     ` Thomas Lamprecht
  0 siblings, 1 reply; 11+ messages in thread
From: Dominik Csapak @ 2024-11-11 13:58 UTC (permalink / raw)
  To: Thomas Lamprecht, Proxmox VE development discussion

On 11/10/24 12:22, Thomas Lamprecht wrote:
> Am 07.11.24 um 12:25 schrieb Dominik Csapak:
>> this adds a 'tagview' to the web ui, organizing guests by their tags
>> (for details see the pve-manager patch)
>>
>> I'm not super happy all in all with how much special casing must be
>> done, but i could not (yet?) figure out a better way.
>>
>> changes from v2:
>> * rebased on master (tooltip generation changed so adapted to that)
>> * implemented fionas feedback, so selection should stay even when tags
>>    are removed or the selection is changed from the tag view
>>
>> changes from v1:
>> * rebase on master
>> * adapt to recent tooltip changes
>> * add a comment to TagConfig class to better explain what it does
>>
>> pve-docs:
>>
>> Dominik Csapak (1):
>>    gui: add anchor for tags chapter
>>
>>   pve-gui.adoc | 1 +
>>   1 file changed, 1 insertion(+)
>>
>> proxmox-widget-toolkit:
>>
>> Dominik Csapak (1):
>>    css: add some conditions to the tag classes for the tag view
>>
>>   src/css/ext6-pmx.css | 22 +++++++++++++++-------
>>   1 file changed, 15 insertions(+), 7 deletions(-)
>>
>> pve-manager:
>>
>> Dominik Csapak (1):
>>    ui: implement 'Tag View' for the resource tree
>>
>>   www/manager6/Makefile             |  1 +
>>   www/manager6/Workspace.js         |  4 +-
>>   www/manager6/form/ViewSelector.js | 28 +++++++++++
>>   www/manager6/grid/ResourceGrid.js |  2 +-
>>   www/manager6/panel/TagConfig.js   |  6 +++
>>   www/manager6/tree/ResourceTree.js | 81 ++++++++++++++++++++++++++++---
>>   6 files changed, 113 insertions(+), 9 deletions(-)
>>   create mode 100644 www/manager6/panel/TagConfig.js
>>
> 
> 
> applied, thanks!
> 
> What would be nice to have is to optionally show also nodes and storage entries
> for the tag and pool views, so that these views can be used as only one to fully
> manage all resources. This probably should even become an opt-out setting.

that should be (relatively) easy, so I'll whip something up. any preferred
order on the types on the same level (i.e. do you want the nodes/storages
below the untagged/unpooled guests, or above?)

> 
> semi-related, allowing one to group (shared) storages with the same name might
> also be great to make the resource tree clearer and quicker to find things if
> one has more than a few nodes/storages. I.e., I'd join the list of nodes in the
> tree where the current node name is and add a node selector filtered to the
> available nodes in the storage view to allow selecting another node, that way
> we might even group storages that are distinct on every node, or leave that up
> to select, i.e.:
> 
> Group Storages: [ Default (No) ]
>                  | No           |
>                  | Shared Only  |
>                  | All          |

ok, i think i understand what you want here, but not sure how much work that is.
Currently we only have one 'grouping' per view so to introduce 'grouping per type'
is probably not that easy...

I'll see how it could work regardless

do i understand correctly that this would not exist in the server view,
only in tag/pool/folder ?
(where multiple storages with the same name appear on the same level)


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel


^ permalink raw reply	[flat|nested] 11+ messages in thread

* Re: [pve-devel] applied-series: [PATCH docs/widget-toolkit/manager v3] implement tagview
  2024-11-11 13:58   ` Dominik Csapak
@ 2024-11-11 14:26     ` Thomas Lamprecht
  0 siblings, 0 replies; 11+ messages in thread
From: Thomas Lamprecht @ 2024-11-11 14:26 UTC (permalink / raw)
  To: Dominik Csapak, Proxmox VE development discussion

Am 11.11.24 um 14:58 schrieb Dominik Csapak:
> On 11/10/24 12:22, Thomas Lamprecht wrote:
>> What would be nice to have is to optionally show also nodes and storage entries
>> for the tag and pool views, so that these views can be used as only one to fully
>> manage all resources. This probably should even become an opt-out setting.
> 
> that should be (relatively) easy, so I'll whip something up. any preferred
> order on the types on the same level (i.e. do you want the nodes/storages
> below the untagged/unpooled guests, or above?)

I'd go for below, to not get in-between guests.

>>
>> semi-related, allowing one to group (shared) storages with the same name might
>> also be great to make the resource tree clearer and quicker to find things if
>> one has more than a few nodes/storages. I.e., I'd join the list of nodes in the
>> tree where the current node name is and add a node selector filtered to the
>> available nodes in the storage view to allow selecting another node, that way
>> we might even group storages that are distinct on every node, or leave that up
>> to select, i.e.:
>>
>> Group Storages: [ Default (No) ]
>>                  | No           |
>>                  | Shared Only  |
>>                  | All          |
> 
> ok, i think i understand what you want here, but not sure how much work that is.
> Currently we only have one 'grouping' per view so to introduce 'grouping per type'
> is probably not that easy...
> 
> I'll see how it could work regardless

I think that especially grouping local ones could have some odd edge cases, like
for the available-storage capacity bar, so it might be fine to skip the "group
all" case for the beginning and have only the "group none" and "group shared"
ones.

> 
> do i understand correctly that this would not exist in the server view,
> only in tag/pool/folder ?

yes, in the server view I would not make sense, as one can only have one
storage with the same Id per node anyway.

> (where multiple storages with the same name appear on the same level)
> 

exactly, so tag, pool and also folder view.


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel


^ permalink raw reply	[flat|nested] 11+ messages in thread

end of thread, other threads:[~2024-11-11 14:26 UTC | newest]

Thread overview: 11+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2024-11-07 11:25 [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview Dominik Csapak
2024-11-07 11:25 ` [pve-devel] [PATCH docs v3 1/1] gui: add anchor for tags chapter Dominik Csapak
2024-11-07 11:25 ` [pve-devel] [PATCH widget-toolkit v3 1/1] css: add some conditions to the tag classes for the tag view Dominik Csapak
2024-11-07 11:25 ` [pve-devel] [PATCH manager v3 1/1] ui: implement 'Tag View' for the resource tree Dominik Csapak
2024-11-07 13:52 ` [pve-devel] [PATCH docs/widget-toolkit/manager v3] implement tagview Aaron Lauterer
2024-11-07 14:16   ` Dominik Csapak
2024-11-07 14:20     ` Aaron Lauterer
2024-11-08  9:44     ` Daniel Herzig
2024-11-10 11:22 ` [pve-devel] applied-series: " Thomas Lamprecht
2024-11-11 13:58   ` Dominik Csapak
2024-11-11 14:26     ` Thomas Lamprecht

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal