From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH manager v11 07/13] ui: dc/OptionView: add editors for tag settings
Date: Wed, 16 Nov 2022 16:48:09 +0100 [thread overview]
Message-ID: <20221116154815.358385-16-d.csapak@proxmox.com> (raw)
In-Reply-To: <20221116154815.358385-1-d.csapak@proxmox.com>
namely for 'tag-tree-style' and 'tag-colors'.
display the tag overrides directly as they will appear as tags
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/manager6/Makefile | 2 +
www/manager6/Utils.js | 20 +++++
www/manager6/dc/OptionView.js | 121 ++++++++++++++++++++++++++
www/manager6/dc/RegisteredTagsEdit.js | 70 +++++++++++++++
www/manager6/dc/UserTagAccessEdit.js | 90 +++++++++++++++++++
5 files changed, 303 insertions(+)
create mode 100644 www/manager6/dc/RegisteredTagsEdit.js
create mode 100644 www/manager6/dc/UserTagAccessEdit.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 83c2effcf..2cbb65eb5 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -160,6 +160,8 @@ JSSRC= \
dc/UserEdit.js \
dc/UserView.js \
dc/MetricServerView.js \
+ dc/UserTagAccessEdit.js \
+ dc/RegisteredTagsEdit.js \
lxc/CmdMenu.js \
lxc/Config.js \
lxc/CreateWizard.js \
diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 2ff0fbd81..940752469 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1922,6 +1922,26 @@ Ext.define('PVE.Utils', {
Ext.GlobalEvents.fireEvent('loadedUiOptions');
},
+ tagTreeStyles: {
+ '__default__': `${Proxmox.Utils.defaultText} (${gettext('Cirlce')})`,
+ 'full': gettext('Full'),
+ 'circle': gettext('Circle'),
+ 'dense': gettext('Dense'),
+ 'none': Proxmox.Utils.NoneText,
+ },
+
+ renderTags: function(tagstext, overrides) {
+ let text = '';
+ if (tagstext) {
+ let tags = (tagstext.split(/[,; ]/) || []).filter(t => !!t);
+ text += ' ';
+ tags.forEach((tag) => {
+ text += Proxmox.Utils.getTagElement(tag, overrides);
+ });
+ }
+ return text;
+ },
+
tagCharRegex: /^[a-z0-9+_.-]$/i,
},
diff --git a/www/manager6/dc/OptionView.js b/www/manager6/dc/OptionView.js
index ff96351d5..be9e2abb2 100644
--- a/www/manager6/dc/OptionView.js
+++ b/www/manager6/dc/OptionView.js
@@ -5,6 +5,7 @@ Ext.define('PVE.dc.OptionView', {
onlineHelp: 'datacenter_configuration_file',
monStoreErrors: true,
+ userCls: 'proxmox-tags-full',
add_inputpanel_row: function(name, text, opts) {
var me = this;
@@ -312,6 +313,123 @@ Ext.define('PVE.dc.OptionView', {
submitValue: true,
}],
});
+ me.rows['tag-style'] = {
+ required: true,
+ renderer: (value) => {
+ if (value === undefined) {
+ return gettext('No Overrides');
+ }
+ let colors = PVE.Utils.parseTagOverrides(value?.['color-map']);
+ let shape = value.shape;
+ let shapeText = PVE.Utils.tagTreeStyles[shape ?? '__default__'];
+ let txt = Ext.String.format(gettext("Tree Shape: {0}"), shapeText);
+ if (Object.keys(colors).length > 0) {
+ txt += ', ';
+ }
+ for (const tag of Object.keys(colors)) {
+ txt += Proxmox.Utils.getTagElement(tag, colors);
+ }
+ return txt;
+ },
+ header: gettext('Tag Style Override'),
+ editor: {
+ xtype: 'proxmoxWindowEdit',
+ width: 800,
+ subject: gettext('Tag Color Override'),
+ onlineHelp: 'datacenter_configuration_file',
+ fieldDefaults: {
+ labelWidth: 100,
+ },
+ url: '/api2/extjs/cluster/options',
+ items: [
+ {
+ xtype: 'inputpanel',
+ setValues: function(values) {
+ if (values === undefined) {
+ return undefined;
+ }
+ values = values?.['tag-style'] ?? {};
+ values.shape = values.shape || '__default__';
+ values.colors = values['color-map'];
+ return Proxmox.panel.InputPanel.prototype.setValues.call(this, values);
+ },
+ onGetValues: function(values) {
+ let style = {};
+ if (values.colors) {
+ style['color-map'] = values.colors;
+ }
+ if (values.shape) {
+ style.shape = values.shape;
+ }
+ let value = PVE.Parser.printPropertyString(style);
+ if (value === '') {
+ return {
+ 'delete': 'tag-style',
+ };
+ }
+ return {
+ 'tag-style': value,
+ };
+ },
+ items: [
+ {
+ name: 'shape',
+ xtype: 'proxmoxKVComboBox',
+ fieldLabel: gettext('Tree Shape'),
+ comboItems: Object.entries(PVE.Utils.tagTreeStyles),
+ defaultValue: '__default__',
+ deleteEmpty: true,
+ },
+ {
+ xtype: 'displayfield',
+ fieldLabel: gettext('Color Overrides'),
+ },
+ {
+ name: 'colors',
+ xtype: 'pveTagColorGrid',
+ deleteEmpty: true,
+ height: 300,
+ },
+ ],
+ },
+ ],
+ },
+ };
+
+ me.rows['user-tag-access'] = {
+ required: true,
+ renderer: (value) => {
+ if (value === undefined) {
+ return Ext.String.format(gettext('Mode: {0}'), 'free');
+ }
+ 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 tags = PVE.Utils.renderTags(list, overrides);
+
+ return `${modeTxt}, ${gettext('Pre-defined:')} ${tags}`;
+ },
+ header: gettext('User Tag Access'),
+ editor: {
+ xtype: 'pveUserTagAccessEdit',
+ },
+ };
+
+ me.rows['registered-tags'] = {
+ required: true,
+ renderer: (value) => {
+ if (value === undefined) {
+ return gettext('No Registered Tags');
+ }
+ let overrides = PVE.Utils.tagOverrides;
+ return PVE.Utils.renderTags(value.join(','), overrides);
+ },
+ header: gettext('Registered Tags'),
+ editor: {
+ xtype: 'pveRegisteredTagEdit',
+ },
+ };
me.selModel = Ext.create('Ext.selection.RowModel', {});
@@ -347,6 +465,9 @@ Ext.define('PVE.dc.OptionView', {
if (rec.data.value === '__default__') {
delete PVE.UIOptions.console;
}
+
+ PVE.UIOptions['tag-style'] = store.getById('tag-style')?.data?.value;
+ PVE.Utils.updateTagSettings(PVE.UIOptions['tag-style']);
});
me.on('activate', me.rstore.startUpdate);
diff --git a/www/manager6/dc/RegisteredTagsEdit.js b/www/manager6/dc/RegisteredTagsEdit.js
new file mode 100644
index 000000000..92e076e0a
--- /dev/null
+++ b/www/manager6/dc/RegisteredTagsEdit.js
@@ -0,0 +1,70 @@
+Ext.define('PVE.dc.RegisteredTagsEdit', {
+ extend: 'Proxmox.window.Edit',
+ alias: 'widget.pveRegisteredTagEdit',
+
+ subject: gettext('Registered Tags'),
+ onlineHelp: 'datacenter_configuration_file',
+
+ url: '/api2/extjs/cluster/options',
+
+ hintText: gettext('NOTE: The following tags are also defined in the user allow list.'),
+
+ controller: {
+ xclass: 'Ext.app.ViewController',
+
+ tagChange: function(field, value) {
+ let me = this;
+ let view = me.getView();
+ let also_allowed = [];
+ value = Ext.isArray(value) ? value : value.split(';');
+ value.forEach(tag => {
+ if (view.allowed_tags.indexOf(tag) !== -1) {
+ also_allowed.push(tag);
+ }
+ });
+ let hint_field = me.lookup('hintField');
+ hint_field.setVisible(also_allowed.length > 0);
+ if (also_allowed.length > 0) {
+ hint_field.setValue(`${view.hintText} ${also_allowed.join(', ')}`);
+ }
+ },
+ },
+
+ items: [
+ {
+ xtype: 'inputpanel',
+ setValues: function(values) {
+ let allowed_tags = values?.['user-tag-access']?.['user-allow-list'] ?? [];
+ this.up('pveRegisteredTagEdit').allowed_tags = allowed_tags;
+
+ let tags = values?.['registered-tags'] ?? '';
+ return Proxmox.panel.InputPanel.prototype.setValues.call(this, { tags });
+ },
+ onGetValues: function(values) {
+ return {
+ 'registered-tags': values,
+ };
+ },
+ items: [
+ {
+ name: 'tags',
+ xtype: 'pveListField',
+ emptyText: gettext('No Tags defined'),
+ fieldTitle: gettext('Tag'),
+ maskRe: PVE.Utils.tagCharRegex,
+ height: 200,
+ scrollable: true,
+ listeners: {
+ change: 'tagChange',
+ },
+ },
+ {
+ hidden: true,
+ xtype: 'displayfield',
+ reference: 'hintField',
+ userCls: 'pmx-hint',
+ },
+ ],
+ },
+ ],
+});
diff --git a/www/manager6/dc/UserTagAccessEdit.js b/www/manager6/dc/UserTagAccessEdit.js
new file mode 100644
index 000000000..701d1de4f
--- /dev/null
+++ b/www/manager6/dc/UserTagAccessEdit.js
@@ -0,0 +1,90 @@
+Ext.define('PVE.dc.UserTagAccessEdit', {
+ extend: 'Proxmox.window.Edit',
+ alias: 'widget.pveUserTagAccessEdit',
+
+ subject: gettext('User Tag Access'),
+ onlineHelp: 'datacenter_configuration_file',
+
+ url: '/api2/extjs/cluster/options',
+
+ hintText: gettext('NOTE: The following tags are also defined as registered tags.'),
+
+ controller: {
+ xclass: 'Ext.app.ViewController',
+
+ tagChange: function(field, value) {
+ let me = this;
+ let view = me.getView();
+ let also_registered = [];
+ value = Ext.isArray(value) ? value : value.split(';');
+ value.forEach(tag => {
+ if (view.registered_tags.indexOf(tag) !== -1) {
+ also_registered.push(tag);
+ }
+ });
+ let hint_field = me.lookup('hintField');
+ hint_field.setVisible(also_registered.length > 0);
+ if (also_registered.length > 0) {
+ hint_field.setValue(`${view.hintText} ${also_registered.join(', ')}`);
+ }
+ },
+ },
+
+ items: [
+ {
+ xtype: 'inputpanel',
+ setValues: function(values) {
+ this.up('pveUserTagAccessEdit').registered_tags = values?.['registered-tags'] ?? [];
+ let data = values?.['user-tag-access'] ?? {};
+ return Proxmox.panel.InputPanel.prototype.setValues.call(this, data);
+ },
+ onGetValues: function(values) {
+ if (values === undefined || Object.keys(values).length === 0) {
+ return { 'delete': name };
+ }
+ return {
+ 'user-tag-access': PVE.Parser.printPropertyString(values),
+ };
+ },
+ items: [
+ {
+ name: 'user-allow',
+ fieldLabel: gettext('Mode'),
+ xtype: 'proxmoxKVComboBox',
+ deleteEmpty: false,
+ value: '__default__',
+ comboItems: [
+ ['__default__', Proxmox.Utils.defaultText + ' (free)'],
+ ['free', 'free'],
+ ['existing', 'existing'],
+ ['list', 'list'],
+ ['none', 'none'],
+ ],
+ defaultValue: '__default__',
+ },
+ {
+ xtype: 'displayfield',
+ fieldLabel: gettext('Predefined Tags'),
+ },
+ {
+ name: 'user-allow-list',
+ xtype: 'pveListField',
+ emptyText: gettext('No Tags defined'),
+ fieldTitle: gettext('Tag'),
+ maskRe: PVE.Utils.tagCharRegex,
+ height: 200,
+ scrollable: true,
+ listeners: {
+ change: 'tagChange',
+ },
+ },
+ {
+ hidden: true,
+ xtype: 'displayfield',
+ reference: 'hintField',
+ userCls: 'pmx-hint',
+ },
+ ],
+ },
+ ],
+});
--
2.30.2
next prev parent reply other threads:[~2022-11-16 15:49 UTC|newest]
Thread overview: 25+ messages / expand[flat|nested] mbox.gz Atom feed top
2022-11-16 15:47 [pve-devel] [PATCH cluster/guest-common/qemu-server/ct/manager v11] add tags to ui Dominik Csapak
2022-11-16 15:47 ` [pve-devel] [PATCH cluster v11 1/5] add CFS_IPC_GET_GUEST_CONFIG_PROPERTIES method Dominik Csapak
2022-11-16 15:47 ` [pve-devel] [PATCH cluster v11 2/5] Cluster: add get_guest_config_properties Dominik Csapak
2022-11-16 15:47 ` [pve-devel] [PATCH cluster v11 3/5] datacenter.cfg: add option for tag-style Dominik Csapak
2022-11-16 15:47 ` [pve-devel] [PATCH cluster v11 4/5] datacenter.cfg: add tag rights control to the datacenter config Dominik Csapak
2022-11-16 15:47 ` [pve-devel] [PATCH cluster v11 5/5] datacenter.cfg: add 'ordering' to 'tag-style' config Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH guest-common v11 1/1] GuestHelpers: add tag related helpers Dominik Csapak
2022-11-17 12:12 ` [pve-devel] applied: " Thomas Lamprecht
2022-11-16 15:48 ` [pve-devel] [PATCH qemu-server v11 1/1] api: update: check for tags permissions with 'assert_tag_permissions' Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH container v11 1/1] check_ct_modify_config_perm: " Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 01/13] api: /cluster/resources: add tags to returned properties Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 02/13] api: allow all users to (partially) read datacenter.cfg Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 03/13] ui: save ui options from /cluster/options instead of version Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 04/13] ui: parse and save tag infos from /cluster/options Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 05/13] ui: add form/TagColorGrid Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 06/13] ui: add PVE.form.ListField Dominik Csapak
2022-11-16 15:48 ` Dominik Csapak [this message]
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 08/13] ui: add form/Tag Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 09/13] ui: add form/TagEdit.js Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 10/13] ui: {lxc, qemu}/Config: show Tags and make them editable Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 11/13] ui: tree/ResourceTree: show Tags in tree Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 12/13] ui: add tags to ResourceGrid and GlobalSearchField Dominik Csapak
2022-11-16 15:48 ` [pve-devel] [PATCH manager v11 13/13] ui: implement tag ordering from datacenter.cfg Dominik Csapak
2022-11-17 10:18 ` [pve-devel] partially-applied: [PATCH cluster/guest-common/qemu-server/ct/manager v11] add tags to ui Thomas Lamprecht
2022-11-17 17:22 ` [pve-devel] applied: " Thomas Lamprecht
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=20221116154815.358385-16-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 a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox