From: Dominik Csapak <d.csapak@proxmox.com>
Date: Wed, 22 Feb 2023 07:51:49 +0000 (+0100)
Subject: ui: refactor ui option related methods into UIOptions
X-Git-Url: https://git.proxmox.com/?a=commitdiff_plain;h=731436ee8680e3bc9bbf1131fa5fc360607ec390;p=pve-manager.git

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 6a0cb73b..2c487655 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 00000000..c80a7c85
--- /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 fcc668c3..7bf3955a 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 d0f7ff76..a3872b56 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 91473a54..f3a5c4d8 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 9c803bee..4435876d 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 8e815d4f..c009ac8b 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 6fda2e84..be72d7ba 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 3ad8e07f..310f18e6 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 e1cd4af6..094f4462 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 5c92d412..7fcdfed5 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;
     },