From: Dominik Csapak Date: Wed, 16 Nov 2022 15:48:09 +0000 (+0100) Subject: ui: dc/OptionView: add editors for tag settings X-Git-Url: https://git.proxmox.com/?p=pve-manager.git;a=commitdiff_plain;h=0a627d946878837d20959f65e84fc47d7e839a26 ui: dc/OptionView: add editors for tag settings namely for 'tag-tree-style' and 'tag-colors'. display the tag overrides directly as they will appear as tags Signed-off-by: Dominik Csapak --- diff --git a/www/manager6/Makefile b/www/manager6/Makefile index 83c2effc..2cbb65eb 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 2ff0fbd8..94075246 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 ff96351d..be9e2abb 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 00000000..92e076e0 --- /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 00000000..701d1de4 --- /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', + }, + ], + }, + ], +});