[pmg-devel] [PATCH pmg-gui 2/2] feature: introduce logical 'and' for rules

[Leo Nunner <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
subfolder 'Match group' is for objects that get connected via logical
'AND', meaning that all objects inside the 'Match group' folder need to
match. 'Match group' is also connected via logical 'OR' with all other
objects on the first level.

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' folder, and can also be dragged directly from the 'Available
Objects' table into their respective match group.

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

diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
index 2f999f4..9a8397d 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,10 @@ div.inline-block {
     cursor: pointer;
 }
 
+.move {
+    cursor: move;
+}
+
 .x-grid-filters-filtered-column{
     font-style: italic;
     font-weight: bold;
diff --git a/js/RuleInfo.js b/js/RuleInfo.js
index d14e229..a36ecda 100644
--- a/js/RuleInfo.js
+++ b/js/RuleInfo.js
@@ -33,6 +33,143 @@ 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 and = target.data.name !== PMG.Utils.oclass_text[source.type];
+			me.addObjectGroup(source.type, source.record, and);
+			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.and) return false;
+
+			me.updateRecordMatchAll(record, 1);
+		    } 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(
@@ -74,14 +211,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: { and: val },
+		waitMsgTarget: me.getView(),
+		callback: function() {
+		    me.reload();
+		},
+		failure: function(response, opts) {
+		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+		},
+	    });
+	},
+
+	addObjectGroup: function(type, record, and, 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,
+		    and: and ? 1 : 0,
+		    negate: negate ? 1: 0,
+		},
 		method: 'POST',
 		waitMsgTarget: me.getView(),
 		callback: function() {
@@ -105,7 +262,7 @@ Ext.define('PMG.RuleInfo', {
 		ruledata.name = Ext.String.htmlEncode(ruledata.name);
 		viewmodel.set('selectedRule', ruledata);
 
-		var data = [];
+		var root = { 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; }
@@ -128,12 +285,45 @@ 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,
+		    };
+
+		    var and_list = { name: "Match Group", oclass: oc, children: [] };
+
 		    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: 'move',
+			    iconCls: PMG.Utils.oclass_icon[oc],
+			};
+
+			if (og.and) {
+			    and_list.children.push(entry);
+			} else {
+			    child.children.push(entry);
+			}
 		    });
+
+		    child.expanded = child.children.length || and_list.children.length;
+		    and_list.expanded = and_list.children.length !== 0;
+
+		    if (oc !== "action") child.children.push(and_list);
+
+		    root.children.push(child);
 		});
 
-		viewmodel.get('objects').setData(data);
+		viewmodel.get('objects').setRoot(root);
 	    }
 	},
 
@@ -147,34 +337,17 @@ 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) {
+	addAndIconClick: function(gridView, rowindex, colindex, button, event, record) {
 	    var me = this;
-	    var record = data.records[0]; // only one
-	    me.addObjectGroup(data.view.panel.type, record);
+	    me.addObjectGroup(gridView.panel.type, record, true, false);
 	    return true;
 	},
-
-	control: {
-	    'grid[reference=usedobjects]': {
-		drop: 'addDrop',
-	    },
-	    'tabpanel[reference=availobjects] > grid': {
-		drop: 'removeDrop',
-	    },
-	},
     },
 
     viewModel: {
@@ -184,9 +357,10 @@ Ext.define('PMG.RuleInfo', {
 
 	stores: {
 	    objects: {
-		fields: ['oclass', 'name', 'typeid', 'negate'],
-		groupField: 'oclass',
+		fields: ['oclass', 'name', 'typeid', 'negate', 'and'],
 		sorters: 'name',
+		folderSort: true,
+		type: 'tree',
 	    },
 
 	    actionobjects: {
@@ -274,38 +448,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'),
@@ -315,6 +465,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;
 		    },
@@ -324,27 +475,20 @@ Ext.define('PMG.RuleInfo', {
 		    text: '',
 		    xtype: 'actioncolumn',
 		    align: 'center',
-		    width: 40,
+		    width: 80,
 		    items: [
 			{
 			    getClass: function(v, m, { data }) {
-				if (data.oclass === 'action') return '';
+				if (!data.leaf || data.oclass === 'action') return '';
 				return 'fa fa-fw fa-refresh';
 			    },
-			    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: (v, m, { data }) => data.leaf ? 'fa fa-fw fa-minus-circle' : '',
+			    isActionDisabled: (v, r, c, i, { data }) => !data.leaf,
 			    tooltip: gettext('Remove'),
 			    handler: 'removeIconClick',
 			},
@@ -356,6 +500,10 @@ Ext.define('PMG.RuleInfo', {
 		store: '{objects}',
 		hidden: '{!selectedRule}',
 	    },
+
+	    listeners: {
+		render: "renderUsedObjects",
+	    },
 	},
 	{
 	    xtype: 'tabpanel',
@@ -368,23 +516,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: 'move',
 			dataIndex: 'name',
 			flex: 1,
 		    },
@@ -392,8 +527,16 @@ Ext.define('PMG.RuleInfo', {
 			text: '',
 			xtype: 'actioncolumn',
 			align: 'center',
-			width: 40,
+			width: 80,
 			items: [
+			    {
+				iconCls: 'fa fa-fw fa-crosshairs',
+				isActionDisabled: function(v, r, c, i, { data }) {
+				    return v.up("tabpanel").getActiveTab().type === 'action';
+				},
+				tooltip: gettext('Add to AND list'),
+				handler: 'addAndIconClick',
+			    },
 			    {
 				iconCls: 'fa fa-fw fa-plus-circle',
 				tooltip: gettext('Add'),
@@ -445,6 +588,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.30.2