[pmg-devel] [PATCH pmg-gui v3 0/3] implement and combination and inversion of groups and objects

[pmg-devel] [PATCH pmg-gui v3 0/3] implement and combination and inversion of groups and objects

[Dominik Csapak]

since the rest got applied, the new version of the ui part

note that patch 3 is intended to be an alternative way of handling the
update of the object list when the mode changes. so if desired can be
squashed in with patch 2 (needs then the commit message adapted)

alternatively it can simply be left out

changes from v2:
* left out applied patches
* added padding in the RuleInfo panel for type groupings
* fixed a bug with deletion
* incoroporated thomas' suggestions

changes from v1:
* rebase on master
* include new tables in cluster sync + backup
* incorporate stoikos feedback
* improved commit messages
more details in the relevant patches

changes from rfc:
* added docs + gui
* some minor bugfixes
* fixed the api (forgot to add the info to the GET calls in rfc)
* changed output for `pmgdb dump` so we get that info in the pmgreport too

Dominik Csapak (3):
  rules: use tree panel instead of grouping feature of the grid
  rules/objects: add mode selector dropdown
  objects: don't reload on match mode change

 css/ext6-pmg.css               |  11 ++++
 js/Makefile                    |   1 +
 js/ObjectGroup.js              |  72 ++++++++++++++++++++++-
 js/ObjectGroupConfiguration.js |   7 +++
 js/RuleInfo.js                 | 102 ++++++++++++++++++++++++++-------
 js/form/MatchModeSelector.js   |  11 ++++
 6 files changed, 181 insertions(+), 23 deletions(-)
 create mode 100644 js/form/MatchModeSelector.js

-- 
2.30.2

[pmg-devel] [PATCH pmg-gui v3 1/3] rules: use tree panel instead of grouping feature of the grid

[Dominik Csapak]

just in preparation for adding a column for the groups
will look similar (though not identical) to before, but this makes
the groups now real entries in the grid, which means we can have
content in additional columns

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 css/ext6-pmg.css | 11 +++++++++
 js/RuleInfo.js   | 60 +++++++++++++++++++++++++++++++-----------------
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
index 2f999f4..5d28728 100644
--- a/css/ext6-pmg.css
+++ b/css/ext6-pmg.css
@@ -263,3 +263,14 @@ a.download {
     color: inherit;
     text-decoration: none;
 }
+
+.pmx-rule-tree .x-tree-icon,
+.pmx-rule-tree .x-tree-elbow,
+.pmx-rule-tree .x-tree-elbow-end {
+    display: none;
+    width: 0px;
+}
+
+.pmx-type-row td {
+    padding: 3px;
+}
diff --git a/js/RuleInfo.js b/js/RuleInfo.js
index 8f39695..404c437 100644
--- a/js/RuleInfo.js
+++ b/js/RuleInfo.js
@@ -88,7 +88,11 @@ Ext.define('PMG.RuleInfo', {
 	    } else {
 		viewmodel.set('selectedRule', ruledata);
 
-		var data = [];
+		let data = {
+		    leaf: false,
+		    expanded: true,
+		    children: [],
+		};
 		Ext.Array.each(['from', 'to', 'when', 'what', 'action'], function(oc) {
 		    var store = viewmodel.get(oc + 'objects');
 		    if (ruledata[oc] === undefined || store === undefined) { return; }
@@ -111,12 +115,25 @@ Ext.define('PMG.RuleInfo', {
 			},
 		    });
 		    store.load();
+
+		    let group = {
+			name: oc,
+			oclass: oc,
+			type: true,
+			leaf: false,
+			expanded: true,
+			expandable: false,
+			children: [],
+		    };
 		    Ext.Array.each(ruledata[oc], function(og) {
-			data.push({ oclass: oc, name: og.name, typeid: og.id });
+			group.children.push({ oclass: oc, name: og.name, typeid: og.id, leaf: true });
 		    });
-		});
 
-		viewmodel.get('objects').setData(data);
+		    if (group.children.length) {
+			data.children.push(group);
+		    }
+		});
+		viewmodel.get('objects').setRoot(data);
 	    }
 	},
 
