ui: tree/ResourceTree: show Tags in tree

and update the treenodes when the tags change.
since we change the vm node text (which we pass through to the config
panel), we have to change how we generate the text there slightly
(otherwise that would include the rendered tags)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/data/ResourceStore.js b/www/manager6/data/ResourceStore.js
index c7b723060f296facae3f227ced9d7884b2d1dc3f..b18f7dd8dfbe956c8bf5534bbfe40875e74bd6ac 100644 (file)
--- a/www/manager6/data/ResourceStore.js
+++ b/www/manager6/data/ResourceStore.js
@@ -293,6 +293,12 @@ Ext.define('PVE.data.ResourceStore', {
                sortable: true,
                width: 100,
            },
+           tags: {
+               header: gettext('Tags'),
+               type: 'string',
+               hidden: true,
+               sortable: true,
+           },
        };
 
        let fields = [];

diff --git a/www/manager6/lxc/Config.js b/www/manager6/lxc/Config.js
index 9b3017adde40a1534005aa629b418bc027f33fec..f333905133468148c00ad1b3311da6a245644955 100644 (file)
--- a/www/manager6/lxc/Config.js
+++ b/www/manager6/lxc/Config.js
@@ -206,8 +206,10 @@ Ext.define('PVE.lxc.Config', {
            },
        });
 
+       let vm_text = `${vm.vmid} (${vm.name})`;
+
        Ext.apply(me, {
-           title: Ext.String.format(gettext("Container {0} on node '{1}'"), vm.text, nodename),
+           title: Ext.String.format(gettext("Container {0} on node '{1}'"), vm_text, nodename),
            hstateid: 'lxctab',
            tbarSpacing: false,
            tbar: [statusTxt, tagsContainer, '->', startBtn, shutdownBtn, migrateBtn, consoleBtn, moreBtn],

diff --git a/www/manager6/qemu/Config.js b/www/manager6/qemu/Config.js
index 2cd6d8567a72da4b26e3573015a2798ab77be29f..5c8fa620da594408244a2e1f5fa42f39f3904721 100644 (file)
--- a/www/manager6/qemu/Config.js
+++ b/www/manager6/qemu/Config.js
@@ -242,8 +242,10 @@ Ext.define('PVE.qemu.Config', {
            },
        });
 
+       let vm_text = `${vm.vmid} (${vm.name})`;
+
        Ext.apply(me, {
-           title: Ext.String.format(gettext("Virtual Machine {0} on node '{1}'"), vm.text, nodename),
+           title: Ext.String.format(gettext("Virtual Machine {0} on node '{1}'"), vm_text, nodename),
            hstateid: 'kvmtab',
            tbarSpacing: false,
            tbar: [statusTxt, tagsContainer, '->', resumeBtn, startBtn, shutdownBtn, migrateBtn, consoleBtn, moreBtn],

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index be90d4f7a28f3d9e98e4a0c06e10530fb5aaf6bb..5c92d4128877e4cc286bf3e9a5e77d350064c3bc 100644 (file)
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -5,6 +5,8 @@ Ext.define('PVE.tree.ResourceTree', {
     extend: 'Ext.tree.TreePanel',
     alias: ['widget.pveResourceTree'],
 
+    userCls: 'proxmox-tags-circle',
+
     statics: {
        typeDefaults: {
            node: {
@@ -114,6 +116,8 @@ Ext.define('PVE.tree.ResourceTree', {
            }
        }
 
+       info.text += PVE.Utils.renderTags(info.tags, PVE.Utils.tagOverrides);
+
        info.text = status + info.text;
     },
 
@@ -226,6 +230,10 @@ Ext.define('PVE.tree.ResourceTree', {
 
        let stateid = 'rid';
 
+       const changedFields = [
+           'text', 'running', 'template', 'status', 'qmpstatus', 'hastate', 'lock', 'tags',
+       ];
+
        let updateTree = function() {
            store.suspendEvents();
 
@@ -261,7 +269,7 @@ Ext.define('PVE.tree.ResourceTree', {
                    }
 
                    // tree item has been updated
-                   for (const field of ['text', 'running', 'template', 'status', 'qmpstatus', 'hastate', 'lock']) {
+                   for (const field of changedFields) {
                        if (item.data[field] !== olditem.data[field]) {
                            changed = true;
                            break;