From: Dominik Csapak Date: Thu, 22 Feb 2024 09:14:19 +0000 (+0100) Subject: rules/objects: add mode selector dropdown X-Git-Url: https://git.proxmox.com/?p=pmg-gui.git;a=commitdiff_plain;h=e3c8d4fd638b8653a797c3a6659d0ad94c3b2a0e rules/objects: add mode selector dropdown for objects and object types in rules. We add a simple dropdown for the 'and' and 'invert' flags, to be somewhat consistent with the notification matchers from pve and to make the wording more clear than simple and/invert. For What matches add a special warning hint, since that behaves a bit special because of the mail parts. When the mode changes for an object group, we reload the list of objects since that holds the info about the attributes, so to avoid having to keep track in the gui which field changed on the group, we simply reload the list with the current information. Signed-off-by: Dominik Csapak Tested-by: Stoiko Ivanov --- diff --git a/js/Makefile b/js/Makefile index 5f57e0d..2fb7d19 100644 --- a/js/Makefile +++ b/js/Makefile @@ -3,6 +3,7 @@ include ../defines.mk JSSRC= \ Utils.js \ form/FilterField.js \ + form/MatchModeSelector.js \ FilterProxy.js \ LoginView.js \ RoleSelector.js \ diff --git a/js/ObjectGroup.js b/js/ObjectGroup.js index 387fd54..214e641 100644 --- a/js/ObjectGroup.js +++ b/js/ObjectGroup.js @@ -10,6 +10,7 @@ Ext.define('PMG.ObjectGroup', { showDirection: false, // only important for SMTP Whitelist ogdata: undefined, + objectClass: undefined, emptyText: gettext('Please select an object.'), @@ -32,10 +33,15 @@ Ext.define('PMG.ObjectGroup', { setObjectInfo: function(ogdata) { let me = this; + let mode = ogdata?.invert ? 'not' : ''; + mode += ogdata?.and ? 'all' : 'any'; + me.ogdata = ogdata; if (me.ogdata === undefined) { me.down('#oginfo').update(me.emptyText); + me.down('#modeBox').setHidden(true); + me.down('#whatWarning').setHidden(true); } else { let html = '' + Ext.String.htmlEncode(me.ogdata.name) + ''; html += "

