ui: parse and save tag infos from /cluster/options

stores the color-map into a global list of overrides. on update, also parse
the values from the browser localstore. Also emits a GlobalEvent
'loadedUiOptions' so that e.g. the tags can listen to that and refresh their
colors

also saves the list of 'allowed-tags' into PVE.Utils

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

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 6ce22ded5b22bb0ade2e50f4ba8a242b72c94476..7137a3a25c0004a7fd9c5991213b4ab0661d1d40 100644 (file)
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1860,11 +1860,67 @@ Ext.define('PVE.Utils', {
            url: '/cluster/options',
            method: 'GET',
            success: function(response) {
-               PVE.UIOptions = {};
-               PVE.UIOptions.console = response?.result?.data?.console;
+               PVE.UIOptions = {
+                   'allowed-tags': [],
+               };
+               for (const option of ['allowed-tags', 'console', 'tag-style']) {
+                   PVE.UIOptions[option] = response?.result?.data?.[option];
+               }
+
+               PVE.Utils.updateTagList(PVE.UIOptions['allowed-tags']);
+               PVE.Utils.updateTagSettings(PVE.UIOptions?.['tag-style']);
            },
        });
     },
+
+    tagList: [],
+
+    updateTagList: function(tags) {
+       PVE.Utils.tagList = [...new Set([...tags])].sort();
+    },
+
+    parseTagOverrides: function(overrides) {
+       let colors = {};
+       (overrides || "").split(';').forEach(color => {
+           if (!color) {
+               return;
+           }
+           let [tag, color_hex, font_hex] = color.split(':');
+           let r = parseInt(color_hex.slice(0, 2), 16);
+           let g = parseInt(color_hex.slice(2, 4), 16);
+           let b = parseInt(color_hex.slice(4, 6), 16);
+           colors[tag] = [r, g, b];
+           if (font_hex) {
+               colors[tag].push(parseInt(font_hex.slice(0, 2), 16));
+               colors[tag].push(parseInt(font_hex.slice(2, 4), 16));
+               colors[tag].push(parseInt(font_hex.slice(4, 6), 16));
+           }
+       });
+       return colors;
+    },
+
+    tagOverrides: {},
+
+    updateTagOverrides: function(colors) {
+       let sp = Ext.state.Manager.getProvider();
+       let color_state = sp.get('colors', '');
+       let browser_colors = PVE.Utils.parseTagOverrides(color_state);
+       PVE.Utils.tagOverrides = Ext.apply({}, browser_colors, colors);
+    },
+
+    updateTagSettings: function(style) {
+       let overrides = style?.['color-map'];
+       PVE.Utils.updateTagOverrides(PVE.Utils.parseTagOverrides(overrides ?? ""));
+
+       let shape = style?.shape ?? 'circle';
+       if (shape === '__default__') {
+           style = 'circle';
+       }
+
+       Ext.ComponentQuery.query('pveResourceTree')[0].setUserCls(`proxmox-tags-${shape}`);
+       PVE.data.ResourceStore.fireEvent('load');
+       Ext.GlobalEvents.fireEvent('loadedUiOptions');
+    },
 },
 
     singleton: true,