[pve-devel] [PATCH manager v3 3/6] ui: refactor ui option related methods into UIOptions
Dominik Csapak
d.csapak at proxmox.com
Wed Feb 22 08:51:49 CET 2023
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 at 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
More information about the pve-devel
mailing list