public inbox for pmg-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Leo Nunner <l.nunner@proxmox.com>
To: pmg-devel@lists.proxmox.com
Subject: [pmg-devel] [PATCH WIP gui 2/2] introduce logical 'and' for rules
Date: Thu, 14 Sep 2023 11:52:34 +0200	[thread overview]
Message-ID: <20230914095234.115469-14-l.nunner@proxmox.com> (raw)
In-Reply-To: <20230914095234.115469-1-l.nunner@proxmox.com>

Rework the rule info view, which is now displayed as a tree structure.
The first level of objects gets connected via logical 'OR'. The match
group subfolders are for objects that get connected via logical 'AND',
meaning that all objects inside a match group need to match. Match
groups are connected via logical 'OR' to all other top-level objects
inside the rule.

New match groups can be added via the newly introduced 'Add Match Group'
Button, which brings up a menu where one can enter the name and object
type of the new match group. Match groups can only be deleted if they
contain no other objects.

The drag and drop behaviour is the same as before, with the addition of
more specific actions: objects can be dragged into/out of the match
group folders, and can also be dragged directly from the 'Available
Objects' table into their respective match groups.

Signed-off-by: Leo Nunner <l.nunner@proxmox.com>
---
 css/ext6-pmg.css |  20 +++
 js/RuleInfo.js   | 418 +++++++++++++++++++++++++++++++++++++----------
 js/Utils.js      |  14 +-
 3 files changed, 363 insertions(+), 89 deletions(-)

diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
index 2f999f4..ac66f0f 100644
--- a/css/ext6-pmg.css
+++ b/css/ext6-pmg.css
@@ -96,6 +96,12 @@
     content: "\f115";
 }
 
