[pve-devel] [PATCH v2 proxmox-widget-toolkit manager pmg-gui 0/4] #4442: impl firewall log filtering

[pve-devel] [PATCH v2 proxmox-widget-toolkit manager pmg-gui 0/4] #4442: impl firewall log filtering

[Christian Ebner]

This series is send to pmg-devel and pve-devel list, as it changes the
DateTimeField used by Proxmox Virtual Environment and Proxmox Mail
Gateway.

This series of patches implements functionality to extend the firewall
log panel to filter the logs by date and time.

The series consists of patches for the proxmox-widget-toolkit and
patches for pve-manager and pmg-gui which depend on the changes to
proxmox-widget-toolkit.

proxmox-widget-toolkit:
The DateTimeField component is reworked to be more declarative and
formula and data bindings are utilized to update state changes between
parent and child components.
The LogView component is extended to control if the date/time based
filtering should be shown (as for example the Ceph logs use the same
panel, but filters should not be shown), and to configure the submit
values for api calls.

pve-manager:
The neccessary configs are set to show the filters in the panel and the
correct submit format for api call.

pmg-gui:
Revert a commit, introduced to fix a side effect of one of the patches
from the previous version of the patches, which got applied.

proxmox-widget-toolkit:
Christian Ebner (2):
  fix #4442: adapt DateTimeField to be more declarative
  fix #4442: Extend LogView for firewall datetime filtering

 src/form/DateTimeField.js | 281 ++++++++++++++++----------------------
 src/panel/LogView.js      |  89 ++++++++++--
 2 files changed, 201 insertions(+), 169 deletions(-)

pve-manager:
Christian Ebner (1):
  fix #4442: Add date-time filtering for firewall logs

 www/manager6/node/Config.js | 2 ++
 www/manager6/qemu/Config.js | 2 ++
 2 files changed, 4 insertions(+)

pmg-gui:
Christian Ebner (1):
  Revert "fix tracking center with newer proxmox-widget-toolkit"

 js/MailTracker.js | 2 --
 1 file changed, 2 deletions(-)

-- 
2.39.2

[pve-devel] [PATCH v2 proxmox-widget-toolkit 1/2] fix #4442: adapt DateTimeField to be more declarative

[Christian Ebner]

Reworks the current implementation of the DateTimeField to be more
declarative by using a ViewModel and data bindings as well as formulas,
in order to reduce code and unwanted complexity.

Signed-off-by: Christian Ebner <c.ebner@proxmox.com>
---

changes since v1:
- This patch was not part of the previous series, but it reworks the
  component, including modifications made by an applied patch of v1.

 src/form/DateTimeField.js | 281 ++++++++++++++++----------------------
 1 file changed, 121 insertions(+), 160 deletions(-)

diff --git a/src/form/DateTimeField.js b/src/form/DateTimeField.js
index 13b1ed1..4bfa9bd 100644
--- a/src/form/DateTimeField.js
+++ b/src/form/DateTimeField.js
@@ -6,205 +6,166 @@ Ext.define('Proxmox.DateTimeField', {
 
     layout: 'hbox',
 
-    referenceHolder: true,
+    viewModel: {
+	data: {
+	    datetime: null,
+	    minDatetime: null,
+	    maxDatetime: null,
+	},
+
+	formulas: {
+	    date: {
+		get: function(get) {
+		    return get('datetime');
+		},
+		set: function(date) {
+		    if (!date) {
+			this.set('datetime', null);
+			return;
+		    }
+		    let datetime = new Date(this.get('datetime'));
+		    datetime.setDate(date.getDate());
+		    datetime.setMonth(date.getMonth());
+		    datetime.setFullYear(date.getFullYear());
+		    this.set('datetime', datetime);
+		},
+	    },
+
+	    time: {
+		get: function(get) {
+		    return get('datetime');
+		},
+		set: function(time) {
+		    if (!time) {
+			this.set('datetime', null);
+			return;
+		    }
+		    let datetime = new Date(this.get('datetime'));
+		    datetime.setHours(time.getHours());
+		    datetime.setMinutes(time.getMinutes());
+		    datetime.setSeconds(time.getSeconds());
+		    datetime.setMilliseconds(time.getMilliseconds());
+		    this.set('datetime', datetime);
+		},
+	    },
+
+	    minDate: {
+		get: function(get) {
+		    let datetime = get('minDatetime');
+		    return datetime ? new Date(datetime) : null;
+		},
+	    },
+
+	    maxDate: {
+		get: function(get) {
+		    let datetime = get('maxDatetime');
+		    return datetime ? new Date(datetime) : null;
+		},
+	    },
+
+	    minTime: {
+		get: function(get) {
+		    let current = get('datetime');
+		    let min = get('minDatetime');
+		    if (min && current && !this.isSameDay(current, min)) {
+			return new Date(min).setHours('00', '00', '00', '000');
+		    }
+		    return min;
+		},
+	    },
+
+	    maxTime: {
+		get: function(get) {
+		    let current = get('datetime');
+		    let max = get('maxDatetime');
+		    if (max && current && !this.isSameDay(current, max)) {
+			return new Date(max).setHours('23', '59', '59', '999');
+		    }
+		    return max;
+		},
+	    },
+	},
+
+	// Helper function to check if dates are the same day of the year
+	isSameDay: function(date1, date2) {
+	    return date1.getDate() === date2.getDate() &&
+		date1.getMonth() === date2.getMonth() &&
+		date1.getFullYear() === date2.getFullYear();
+	},
+    },
 
     config: {
+	value: null,
 	submitFormat: 'U',
 	disabled: false,
     },
 
     setValue: function(value) {
-	let me = this;
-	me.setDate(value);
-	me.setTime(value);
-
-	// Notify all 'value' bindings of state change
-	me.publishState('value', value);
+	this.getViewModel().set('datetime', value);
     },
 
     getValue: function() {
-	let me = this;
-	let date = me.lookupReference('dateentry').getValue();
-
-	if (date === undefined || date === null) { return null; }
-
-	let time = me.lookupReference('timeentry').getValue();
+	return this.getViewModel().get('datetime');
+    },
 
-	if (time === undefined || time === null) { return null; }
+    getSubmitValue: function() {
+	let me = this;
+	let value = me.getValue();
+	return value ? Ext.Date.format(value, me.submitFormat) : null;
+    },
 
-	date.setHours(time.getHours());
-	date.setMinutes(time.getMinutes());
-	date.setSeconds(time.getSeconds());
-	return date;
+    setMinValue: function(value) {
+	this.getViewModel().set('minDatetime', value);
     },
 
-    getSubmitValue: function() {
-        let me = this;
-        let format = me.submitFormat;
-        let value = me.getValue();
+    getMinValue: function() {
+	return this.getViewModel().get('minDatetime');
+    },
 
-        return value ? Ext.Date.format(value, format) : null;
+    setMaxValue: function(value) {
+	this.getViewModel().set('maxDatetime', value);
     },
 
-    setDate: function(date) {
-	let me = this;
-	let dateEntry = me.lookupReference('dateentry');
-	dateEntry.setValue(date);
-	dateEntry.publishState('value', date);
+    getMaxValue: function() {
+	return this.getViewModel().get('maxDatetime');
     },
 
-    setTime: function(time) {
+    initComponent: function() {
 	let me = this;
-	let timeEntry = me.lookupReference('timeentry');
-	timeEntry.setValue(time);
-	timeEntry.publishState('value', time);
+	me.callParent();
+
+	let vm = me.getViewModel();
+	vm.set('datetime', me.config.value);
+	// Propagate state change to binding
+	vm.bind('{datetime}', function(value) {
+	    me.publishState('value', value);
+	    me.fireEvent('change', value);
+	});
     },
 
     items: [
 	{
 	    xtype: 'datefield',
 	    editable: false,
-	    reference: 'dateentry',
 	    flex: 1,
 	    format: 'Y-m-d',
 	    bind: {
-		disabled: '{disabled}',
-	    },
-	    listeners: {
-		'change': function(field, newValue, oldValue) {
-		    let dateTimeField = field.up('fieldcontainer');
-		    dateTimeField.setDate(newValue);
-		    let value = dateTimeField.getValue();
-		    dateTimeField.publishState('value', value);
-		},
+		value: '{date}',
+		minValue: '{minDate}',
+		maxValue: '{maxDate}',
 	    },
 	},
 	{
 	    xtype: 'timefield',
-	    reference: 'timeentry',
 	    format: 'H:i',
 	    width: 80,
 	    value: '00:00',
 	    increment: 60,
 	    bind: {
-		disabled: '{disabled}',
-	    },
-	    listeners: {
-		'change': function(field, newValue, oldValue) {
-		    let dateTimeField = field.up('fieldcontainer');
-		    dateTimeField.setTime(newValue);
-		    let value = dateTimeField.getValue();
-		    dateTimeField.publishState('value', value);
-		},
+		value: '{time}',
+		minValue: '{minTime}',
+		maxValue: '{maxTime}',
 	    },
 	},
     ],
-
-    setMinValue: function(value) {
-	let me = this;
-	let current = me.getValue();
-	if (!value || !current) {
-	    return;
-	}
-
-	// Clone to avoid modifying the referenced value
-	let clone = new Date(value);
-	let minhours = clone.getHours();
-	let minminutes = clone.getMinutes();
-
-	let hours = current.getHours();
-	let minutes = current.getMinutes();
-
-	clone.setHours(0);
-	clone.setMinutes(0);
-	clone.setSeconds(0);
-	current.setHours(0);
-	current.setMinutes(0);
-	current.setSeconds(0);
-
-	let time = new Date();
-	if (current-clone > 0) {
-	    time.setHours(0);
-	    time.setMinutes(0);
-	    time.setSeconds(0);
-	    time.setMilliseconds(0);
-	} else {
-	    time.setHours(minhours);
-	    time.setMinutes(minminutes);
-	}
-	me.lookup('timeentry').setMinValue(time);
-
-	// current time is smaller than the time part of the new minimum
-	// so we have to add 1 to the day
-	if (minhours*60+minminutes > hours*60+minutes) {
-	    clone.setDate(clone.getDate()+1);
-	}
-	me.lookup('dateentry').setMinValue(clone);
-    },
-
-    setMaxValue: function(value) {
-	let me = this;
-	let current = me.getValue();
-	if (!value || !current) {
-	    return;
-	}
-
-	// Clone to avoid modifying the referenced value
-	let clone = new Date(value);
-	let maxhours = clone.getHours();
-	let maxminutes = clone.getMinutes();
-
-	let hours = current.getHours();
-	let minutes = current.getMinutes();
-
-	clone.setHours(0);
-	clone.setMinutes(0);
-	clone.setSeconds(0);
-	clone.setMilliseconds(0);
-	current.setHours(0);
-	current.setMinutes(0);
-	current.setSeconds(0);
-	current.setMilliseconds(0);
-
-	let time = new Date();
-	if (clone-current > 0) {
-	    time.setHours(23);
-	    time.setMinutes(59);
-	    time.setSeconds(59);
-	} else {
-	    time.setHours(maxhours);
-	    time.setMinutes(maxminutes);
-	}
-	me.lookup('timeentry').setMaxValue(time);
-
-	// current time is bigger than the time part of the new maximum
-	// so we have to subtract 1 to the day
-	if (maxhours*60+maxminutes < hours*60+minutes) {
-	    clone.setDate(clone.getDate()-1);
-	}
-
-	me.lookup('dateentry').setMaxValue(clone);
-    },
-
-    initComponent: function() {
-	let me = this;
-
-	me.callParent();
-
-	let value = me.value || new Date();
-
-	me.lookupReference('dateentry').setValue(value);
-	me.lookupReference('timeentry').setValue(value);
-
-	if (me.minValue) {
-	    me.setMinValue(me.minValue);
-	}
-
-	if (me.maxValue) {
-	    me.setMaxValue(me.maxValue);
-	}
-
-	me.relayEvents(me.lookupReference('dateentry'), ['change']);
-	me.relayEvents(me.lookupReference('timeentry'), ['change']);
-    },
 });
-- 
2.39.2

[pve-devel] [PATCH v2 proxmox-widget-toolkit 2/2] fix #4442: Extend LogView for firewall datetime filtering

[Christian Ebner]

Extends the current panels date filtering capability to date-time
based filtering, and adds a config option to switch between livemode
and filter mode, analogous to the JournalView panel.

The `submitFormat` config is introduced to adapt the formatting of
params values for their corresponding api calls.

Signed-off-by: Christian Ebner <c.ebner@proxmox.com>
---

changes since v1:
- Also bind labels of input fields to `livemode` state

 src/panel/LogView.js | 89 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 80 insertions(+), 9 deletions(-)

diff --git a/src/panel/LogView.js b/src/panel/LogView.js
index 44aa8e3..cacc861 100644
--- a/src/panel/LogView.js
+++ b/src/panel/LogView.js
@@ -22,19 +22,28 @@ Ext.define('Proxmox.panel.LogView', {
 	updateParams: function() {
 	    let me = this;
 	    let viewModel = me.getViewModel();
-	    let since = viewModel.get('since');
-	    let until = viewModel.get('until');
-	    if (viewModel.get('hide_timespan')) {
+
+	    if (viewModel.get('hide_timespan') || viewModel.get('livemode')) {
 		return;
 	    }
 
+	    let since = viewModel.get('since');
+	    let until = viewModel.get('until');
+
 	    if (since > until) {
 		Ext.Msg.alert('Error', 'Since date must be less equal than Until date.');
 		return;
 	    }
 
-	    viewModel.set('params.since', Ext.Date.format(since, 'Y-m-d'));
-	    viewModel.set('params.until', Ext.Date.format(until, 'Y-m-d') + ' 23:59:59');
+	    let submitFormat = viewModel.get('submitFormat');
+
+	    viewModel.set('params.since', Ext.Date.format(since, submitFormat));
+	    if (submitFormat === 'Y-m-d') {
+		viewModel.set('params.until', Ext.Date.format(until, submitFormat) + ' 23:59:59');
+	    } else {
+		viewModel.set('params.until', Ext.Date.format(until, submitFormat));
+	    }
+
 	    me.getView().loadTask.delay(200);
 	},
 
@@ -175,6 +184,27 @@ Ext.define('Proxmox.panel.LogView', {
 	    }
 	},
 
+	onLiveMode: function() {
+	    let me = this;
+	    let viewModel = me.getViewModel();
+	    viewModel.set('livemode', true);
+	    viewModel.set('params', { start: 0, limit: 510 });
+
+	    let view = me.getView();
+	    delete view.content;
+	    view.scrollToEnd = true;
+	    me.updateView([], true, false);
+	},
+
+	onTimespan: function() {
+	    let me = this;
+	    me.getViewModel().set('livemode', false);
+	    me.updateView([], false);
+	    // Directly apply currently selected values without update
+	    // button click.
+	    me.updateParams();
+	},
+
 	init: function(view) {
 	    let me = this;
 
@@ -189,6 +219,7 @@ Ext.define('Proxmox.panel.LogView', {
 	    viewModel.set('since', since);
 	    viewModel.set('params.limit', view.pageSize);
 	    viewModel.set('hide_timespan', !view.log_select_timespan);
+	    viewModel.set('submitFormat', view.submitFormat);
 	    me.lookup('content').setStyle('line-height', `${view.lineHeight}px`);
 
 	    view.loadTask = new Ext.util.DelayedTask(me.doLoad, me);
@@ -224,6 +255,8 @@ Ext.define('Proxmox.panel.LogView', {
 	data: {
 	    until: null,
 	    since: null,
+	    submitFormat: 'Y-m-d',
+	    livemode: true,
 	    hide_timespan: false,
 	    data: {
 		start: 0,
@@ -263,32 +296,70 @@ Ext.define('Proxmox.panel.LogView', {
 	},
 	items: [
 	    '->',
-	    'Since: ',
 	    {
-		xtype: 'datefield',
+		xtype: 'segmentedbutton',
+		items: [
+		    {
+			text: gettext('Live Mode'),
+			bind: {
+			    pressed: '{livemode}',
+			},
+			handler: 'onLiveMode',
+		    },
+		    {
+			text: gettext('Select Timespan'),
+			bind: {
+			    pressed: '{!livemode}',
+			},
+			handler: 'onTimespan',
+		    },
+		],
+	    },
+	    {
+		xtype: 'box',
+		autoEl: { cn: gettext('Since') + ':' },
+		bind: {
+		    disabled: '{livemode}',
+		},
+	    },
+	    {
+		xtype: 'proxmoxDateTimeField',
 		name: 'since_date',
 		reference: 'since',
 		format: 'Y-m-d',
 		bind: {
+		    disabled: '{livemode}',
 		    value: '{since}',
 		    maxValue: '{until}',
+		    submitFormat: '{submitFormat}',
 		},
 	    },
-	    'Until: ',
 	    {
-		xtype: 'datefield',
+		xtype: 'box',
+		autoEl: { cn: gettext('Until') + ':' },
+		bind: {
+		    disabled: '{livemode}',
+		},
+	    },
+	    {
+		xtype: 'proxmoxDateTimeField',
 		name: 'until_date',
 		reference: 'until',
 		format: 'Y-m-d',
 		bind: {
+		    disabled: '{livemode}',
 		    value: '{until}',
 		    minValue: '{since}',
+		    submitFormat: '{submitFormat}',
 		},
 	    },
 	    {
 		xtype: 'button',
 		text: 'Update',
 		handler: 'updateParams',
+		bind: {
+		    disabled: '{livemode}',
+		},
 	    },
 	],
     },
-- 
2.39.2

[pve-devel] [PATCH v2 manager 3/3] fix #4442: Add date-time filtering for firewall logs

[Christian Ebner]

Extend the current firewall log view to add date time based filtering.
The user can switch between live view, which shows logs from the
unrotated log file, or to filter mode, where date time based filtering,
including rotated logs can be performed.

Enable the feature by setting the property and the submit format
for since and until timestamps expected by the api.

Signed-off-by: Christian Ebner <c.ebner@proxmox.com>
---

changes since v1:
- no changes

 www/manager6/node/Config.js | 2 ++
 www/manager6/qemu/Config.js | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/www/manager6/node/Config.js b/www/manager6/node/Config.js
index 6ed2172a..abae2e08 100644
--- a/www/manager6/node/Config.js
+++ b/www/manager6/node/Config.js
@@ -397,6 +397,8 @@ Ext.define('PVE.node.Config', {
 		    onlineHelp: 'chapter_pve_firewall',
 		    url: '/api2/extjs/nodes/' + nodename + '/firewall/log',
 		    itemId: 'firewall-fwlog',
+		    log_select_timespan: true,
+		    submitFormat: 'U',
 		},
 		{
 		    xtype: 'cephLogView',
diff --git a/www/manager6/qemu/Config.js b/www/manager6/qemu/Config.js
index 6acf589c..765de122 100644
--- a/www/manager6/qemu/Config.js
+++ b/www/manager6/qemu/Config.js
@@ -390,6 +390,8 @@ Ext.define('PVE.qemu.Config', {
 		    itemId: 'firewall-fwlog',
 		    xtype: 'proxmoxLogView',
 		    url: '/api2/extjs' + base_url + '/firewall/log',
+		    log_select_timespan: true,
+		    submitFormat: 'U',
 		},
 	    );
 	}
-- 
2.39.2

[pve-devel] [PATCH v2 pmg-gui 4/4] Revert "fix tracking center with newer proxmox-widget-toolkit"

[Christian Ebner]

The DateTimeField now defines its own ViewModel, therefore the
MailTrackerFilter container doesn't need one to be inherited to the
child.

This reverts commit 6f3f8ac5cc88ac3c71aed4269688193e5dd6c728.
---

changes since v1:
- not part of v1, reverts hotfix needed by changes introduced by patch
  in v1.

 js/MailTracker.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/js/MailTracker.js b/js/MailTracker.js
index 1a170d8..52641a4 100644
--- a/js/MailTracker.js
+++ b/js/MailTracker.js
@@ -38,8 +38,6 @@ Ext.define('PMG.MailTrackerFilter', {
 	},
     },
 
-    viewModel: {},
-
     getFilterParams: function() {
 	let me = this;
 	let param = {};
-- 
2.39.2

Re: [pve-devel] [PATCH v2 proxmox-widget-toolkit manager pmg-gui 0/4] #4442: impl firewall log filtering

[Christian Ebner]

Ping, still applies

> On 09.08.2023 12:55 CEST Christian Ebner <c.ebner@proxmox.com> wrote:
> 
>  
> This series is send to pmg-devel and pve-devel list, as it changes the
> DateTimeField used by Proxmox Virtual Environment and Proxmox Mail
> Gateway.
> 
> This series of patches implements functionality to extend the firewall
> log panel to filter the logs by date and time.
> 
> The series consists of patches for the proxmox-widget-toolkit and
> patches for pve-manager and pmg-gui which depend on the changes to
> proxmox-widget-toolkit.
> 
> proxmox-widget-toolkit:
> The DateTimeField component is reworked to be more declarative and
> formula and data bindings are utilized to update state changes between
> parent and child components.
> The LogView component is extended to control if the date/time based
> filtering should be shown (as for example the Ceph logs use the same
> panel, but filters should not be shown), and to configure the submit
> values for api calls.
> 
> pve-manager:
> The neccessary configs are set to show the filters in the panel and the
> correct submit format for api call.
> 
> pmg-gui:
> Revert a commit, introduced to fix a side effect of one of the patches
> from the previous version of the patches, which got applied.
> 
> proxmox-widget-toolkit:
> Christian Ebner (2):
>   fix #4442: adapt DateTimeField to be more declarative
>   fix #4442: Extend LogView for firewall datetime filtering
> 
>  src/form/DateTimeField.js | 281 ++++++++++++++++----------------------
>  src/panel/LogView.js      |  89 ++++++++++--
>  2 files changed, 201 insertions(+), 169 deletions(-)
> 
> pve-manager:
> Christian Ebner (1):
>   fix #4442: Add date-time filtering for firewall logs
> 
>  www/manager6/node/Config.js | 2 ++
>  www/manager6/qemu/Config.js | 2 ++
>  2 files changed, 4 insertions(+)
> 
> pmg-gui:
> Christian Ebner (1):
>   Revert "fix tracking center with newer proxmox-widget-toolkit"
> 
>  js/MailTracker.js | 2 --
>  1 file changed, 2 deletions(-)
> 
> -- 
> 2.39.2

[pve-devel] applied: [PATCH v2 proxmox-widget-toolkit manager pmg-gui 0/4] #4442: impl firewall log filtering

[Thomas Lamprecht]

Am 09/08/2023 um 12:55 schrieb Christian Ebner:
> This series is send to pmg-devel and pve-devel list, as it changes the
> DateTimeField used by Proxmox Virtual Environment and Proxmox Mail
> Gateway.
> 
> This series of patches implements functionality to extend the firewall
> log panel to filter the logs by date and time.
> 
> The series consists of patches for the proxmox-widget-toolkit and
> patches for pve-manager and pmg-gui which depend on the changes to
> proxmox-widget-toolkit.
> 
> proxmox-widget-toolkit:
> The DateTimeField component is reworked to be more declarative and
> formula and data bindings are utilized to update state changes between
> parent and child components.
> The LogView component is extended to control if the date/time based
> filtering should be shown (as for example the Ceph logs use the same
> panel, but filters should not be shown), and to configure the submit
> values for api calls.
> 
> pve-manager:
> The neccessary configs are set to show the filters in the panel and the
> correct submit format for api call.
> 
> pmg-gui:
> Revert a commit, introduced to fix a side effect of one of the patches
> from the previous version of the patches, which got applied.
> 
> proxmox-widget-toolkit:
> Christian Ebner (2):
>   fix #4442: adapt DateTimeField to be more declarative
>   fix #4442: Extend LogView for firewall datetime filtering
> 
>  src/form/DateTimeField.js | 281 ++++++++++++++++----------------------
>  src/panel/LogView.js      |  89 ++++++++++--
>  2 files changed, 201 insertions(+), 169 deletions(-)
> 
> pve-manager:
> Christian Ebner (1):
>   fix #4442: Add date-time filtering for firewall logs
> 
>  www/manager6/node/Config.js | 2 ++
>  www/manager6/qemu/Config.js | 2 ++
>  2 files changed, 4 insertions(+)
> 
> pmg-gui:
> Christian Ebner (1):
>   Revert "fix tracking center with newer proxmox-widget-toolkit"
> 
>  js/MailTracker.js | 2 --
>  1 file changed, 2 deletions(-)
> 


applied, thanks!