fix: improve maintenance date-range sync and validation

server/model/maintenance.js

@@ -177,6 +177,15 @@ class Maintenance extends BeanModel {
             bean.end_date = null;
         }
 
+        if (bean.start_date && bean.end_date) {
+            const startDate = new Date(bean.start_date);
+            const endDate = new Date(bean.end_date);
+
+            if (endDate.getTime() < startDate.getTime()) {
+                throw new Error("End date must be after start date");
+            }
+        }
+
         if (bean.strategy === "cron") {
             bean.duration = obj.durationMinutes * 60;
             bean.cron = obj.cron;

src/pages/EditMaintenance.vue

@@ -461,6 +461,8 @@ export default {
             timezoneList: timezoneList(),
             processing: false,
             maintenance: {},
+            isUpdatingEndDateProgrammatically: false,
+            endDateManuallyEdited: false,
             affectedMonitors: [],
             affectedMonitorsOptions: [],
             showOnAllPages: false,
@@ -613,13 +615,32 @@ export default {
             if (!this.maintenance.dateRange?.[0] || !this.maintenance.dateRange?.[1]) {
                 return null;
             }
-            const start = new Date(this.maintenance.dateRange[0]);
-            const end = new Date(this.maintenance.dateRange[1]);
-            if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            const start = this.parseDateTime(this.maintenance.dateRange[0]);
+            const end = this.parseDateTime(this.maintenance.dateRange[1]);
+            if (!start || !end) {
                 return null;
             }
             return Math.round((end.getTime() - start.getTime()) / 60000);
         },
+
+        singleStartDate() {
+            return this.maintenance.dateRange?.[0] ?? "";
+        },
+
+        singleEndDate() {
+            return this.maintenance.dateRange?.[1] ?? "";
+        },
+
+        hasInvalidDateRange() {
+            const start = this.parseDateTime(this.maintenance.dateRange?.[0]);
+            const end = this.parseDateTime(this.maintenance.dateRange?.[1]);
+
+            if (!start || !end) {
+                return false;
+            }
+
+            return end.getTime() < start.getTime();
+        },
     },
     watch: {
         "$route.fullPath"() {
@@ -631,6 +652,45 @@ export default {
                 this.maintenance.recurringEndDate = "";
             }
         },
+
+        singleStartDate(newStart, oldStart) {
+            if (this.maintenance.strategy !== "single") {
+                return;
+            }
+
+            const newStartDate = this.parseDateTime(newStart);
+            const oldStartDate = this.parseDateTime(oldStart);
+            const currentEndDate = this.parseDateTime(this.maintenance.dateRange?.[1]);
+
+            if (!newStartDate || !oldStartDate || !currentEndDate || this.endDateManuallyEdited) {
+                return;
+            }
+
+            const durationMinutes = Math.round((currentEndDate.getTime() - oldStartDate.getTime()) / 60000);
+            if (!Number.isFinite(durationMinutes)) {
+                return;
+            }
+
+            this.updateEndDateFromDuration(newStartDate, durationMinutes);
+        },
+
+        singleEndDate(newEnd, oldEnd) {
+            if (this.maintenance.strategy !== "single") {
+                return;
+            }
+
+            if (!oldEnd || !newEnd || this.isUpdatingEndDateProgrammatically) {
+                return;
+            }
+
+            this.endDateManuallyEdited = true;
+        },
+
+        "maintenance.strategy"(value) {
+            if (value === "single") {
+                this.endDateManuallyEdited = false;
+            }
+        },
     },
     mounted() {
         this.$root.getMonitorList((res) => {
@@ -670,28 +730,72 @@ export default {
         });
     },
     methods: {
+        /**
+         * Parse datetime-local string
+         * @param {string} value Datetime-local value
+         * @returns {Date|null} Parsed date
+         */
+        parseDateTime(value) {
+            if (!value) {
+                return null;
+            }
+
+            const date = new Date(value);
+            if (isNaN(date.getTime())) {
+                return null;
+            }
+
+            return date;
+        },
+
+        /**
+         * Format date to datetime-local compatible string
+         * @param {Date} date Date to format
+         * @returns {string} Datetime-local string
+         */
+        formatDateTime(date) {
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, "0");
+            const day = String(date.getDate()).padStart(2, "0");
+            const hours = String(date.getHours()).padStart(2, "0");
+            const minutes = String(date.getMinutes()).padStart(2, "0");
+            return `${year}-${month}-${day}T${hours}:${minutes}`;
+        },
+
+        /**
+         * Update end date from start date and duration
+         * @param {Date} startDate Start date
+         * @param {number} durationMinutes Duration in minutes
+         * @returns {void}
+         */
+        updateEndDateFromDuration(startDate, durationMinutes) {
+            if (!startDate || !Number.isFinite(durationMinutes)) {
+                return;
+            }
+
+            const endDate = new Date(startDate.getTime() + durationMinutes * 60000);
+
+            this.isUpdatingEndDateProgrammatically = true;
+            this.maintenance.dateRange[1] = this.formatDateTime(endDate);
+            this.$nextTick(() => {
+                this.isUpdatingEndDateProgrammatically = false;
+            });
+        },
         /**
          * Initialise page
          * @returns {void}
          */
         init() {
             this.affectedMonitors = [];
             this.selectedStatusPages = [];
+            this.endDateManuallyEdited = false;
+            this.isUpdatingEndDateProgrammatically = false;
 
             if (this.isAdd) {
                 // Get current date/time in local timezone
                 const now = new Date();
                 const oneHourLater = new Date(now.getTime() + 60 * 60000);
 
-                const formatDateTime = (date) => {
-                    const year = date.getFullYear();
-                    const month = String(date.getMonth() + 1).padStart(2, "0");
-                    const day = String(date.getDate()).padStart(2, "0");
-                    const hours = String(date.getHours()).padStart(2, "0");
-                    const minutes = String(date.getMinutes()).padStart(2, "0");
-                    return `${year}-${month}-${day}T${hours}:${minutes}`;
-                };
-
                 this.maintenance = {
                     title: "",
                     description: "",
@@ -700,7 +804,7 @@ export default {
                     cron: "30 3 * * *",
                     durationMinutes: 60,
                     intervalDay: 1,
-                    dateRange: [formatDateTime(now), formatDateTime(oneHourLater)],
+                    dateRange: [this.formatDateTime(now), this.formatDateTime(oneHourLater)],
                     timeRange: [
                         {
                             hours: 2,
@@ -789,16 +893,14 @@ export default {
                 return;
             }
 
-            const startDate = new Date(this.maintenance.dateRange[0]);
-            const endDate = new Date(startDate.getTime() + minutes * 60000);
-
-            const year = endDate.getFullYear();
-            const month = String(endDate.getMonth() + 1).padStart(2, "0");
-            const day = String(endDate.getDate()).padStart(2, "0");
-            const hours = String(endDate.getHours()).padStart(2, "0");
-            const mins = String(endDate.getMinutes()).padStart(2, "0");
+            const startDate = this.parseDateTime(this.maintenance.dateRange[0]);
+            if (!startDate) {
+                this.$root.toastError(this.$t("Please set start time first"));
+                return;
+            }
 
-            this.maintenance.dateRange[1] = `${year}-${month}-${day}T${hours}:${mins}`;
+            this.endDateManuallyEdited = false;
+            this.updateEndDateFromDuration(startDate, minutes);
         },
 
         /**
@@ -827,6 +929,12 @@ export default {
                 return;
             }
 
+            if (this.hasInvalidDateRange) {
+                this.$root.toastError("End date must be after start date");
+                this.processing = false;
+                return;
+            }
+
             if (this.isAdd || this.isClone) {
                 this.$root.addMaintenance(this.maintenance, async (res) => {
                     if (res.ok) {

test/backend-test/test-maintenance.js

@@ -0,0 +1,71 @@
+const { describe, test } = require("node:test");
+const assert = require("node:assert");
+const Maintenance = require("../../server/model/maintenance");
+
+describe("Maintenance model", () => {
+    describe("jsonToBean()", () => {
+        test("accepts valid single maintenance date range", async () => {
+            const bean = {};
+            const payload = {
+                title: "Planned upgrade",
+                description: "Rolling deployment window",
+                strategy: "single",
+                intervalDay: 1,
+                timezoneOption: "UTC",
+                active: 1,
+                dateRange: ["2026-02-24T01:00", "2026-02-24T02:00"],
+                timeRange: [],
+                weekdays: [],
+                daysOfMonth: [],
+            };
+
+            await assert.doesNotReject(async () => {
+                await Maintenance.jsonToBean(bean, payload);
+            });
+
+            assert.strictEqual(bean.start_date, "2026-02-24T01:00");
+            assert.strictEqual(bean.end_date, "2026-02-24T02:00");
+            assert.strictEqual(bean.strategy, "single");
+        });
+
+        test("rejects when end date predates start date", async () => {
+            const bean = {};
+            const payload = {
+                title: "Invalid range",
+                description: "",
+                strategy: "single",
+                intervalDay: 1,
+                timezoneOption: "UTC",
+                active: 1,
+                dateRange: ["2026-02-24T03:00", "2026-02-24T02:00"],
+                timeRange: [],
+                weekdays: [],
+                daysOfMonth: [],
+            };
+
+            await assert.rejects(async () => {
+                await Maintenance.jsonToBean(bean, payload);
+            }, /End date must be after start date/);
+        });
+
+        test("rejects invalid start date format", async () => {
+            const bean = {};
+            const payload = {
+                title: "Bad date",
+                description: "",
+                strategy: "single",
+                intervalDay: 1,
+                timezoneOption: "UTC",
+                active: 1,
+                dateRange: ["not-a-date", "2026-02-24T02:00"],
+                timeRange: [],
+                weekdays: [],
+                daysOfMonth: [],
+            };
+
+            await assert.rejects(async () => {
+                await Maintenance.jsonToBean(bean, payload);
+            }, /Invalid start date/);
+        });
+    });
+});