+.x-tree-icon-custom {
+    line-height: 1.6em;
+    color: #555;
+    margin-right: 5px;
+}
+
 /* loading in task list */
 .x-grid-row-loading {
     background: no-repeat center center;
@@ -134,6 +140,20 @@ div.inline-block {
     cursor: pointer;
 }
 
+.grabbable {
+    cursor: move; /* fallback if grab cursor is unsupported */
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+}
+
+ /* (Optional) Apply a "closed-hand" cursor during drag operation. */
+.grabbable:active {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+}
+
 .x-grid-filters-filtered-column{
     font-style: italic;
     font-weight: bold;
diff --git a/js/RuleInfo.js b/js/RuleInfo.js
index 4e3bad7..445bbac 100644
--- a/js/RuleInfo.js
+++ b/js/RuleInfo.js
@@ -1,3 +1,37 @@
+Ext.define('PMG.window.MatchGroupEdit', {
+    extend: 'Proxmox.window.Edit',
+
+    width: 300,
+    subject: gettext('Match Group'),
+    isCreate: true,
+    method: 'POST',
+
+    initComponent: function() {
+	var me = this;
+	me.callParent();
+    },
+
+    items: [
+	{
+	    xtype: 'proxmoxtextfield',
+	    name: 'name',
+	    fieldLabel: gettext('Name'),
+	},
+	{
+	    xtype: 'proxmoxKVComboBox',
+	    fieldLabel: gettext('Object type') + ':',
+	    labelWidth: 150,
+	    name: 'class',
+	    comboItems: [
+		['from', 'From'],
+		['to', 'To'],
+		['when', 'When'],
+		['what', 'What'],
+	    ],
+	},
+    ],
+});
+
 Ext.define('PMG.RuleInfo', {
     extend: 'Ext.panel.Panel',
     xtype: 'pmgRuleInfo',
@@ -33,6 +67,144 @@ Ext.define('PMG.RuleInfo', {
 	    });
 	},
 
+	renderUsedObjects: function(v) {
+	    let me = this;
+
+	    me.usedDragZone = new Ext.dd.DragZone(v.getEl(), {
+		getDragData: function(e) {
+		    var sourceEl = e.getTarget(".x-grid-item", 10);
+
+		    if (sourceEl) {
+			let record = v.getView().getRecord(sourceEl);
+
+			let ddel = document.createElement('div');
+			ddel.innerHTML = record.data.name;
+			ddel.id = Ext.id();
+
+			return {
+			    ddel: ddel,
+			    repairXY: Ext.fly(sourceEl).getXY(),
+			    record: record,
+			};
+		    }
+
+		    return null;
+		},
+
+		getRepairXY: function() {
+		    return this.dragData.repairXY;
+		},
+
+		onBeforeDrag: function(source, e) {
+		    return source.record.data.leaf;
+		},
+	    });
+
+	    me.usedDropZone = new Ext.dd.DropZone(v.getEl(), {
+		getTargetFromEvent: function(e) {
+		    var sourceEl = e.getTarget(".x-grid-item", 10);
+		    return sourceEl ? v.getView().getRecord(sourceEl) : null;
+		},
+
+		onNodeOver: function(target, dd, e, source) {
+		    if (source.add) return Ext.dd.DropZone.prototype.dropAllowed;
+		    if (source.record.data.oclass === 'action') return Ext.dd.DropZone.prototype.dropNotAllowed;
+
+		    if (source.record.data.oclass === target.data.oclass &&
+			target.data.leaf === false) {
+			return Ext.dd.DropZone.prototype.dropAllowed;
+		    } else {
+			return Ext.dd.DropZone.prototype.dropNotAllowed;
+		    }
+		},
+
+		onNodeDrop: function(target, dd, e, source) {
+		    if (source.record.data.oclass === 'action') return false;
+
+		    // First, do we want to add a new object?
+		    if (source.add) {
+			let group = target.data.name !== PMG.Utils.oclass_text[source.type]
+			    ? target.data.typeid : 0;
+			me.addObjectGroup(source.type, source.record, group);
+			return true;
+		    }
+
+		    // Otherwise, update an existing one
+		    if (source.record.data.oclass !== target.data.oclass ||
+			target.data.leaf) {
+			return false;
+		    }
+
+		    let record = source.record;
+
+		    if (target.data.name !== PMG.Utils.oclass_text[record.data.oclass]) {
+			if (record.data.group) return false;
+
+			me.updateRecordMatchAll(record, target.data.typeid);
+		    } else {
+			me.updateRecordMatchAll(record, 0);
+		    }
+
+		    return true;
+		},
+	    });
+	},
+
+	renderAvailObjects: function(v) {
+	    let me = this;
+
+	    me.availDragZone = new Ext.dd.DragZone(v.getEl(), {
+		getDragData: function(e) {
+		    var sourceEl = e.getTarget(".x-grid-item", 10);
+
+		    if (sourceEl) {
+			let tab = v.getActiveTab();
+			let record = tab.getView().getRecord(sourceEl);
+
+			let ddel = document.createElement('div');
+			ddel.innerHTML = record.data.name;
+			ddel.id = Ext.id();
+
+			return {
+			    ddel: ddel,
+			    repairXY: Ext.fly(sourceEl).getXY(),
+			    record: record,
+			    add: true,
+			    type: tab.type,
+			};
+		    }
+
+		    return null;
+		},
+
+		getRepairXY: function() {
+		    return this.dragData.repairXY;
+		},
+	    });
+
+	    me.availDropZone = new Ext.dd.DropZone(v.getEl(), {
+		getTargetFromEvent: function(e) {
+		    var sourceEl = e.getTarget(".x-grid-item", 10);
+		    let tab = v.getActiveTab();
+		    return sourceEl ? tab.getView().getRecord(sourceEl) : null;
+		},
+
+		onNodeOver: function(target, dd, e, source) {
+		    if (source.add) {
+			return Ext.dd.DropZone.prototype.dropNotAllowed;
+		    } else {
+			return Ext.dd.DropZone.prototype.dropAllowed;
+		    }
+		},
+
+		onNodeDrop: function(target, dd, e, source) {
+		    if (source.add) return false;
+		    me.removeObjectGroup(source.record);
+		    return true;
+		},
+	    });
+	},
+
 	removeObjectGroup: function(rec) {
 	    var me = this;
 	    Ext.Msg.confirm(
@@ -58,6 +230,31 @@ Ext.define('PMG.RuleInfo', {
 	    );
 	},
 
+	removeMatchGroup: function(rec) {
+	    var me = this;
+	    Ext.Msg.confirm(
+		gettext('Confirm'),
+		Ext.String.format(
+		    gettext('Are you sure you want to remove match group {0}'),
+		    "'" + rec.data.name + "'"),
+		function(button) {
+		    if (button === 'yes') {
+			Proxmox.Utils.API2Request({
+			    url: me.getViewModel().get('baseurl') + '/matchgroup?group=' + rec.data.typeid,
+			    method: 'DELETE',
+			    waitMsgTarget: me.getView(),
+			    callback: function() {
+				me.reload();
+			    },
+			    failure: function(response, opts) {
+				Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+			    },
+			});
+		    }
+		},
+	    );
+	},
+
 	updateNegateObjectGroup: function(rec) {
 	    var me = this;
 	    Proxmox.Utils.API2Request({
@@ -74,14 +271,34 @@ Ext.define('PMG.RuleInfo', {
 	    });
 	},
 
-	addObjectGroup: function(type, record) {
+	updateRecordMatchAll: function(rec, val) {
+	    var me = this;
+	    Proxmox.Utils.API2Request({
+		url: me.getViewModel().get('baseurl') + '/' + rec.data.oclass + '/'+ rec.data.typeid,
+		method: 'PUT',
+		params: { group: val },
+		waitMsgTarget: me.getView(),
+		callback: function() {
+		    me.reload();
+		},
+		failure: function(response, opts) {
+		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+		},
+	    });
+	},
+
+	addObjectGroup: function(type, record, group, negate) {
 	    var me = this;
 	    var baseurl = me.getViewModel().get('baseurl');
 	    var url = baseurl + '/' + type;
 	    var id = type === 'action'?record.data.ogroup:record.data.id;
 	    Proxmox.Utils.API2Request({
 		url: url,
-		params: { ogroup: id },
+		params: {
+		    ogroup: id,
+		    group: group,
+		    negate: negate ? 1: 0,
+		},
 		method: 'POST',
 		waitMsgTarget: me.getView(),
 		callback: function() {
@@ -104,7 +321,23 @@ Ext.define('PMG.RuleInfo', {
 	    } else {
 		viewmodel.set('selectedRule', ruledata);
 
-		var data = [];
+		var root = { expanded: true, children: [] };
+
+		var matchgroups = { 'from': [], 'to': [], 'when': [], 'what': [], 'action': [] };
+
+		// first we create all match groups
+		Ext.Array.each(ruledata.match, function(og) {
+		    var entry = {
+			oclass: og.class,
+			name: og.name,
+			typeid: og.id,
+			leaf: false,
+			iconCls: 'fa fa-folder',
+			children: [],
+		    };
+		    matchgroups[og.class].push(entry);
+		});
+
 		Ext.Array.each(['from', 'to', 'when', 'what', 'action'], function(oc) {
 		    var store = viewmodel.get(oc + 'objects');
 		    if (ruledata[oc] === undefined || store === undefined) { return; }
@@ -127,18 +360,60 @@ Ext.define('PMG.RuleInfo', {
 			},
 		    });
 		    store.load();
+
+		    var child = {
+			name: PMG.Utils.oclass_text[oc],
+			oclass: oc,
+			iconCls: PMG.Utils.oclass_icon[oc],
+			children: [],
+			leaf: false,
+			expanded: true,
+		    };
+
 		    Ext.Array.each(ruledata[oc], function(og) {
-			data.push({ oclass: oc, name: og.name, typeid: og.id, negate: og.negate });
+			var entry = {
+			    oclass: oc,
+			    name: og.name,
+			    typeid: og.id,
+			    negate: og.negate,
+			    leaf: true,
+			    cls: 'grabbable',
+			    iconCls: PMG.Utils.oclass_icon[oc],
+			};
+
+			if (og.group) {
+			    var group_list = matchgroups[oc].find(x => x.typeid === og.group);
+			    if (group_list) {
+				group_list.children.push(entry);
+			    }
+			} else {
+			    child.children.push(entry);
+			}
 		    });
+
+		    // if (oc !== "action") child.children.push(group_list);
+
+		    Ext.Array.each(matchgroups[oc], function(og) {
+			og.expanded = og.children.length !== 0;
+			child.children.push(og);
+		    });
+
+		    child.expanded = child.children.length;
+
+		    root.children.push(child);
 		});
 
-		viewmodel.get('objects').setData(data);
+		viewmodel.get('objects').setRoot(root);
 	    }
 	},
 
 	removeIconClick: function(gridView, rowindex, colindex, button, event, record) {
 	    var me = this;
-	    me.removeObjectGroup(record);
+	    if (record.data.leaf) {
+		me.removeObjectGroup(record);
+	    } else {
+		me.removeMatchGroup(record);
+	    }
 	},
 
 	negateIconClick: function(gridView, rowindex, colindex, button, event, record) {
@@ -146,33 +421,21 @@ Ext.define('PMG.RuleInfo', {
 	    me.updateNegateObjectGroup(record);
 	},
 
-	removeDrop: function(gridView, data, overModel) {
-	    var me = this;
-	    var record = data.records[0]; // only one
-	    me.removeObjectGroup(record);
-	    return true;
-	},
-
 	addIconClick: function(gridView, rowindex, colindex, button, event, record) {
 	    var me = this;
-	    me.addObjectGroup(gridView.panel.type, record);
+	    me.addObjectGroup(gridView.panel.type, record, false, false);
 	    return true;
 	},
 
-	addDrop: function(gridView, data, overModel) {
+	addMatchGroupClick: function(gridView, rowindex, colindex, button, event, record) {
 	    var me = this;
-	    var record = data.records[0]; // only one
-	    me.addObjectGroup(data.view.panel.type, record);
-	    return true;
-	},
-
-	control: {
-	    'grid[reference=usedobjects]': {
-		drop: 'addDrop',
-	    },
-	    'tabpanel[reference=availobjects] > grid': {
-		drop: 'removeDrop',
-	    },
+	    var baseurl = me.getViewModel().get('baseurl');
+	    var win = Ext.create('PMG.window.MatchGroupEdit', {
+		url: baseurl + '/matchgroup',
+	    });
+	    win.show();
+	    // FIXME: reload not working right now
+	    win.on('destroy', me.reload);
 	},
     },
 
@@ -183,9 +446,10 @@ Ext.define('PMG.RuleInfo', {
 
 	stores: {
 	    objects: {
-		fields: ['oclass', 'name', 'typeid', 'negate'],
-		groupField: 'oclass',
+		fields: ['oclass', 'name', 'typeid', 'negate', 'group'],
 		sorters: 'name',
+		folderSort: true,
+		type: 'tree',
 	    },
 
 	    actionobjects: {
@@ -273,38 +537,14 @@ Ext.define('PMG.RuleInfo', {
 	    ],
 	},
 	{
-	    xtype: 'grid',
+	    xtype: 'treepanel',
 	    reference: 'usedobjects',
 	    hidden: true,
+	    rootVisible: false,
 	    emptyText: gettext('No Objects'),
-	    features: [{
-		id: 'group',
-		ftype: 'grouping',
-		enableGroupingMenu: false,
-		collapsible: false,
-		groupHeaderTpl: [
-		    '{[PMG.Utils.format_oclass(values.name)]}',
-		],
-	    }],
 
 	    title: gettext('Used Objects'),
 
-	    viewConfig: {
-		plugins: {
-		    ptype: 'gridviewdragdrop',
-		    copy: true,
-		    dragGroup: 'usedobjects',
-		    dropGroup: 'unusedobjects',
-
-		    // do not show default grid dragdrop behaviour
-		    dropZone: {
-			indicatorHtml: '',
-			indicatorCls: '',
-			handleNodeDrop: Ext.emptyFn,
-		    },
-		},
-	    },
-
 	    columns: [
 		{
 		    header: gettext('Type'),
@@ -314,6 +554,7 @@ Ext.define('PMG.RuleInfo', {
 		{
 		    header: gettext('Name'),
 		    dataIndex: 'name',
+		    xtype: 'treecolumn',
 		    renderer: function(value, data, record) {
 			return record.data.negate ? '<span style="color:gray">' + gettext("NOT") + ' </span>' + value : value;
 		    },
@@ -323,27 +564,32 @@ Ext.define('PMG.RuleInfo', {
 		    text: '',
 		    xtype: 'actioncolumn',
 		    align: 'center',
-		    width: 40,
+		    width: 80,
 		    items: [
 			{
 			    getClass: function(v, m, { data }) {
 				if (data.oclass === 'action') return '';
-				return 'fa fa-fw fa-refresh';
+				if (data.leaf) return 'fa fa-fw fa-refresh';
+				if (data.parentId !== 'root') return 'fa fa-fw fa-pencil-square-o';
+				return '';
 			    },
-			    isActionDisabled: (v, r, c, i, { data }) => data.oclass === 'action',
+			    isActionDisabled: (v, r, c, i, { data }) => !data.leaf || data.oclass === 'action',
 			    tooltip: gettext('Negate'),
 			    handler: 'negateIconClick',
 			},
-		    ],
-		},
-		{
-		    text: '',
-		    xtype: 'actioncolumn',
-		    align: 'center',
-		    width: 40,
-		    items: [
 			{
-			    iconCls: 'fa fa-fw fa-minus-circle',
+			    getClass: function(v, m, { data }) {
+				if (data.oclass === 'action') return '';
+				if (data.leaf) return 'fa fa-fw fa-minus-circle';
+				if (data.parentId !== 'root') return 'fa fa-fw fa-trash';
+				return '';
+			    },
+			    isActionDisabled: function(v, r, c, i, { data }) {
+				if (!data.leaf && data.parentId !== 'root') {
+				    return data.children.length !== 0;
+				}
+				return false;
+			    },
 			    tooltip: gettext('Remove'),
 			    handler: 'removeIconClick',
 			},
@@ -355,6 +601,24 @@ Ext.define('PMG.RuleInfo', {
 		store: '{objects}',
 		hidden: '{!selectedRule}',
 	    },
+
+	    listeners: {
+		render: "renderUsedObjects",
+	    },
+	},
+	{
+	    xtype: 'container',
+	    hidden: true,
+	    bind: {
+		hidden: '{!selectedRule}',
+	    },
+	    items: [
+		{
+		    xtype: 'button',
+		    text: gettext('Add Match Group'),
+		    handler: 'addMatchGroupClick',
+		},
+	    ],
 	},
 	{
 	    xtype: 'tabpanel',
@@ -367,23 +631,10 @@ Ext.define('PMG.RuleInfo', {
 	    defaults: {
 		xtype: 'grid',
 		emptyText: gettext('No Objects'),
-		viewConfig: {
-		    plugins: {
-			ptype: 'gridviewdragdrop',
-			dragGroup: 'unusedobjects',
-			dropGroup: 'usedobjects',
-
-			// do not show default grid dragdrop behaviour
-			dropZone: {
-			    indicatorHtml: '',
-			    indicatorCls: '',
-			    handleNodeDrop: Ext.emptyFn,
-			},
-		    },
-		},
 		columns: [
 		    {
 			header: gettext('Name'),
+			innerCls: 'grabbable',
 			dataIndex: 'name',
 			flex: 1,
 		    },
@@ -391,7 +642,7 @@ Ext.define('PMG.RuleInfo', {
 			text: '',
 			xtype: 'actioncolumn',
 			align: 'center',
-			width: 40,
+			width: 80,
 			items: [
 			    {
 				iconCls: 'fa fa-fw fa-plus-circle',
@@ -444,6 +695,9 @@ Ext.define('PMG.RuleInfo', {
 		    },
 		},
 	    ],
+	    listeners: {
+		render: "renderAvailObjects",
+	    },
 	},
     ],
 });
diff --git a/js/Utils.js b/js/Utils.js
index 7fa154e..2495f70 100644
--- a/js/Utils.js
+++ b/js/Utils.js
@@ -61,12 +61,12 @@ Ext.define('PMG.Utils', {
     },
 
     oclass_icon: {
-	who: '<span class="fa fa-fw fa-user-circle"></span> ',
-	what: '<span class="fa fa-fw fa-cube"></span> ',
-	when: '<span class="fa fa-fw fa-clock-o"></span> ',
-	action: '<span class="fa fa-fw fa-flag"></span> ',
-	from: '<span class="fa fa-fw fa-user-circle"></span> ',
-	to: '<span class="fa fa-fw fa-user-circle"></span> ',
+	who: 'fa fa-fw fa-user-circle',
+	what: 'fa fa-fw fa-cube',
+	when: 'fa fa-fw fa-clock-o',
+	action: 'fa fa-fw fa-flag',
+	from: 'fa fa-fw fa-user-circle',
+	to: 'fa fa-fw fa-user-circle',
     },
 
     mail_status_map: {
@@ -105,7 +105,7 @@ Ext.define('PMG.Utils', {
     },
 
     format_oclass: function(oclass) {
-	var icon = PMG.Utils.oclass_icon[oclass] || '';
+	var icon = '<span class="' + PMG.Utils.oclass_icon[oclass] + '"></span>' || '';
 	var text = PMG.Utils.oclass_text[oclass] || oclass;
 	return icon + text;
     },
-- 
2.39.2





      parent reply	other threads:[~2023-09-14  9:53 UTC|newest]

Thread overview: 14+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2023-09-14  9:52 [pmg-devel] [PATCH WIP api/gui] Extend rule system Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 01/11] negation: add field to database Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 02/11] negation: parse negation value into objects Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 03/11] negation: expand/implement API endpoints Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 04/11] negation: implement matching logic Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 05/11] match groups: update database schema Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 06/11] match groups: add functions for database access Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 07/11] match groups: parse field into objects Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 08/11] match groups: add API endpoints for create/delete Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 09/11] match groups: list match groups in rule API Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 10/11] match groups: update existing object API endpoints Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP api 11/11] match groups: implement matching logic Leo Nunner
2023-09-14  9:52 ` [pmg-devel] [PATCH WIP gui 1/2] negate objects inside rules Leo Nunner
2023-09-14  9:52 ` Leo Nunner [this message]

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20230914095234.115469-14-l.nunner@proxmox.com \
    --to=l.nunner@proxmox.com \
    --cc=pmg-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal