all lists on 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 an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal