From dfb75c8afb83aee87051966b87d4bb6312433e80 Mon Sep 17 00:00:00 2001 From: Louis Lam Date: Tue, 11 Oct 2022 20:56:48 +0800 Subject: [PATCH] Update status page's maintenance message --- server/model/status_page.js | 14 ++++---- src/components/MaintenanceTime.vue | 44 +++++++++++++++++++++++++ src/languages/en.js | 6 ++-- src/pages/EditMaintenance.vue | 16 --------- src/pages/ManageMaintenance.vue | 28 ++-------------- src/pages/StatusPage.vue | 53 +++++++++++++----------------- 6 files changed, 80 insertions(+), 81 deletions(-) create mode 100644 src/components/MaintenanceTime.vue diff --git a/server/model/status_page.js b/server/model/status_page.js index a5a3a4b76..4e7b38cf8 100644 --- a/server/model/status_page.js +++ b/server/model/status_page.js @@ -91,7 +91,7 @@ class StatusPage extends BeanModel { incident = incident.toPublicJSON(); } - let maintenance = await StatusPage.getMaintenanceList(statusPage.id); + let maintenanceList = await StatusPage.getMaintenanceList(statusPage.id); // Public Group List const publicGroupList = []; @@ -111,7 +111,7 @@ class StatusPage extends BeanModel { config: await statusPage.toPublicJSON(), incident, publicGroupList, - maintenance, + maintenanceList, }; } @@ -281,13 +281,13 @@ class StatusPage extends BeanModel { let activeCondition = Maintenance.getActiveMaintenanceSQLCondition(); let maintenanceBeanList = R.convertToBeans("maintenance", await R.getAll(` - SELECT m.* - FROM maintenance m, maintenance_status_page msp, maintenance_timeslot - WHERE msp.maintenance_id = m.id - AND maintenance_timeslot.maintenance.id = m.id + SELECT maintenance.* + FROM maintenance, maintenance_status_page msp, maintenance_timeslot + WHERE msp.maintenance_id = maintenance.id + AND maintenance_timeslot.maintenance_id = maintenance.id AND msp.status_page_id = ? AND ${activeCondition} - ORDER BY m.end_date + ORDER BY maintenance.end_date `, [ statusPageId ])); for (const bean of maintenanceBeanList) { diff --git a/src/components/MaintenanceTime.vue b/src/components/MaintenanceTime.vue new file mode 100644 index 000000000..66ee4abf5 --- /dev/null +++ b/src/components/MaintenanceTime.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/src/languages/en.js b/src/languages/en.js index a1c9b560c..a4c937e6e 100644 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -20,13 +20,10 @@ export default { "Selected status pages": "Selected status pages", "Select status pages...": "Select status pages...", recurringIntervalMessage: "Run once every day | Run once every {0} days", - "End": "End", affectedMonitorsDescription: "Select monitors that are affected by current maintenance", affectedStatusPages: "Show this maintenance message on selected status pages", atLeastOneMonitor: "Select at least one affected monitor", - maintenanceInvalidDate: "Invalid maintenance end date entered", selectedStatusPagesDescription: "Select status pages to display maintenance info on", - atLeastOneStatusPage: "Select at least one status page", maintenanceTitleExample: "Network infrastructure maintenance", maintenanceDescriptionExample: "Example: Network infrastructure maintenance is underway which will affect some of our services.", passwordNotMatchMsg: "The repeat password does not match.", @@ -637,4 +634,7 @@ export default { "maintenanceStatus-scheduled": "Scheduled", "maintenanceStatus-ended": "Ended", "maintenanceStatus-unknown": "Unknown", + "Display Timezone": "Display Timezone", + "Server Timezone": "Server Timezone", + statusPageMaintenanceEndDate: "End", }; diff --git a/src/pages/EditMaintenance.vue b/src/pages/EditMaintenance.vue index 242292933..71df19b1d 100644 --- a/src/pages/EditMaintenance.vue +++ b/src/pages/EditMaintenance.vue @@ -422,22 +422,6 @@ export default { return this.processing = false; } - /* - TODO: Temporary disable - if (this.maintenance.start_date >= this.maintenance.end_date) { - toast.error(this.$t("maintenanceInvalidDate")); - return this.processing = false; - } - - if (!this.showOnAllPages && this.selectedStatusPages.length === 0) { - toast.error(this.$t("atLeastOneStatusPage")); - return this.processing = false; - } - - this.maintenance.start_date = this.$root.toUTC(this.maintenance.start_date); - this.maintenance.end_date = this.$root.toUTC(this.maintenance.end_date); - */ - if (this.isAdd) { this.$root.addMaintenance(this.maintenance, async (res) => { if (res.ok) { diff --git a/src/pages/ManageMaintenance.vue b/src/pages/ManageMaintenance.vue index af9c0ba5f..9ded04595 100644 --- a/src/pages/ManageMaintenance.vue +++ b/src/pages/ManageMaintenance.vue @@ -33,13 +33,7 @@ {{ $t("maintenanceStatus-" + item.status) }} -
- {{ $t("Manual") }} -
-
- {{ item.timeslotList[0].startDateServerTimezone }} - {{ item.timeslotList[0].endDateServerTimezone }} - (UTC{{ item.timeslotList[0].serverTimezoneOffset }}) -
+ @@ -86,11 +80,13 @@ import { getResBaseURL } from "../util-frontend"; import { getMaintenanceRelativeURL } from "../util.ts"; import Confirm from "../components/Confirm.vue"; +import MaintenanceTime from "../components/MaintenanceTime.vue"; import { useToast } from "vue-toastification"; const toast = useToast(); export default { components: { + MaintenanceTime, Confirm, }, data() { @@ -265,24 +261,6 @@ export default { .status { font-size: 14px; } - - .timeslot { - margin-top: 5px; - display: inline-block; - font-size: 14px; - background-color: rgba(255, 255, 255, 0.5); - border-radius: 20px; - padding: 0 10px; - - .to { - margin: 0 6px; - } - - .dark & { - color: white; - background-color: rgba(255, 255, 255, 0.1); - } - } } } diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 699c236d2..6cecf6682 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -195,33 +195,6 @@ - - -
@@ -247,7 +220,7 @@
- {{ $t("Maintenance") }} + {{ $t("maintenanceStatus-under-maintenance") }}
@@ -256,6 +229,18 @@
+ + + {{ $t("Description") }}: @@ -327,6 +312,7 @@ import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhe import { useToast } from "vue-toastification"; import Confirm from "../components/Confirm.vue"; import PublicGroupList from "../components/PublicGroupList.vue"; +import MaintenanceTime from "../components/MaintenanceTime.vue"; import { getResBaseURL } from "../util-frontend"; import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts"; @@ -348,6 +334,7 @@ export default { ImageCropUpload, Confirm, PrismEditor, + MaintenanceTime, }, // Leave Page for vue route change @@ -388,7 +375,7 @@ export default { loadedData: false, baseURL: "", clickedEditButton: false, - maintenance: [], + maintenanceList: [], }; }, computed: { @@ -594,7 +581,7 @@ export default { } this.incident = res.data.incident; - this.maintenance = res.data.maintenance; + this.maintenanceList = res.data.maintenanceList; this.$root.publicGroupList = res.data.publicGroupList; }).catch( function (error) { if (error.response.status === 404) { @@ -1069,4 +1056,10 @@ footer { } } +.bg-maintenance { + .alert-heading { + font-weight: bold; + } +} +