@@ -146,7 +163,7 @@ Ext.define('PMG.RuleInfo', {
 	},
 
 	control: {
-	    'grid[reference=usedobjects]': {
+	    'treepanel[reference=usedobjects]': {
 		drop: 'addDrop',
 	    },
 	    'tabpanel[reference=availobjects] > grid': {
@@ -162,6 +179,7 @@ Ext.define('PMG.RuleInfo', {
 
 	stores: {
 	    objects: {
+		type: 'tree',
 		fields: ['oclass', 'name', 'typeid'],
 		groupField: 'oclass',
 		sorters: 'name',
@@ -252,23 +270,19 @@ Ext.define('PMG.RuleInfo', {
 	    ],
 	},
 	{
-	    xtype: 'grid',
+	    xtype: 'treepanel',
 	    reference: 'usedobjects',
 	    hidden: true,
 	    emptyText: gettext('No Objects'),
-	    features: [{
-		id: 'group',
-		ftype: 'grouping',
-		enableGroupingMenu: false,
-		collapsible: false,
-		groupHeaderTpl: [
-		    '{[PMG.Utils.format_oclass(values.name)]}',
-		],
-	    }],
 
 	    title: gettext('Used Objects'),
+	    rootVisible: false,
+	    useArrows: true,
+	    rowLines: true,
+	    userCls: 'pmx-rule-tree',
 
 	    viewConfig: {
+		getRowClass: record => record.data.type ? 'pmx-type-row' : '',
 		plugins: {
 		    ptype: 'gridviewdragdrop',
 		    copy: true,
@@ -285,14 +299,17 @@ Ext.define('PMG.RuleInfo', {
 	    },
 
 	    columns: [
-		{
-		    header: gettext('Type'),
-		    dataIndex: 'oclass',
-		    hidden: true,
-		},
 		{
 		    header: gettext('Name'),
 		    dataIndex: 'name',
+		    xtype: 'treecolumn',
+		    renderer: PMG.Utils.format_oclass,
+		    sorter: function(a, b) {
+			if (a.data.type && b.data.type) {
+			    return a.data.oclass.localeCompare(b.data.oclass);
+			}
+			return a.data.text.localeCompare(b.data.text);
+		    },
 		    flex: 1,
 		},
 		{
@@ -302,8 +319,9 @@ Ext.define('PMG.RuleInfo', {
 		    width: 40,
 		    items: [
 			{
-			    iconCls: 'fa fa-fw fa-minus-circle',
 			    tooltip: gettext('Remove'),
+			    isActionDisabled: (v, rI, cI, i, rec) => rec.data.type,
+			    getClass: (v, mD, { data }) => data.type ? 'pmx-hidden' : 'fa fa-fw fa-minus-circle',
 			    handler: 'removeIconClick',
 			},
 		    ],
-- 
2.30.2

[pmg-devel] [PATCH pmg-gui v3 2/3] rules/objects: add mode selector dropdown

[Dominik Csapak]

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>
---
 js/Makefile                    |  1 +
 js/ObjectGroup.js              | 68 +++++++++++++++++++++++++++++++++-
 js/ObjectGroupConfiguration.js |  2 +
 js/RuleInfo.js                 | 42 +++++++++++++++++++++
 js/form/MatchModeSelector.js   | 11 ++++++
 5 files changed, 122 insertions(+), 2 deletions(-)
 create mode 100644 js/form/MatchModeSelector.js

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 = '<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 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')],
+    ],
+});
-- 
2.30.2

[pmg-devel] [PATCH pmg-gui v3 3/3] objects: don't reload on match mode change

[Dominik Csapak]

instead update the record of the object list, and update the visibility
of the 'whatWarning'

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 js/ObjectGroup.js              | 6 +++++-
 js/ObjectGroupConfiguration.js | 7 ++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/js/ObjectGroup.js b/js/ObjectGroup.js
index 214e641..d72d47c 100644
--- a/js/ObjectGroup.js
+++ b/js/ObjectGroup.js
@@ -263,7 +263,11 @@ Ext.define('PMG.ObjectGroup', {
 					    and,
 					    invert,
 					},
-					success: () => me.fireEvent('modeUpdate', me),
+					success: () => {
+					    me.fireEvent('modeUpdate', me, !!and, !!invert);
+					    me.down('#whatWarning')
+						.setHidden(me.objectClass !== 'what' || value === 'any');
+					},
 				    });
 				},
 			    },
diff --git a/js/ObjectGroupConfiguration.js b/js/ObjectGroupConfiguration.js
index eb80032..d22c60d 100644
--- a/js/ObjectGroupConfiguration.js
+++ b/js/ObjectGroupConfiguration.js
@@ -41,7 +41,12 @@ Ext.define('PMG.ObjectGroupConfiguration', {
 			left.run_editor();
 		    }
 		},
-		modeUpdate: () => left.reload(),
+		modeUpdate: (_cmp, and, invert) => {
+		    let rec = left.selModel.getSelection()[0];
+		    rec.set('and', and);
+		    rec.set('invert', invert);
+		    rec.commit();
+		},
 	    },
 	});
 
-- 
2.30.2

Re: [pmg-devel] [PATCH pmg-gui v3 0/3] implement and combination and inversion of groups and objects

[Stoiko Ivanov]

FWIW: applied it locally, gave it a spin, and verified that the
deletion-bug is gone! 

Thanks for the fast iteration!

On Thu, 22 Feb 2024 10:14:17 +0100
Dominik Csapak <d.csapak@proxmox.com> wrote:

> since the rest got applied, the new version of the ui part
> 
> note that patch 3 is intended to be an alternative way of handling the
> update of the object list when the mode changes. so if desired can be
> squashed in with patch 2 (needs then the commit message adapted)
> 
> alternatively it can simply be left out
> 
> changes from v2:
> * left out applied patches
> * added padding in the RuleInfo panel for type groupings
> * fixed a bug with deletion
> * incoroporated thomas' suggestions
> 
> changes from v1:
> * rebase on master
> * include new tables in cluster sync + backup
> * incorporate stoikos feedback
> * improved commit messages
> more details in the relevant patches
> 
> changes from rfc:
> * added docs + gui
> * some minor bugfixes
> * fixed the api (forgot to add the info to the GET calls in rfc)
> * changed output for `pmgdb dump` so we get that info in the pmgreport too
> 
> Dominik Csapak (3):
>   rules: use tree panel instead of grouping feature of the grid
>   rules/objects: add mode selector dropdown
>   objects: don't reload on match mode change
> 
>  css/ext6-pmg.css               |  11 ++++
>  js/Makefile                    |   1 +
>  js/ObjectGroup.js              |  72 ++++++++++++++++++++++-
>  js/ObjectGroupConfiguration.js |   7 +++
>  js/RuleInfo.js                 | 102 ++++++++++++++++++++++++++-------
>  js/form/MatchModeSelector.js   |  11 ++++
>  6 files changed, 181 insertions(+), 23 deletions(-)
>  create mode 100644 js/form/MatchModeSelector.js
> 

Re: [pmg-devel] [PATCH pmg-gui v3 0/3] implement and combination and inversion of groups and objects

[Thomas Lamprecht]

Am 22/02/2024 um 14:19 schrieb Stoiko Ivanov:
> FWIW: applied it locally, gave it a spin, and verified that the
> deletion-bug is gone! 
> 
> Thanks for the fast iteration!

Can I assume a T-b and/or R-b from that?

Re: [pmg-devel] [PATCH pmg-gui v3 0/3] implement and combination and inversion of groups and objects

[Stoiko Ivanov]

On Thu, 22 Feb 2024 14:26:52 +0100
Thomas Lamprecht <t.lamprecht@proxmox.com> wrote:

> Am 22/02/2024 um 14:19 schrieb Stoiko Ivanov:
> > FWIW: applied it locally, gave it a spin, and verified that the
> > deletion-bug is gone! 
> > 
> > Thanks for the fast iteration!  
> 
> Can I assume a T-b and/or R-b from that?
T-b - yes definitely
R-b - my javascript-skills are usually limited to asking Dominik how to do
certain thing in our gui-code - so the value of my review might be limited
- but - yes - it looks good to me

[pmg-devel] applied: [PATCH pmg-gui v3 0/3] implement and combination and inversion of groups and objects

[Thomas Lamprecht]

Am 22/02/2024 um 10:14 schrieb Dominik Csapak:
> since the rest got applied, the new version of the ui part
> 
> note that patch 3 is intended to be an alternative way of handling the
> update of the object list when the mode changes. so if desired can be
> squashed in with patch 2 (needs then the commit message adapted)
> 
> alternatively it can simply be left out
> 
> changes from v2:
> * left out applied patches
> * added padding in the RuleInfo panel for type groupings
> * fixed a bug with deletion
> * incoroporated thomas' suggestions
> 
> changes from v1:
> * rebase on master
> * include new tables in cluster sync + backup
> * incorporate stoikos feedback
> * improved commit messages
> more details in the relevant patches
> 
> changes from rfc:
> * added docs + gui
> * some minor bugfixes
> * fixed the api (forgot to add the info to the GET calls in rfc)
> * changed output for `pmgdb dump` so we get that info in the pmgreport too
> 
> Dominik Csapak (3):
>   rules: use tree panel instead of grouping feature of the grid
>   rules/objects: add mode selector dropdown
>   objects: don't reload on match mode change
> 
>  css/ext6-pmg.css               |  11 ++++
>  js/Makefile                    |   1 +
>  js/ObjectGroup.js              |  72 ++++++++++++++++++++++-
>  js/ObjectGroupConfiguration.js |   7 +++
>  js/RuleInfo.js                 | 102 ++++++++++++++++++++++++++-------
>  js/form/MatchModeSelector.js   |  11 ++++
>  6 files changed, 181 insertions(+), 23 deletions(-)
>  create mode 100644 js/form/MatchModeSelector.js
> 


applied series, with a T-b from Stoiko added, thanks!

for the record: depending on browser and font setup the object edit pane
on the right might lacks some distinction, as the <b> tag might not make
the font use boldface.

But that's a small UX/style hiccup, so either fine to fix afterwards, or
maybe it's really just my local browser+font combination.