ui: refactor ui option related methods into UIOptions

a new singleton like Utils/Parser, intended for holding stuff for
ui options, such as the tag settings/overrides

no behavioural change intended

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

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 6a0cb73b756f72521f6e7353c3a960367e342205..2c487655ff3f98caa3738f6161a9d958ddf47d25 100644 (file)
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -4,6 +4,7 @@ JSSRC=                                                  \
        Parser.js                                       \
        StateProvider.js                                \
        Utils.js                                        \
+       UIOptions.js                                    \
        Toolkit.js                                      \
        VNCConsole.js                                   \
        button/ConsoleButton.js                         \

diff --git a/www/manager6/UIOptions.js b/www/manager6/UIOptions.js
new file mode 100644 (file)
index 0000000..c80a7c8
--- /dev/null
+++ b/www/manager6/UIOptions.js
@@ -0,0 +1,92 @@
+Ext.define('PVE.UIOptions', {
+    singleton: true,
+
+    options: {
+       'allowed-tags': [],
+    },
+
+    update: function() {
+       Proxmox.Utils.API2Request({
+           url: '/cluster/options',
+           method: 'GET',
+           success: function(response) {
+               for (const option of ['allowed-tags', 'console', 'tag-style']) {
+                   PVE.UIOptions.options[option] = response?.result?.data?.[option];
+               }
+
+               PVE.UIOptions.updateTagList(PVE.UIOptions.options['allowed-tags']);
+               PVE.UIOptions.updateTagSettings(PVE.UIOptions.options['tag-style']);
+           },
+       });
+    },
+
+    tagList: [],
+
+    updateTagList: function(tags) {
+       PVE.UIOptions.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.UIOptions.parseTagOverrides(color_state);
+       PVE.UIOptions.tagOverrides = Ext.apply({}, browser_colors, colors);
+    },
+
+    updateTagSettings: function(style) {
+       let overrides = style?.['color-map'];
+       PVE.UIOptions.updateTagOverrides(PVE.UIOptions.parseTagOverrides(overrides ?? ""));
+
+       let shape = style?.shape ?? 'circle';
+       if (shape === '__default__') {
+           style = 'circle';
+       }
+
+       Ext.ComponentQuery.query('pveResourceTree')[0].setUserCls(`proxmox-tags-${shape}`);
+
+       if (!PVE.data.ResourceStore.isLoading() && PVE.data.ResourceStore.isLoaded()) {
+           PVE.data.ResourceStore.fireEvent('load');
+       }
+       Ext.GlobalEvents.fireEvent('loadedUiOptions');
+    },
+
+    tagTreeStyles: {
+       '__default__': `${Proxmox.Utils.defaultText} (${gettext('Circle')})`,
+       'full': gettext('Full'),
+       'circle': gettext('Circle'),
+       'dense': gettext('Dense'),
+       'none': Proxmox.Utils.NoneText,
+    },
+
+    tagOrderOptions: {
+       '__default__': `${Proxmox.Utils.defaultText} (${gettext('Alphabetical')})`,
+       'config': gettext('Configuration'),
+       'alphabetical': gettext('Alphabetical'),
+    },
+
+    shouldSortTags: function() {
+       return !(PVE.UIOptions.options['tag-style']?.ordering === 'config');
+    },
+});

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index fcc668c3abb7737a08ecc833e6863ce4eada3328..7bf3955a19dc66b1442a0225991b5561e0ddc5b2 100644 (file)
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1334,7 +1334,7 @@ Ext.define('PVE.Utils', {
            allowSpice = consoles.spice;
            allowXtermjs = !!consoles.xtermjs;
        }
-       let dv = PVE.UIOptions.console || (type === 'kvm' ? 'vv' : 'xtermjs');
+       let dv = PVE.UIOptions.options.console || (type === 'kvm' ? 'vv' : 'xtermjs');
        if (dv === 'vv' && !allowSpice) {
            dv = allowXtermjs ? 'xtermjs' : 'html5';
        } else if (dv === 'xtermjs' && !allowXtermjs) {
@@ -1857,95 +1857,11 @@ Ext.define('PVE.Utils', {
 
     notesTemplateVars: ['cluster', 'guestname', 'node', 'vmid'],
 
-    updateUIOptions: function() {
-       Proxmox.Utils.API2Request({
-           url: '/cluster/options',
-           method: 'GET',
-           success: function(response) {
-               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}`);
-
-       if (!PVE.data.ResourceStore.isLoading() && PVE.data.ResourceStore.isLoaded()) {
-           PVE.data.ResourceStore.fireEvent('load');
-       }
-       Ext.GlobalEvents.fireEvent('loadedUiOptions');
-    },
-
-    tagTreeStyles: {
-       '__default__': `${Proxmox.Utils.defaultText} (${gettext('Circle')})`,
-       'full': gettext('Full'),
-       'circle': gettext('Circle'),
-       'dense': gettext('Dense'),
-       'none': Proxmox.Utils.NoneText,
-    },
-
-    tagOrderOptions: {
-       '__default__': `${Proxmox.Utils.defaultText} (${gettext('Alphabetical')})`,
-       'config': gettext('Configuration'),
-       'alphabetical': gettext('Alphabetical'),
-    },
-
     renderTags: function(tagstext, overrides) {
        let text = '';
        if (tagstext) {
            let tags = (tagstext.split(/[,; ]/) || []).filter(t => !!t);
-           if (PVE.Utils.shouldSortTags()) {
+           if (PVE.UIOptions.shouldSortTags()) {
                tags = tags.sort((a, b) => {
                    let alc = a.toLowerCase();
                    let blc = b.toLowerCase();
@@ -1960,10 +1876,6 @@ Ext.define('PVE.Utils', {
        return text;
     },
 
-    shouldSortTags: function() {
-       return !(PVE.UIOptions?.['tag-style']?.ordering === 'config');
-    },
-
     tagCharRegex: /^[a-z0-9+_.-]+$/i,
 
     verificationStateOrder: {

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index d0f7ff76053f29b0a0dfd1dc2d9aea6fd69c505b..a3872b560dc07e9ceed43bd58a9a69a501bdff50 100644 (file)
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -158,7 +158,7 @@ Ext.define('PVE.StdWorkspace', {
                },
            });
 
-           PVE.Utils.updateUIOptions();
+           PVE.UIOptions.update();
 
            Proxmox.Utils.API2Request({
                url: '/cluster/sdn',

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

diff --git a/www/manager6/dc/OptionView.js b/www/manager6/dc/OptionView.js
index 9c803beef403a6428067d4b83503f2f6d55f0d99..4435876dd6d44d9dd6cf2f2c4c8f205f671a8b0b 100644 (file)
--- a/www/manager6/dc/OptionView.js
+++ b/www/manager6/dc/OptionView.js
@@ -358,11 +358,11 @@ Ext.define('PVE.dc.OptionView', {
                if (value === undefined) {
                    return gettext('No Overrides');
                }
-               let colors = PVE.Utils.parseTagOverrides(value?.['color-map']);
+               let colors = PVE.UIOptions.parseTagOverrides(value?.['color-map']);
                let shape = value.shape;
-               let shapeText = PVE.Utils.tagTreeStyles[shape ?? '__default__'];
+               let shapeText = PVE.UIOptions.tagTreeStyles[shape ?? '__default__'];
                let txt = Ext.String.format(gettext("Tree Shape: {0}"), shapeText);
-               let orderText = PVE.Utils.tagOrderOptions[value.ordering ?? '__default__'];
+               let orderText = PVE.UIOptions.tagOrderOptions[value.ordering ?? '__default__'];
                txt += `, ${Ext.String.format(gettext("Ordering: {0}"), orderText)}`;
                if (value['case-sensitive']) {
                    txt += `, ${gettext('Case-Sensitive')}`;
@@ -453,7 +453,7 @@ Ext.define('PVE.dc.OptionView', {
                                    ],
                                },
                                store: {
-                                   data: Object.entries(PVE.Utils.tagTreeStyles).map(v => ({
+                                   data: Object.entries(PVE.UIOptions.tagTreeStyles).map(v => ({
                                        value: v[0],
                                        display: v[1],
                                    })),
@@ -466,7 +466,7 @@ Ext.define('PVE.dc.OptionView', {
                                name: 'ordering',
                                xtype: 'proxmoxKVComboBox',
                                fieldLabel: gettext('Ordering'),
-                               comboItems: Object.entries(PVE.Utils.tagOrderOptions),
+                               comboItems: Object.entries(PVE.UIOptions.tagOrderOptions),
                                defaultValue: '__default__',
                                value: '__default__',
                                deleteEmpty: true,
@@ -503,7 +503,7 @@ Ext.define('PVE.dc.OptionView', {
                let mode = value?.['user-allow'] ?? 'free';
                let list = value?.['user-allow-list']?.join(',') ?? '';
                let modeTxt = Ext.String.format(gettext('Mode: {0}'), mode);
-               let overrides = PVE.Utils.tagOverrides;
+               let overrides = PVE.UIOptions.tagOverrides;
                let tags = PVE.Utils.renderTags(list, overrides);
                let listTxt = tags !== '' ? `, ${gettext('Pre-defined:')} ${tags}` : '';
                return `${modeTxt}${listTxt}`;
@@ -520,7 +520,7 @@ Ext.define('PVE.dc.OptionView', {
                if (value === undefined) {
                    return gettext('No Registered Tags');
                }
-               let overrides = PVE.Utils.tagOverrides;
+               let overrides = PVE.UIOptions.tagOverrides;
                return PVE.Utils.renderTags(value.join(','), overrides);
            },
            header: gettext('Registered Tags'),
@@ -559,13 +559,13 @@ Ext.define('PVE.dc.OptionView', {
            }
 
            var rec = store.getById('console');
-           PVE.UIOptions.console = rec.data.value;
+           PVE.UIOptions.options.console = rec.data.value;
            if (rec.data.value === '__default__') {
-               delete PVE.UIOptions.console;
+               delete PVE.UIOptions.options.console;
            }
 
-           PVE.UIOptions['tag-style'] = store.getById('tag-style')?.data?.value;
-           PVE.Utils.updateTagSettings(PVE.UIOptions['tag-style']);
+           PVE.UIOptions.options['tag-style'] = store.getById('tag-style')?.data?.value;
+           PVE.UIOptions.updateTagSettings(PVE.UIOptions.options['tag-style']);
        });
 
        me.on('activate', me.rstore.startUpdate);

diff --git a/www/manager6/form/GlobalSearchField.js b/www/manager6/form/GlobalSearchField.js
index 8e815d4f5b96e4d883c948aede9c92886668f447..c009ac8b7a16c66f9ac9a7aa6d4196c0696a4060 100644 (file)
--- a/www/manager6/form/GlobalSearchField.js
+++ b/www/manager6/form/GlobalSearchField.js
@@ -80,7 +80,7 @@ Ext.define('PVE.form.GlobalSearchField', {
                flex: 1,
                dataIndex: 'text',
                renderer: function(value, mD, rec) {
-                   let overrides = PVE.Utils.tagOverrides;
+                   let overrides = PVE.UIOptions.tagOverrides;
                    let tags = PVE.Utils.renderTags(rec.data.tags, overrides);
                    return `${value}${tags}`;
                },

diff --git a/www/manager6/form/Tag.js b/www/manager6/form/Tag.js
index 6fda2e848260e014f1e60bf1dcb11964920306b9..be72d7ba9d754ec74e99c6e86156f9f55c3bc181 100644 (file)
--- a/www/manager6/form/Tag.js
+++ b/www/manager6/form/Tag.js
@@ -61,7 +61,7 @@ Ext.define('Proxmox.form.Tag', {
                userCls: 'proxmox-tags-full',
                displayField: 'tag',
                itemTpl: [
-                   '{[Proxmox.Utils.getTagElement(values.tag, PVE.Utils.tagOverrides)]}',
+                   '{[Proxmox.Utils.getTagElement(values.tag, PVE.UIOptions.tagOverrides)]}',
                ],
                store: [],
                listeners: {
@@ -76,7 +76,7 @@ Ext.define('Proxmox.form.Tag', {
            });
        }
        me.picker.getStore()?.clearFilter();
-       let taglist = PVE.Utils.tagList.filter(v => !me.filter.includes(v)).map(v => ({ tag: v }));
+       let taglist = PVE.UIOptions.tagList.filter(v => !me.filter.includes(v)).map(v => ({ tag: v }));
        if (taglist.length < 1) {
            return;
        }
@@ -154,7 +154,7 @@ Ext.define('Proxmox.form.Tag', {
 
     setColor: function(tag) {
        let me = this;
-       let rgb = PVE.Utils.tagOverrides[tag] ?? Proxmox.Utils.stringToRGB(tag);
+       let rgb = PVE.UIOptions.tagOverrides[tag] ?? Proxmox.Utils.stringToRGB(tag);
 
        let cls = Proxmox.Utils.getTextContrastClass(rgb);
        let color = Proxmox.Utils.rgbToCss(rgb);

diff --git a/www/manager6/form/TagColorGrid.js b/www/manager6/form/TagColorGrid.js
index 3ad8e07f0900383c5f66b4e832d9b4754de07461..310f18e66f8fb7dba0b91003ad9b3c5c6fc2295c 100644 (file)
--- a/www/manager6/form/TagColorGrid.js
+++ b/www/manager6/form/TagColorGrid.js
@@ -295,7 +295,7 @@ Ext.define('PVE.form.TagColorGrid', {
            dataIndex: 'tag',
            xtype: 'widgetcolumn',
            onWidgetAttach: function(col, widget, rec) {
-               widget.getStore().setData(PVE.Utils.tagList.map(v => ({ tag: v })));
+               widget.getStore().setData(PVE.UIOptions.tagList.map(v => ({ tag: v })));
            },
            widget: {
                xtype: 'combobox',

diff --git a/www/manager6/form/TagEdit.js b/www/manager6/form/TagEdit.js
index e1cd4af6761cde0a67352fbf7618939b7fa9e0f3..094f44626f677a70724ea1c0989ce8a3f04eb658 100644 (file)
--- a/www/manager6/form/TagEdit.js
+++ b/www/manager6/form/TagEdit.js
@@ -41,7 +41,7 @@ Ext.define('PVE.panel.TagEditContainer', {
        onRender: function(v) {
            let me = this;
            let view = me.getView();
-           view.toggleCls('hide-handles', PVE.Utils.shouldSortTags());
+           view.toggleCls('hide-handles', PVE.UIOptions.shouldSortTags());
 
            view.dragzone = Ext.create('Ext.dd.DragZone', v.getEl(), {
                getDragData: function(e) {
@@ -53,7 +53,7 @@ Ext.define('PVE.panel.TagEditContainer', {
                    let cmp = Ext.getCmp(sourceId);
                    let ddel = document.createElement('div');
                    ddel.classList.add('proxmox-tags-full');
-                   ddel.innerHTML = Proxmox.Utils.getTagElement(cmp.tag, PVE.Utils.tagOverrides);
+                   ddel.innerHTML = Proxmox.Utils.getTagElement(cmp.tag, PVE.UIOptions.tagOverrides);
                    let repairXY = Ext.fly(source).getXY();
                    cmp.setDisabled(true);
                    ddel.id = Ext.id();
@@ -141,7 +141,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 
            // get a current tag list for editing
            if (editMode) {
-               PVE.Utils.updateUIOptions();
+               PVE.UIOptions.update();
            }
 
            me.forEachTag((tag) => {
@@ -192,7 +192,7 @@ Ext.define('PVE.panel.TagEditContainer', {
            let view = me.getView();
            let vm = me.getViewModel();
            let index = view.items.length - 5;
-           if (PVE.Utils.shouldSortTags() && !isNew) {
+           if (PVE.UIOptions.shouldSortTags() && !isNew) {
                index = view.items.findIndexBy(tagField => {
                    if (tagField.reference === 'noTagsField') {
                        return false;
@@ -255,7 +255,7 @@ Ext.define('PVE.panel.TagEditContainer', {
            me.getViewModel().set('canEdit', view.canEdit);
 
            me.mon(Ext.GlobalEvents, 'loadedUiOptions', () => {
-               view.toggleCls('hide-handles', PVE.Utils.shouldSortTags());
+               view.toggleCls('hide-handles', PVE.UIOptions.shouldSortTags());
                me.loadTags(me.oldTags, true); // refresh tag colors and order
            });
        },

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 5c92d4128877e4cc286bf3e9a5e77d350064c3bc..7fcdfed5dc2c36e0dcdb55c151a90384ecec0b7f 100644 (file)
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -116,7 +116,7 @@ Ext.define('PVE.tree.ResourceTree', {
            }
        }
 
-       info.text += PVE.Utils.renderTags(info.tags, PVE.Utils.tagOverrides);
+       info.text += PVE.Utils.renderTags(info.tags, PVE.UIOptions.tagOverrides);
 
        info.text = status + info.text;
     },