From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from gate001.proxmox.com (gate001.proxmox.com [IPv6:2a0f:8001:1:32::40]) by lore.proxmox.com (Postfix) with ESMTPS id 7036B1FF0E0 for ; Thu, 09 Jul 2026 14:02:44 +0200 (CEST) Received: from gate001.proxmox.com (localhost.localdomain [127.0.0.1]) by gate001.proxmox.com (Proxmox) with ESMTP id A764B21996; Thu, 09 Jul 2026 13:58:49 +0200 (CEST) From: Lukas Wagner To: pbs-devel@lists.proxmox.com, pve-devel@lists.proxmox.com Subject: [PATCH proxmox-widget-toolkit 17/29] notifications: matcher: add support for match expressions Date: Thu, 9 Jul 2026 13:57:04 +0200 Message-ID: <20260709115716.299836-18-l.wagner@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260709115716.299836-1-l.wagner@proxmox.com> References: <20260709115716.299836-1-l.wagner@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1783598239637 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.000 Adjusted score from AWL reputation of From: address DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment (newer systems) SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Message-ID-Hash: O4BOK632J36CJSI74IHFUE4J7KIIZL4G X-Message-ID-Hash: O4BOK632J36CJSI74IHFUE4J7KIIZL4G X-MailFrom: l.wagner@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Proxmox Backup Server development discussion List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: This patches changes to 'matcher edit window' to support the new 'expression' paramter in the matcher config. Instead of of flat 'match-*' configuration keys, 'expression' contains the match rules as a serialized JSON blob. This allows us to create arbitrarily nested match formulas. Support for match expressions has to be enabled via a feature flag. This avoids awkward versioned breaks between the widget toolkit package and the main product. The entire match rule panel has changed so much that copying the old component and using that as a base was deemed more useful than modifying the existing panel in-place. The old component can be removed once we have migrated all products to this new system. Signed-off-by: Lukas Wagner --- src/Makefile | 1 + src/Schema.js | 10 + src/css/ext6-pmx.css | 27 + .../NotificationMatchExpressionEditPanel.js | 786 ++++++++++++++++++ src/proxmox-dark/scss/extjs/_treepanel.scss | 5 + src/proxmox-dark/scss/proxmox/_general.scss | 4 + src/window/NotificationMatcherEdit.js | 13 +- 7 files changed, 841 insertions(+), 5 deletions(-) create mode 100644 src/panel/NotificationMatchExpressionEditPanel.js diff --git a/src/Makefile b/src/Makefile index 9c52339..f11716a 100644 --- a/src/Makefile +++ b/src/Makefile @@ -64,6 +64,7 @@ JSSRC= \ panel/LogView.js \ panel/NodeInfoRepoStatus.js \ panel/NotificationConfigView.js \ + panel/NotificationMatchExpressionEditPanel.js \ panel/JournalView.js \ panel/PermissionView.js \ panel/PruneKeepPanel.js \ diff --git a/src/Schema.js b/src/Schema.js index 5de3f53..e72d301 100644 --- a/src/Schema.js +++ b/src/Schema.js @@ -86,6 +86,16 @@ Ext.define('Proxmox.Schema', { } }, + notificationMatcherExpressions: false, + + notificationMatcherPanelType: function () { + if (Proxmox.Schema.notificationMatcherExpressions) { + return 'pmxNotificationMatchExpressionEditPanel'; + } else { + return 'pmxNotificationMatchRulesEditPanel'; + } + }, + pxarFileTypes: { b: { icon: 'cube', label: gettext('Block Device') }, c: { icon: 'tty', label: gettext('Character Device') }, diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css index 878dfa0..bf4ecd3 100644 --- a/src/css/ext6-pmx.css +++ b/src/css/ext6-pmx.css @@ -248,6 +248,29 @@ div.right-aligned { background-color: #f5f5f5; } +/* the small icons */ +.x-tree-icon-custom:after { + position: relative; + left: -5px; + top: 1px; + font-size: 0.75em; + text-shadow: -1px 0px 2px #fff; + content: "\ "; +} + +/* yellow ! triangle */ +.x-tree-icon-custom.internal-error:after { + content: "\f071"; + color: #ffcc00; +} + +.x-tree-node-text > code { + background-color: #f5f5f5; + border-radius: 4px; + padding: 4px; + font-size: 11px; +} + /* fix padding for legend in header */ .x-legend-inner { padding: 0; @@ -431,3 +454,7 @@ div.right-aligned { font-style: italic; } /* journal log level coloring end */ + +.pmx-horizontal-separator { + border-top: 1px solid #cfcfcf; +} diff --git a/src/panel/NotificationMatchExpressionEditPanel.js b/src/panel/NotificationMatchExpressionEditPanel.js new file mode 100644 index 0000000..6d1f93e --- /dev/null +++ b/src/panel/NotificationMatchExpressionEditPanel.js @@ -0,0 +1,786 @@ +Ext.define('Proxmox.panel.NotificationMatchExpressionEditPanel', { + extend: 'Proxmox.panel.InputPanel', + xtype: 'pmxNotificationMatchExpressionEditPanel', + mixins: ['Proxmox.Mixin.CBind'], + + controller: { + xclass: 'Ext.app.ViewController', + + // we want to also set the empty value, but 'bind' does not do that so + // we have to set it then (and only then) to get the correct value in + // the tree + control: { + field: { + change: function (cmp) { + let me = this; + let vm = me.getViewModel(); + if (cmp.field) { + let record = vm.get('selectedRecord'); + if (!record) { + return; + } + let data = Ext.apply({}, record.get('data')); + let value = cmp.getValue(); + // only update if the value is empty (or empty array) + if (!value || !value.length) { + data[cmp.field] = value; + record.set({ data }); + } + } + }, + }, + }, + }, + + viewModel: { + data: { + invertMatch: false, + selectedRecord: null, + matchFieldType: 'exact', + matchFieldField: '', + matchFieldValue: '', + }, + + formulas: { + showMatcherType: (get) => get('selectedRecord') !== null, + + invertMatch: { + bind: { + bindTo: '{selectedRecord}', + deep: true, + }, + get: function (record) { + return record?.get('invert'); + }, + set: function (value) { + let me = this; + let record = me.get('selectedRecord'); + record.set('invert', value); + }, + }, + nodeType: { + get: function (get) { + let record = get('selectedRecord'); + return record?.get('type'); + }, + set: function (value) { + let me = this; + let record = me.get('selectedRecord'); + + let data; + let leaf; + + switch (value) { + case 'match-severity': + data = { + value: ['info', 'notice', 'warning', 'error', 'unknown'], + }; + leaf = true; + break; + case 'match-field': + data = { + type: 'exact', + field: '', + value: '', + }; + leaf = true; + break; + case 'match-calendar': + data = { + value: '', + }; + leaf = true; + break; + case 'any-of': + data = {}; + leaf = false; + break; + case 'all-of': + data = {}; + leaf = false; + break; + case 'one-of': + data = {}; + leaf = false; + break; + case 'match-always': + value = 'match-always'; + data = {}; + leaf = true; + break; + } + + let node = { + type: value, + invert: false, + data, + leaf, + }; + + if (!leaf) { + node.expanded = true; + node.expandable = false; + } else { + record.removeAll(); + } + + record.set(node); + }, + }, + }, + }, + + column1: [ + { + xtype: 'pmxNotificationMatchRuleTreeExpression', + cbind: { + baseUrl: '{baseUrl}', + }, + }, + ], + + column2: [ + { + xtype: 'pmxNotificationMatchExpressionNodePanel', + cbind: { + baseUrl: '{baseUrl}', + }, + }, + ], + + onGetValues: function (values) { + let me = this; + + if (!me.isCreate) { + Proxmox.Utils.assemble_field_data(values, { delete: 'match-field' }); + Proxmox.Utils.assemble_field_data(values, { delete: 'match-severity' }); + Proxmox.Utils.assemble_field_data(values, { delete: 'match-calendar' }); + Proxmox.Utils.assemble_field_data(values, { delete: 'mode' }); + Proxmox.Utils.assemble_field_data(values, { delete: 'invert-match' }); + } + + return values; + }, +}); + +Ext.define('Proxmox.panel.NotificationMatchRuleTreeExpression', { + extend: 'Ext.panel.Panel', + xtype: 'pmxNotificationMatchRuleTreeExpression', + mixins: ['Proxmox.Mixin.CBind'], + border: false, + + getNodeIcon: function (type, data, invert) { + let iconCls = 'fa'; + + switch (type) { + case 'match-severity': + { + let v = data.value; + if (Ext.isArray(data.value)) { + v = data.value.join(', '); + } + iconCls += ' fa-exclamation'; + if (!v) { + iconCls += ' internal-error'; + } + } + break; + case 'match-field': + { + let field = data.field; + let value = data.value; + iconCls += ' fa-square-o'; + if (!field || !value || (Ext.isArray(value) && !value.length)) { + iconCls += ' internal-error'; + } + } + break; + case 'match-calendar': + { + let v = data.value; + iconCls += ' fa-calendar-o'; + if (!v || !v.length) { + iconCls += ' internal-error'; + } + } + break; + case 'any-of': + iconCls += ' fa-filter'; + + break; + case 'all-of': + iconCls += ' fa-filter'; + + break; + case 'one-of': + iconCls = 'fa fa-filter'; + break; + + case 'match-always': + if (invert) { + iconCls += ' fa-ban'; + } else { + iconCls += ' fa-check-circle'; + } + } + + return iconCls; + }, + + renderTreeLabel: function (_value, meta, record) { + let data = record.get('data'); + let invert = record.get('invert'); + let type = record.get('type'); + + switch (type) { + case 'match-severity': { + let v; + + if (data.value) { + v = data.value.map((x) => `${Ext.String.htmlEncode(x)}`).join(' '); + } else { + v = '???'; + } + + if (invert) { + return Ext.String.format(gettext('Severity: all except {0}'), v); + } else { + return Ext.String.format(gettext('Severity: {0}'), v); + } + } + case 'match-field': { + let valueIsArray = Ext.isArray(data.value); + + let field = data.field ? data.field : '???'; + let value = + (!valueIsArray && data.value) || (valueIsArray && data.value.length) + ? data.value + : '???'; + let matchType = data.type; + + let fieldHtml = `${Ext.String.htmlEncode(field)}`; + let valueHtml = `${Ext.String.htmlEncode(value)}`; + + if (matchType === 'exact') { + if (Ext.isArray(value) && value.length > 1) { + valueHtml = value + .map((x) => `${Ext.String.htmlEncode(x)}`) + .join(' '); + + if (invert) { + // inverted field matcher, matching multiple values + return Ext.String.format( + gettext('Field: {0} none of {1}'), + fieldHtml, + valueHtml, + ); + } else { + // non-inverted field matcher, matching multiple values + return Ext.String.format( + gettext('Field: {0} any of {1}'), + fieldHtml, + valueHtml, + ); + } + } else if (invert) { + // inverted field matcher, matching a single value + return Ext.String.format( + gettext('Field: {0} is not {1}'), + fieldHtml, + valueHtml, + ); + } else { + // non-inverted field matcher, matching a single value + return Ext.String.format( + gettext('Field: {0} is {1}'), + fieldHtml, + valueHtml, + ); + } + } else if (invert) { + // inverted regex-based field matcher + return Ext.String.format( + gettext('Field: {0} does not match {1}'), + fieldHtml, + valueHtml, + ); + } else { + // non-inverted regex-based field matcher + return Ext.String.format( + gettext('Field: {0} matches {1}'), + fieldHtml, + valueHtml, + ); + } + } + case 'match-calendar': { + let value = data.value ? data.value : '???'; + value = `${Ext.String.htmlEncode(value)}`; + + if (invert) { + return Ext.String.format(gettext('Calendar: outside {0}'), value); + } else { + return Ext.String.format(gettext('Calendar: within {0}'), value); + } + } + case 'any-of': + if (invert) { + return gettext('No rule matches'); + } else { + return gettext('At least one rule matches'); + } + + case 'all-of': + if (invert) { + return gettext('At least one rule does not match'); + } else { + return gettext('All rules match'); + } + + case 'one-of': + if (invert) { + return gettext('Not: Exactly one rule matches'); + } else { + return gettext('Exactly one rule matches'); + } + + case 'match-always': + if (invert) { + return gettext('Never match'); + } else { + return gettext('Always match'); + } + } + }, + + initComponent: function () { + let me = this; + + let treeStore = Ext.create('Ext.data.TreeStore', { + root: { + expanded: true, + expandable: false, + text: '', + type: 'match-always', + data: {}, + invert: false, + leaf: true, + children: [], + iconCls: 'fa fa-filter', + }, + }); + + let realExpression = Ext.create({ + xtype: 'hiddenfield', + name: 'expression', + setValue: function (value) { + this.value = value; + this.checkChange(); + }, + getValue: function () { + return this.value; + }, + getSubmitValue: function () { + let value = this.value; + return value; + }, + }); + + let storeChanged = function (store) { + store.suspendEvent('datachanged'); + + store.each(function (model) { + let type = model.get('type'); + let data = model.get('data'); + let invert = model.get('invert'); + + let iconCls = me.getNodeIcon(type, data, invert); + model.set({ + iconCls, + }); + }); + + let root = store.getRoot(); + let stack = [[]]; + + root.cascade({ + before: function (node) { + let type = node.get('type'); + let data = node.get('data'); + let invert = node.get('invert'); + + switch (type) { + case 'all-of': + case 'any-of': + case 'one-of': + stack.push([]); + break; + case 'match-calendar': + { + let obj = { + match: { + type: 'calendar', + schedule: data.value, + }, + }; + + if (invert) { + obj = { + not: obj, + }; + } + + stack.at(-1).push(obj); + } + + break; + case 'match-field': + { + let obj = { + match: { + type: 'field', + field: data.field, + }, + }; + + if (data.type === 'exact') { + obj.match.values = data.value; + } else { + obj.match.regex = data.value; + } + + if (invert) { + obj = { + not: obj, + }; + } + + stack.at(-1).push(obj); + } + break; + case 'match-severity': + { + let obj = { + match: { + type: 'severity', + severities: data.value, + }, + }; + + if (invert) { + obj = { + not: obj, + }; + } + + stack.at(-1).push(obj); + } + break; + case 'match-always': + stack.at(-1).push({ + constant: !invert, + }); + break; + } + + // Visit this node + return true; + }, + after: function (node) { + let type = node.get('type'); + let invert = node.get('invert'); + + switch (type) { + case 'all-of': + case 'any-of': + case 'one-of': + { + let children = stack.pop(); + + let a = {}; + a[type] = children; + + if (invert) { + a = { + not: a, + }; + } + + stack.at(-1).push(a); + } + break; + } + }, + }); + + let topLevelNodes = stack.pop(); + let obj = topLevelNodes[0]; + + realExpression.suspendEvent('change'); + realExpression.setValue(JSON.stringify(obj)); + realExpression.resumeEvent('change'); + + store.resumeEvent('datachanged'); + }; + + realExpression.addListener('change', function (field, value) { + let obj; + + try { + obj = JSON.parse(value); + } catch (e) { + Ext.Msg.alert(gettext('Invalid matcher expression'), e); + return; + } + + function visit(obj) { + for (const [key, value] of Object.entries(obj)) { + let ret; + + switch (key) { + case 'match': + { + switch (value.type) { + case 'calendar': + { + ret = { + type: 'match-calendar', + data: { + value: value.schedule, + }, + leaf: true, + }; + } + break; + case 'field': + { + ret = { + type: 'match-field', + data: { + field: value.field, + }, + leaf: true, + }; + + if (value.regex) { + ret.data.type = 'regex'; + ret.data.value = value.regex; + } else { + ret.data.type = 'exact'; + ret.data.value = value.values; + } + } + break; + case 'severity': + { + ret = { + type: 'match-severity', + data: { + value: value.severities, + }, + leaf: true, + }; + } + break; + } + } + break; + case 'all-of': + case 'any-of': + case 'one-of': + { + let children = []; + for (let child of value) { + children.push(visit(child)); + } + ret = { + type: key, + data: {}, + children, + leaf: false, + }; + } + break; + case 'not': + { + let child = visit(value); + ret = { + ...child, + invert: true, + }; + } + break; + case 'constant': { + ret = { + type: 'match-always', + data: {}, + invert: !value, + leaf: true, + }; + } + } + + let iconCls = me.getNodeIcon(ret.type, ret.data, ret.invert); + + ret.iconCls = iconCls; + if (!ret.leaf) { + ret.expanded = true; + ret.expandable = false; + } + + return ret; + } + } + + let rootNode = visit(obj); + + treeStore.setRootNode(rootNode); + }); + + treeStore.addListener('datachanged', storeChanged); + + let treePanel = Ext.create({ + xtype: 'treepanel', + store: treeStore, + minHeight: 300, + maxHeight: 300, + scrollable: true, + + // Allow drag&drop for tree nodes + viewConfig: { + plugins: { + ptype: 'treeviewdragdrop', + containerScroll: true, + }, + }, + + bind: { + selection: '{selectedRecord}', + }, + + columns: [ + { + xtype: 'treecolumn', + dataIndex: 'text', + renderer: me.renderTreeLabel, + flex: 1, + }, + { + xtype: 'actioncolumn', + width: 60, + items: [ + { + handler: (view, rI, cI, item, e, record) => { + let node = record.appendChild({ + type: 'match-field', + data: { + type: 'exact', + field: '', + value: '', + }, + leaf: true, + }); + + view.setSelection(node); + }, + getTip: (v, m, rec) => + Ext.String.format(gettext('Add new child node'), v), + getClass: (v, m, { data }) => (data.leaf ? '' : 'fa fa-plus-circle'), + isActionDisabled: (v, r, c, i, rec) => rec.data.leaf, + }, + { + handler: function (view, rI, cI, item, e, record) { + if (record.hasChildNodes()) { + Ext.Msg.confirm( + gettext('Remove rule?'), + gettext('Remove rule and all of its sub-rules?'), + (decision) => { + if (decision === 'yes') { + record.remove(true); + } + }, + ); + } else { + record.remove(true); + } + }, + getTip: (v, m, rec) => + Ext.String.format(gettext('Remove this node'), v), + getClass: (v, m, { data }) => 'fa fa-trash-o', + isActionDisabled: (v, r, c, i, rec) => rec.isRoot(), + }, + ], + }, + ], + }); + + Ext.apply(me, { + items: [realExpression, treePanel], + }); + me.callParent(); + }, +}); + +Ext.define('Proxmox.panel.NotificationMatchExpressionNodePanel', { + extend: 'Ext.panel.Panel', + xtype: 'pmxNotificationMatchExpressionNodePanel', + mixins: ['Proxmox.Mixin.CBind'], + border: false, + layout: 'anchor', + + items: [ + { + xtype: 'proxmoxKVComboBox', + fieldLabel: gettext('Rule Type'), + isFormField: false, + allowBlank: false, + // Hide initially to avoid glitches when opening the window + hidden: true, + bind: { + value: '{nodeType}', + hidden: '{!showMatcherType}', + }, + + comboItems: [ + ['match-always', gettext('Always match')], + ['all-of', gettext('All rules match')], + ['any-of', gettext('At least one rule matches')], + ['one-of', gettext('Exactly one node matches')], + ['match-field', gettext('Match Field')], + ['match-severity', gettext('Match Severity')], + ['match-calendar', gettext('Match Calendar')], + ], + }, + { + xtype: 'proxmoxcheckbox', + isFormField: false, + fieldLabel: gettext('Invert Rule'), + allowBlank: false, + bind: { + value: '{invertMatch}', + hidden: '{!showMatcherType}', + }, + }, + { + xtype: 'component', + height: 1, + margin: '20 0 20 0', + cls: 'pmx-horizontal-separator', + bind: { + hidden: '{!showMatcherType}', + }, + }, + { + xtype: 'pmxNotificationMatchFieldSettings', + cbind: { + baseUrl: '{baseUrl}', + }, + }, + { + xtype: 'pmxNotificationMatchSeveritySettings', + }, + { + xtype: 'pmxNotificationMatchCalendarSettings', + }, + ], +}); diff --git a/src/proxmox-dark/scss/extjs/_treepanel.scss b/src/proxmox-dark/scss/extjs/_treepanel.scss index 0480371..bf92f0b 100644 --- a/src/proxmox-dark/scss/extjs/_treepanel.scss +++ b/src/proxmox-dark/scss/extjs/_treepanel.scss @@ -22,3 +22,8 @@ background-color: $background-darker; border-color: $border-color; } + +.x-tree-node-text > code { + background-color: $background-darkest; +} + diff --git a/src/proxmox-dark/scss/proxmox/_general.scss b/src/proxmox-dark/scss/proxmox/_general.scss index dcbf049..36ff65c 100644 --- a/src/proxmox-dark/scss/proxmox/_general.scss +++ b/src/proxmox-dark/scss/proxmox/_general.scss @@ -51,3 +51,7 @@ div.eol-notice + div[id^="panel-"] > div[id^="panel-"][id$="-bodyWrap"] > div { .pmx-unclickable { pointer-events: none; } + +.pmx-horizontal-separator { + border-top: 1px solid $border-color-alt; +} diff --git a/src/window/NotificationMatcherEdit.js b/src/window/NotificationMatcherEdit.js index 1999e20..893c3e3 100644 --- a/src/window/NotificationMatcherEdit.js +++ b/src/window/NotificationMatcherEdit.js @@ -95,6 +95,9 @@ Ext.define('Proxmox.window.NotificationMatcherEdit', { me.method = 'POST'; } else { me.url += `/${me.name}`; + if (Proxmox.Schema.notificationMatcherExpressions) { + me.loadUrl = me.url + '?migrate-to-expression=1'; + } me.method = 'PUT'; } @@ -119,7 +122,7 @@ Ext.define('Proxmox.window.NotificationMatcherEdit', { { name: me.name, title: gettext('Match Rules'), - xtype: 'pmxNotificationMatchRulesEditPanel', + xtype: Proxmox.Schema.notificationMatcherPanelType(), isCreate: me.isCreate, baseUrl: me.baseUrl, }, @@ -1013,7 +1016,7 @@ Ext.define('Proxmox.panel.MatchCalendarSettings', { initComponent: function () { let me = this; Ext.apply(me.viewModel, { - parent: me.up('pmxNotificationMatchRulesEditPanel').getViewModel(), + parent: me.up(Proxmox.Schema.notificationMatcherPanelType()).getViewModel(), }); me.callParent(); }, @@ -1091,7 +1094,7 @@ Ext.define('Proxmox.panel.MatchSeveritySettings', { initComponent: function () { let me = this; Ext.apply(me.viewModel, { - parent: me.up('pmxNotificationMatchRulesEditPanel').getViewModel(), + parent: me.up(Proxmox.Schema.notificationMatcherPanelType()).getViewModel(), }); me.callParent(); }, @@ -1164,7 +1167,7 @@ Ext.define('Proxmox.panel.MatchFieldSettings', { regexVal += `(${currentData.value.join('|')})`; } regexVal += '$'; - newValue.push(regexVal); + newValue = regexVal; } record.set({ @@ -1282,7 +1285,7 @@ Ext.define('Proxmox.panel.MatchFieldSettings', { }); Ext.apply(me.viewModel, { - parent: me.up('pmxNotificationMatchRulesEditPanel').getViewModel(), + parent: me.up(Proxmox.Schema.notificationMatcherPanelType()).getViewModel(), }); Ext.apply(me, { items: [ -- 2.47.3