[pve-devel] [PATCH manager v11 07/13] ui: dc/OptionView: add editors for tag settings

[Dominik Csapak <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