From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 412EBC0DA for ; Thu, 14 Sep 2023 11:53:21 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 6EE8836C1F for ; Thu, 14 Sep 2023 11:52:55 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Thu, 14 Sep 2023 11:52:53 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id F35DC4729B for ; Thu, 14 Sep 2023 11:52:52 +0200 (CEST) From: Leo Nunner To: pmg-devel@lists.proxmox.com Date: Thu, 14 Sep 2023 11:52:34 +0200 Message-Id: <20230914095234.115469-14-l.nunner@proxmox.com> X-Mailer: git-send-email 2.39.2 In-Reply-To: <20230914095234.115469-1-l.nunner@proxmox.com> References: <20230914095234.115469-1-l.nunner@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.142 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment PROLO_LEO1 0.1 Meta Catches all Leo drug variations so far SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pmg-devel] [PATCH WIP gui 2/2] introduce logical 'and' for rules X-BeenThere: pmg-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Mail Gateway development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Thu, 14 Sep 2023 09:53:21 -0000 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 --- 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 ? '' + gettext("NOT") + ' ' + 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: ' ', - what: ' ', - when: ' ', - action: ' ', - from: ' ', - to: ' ', + 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 = '' || ''; var text = PMG.Utils.oclass_text[oclass] || oclass; return icon + text; }, -- 2.39.2