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 <d.csapak@proxmox.com>
Tested-by: Stoiko Ivanov <s.ivanov@proxmox.com>

diff --git a/js/Makefile b/js/Makefile
index 5f57e0d720e3935e3fe6714cd9108ee770d2b7bd..2fb7d19b5f6d5705efeeb0dd16d4422de8ae8828 100644 (file)
--- 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 387fd5461c2c846341a926e21e8c765d31a02cf4..214e6419f92b1c7d32cd2c69d1e9c3a2e5fb7e98 100644 (file)
--- 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 = '<b>' + Ext.String.htmlEncode(me.ogdata.name) + '</b>';
            html += "<br><br>";
@@ -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: `<b>${gettext("Match if")}</b>`,
+                       },
+                       {
+                           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 1d728510a14d0b40d065aef71540c8fe1afc090e..eb80032dae953f3480622cea5428da8f1249a859 100644 (file)
--- 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 404c43726953a7481128208ef71147a537025417..12c9dcb713962a93c2c44aba120f9092b59c94eb 100644 (file)
--- 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 (file)
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')],
+    ],
+});