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 <d.csapak@proxmox.com>

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 83c2effcf37d5423d68eefbc49dc12708410c84a..2cbb65eb5fb89dd2cbb733b348d2c6f9accd2e19 100644 (file)
--- 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 2ff0fbd81b8c3fc733f05c992bf5c4fe7e209e55..94075246919741dec93b723fe0d8853bb4829199 100644 (file)
--- 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 ff96351d5e9ebd874f364137bc422acd272ae533..be9e2abb25238404c85b51864f8b6673449aa78e 100644 (file)
--- 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 (file)
index 0000000..92e076e
--- /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 (file)
index 0000000..701d1de
--- /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',
+               },
+           ],
+       },
+    ],
+});