"; @@ -43,6 +49,12 @@ Ext.define('PMG.ObjectGroup', { me.down('#oginfo').update(html); me.down('#ogdata').setHidden(false); + let modeSelector = me.down('#modeSelector'); + modeSelector.suspendEvents(); + me.down('#modeSelector').setValue(mode); + modeSelector.resumeEvents(); + me.down('#modeBox').setHidden(false); + me.down('#whatWarning').setHidden(me.objectClass !== 'what' || mode === 'any'); } }, @@ -216,13 +228,51 @@ Ext.define('PMG.ObjectGroup', { me.dockedItems.push({ dock: 'top', border: 1, - layout: 'anchor', + layout: 'hbox', hidden: !!me.hideGroupInfo, itemId: 'ogdata', items: [ + { + xtype: 'container', + itemId: 'modeBox', + hidden: true, + width: 220, + padding: 10, + layout: { + type: 'vbox', + align: 'stretch', + }, + items: [ + { + xtype: 'box', + html: `${gettext("Match if")}`, + }, + { + xtype: 'pmgMatchModeSelector', + itemId: 'modeSelector', + padding: '10 0 0 0', + listeners: { + change: function(_field, value) { + let invert = value.startsWith('not') ? 1 : 0; + let and = value.endsWith('all') ? 1 : 0; + + Proxmox.Utils.API2Request({ + url: `${me.baseurl}/config`, + method: 'PUT', + params: { + and, + invert, + }, + success: () => me.fireEvent('modeUpdate', me), + }); + }, + }, + }, + ], + }, { xtype: 'component', - anchor: '100%', + flex: 1, itemId: 'oginfo', style: { 'white-space': 'pre' }, padding: 10, @@ -241,6 +291,20 @@ Ext.define('PMG.ObjectGroup', { ], }); + me.dockedItems.push({ + dock: 'top', + border: 1, + hidden: true, + itemId: 'whatWarning', + bodyPadding: 5, + items: { + xtype: 'displayfield', + margin: 0, + value: gettext("Caution: 'What Objects' match each mail part separately, so be careful with any option besides 'Any matches'."), + userCls: 'pmx-hint', + }, + }); + Proxmox.Utils.monStoreErrors(me, me.store, true); Ext.apply(me, { diff --git a/js/ObjectGroupConfiguration.js b/js/ObjectGroupConfiguration.js index 1d72851..eb80032 100644 --- a/js/ObjectGroupConfiguration.js +++ b/js/ObjectGroupConfiguration.js @@ -30,6 +30,7 @@ Ext.define('PMG.ObjectGroupConfiguration', { var right = Ext.create('PMG.ObjectGroup', { otype_list: me.otype_list, + objectClass: me.ogclass, border: false, region: 'center', listeners: { @@ -40,6 +41,7 @@ Ext.define('PMG.ObjectGroupConfiguration', { left.run_editor(); } }, + modeUpdate: () => left.reload(), }, }); diff --git a/js/RuleInfo.js b/js/RuleInfo.js index 404c437..12c9dcb 100644 --- a/js/RuleInfo.js +++ b/js/RuleInfo.js @@ -120,6 +120,8 @@ Ext.define('PMG.RuleInfo', { name: oc, oclass: oc, type: true, + invert: ruledata[`${oc}-invert`], + and: ruledata[`${oc}-and`], leaf: false, expanded: true, expandable: false, @@ -162,6 +164,23 @@ Ext.define('PMG.RuleInfo', { return true; }, + updateMode: function(field, value) { + let me = this; + let vm = me.getViewModel(); + let oclass = field.getWidgetRecord().data.oclass; + + let params = {}; + params[`${oclass}-invert`] = value.startsWith('not') ? 1 : 0; + params[`${oclass}-and`] = value.endsWith('all') ? 1 : 0; + + Proxmox.Utils.API2Request({ + url: `${vm.get('baseurl')}/config`, + method: 'PUT', + params, + success: () => me.reload(), + }); + }, + control: { 'treepanel[reference=usedobjects]': { drop: 'addDrop', @@ -169,6 +188,9 @@ Ext.define('PMG.RuleInfo', { 'tabpanel[reference=availobjects] > grid': { drop: 'removeDrop', }, + 'pmgMatchModeSelector': { + change: 'updateMode', + }, }, }, @@ -312,6 +334,26 @@ Ext.define('PMG.RuleInfo', { }, flex: 1, }, + { + header: gettext('Match if'), + xtype: 'widgetcolumn', + width: 200, + widget: { + xtype: 'pmgMatchModeSelector', + }, + onWidgetAttach: function(col, widget, rec) { + if (rec.data.type && rec.data.oclass !== 'action') { + let mode = rec.data.invert ? 'not' : ''; + mode += rec.data.and ? 'all' : 'any'; + widget.suspendEvents(); + widget.setValue(mode); + widget.resumeEvents(); + widget.setHidden(false); + } else { + widget.setHidden(true); + } + }, + }, { text: '', xtype: 'actioncolumn', diff --git a/js/form/MatchModeSelector.js b/js/form/MatchModeSelector.js new file mode 100644 index 0000000..07f6e59 --- /dev/null +++ b/js/form/MatchModeSelector.js @@ -0,0 +1,11 @@ +Ext.define('PMG.MatchModeSelector', { + extend: 'Proxmox.form.KVComboBox', + alias: 'widget.pmgMatchModeSelector', + + comboItems: [ + ['all', gettext('All match')], + ['any', gettext('Any matches')], + ['notall', gettext('At least one does not match')], + ['notany', gettext('None matches')], + ], +});