From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH manager v2 3/6] ui: refactor ui option related methods into UIOptions
Date: Thu, 2 Feb 2023 15:41:32 +0100 [thread overview]
Message-ID: <20230202144135.3892582-4-d.csapak@proxmox.com> (raw)
In-Reply-To: <20230202144135.3892582-1-d.csapak@proxmox.com>
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>
---
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
next prev parent reply other threads:[~2023-02-02 14:41 UTC|newest]
Thread overview: 10+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-02-02 14:41 [pve-devel] [PATCH manager v2 0/6] fix #1408: ui: make tree sorting configurable Dominik Csapak
2023-02-02 14:41 ` [pve-devel] [PATCH manager v2 1/6] ui: remove 'Storage View' Dominik Csapak
2023-02-09 16:22 ` Thomas Lamprecht
2023-02-02 14:41 ` [pve-devel] [PATCH manager v2 2/6] ui: remove unused booleanfield Dominik Csapak
2023-02-02 14:41 ` Dominik Csapak [this message]
2023-02-02 14:41 ` [pve-devel] [PATCH manager v2 4/6] ui: refactor refreshing the the resource store/tree Dominik Csapak
2023-02-02 14:41 ` [pve-devel] [PATCH manager v2 5/6] ui: add window for changing tree related options Dominik Csapak
2023-02-09 10:33 ` Aaron Lauterer
2023-02-02 14:41 ` [pve-devel] [PATCH manager v2 6/6] fix #1408: ui: ResourceTree: sort the tree according to tree-sorting options Dominik Csapak
2023-02-09 10:34 ` [pve-devel] [PATCH manager v2 0/6] fix #1408: ui: make tree sorting configurable Aaron Lauterer
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20230202144135.3892582-4-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal