public inbox for pbs-devel@lists.proxmox.com
 help / color / mirror / Atom feed
* [pbs-devel] [PATCH v2 proxmox-backup] prune-simulator: allow setting a custom date/time
@ 2022-09-19 11:13 Matthias Heiserer
  2022-09-20 12:10 ` Fiona Ebner
  0 siblings, 1 reply; 2+ messages in thread
From: Matthias Heiserer @ 2022-09-19 11:13 UTC (permalink / raw)
  To: pbs-devel

With this, the prune simulator will be more flexible, which might clear
up questions such as these:
https://forum.proxmox.com/threads/pbs-prune-simulator-monthly-backups.115081

In order to have the configuration window not take up too much space,
I added another column and moved the border slightly to the left, so the options
part looks off-centered.

Signed-off-by: Matthias Heiserer <m.heiserer@proxmox.com>
---

CHANGES FROM v1:
squash patches
wider column so no fields are cut off
smaller year/time labels
use viewmodel instead of `const NOW`
improve patch title
24h (hh:mm) format for time

 .../prune-simulator/prune-simulator_source.js | 145 +++++++++++++-----
 1 file changed, 103 insertions(+), 42 deletions(-)

diff --git a/docs/prune-simulator/prune-simulator_source.js b/docs/prune-simulator/prune-simulator_source.js
index 84d3461c..e0948c96 100644
--- a/docs/prune-simulator/prune-simulator_source.js
+++ b/docs/prune-simulator/prune-simulator_source.js
@@ -2,7 +2,6 @@
 function gettext(val) { return val; };
 
 Ext.onReady(function() {
-    const NOW = new Date();
     const COLORS = {
 	'keep-last': 'orange',
 	'keep-hourly': 'purple',
@@ -180,7 +179,7 @@ Ext.onReady(function() {
 
 	    let html = '<table class="cal">';
 
-	    let now = new Date(NOW.getTime());
+	    let now = new Date(me.up().getViewModel().get('now'));
 	    let skip = 7 - parseInt(Ext.Date.format(now, 'N'), 10);
 	    let tableStartDate = Ext.Date.add(now, Ext.Date.DAY, skip);
 
@@ -295,6 +294,9 @@ Ext.onReady(function() {
 	alias: 'widget.prunesimulatorPanel',
 
 	viewModel: {
+	    data: {
+		now: new Date(),
+	    },
 	},
 
 	getValues: function() {
@@ -424,6 +426,8 @@ Ext.onReady(function() {
 
 	    // backups are sorted descending by date
 	    populateFromSchedule: function(weekdays, hours, minutes, weekCount) {
+		const me = this;
+
 		let weekdayFlags = [
 		    weekdays.includes('sun'),
 		    weekdays.includes('mon'),
@@ -434,7 +438,8 @@ Ext.onReady(function() {
 		    weekdays.includes('sat'),
 		];
 
-		let todaysDate = new Date(NOW.getTime());
+		const vmDate = me.getViewModel().get('now');
+		let todaysDate = new Date(vmDate);
 
 		let timesOnSingleDay = [];
 
@@ -456,9 +461,10 @@ Ext.onReady(function() {
 		    let weekday = parseInt(Ext.Date.format(daysDate, 'w'), 10);
 		    if (weekdayFlags[weekday]) {
 			timesOnSingleDay.forEach(function(time) {
-			    backups.push({
-				backuptime: Ext.Date.subtract(new Date(time), Ext.Date.DAY, i),
-			    });
+			    const backuptime = Ext.Date.subtract(new Date(time), Ext.Date.DAY, i);
+			    if (backuptime < vmDate) {
+				backups.push({ backuptime: backuptime });
+			    }
 			});
 		    }
 		}
@@ -619,6 +625,7 @@ Ext.onReady(function() {
 
 	initComponent: function() {
 	    var me = this;
+	    const vm = me.getViewModel();
 
 	    me.pruneStore = Ext.create('Ext.data.Store', {
 		model: 'pbs-prune-list',
@@ -661,48 +668,102 @@ Ext.onReady(function() {
 			{ xtype: "panel", width: 1, border: 1 },
 			{
 			    xtype: 'form',
-			    layout: 'anchor',
-			    flex: 1,
+			    layout: 'hbox',
+			    flex: 2,
 			    border: false,
 			    title: 'Simulated Backup Schedule',
-			    defaults: {
-				labelWidth: 120,
-			    },
 			    bodyPadding: 10,
 			    items: [
 				{
-				    xtype: 'prunesimulatorDayOfWeekSelector',
-				    name: 'schedule-weekdays',
-				    fieldLabel: 'Day of week',
-				    value: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
-				    allowBlank: false,
-				    multiSelect: true,
-				    padding: '0 0 0 10',
+				    xtype: 'container',
+				    layout: 'anchor',
+				    defaults: {
+					labelWidth: 120,
+				    },
+				    items: [
+					{
+					    xtype: 'prunesimulatorDayOfWeekSelector',
+					    name: 'schedule-weekdays',
+					    fieldLabel: 'Day of week',
+					    value: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
+					    allowBlank: false,
+					    multiSelect: true,
+					    padding: '0 0 0 10',
+					},
+					{
+					    xtype: 'prunesimulatorCalendarEvent',
+					    name: 'schedule-time',
+					    allowBlank: false,
+					    value: '0/6:00',
+					    fieldLabel: 'Backup schedule',
+					    padding: '0 0 0 10',
+					},
+					{
+					    xtype: 'numberfield',
+					    name: 'numberOfWeeks',
+					    allowBlank: false,
+					    fieldLabel: 'Number of weeks',
+					    minValue: 1,
+					    value: 15,
+					    maxValue: 260, // five years
+					    padding: '0 0 0 10',
+					},
+					{
+					    xtype: 'button',
+					    name: 'schedule-button',
+					    text: 'Update Schedule',
+					    formBind: true,
+					    handler: 'reloadFull',
+					},
+				    ],
 				},
 				{
-				    xtype: 'prunesimulatorCalendarEvent',
-				    name: 'schedule-time',
-				    allowBlank: false,
-				    value: '0/6:00',
-				    fieldLabel: 'Backup schedule',
-				    padding: '0 0 0 10',
-				},
-				{
-				    xtype: 'numberfield',
-				    name: 'numberOfWeeks',
-				    allowBlank: false,
-				    fieldLabel: 'Number of weeks',
-				    minValue: 1,
-				    value: 15,
-				    maxValue: 260, // five years
-				    padding: '0 0 0 10',
-				},
-				{
-				    xtype: 'button',
-				    name: 'schedule-button',
-				    text: 'Update Schedule',
-				    formBind: true,
-				    handler: 'reloadFull',
+				    xtype: 'container',
+				    layout: 'anchor',
+				    defaults: {
+					labelWidth: 60,
+				    },
+				    items: [
+					{
+					    xtype: 'datefield',
+					    name: 'currentDate',
+					    fieldLabel: 'Date',
+					    allowBlank: false,
+					    padding: '0 0 0 10',
+					    value: vm.get('now'),
+					    listeners: {
+						select: function(_, day) {
+						    const date = me.getViewModel().get('now');
+						    date.setFullYear(
+							day.getFullYear(),
+							day.getMonth(),
+							day.getDay(),
+						    );
+						},
+					    },
+					},
+					{
+					    xtype: 'timefield',
+					    name: 'currentTime',
+					    reference: 'currentTime',
+					    fieldLabel: 'Time',
+					    allowBlank: false,
+					    padding: '0 0 0 10',
+					    format: 'H:i',
+					    // cant bind value because ExtJS sets the year
+					    // to 2008 to protect against DST issues
+					    // and date picker zeroes hour/minute
+					    value: vm.get('now'),
+					    listeners: {
+						select: function(_, record) {
+						    const time = record.get('date');
+						    const date = me.getViewModel().get('now');
+						    date.setHours(time.getHours());
+						    date.setMinutes(time.getMinutes());
+						},
+					    },
+					},
+				    ],
 				},
 			    ],
 			},
@@ -734,7 +795,7 @@ Ext.onReady(function() {
 			    xtype: 'prunesimulatorPruneList',
 			    store: me.pruneStore,
 			    reference: 'pruneList',
-			    flex: 1,
+			    flex: 2,
 			},
 		    ],
 		},
-- 
2.30.2





^ permalink raw reply	[flat|nested] 2+ messages in thread

* Re: [pbs-devel] [PATCH v2 proxmox-backup] prune-simulator: allow setting a custom date/time
  2022-09-19 11:13 [pbs-devel] [PATCH v2 proxmox-backup] prune-simulator: allow setting a custom date/time Matthias Heiserer
@ 2022-09-20 12:10 ` Fiona Ebner
  0 siblings, 0 replies; 2+ messages in thread
From: Fiona Ebner @ 2022-09-20 12:10 UTC (permalink / raw)
  To: pbs-devel, Matthias Heiserer

Am 19.09.22 um 13:13 schrieb Matthias Heiserer:
> @@ -456,9 +461,10 @@ Ext.onReady(function() {
>  		    let weekday = parseInt(Ext.Date.format(daysDate, 'w'), 10);
>  		    if (weekdayFlags[weekday]) {
>  			timesOnSingleDay.forEach(function(time) {
> -			    backups.push({
> -				backuptime: Ext.Date.subtract(new Date(time), Ext.Date.DAY, i),
> -			    });
> +			    const backuptime = Ext.Date.subtract(new Date(time), Ext.Date.DAY, i);
> +			    if (backuptime < vmDate) {

Should we use '<='? Feels more intuitive to me to include a backup that
happens at the end of the schedule. (Well, one could argue it's more
realistic with '<', because that backup wouldn't be completed in
practice :P)

> +				backups.push({ backuptime: backuptime });
> +			    }
>  			});
>  		    }
>  		}

(...)

> +				    items: [
> +					{
> +					    xtype: 'datefield',
> +					    name: 'currentDate',
> +					    fieldLabel: 'Date',
> +					    allowBlank: false,
> +					    padding: '0 0 0 10',

Should we use "Y-m-d" format here, like in the backup listing? The
default seems to be "m/d/Y" and that is confusing to many people ;)

> +					    value: vm.get('now'),
> +					    listeners: {
> +						select: function(_, day) {

While this seems to work as-is, I'd prefer a change listener here too,
see below.

> +						    const date = me.getViewModel().get('now');
> +						    date.setFullYear(
> +							day.getFullYear(),
> +							day.getMonth(),
> +							day.getDay(),

getDay() returns the day of the week (0-6), not the day of the month.
getDate() seems to be the correct one, but yeah, it's a confusing name :/

> +						    );
> +						},
> +					    },
> +					},
> +					{
> +					    xtype: 'timefield',
> +					    name: 'currentTime',
> +					    reference: 'currentTime',
> +					    fieldLabel: 'Time',
> +					    allowBlank: false,
> +					    padding: '0 0 0 10',
> +					    format: 'H:i',
> +					    // cant bind value because ExtJS sets the year
> +					    // to 2008 to protect against DST issues
> +					    // and date picker zeroes hour/minute
> +					    value: vm.get('now'),
> +					    listeners: {
> +						select: function(_, record) {

Using a 'change' listener instead should make manual editing work too.
Currently, manual edits don't seem to update the view model entry.

> +						    const time = record.get('date');
> +						    const date = me.getViewModel().get('now');
> +						    date.setHours(time.getHours());
> +						    date.setMinutes(time.getMinutes());
> +						},
> +					    },
> +					},
> +				    ],
>  				},
>  			    ],
>  			},




^ permalink raw reply	[flat|nested] 2+ messages in thread

end of thread, other threads:[~2022-09-20 12:10 UTC | newest]

Thread overview: 2+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2022-09-19 11:13 [pbs-devel] [PATCH v2 proxmox-backup] prune-simulator: allow setting a custom date/time Matthias Heiserer
2022-09-20 12:10 ` Fiona Ebner

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal