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.csa...@proxmox.com> --- www/manager6/Makefile | 1 + www/manager6/UIOptions.js | 92 ++++++++++++++++++++++++++ www/manager6/Utils.js | 92 +------------------------- www/manager6/Workspace.js | 2 +- www/manager6/data/ResourceStore.js | 2 +- www/manager6/dc/OptionView.js | 22 +++--- www/manager6/form/GlobalSearchField.js | 2 +- www/manager6/form/Tag.js | 6 +- www/manager6/form/TagColorGrid.js | 2 +- www/manager6/form/TagEdit.js | 10 +-- www/manager6/tree/ResourceTree.js | 2 +- 11 files changed, 119 insertions(+), 114 deletions(-) create mode 100644 www/manager6/UIOptions.js diff --git a/www/manager6/Makefile b/www/manager6/Makefile index 6a0cb73b7..2c487655f 100644 --- 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 index 000000000..c80a7c859 --- /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 fcc668c3a..7bf3955a1 100644 --- 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 d0f7ff760..a3872b560 100644 --- 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 91473a547..f3a5c4d81 100644 --- 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 9c803beef..4435876dd 100644 --- 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 8e815d4f5..c009ac8b7 100644 --- 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 6fda2e848..be72d7ba9 100644 --- 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 3ad8e07f0..310f18e66 100644 --- 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 e1cd4af67..094f44626 100644 --- 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 5c92d4128..7fcdfed5d 100644 --- 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; }, -- 2.30.2 _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel