From: Lukas Wagner <l.wagner@proxmox.com>
To: pbs-devel@lists.proxmox.com, pve-devel@lists.proxmox.com
Subject: [PATCH proxmox-widget-toolkit 18/29] notification: matcher: add better calendar editor
Date: Thu, 9 Jul 2026 13:57:05 +0200 [thread overview]
Message-ID: <20260709115716.299836-19-l.wagner@proxmox.com> (raw)
In-Reply-To: <20260709115716.299836-1-l.wagner@proxmox.com>
This new editor allows one to enter the start time, end time and tick
the matched week-days, instead of having to enter the appropriate string
representation of the time range (e.g. 'mon..tue 08:00-12:00')
The general approach was copied from PBS's traffic rule edit panel, but
it is too different to generalize this into a new, reusable component.
Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---
.../NotificationMatchExpressionEditPanel.js | 2 +-
src/window/NotificationMatcherEdit.js | 300 +++++++++++++++++-
2 files changed, 290 insertions(+), 12 deletions(-)
diff --git a/src/panel/NotificationMatchExpressionEditPanel.js b/src/panel/NotificationMatchExpressionEditPanel.js
index 6d1f93e..e117ea5 100644
--- a/src/panel/NotificationMatchExpressionEditPanel.js
+++ b/src/panel/NotificationMatchExpressionEditPanel.js
@@ -87,7 +87,7 @@ Ext.define('Proxmox.panel.NotificationMatchExpressionEditPanel', {
break;
case 'match-calendar':
data = {
- value: '',
+ value: '00:00-23:59',
};
leaf = true;
break;
diff --git a/src/window/NotificationMatcherEdit.js b/src/window/NotificationMatcherEdit.js
index 893c3e3..433f86c 100644
--- a/src/window/NotificationMatcherEdit.js
+++ b/src/window/NotificationMatcherEdit.js
@@ -361,7 +361,7 @@ Ext.define('Proxmox.panel.NotificationRulesEditPanel', {
break;
case 'match-calendar':
data = {
- value: '',
+ value: '00:00-23:59',
};
break;
}
@@ -977,6 +977,11 @@ Ext.define('Proxmox.panel.MatchCalendarSettings', {
},
set: function (value) {
let me = this;
+
+ if (!me.get('typeIsMatchCalendar')) {
+ return;
+ }
+
let record = me.get('selectedRecord');
let currentData = record.get('data');
record.set({
@@ -992,23 +997,296 @@ Ext.define('Proxmox.panel.MatchCalendarSettings', {
},
},
},
+ controller: {
+ xclass: 'Ext.app.ViewController',
+ control: {
+ 'grid checkbox': {
+ change: 'dowChanged',
+ },
+ timefield: {
+ change: 'timeChanged',
+ },
+ 'field[reference=timeframe]': {
+ change: 'setGridData',
+ },
+ },
+
+ weekdays: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
+
+ setGridData: function (field, value) {
+ let me = this;
+
+ let record = me.parseTimeframe(value);
+
+ me.lookup('weekdayGrid').getStore().setData([record]);
+ me.lookup('timeStart').setValue(record.start);
+ me.lookup('timeEnd').setValue(record.end);
+ },
+
+ parseTimeframe: function (timeframe) {
+ let me = this;
+ let [, days, start, end] = /^(?:(\S*)\s+)?([0-9:]+)-([0-9:]+)$/.exec(timeframe) || [];
+
+ if (start === '0') {
+ start = '00:00';
+ }
+
+ let record = {
+ start,
+ end,
+ };
+
+ if (!days) {
+ days = 'mon..sun';
+ }
+
+ days = days.split(',');
+ days.forEach((day) => {
+ if (record[day]) {
+ return;
+ }
+
+ if (me.weekdays.indexOf(day) !== -1) {
+ record[day] = true;
+ } else {
+ // we have a range 'xxx..yyy'
+ let [startDay, endDay] = day.split('..');
+ let startIdx = me.weekdays.indexOf(startDay);
+ let endIdx = me.weekdays.indexOf(endDay);
+
+ if (endIdx < startIdx) {
+ endIdx += me.weekdays.length;
+ }
+
+ for (let dayIdx = startIdx; dayIdx <= endIdx; dayIdx++) {
+ let curDay = me.weekdays[dayIdx % me.weekdays.length];
+ if (!record[curDay]) {
+ record[curDay] = true;
+ }
+ }
+ }
+ });
+
+ return record;
+ },
+
+ dowChanged: function (field, value) {
+ let me = this;
+ let record = field.getWidgetRecord();
+ if (record === undefined) {
+ // this is sometimes called before a record/column is initialized
+ return;
+ }
+ let col = field.getWidgetColumn();
+ record.set(col.dataIndex, value);
+ record.commit();
+
+ let startField = me.lookup('timeStart');
+ let endField = me.lookup('timeEnd');
+
+ me.updateTimeframeField(startField, endField);
+ },
+
+ timeChanged: function (field, value) {
+ let me = this;
+
+ let startField = me.lookup('timeStart');
+ let endField = me.lookup('timeEnd');
+
+ let start = startField.getValue();
+ let end = endField.getValue();
+
+ let valid = !(start && end && start >= end);
+
+ if (!valid) {
+ startField.markInvalid(gettext('Start time must be before end time'));
+ endField.markInvalid(gettext('End time must be after start time'));
+ } else {
+ startField.clearInvalid();
+ endField.clearInvalid();
+ }
+
+ me.updateTimeframeField(startField, endField);
+ },
+
+ updateTimeframeField: function (startField, endField) {
+ let me = this;
+
+ let data = me.lookup('weekdayGrid').getStore().getData().getAt(0);
+
+ let timeframe = me.formatSelectedDays(data.data);
+
+ let start = me.formatTime(startField);
+ let end = me.formatTime(endField);
+
+ timeframe += ` ${start}-${end}`;
+
+ let field = me.lookup('timeframe');
+ field.suspendEvent('change');
+ field.setValue(timeframe);
+
+ me.getViewModel().set('matchCalendarValue', timeframe);
+
+ field.resumeEvent('change');
+ },
+
+ formatSelectedDays: function (days) {
+ let me = this;
+ let selected = me.weekdays.filter((day) => days[day]);
+
+ if (selected.length === 0) {
+ return '';
+ }
+ if (selected.length === 1) {
+ return selected[0];
+ }
+
+ // Check if selected days are a contiguous block in weekday order
+ let indices = selected.map((day) => me.weekdays.indexOf(day));
+ let isContiguous = indices.every((idx, i) => i === 0 || idx === indices[i - 1] + 1);
+
+ if (isContiguous) {
+ return `${selected[0]}..${selected[selected.length - 1]}`;
+ }
+
+ return selected.join(',');
+ },
+
+ formatTime: function (timefield) {
+ let value = timefield.getValue();
+
+ if (!value) {
+ return '';
+ }
+
+ let hours = value.getHours().toString().padStart(2, '0');
+ let minutes = value.getMinutes().toString().padStart(2, '0');
+ return `${hours}:${minutes}`;
+ },
+ },
items: [
{
- xtype: 'proxmoxKVComboBox',
- fieldLabel: gettext('Timespan to match'),
+ xtype: 'hidden',
+ reference: 'timeframe',
isFormField: false,
allowBlank: false,
- editable: true,
- displayField: 'key',
- field: 'value',
bind: {
value: '{matchCalendarValue}',
- disabled: '{!typeIsMatchCalender}',
},
-
- comboItems: [
- ['mon 8-12', ''],
- ['tue..fri,sun 0:00-23:59', ''],
+ },
+ {
+ xtype: 'timefield',
+ reference: 'timeStart',
+ fieldLabel: gettext('Time Start'),
+ isFormField: false,
+ format: 'H:i',
+ formatText: 'HH:MM',
+ allowBlank: false,
+ },
+ {
+ xtype: 'timefield',
+ reference: 'timeEnd',
+ fieldLabel: gettext('Time End'),
+ isFormField: false,
+ format: 'H:i',
+ formatText: 'HH:MM',
+ maxValue: '23:59',
+ allowBlank: false,
+ },
+ {
+ xtype: 'fieldcontainer',
+ items: [
+ {
+ xtype: 'grid',
+ margin: '10 0 0 0',
+ reference: 'weekdayGrid',
+ store: {
+ fields: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
+ data: [
+ {
+ mon: true,
+ tue: true,
+ wed: true,
+ thu: true,
+ fri: true,
+ sat: true,
+ sun: true,
+ },
+ ],
+ },
+ columns: [
+ {
+ text: gettext('Mon'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'mon',
+ flex: 1,
+ widget: {
+ xtype: 'checkbox',
+ isFormField: false,
+ },
+ },
+ {
+ text: gettext('Tue'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'tue',
+ flex: 1,
+ widget: {
+ xtype: 'checkbox',
+ isFormField: false,
+ },
+ },
+ {
+ text: gettext('Wed'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'wed',
+ flex: 1,
+ widget: {
+ xtype: 'checkbox',
+ isFormField: false,
+ },
+ },
+ {
+ text: gettext('Thu'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'thu',
+ flex: 1,
+ widget: {
+ xtype: 'checkbox',
+ isFormField: false,
+ },
+ },
+ {
+ text: gettext('Fri'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'fri',
+ flex: 1,
+ widget: {
+ xtype: 'checkbox',
+ isFormField: false,
+ },
+ },
+ {
+ text: gettext('Sat'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'sat',
+ flex: 1,
+ widget: {
+ xtype: 'checkbox',
+ isFormField: false,
+ },
+ },
+ {
+ text: gettext('Sun'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'sun',
+ flex: 1,
+ widget: {
+ xtype: 'checkbox',
+ isFormField: false,
+ },
+ },
+ ],
+ },
],
},
],
--
2.47.3
next prev parent reply other threads:[~2026-07-09 12:00 UTC|newest]
Thread overview: 30+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-07-09 11:56 [PATCH many 00/29] notifications: add nested match expressions Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 01/29] add new proxmox-match-expression crate Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 02/29] notify: promote matcher to dir-style module Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 03/29] notify: fix doc comment Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 04/29] notify: matcher: break out severity matcher into submodule Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 05/29] notify: matcher: break out field " Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 06/29] notify: matcher: break out calendar " Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 07/29] notify: matcher: calendar: add basic unit test Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 08/29] notify: matcher: add InlineSeverityMatcher Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 09/29] notify: matcher: add InlineFieldMatcher Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 10/29] notify: matcher: add InlineCalendarMatcher Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 11/29] notify: matcher: add expression support Lukas Wagner
2026-07-09 11:56 ` [PATCH proxmox 12/29] notify: api: support new expression parameter Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox 13/29] notify: api: add `get_matcher_as_expression` Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox 14/29] notify: migrate PBS's and PVE's default matcher to expression syntax Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox 15/29] notify: move legacy matcher keys behind feature flag Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox-widget-toolkit 16/29] notification: increase matcher window width Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox-widget-toolkit 17/29] notifications: matcher: add support for match expressions Lukas Wagner
2026-07-09 11:57 ` Lukas Wagner [this message]
2026-07-09 11:57 ` [PATCH proxmox-widget-toolkit 19/29] notifications: matcher: consistently use title case for UI elements Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox-backup 20/29] notification: opt into 'legacy-matchers' feature in proxmox-notify Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox-backup 21/29] api: notification: add 'migrate-to-expression' parameter to get_matcher Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox-backup 22/29] ui: notification: enable new matcher UI Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox-perl-rs 23/29] notify: matcher: pass matcher config / updater directly Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox-perl-rs 24/29] notify: opt into 'legacy-matchers' feature in proxmox-notify Lukas Wagner
2026-07-09 11:57 ` [PATCH proxmox-perl-rs 25/29] notify: add 'migrate_to_expression' parameter for get_matcher Lukas Wagner
2026-07-09 11:57 ` [PATCH manager 26/29] api: notification: pass config/updater directly to rust bindings Lukas Wagner
2026-07-09 11:57 ` [PATCH manager 27/29] api: notification: get_matcher: add 'migrate-to-expression' parameter Lukas Wagner
2026-07-09 11:57 ` [PATCH manager 28/29] api: notification: add 'expression' to matcher parameter schema Lukas Wagner
2026-07-09 11:57 ` [PATCH manager 29/29] ui: notification: enable new matcher UI Lukas Wagner
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=20260709115716.299836-19-l.wagner@proxmox.com \
--to=l.wagner@proxmox.com \
--cc=pbs-devel@lists.proxmox.com \
--cc=pve-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