ui: add tags to ResourceGrid and GlobalSearchField

also allows to search for tags in the GlobalSearchField where each tag is
treated like a seperate field, so it weighs more if the user searches for
the exact string of a single tag

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
ui: ResourceGrid: render tags

with the 'full' styling

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

diff --git a/www/manager6/data/ResourceStore.js b/www/manager6/data/ResourceStore.js
index b18f7dd8dfbe956c8bf5534bbfe40875e74bd6ac..ed1f4699ecfc9d15b556d488cb4d4e1969daf182 100644 (file)
--- a/www/manager6/data/ResourceStore.js
+++ b/www/manager6/data/ResourceStore.js
@@ -295,6 +295,7 @@ Ext.define('PVE.data.ResourceStore', {
            },
            tags: {
                header: gettext('Tags'),
+               renderer: (value) => PVE.Utils.renderTags(value, PVE.Utils.tagOverrides),
                type: 'string',
                hidden: true,
                sortable: true,

diff --git a/www/manager6/form/GlobalSearchField.js b/www/manager6/form/GlobalSearchField.js
index 267a480d76e367de71f8b942f702b581a83b7e61..8e815d4f5b96e4d883c948aede9c92886668f447 100644 (file)
--- a/www/manager6/form/GlobalSearchField.js
+++ b/www/manager6/form/GlobalSearchField.js
@@ -15,6 +15,7 @@ Ext.define('PVE.form.GlobalSearchField', {
 
     grid: {
        xtype: 'gridpanel',
+       userCls: 'proxmox-tags-full',
        focusOnToFront: false,
        floating: true,
        emptyText: Proxmox.Utils.noneText,
@@ -23,7 +24,7 @@ Ext.define('PVE.form.GlobalSearchField', {
        scrollable: {
            xtype: 'scroller',
            y: true,
-           x: false,
+           x: true,
        },
        store: {
            model: 'PVEResources',
@@ -78,6 +79,11 @@ Ext.define('PVE.form.GlobalSearchField', {
                text: gettext('Description'),
                flex: 1,
                dataIndex: 'text',
+               renderer: function(value, mD, rec) {
+                   let overrides = PVE.Utils.tagOverrides;
+                   let tags = PVE.Utils.renderTags(rec.data.tags, overrides);
+                   return `${value}${tags}`;
+               },
            },
            {
                text: gettext('Node'),
@@ -104,16 +110,20 @@ Ext.define('PVE.form.GlobalSearchField', {
            'storage': ['type', 'pool', 'node', 'storage'],
            'default': ['name', 'type', 'node', 'pool', 'vmid'],
        };
-       let fieldArr = fieldMap[item.data.type] || fieldMap.default;
+       let fields = fieldMap[item.data.type] || fieldMap.default;
+       let fieldArr = fields.map(field => item.data[field]?.toString().toLowerCase());
+       if (item.data.tags) {
+           let tags = item.data.tags.split(/[;, ]/);
+           fieldArr.push(...tags);
+       }
 
        let filterWords = me.filterVal.split(/\s+/);
 
        // all text is case insensitive and each split-out word is searched for separately.
        // a row gets 1 point for every partial match, and and additional point for every exact match
        let match = 0;
-       for (let field of fieldArr) {
-           let fieldValue = item.data[field]?.toString().toLowerCase();
-           if (fieldValue === undefined) {
+       for (let fieldValue of fieldArr) {
+           if (fieldValue === undefined || fieldValue === "") {
                continue;
            }
            for (let filterWord of filterWords) {

diff --git a/www/manager6/grid/ResourceGrid.js b/www/manager6/grid/ResourceGrid.js
index 29906a37676a050bf4930b81b5e55f18040a8632..9376bcc26949594e5d403d6d626a9a4ba2e50521 100644 (file)
--- a/www/manager6/grid/ResourceGrid.js
+++ b/www/manager6/grid/ResourceGrid.js
@@ -7,6 +7,7 @@ Ext.define('PVE.grid.ResourceGrid', {
        property: 'type',
        direction: 'ASC',
     },
+    userCls: 'proxmox-tags-full',
     initComponent: function() {
        let me = this;