diff --git a/app/assets/config/govuk_publishing_components_sassc-rails_manifest.js b/app/assets/config/govuk_publishing_components_sassc-rails_manifest.js index 3d558d8d79..53ee510ad6 100644 --- a/app/assets/config/govuk_publishing_components_sassc-rails_manifest.js +++ b/app/assets/config/govuk_publishing_components_sassc-rails_manifest.js @@ -77,6 +77,7 @@ //= link govuk_publishing_components/components/_signup-link.css //= link govuk_publishing_components/components/_single-page-notification-button.css //= link govuk_publishing_components/components/_skip-link.css +//= link govuk_publishing_components/components/_status-page-alert.css //= link govuk_publishing_components/components/_step-by-step-nav-header.css //= link govuk_publishing_components/components/_step-by-step-nav-related.css //= link govuk_publishing_components/components/_step-by-step-nav.css diff --git a/app/assets/javascripts/govuk_publishing_components/components/status-page-alert.js b/app/assets/javascripts/govuk_publishing_components/components/status-page-alert.js new file mode 100644 index 0000000000..f885a9add3 --- /dev/null +++ b/app/assets/javascripts/govuk_publishing_components/components/status-page-alert.js @@ -0,0 +1,97 @@ +window.GOVUK = window.GOVUK || {} +window.GOVUK.Modules = window.GOVUK.Modules || {}; + +(function (Modules) { + function StatusPageAlert ($module) { + this.$module = $module + this.items = {} + this.incidentCurrent = [] + this.incidentPast = [] + this.maintenanceCurrent = [] + this.maintenanceFuture = [] + this.maintenancePast = [] + this.xmlString = ` + + + GOV.UK Status - Incident History + https://status.publishing.service.gov.uk + Statuspage + Mon, 08 Jan 2024 17:43:10 +0000 + + [maintenanceFuture] GOV.UK Publishing maintenance Tue 16 Jan 12:00-16:00 GMT (future planned maintenance) + +<p><strong>THIS IS A SCHEDULED EVENT Jan <var data-var='date'>16</var>, <var data-var='time'>12:00</var> - <var data-var='time'>16:00</var> GMT</strong></p><p><small>Jan <var data-var='date'> 8</var>, <var data-var='time'>16:20</var> GMT</small><br><strong>Scheduled</strong> - Hello,<br /><br />We plan to do some maintenance work on the GOV.UK Publishing applications on Tue 16 January 2024 between 12:00 and 16:00 GMT.<br /><br />Everything should continue to work normally throughout.<br /><br />However, if we encounter unforeseen difficulties then there is a chance that publishing new content or changing URLs of existing content might be delayed in taking effect until the maintenance is finished.<br /><br />We're letting you know so that you can plan around these times if you so wish.<br />If you have highly time-sensitive content to publish at the same time as the maintenance, contact govuk-platform-engineering@digital.cabinet-office.gov.uk in advance and we can reschedule. If emergency publishing is needed on the day, we’ll either roll back the changes or finish them if that will be faster.<br /><br />If you encounter problems during or after the maintenance, please contact GOV.​UK support as normal.<br /><br />You can follow updates on the GOV.UK Status Page.<br /><br />Best wishes,<br />Chris Banks, on behalf of the GOV.UK Platform Engineering team<br /><br />Background information for the curious:<br /><br />GOV.UK has a component called Router, which has a database that keeps track of all the pages on www.gov.uk and where to fetch them when users browse the website. We need to move this database to our new Kubernetes infrastructure so that we can finally switch off the old infrastructure. This reduces our engineering costs and helps us keep GOV.UK secure and reliable.<br /><br />We've designed and tested this change to be zero-impact to you as the user, but we still need to let you know about it because with these things there's always a chance of unforeseen circumstances arising in production that didn't come up during testing.</p> + Tue, 16 Jan 2024 12:00:00 +0000 + Tue, 16 Jan 2024 16:00:00 +0000 + https://status.publishing.service.gov.uk/incidents/cnntrg2j816c + https://status.publishing.service.gov.uk/incidents/cnntrg2j816c + + +`; + } + + StatusPageAlert.prototype.init = function () { + var parser = new DOMParser(); + var xmlDoc = parser.parseFromString(this.xmlString, "text/xml"); + + this.items = xmlDoc.documentElement.querySelectorAll("item"); + this.itemsCategorise() + } + + StatusPageAlert.prototype.itemsCategorise = function() { + var now = new Date(); + + this.items.forEach((item) => { + // Planned maintenance + if (item.querySelector('maintenanceEndDate')) { + var pubDate = Date.parse(item.querySelector('pubDate').textContent) + var MaintenanceEndDate = Date.parse(item.querySelector('maintenanceEndDate').textContent) + var currentTime = Date.parse(now) + + if (pubDate > currentTime) { + this.maintenanceFuture.push(item) + } else if (pubDate < currentTime && MaintenanceEndDate > currentTime) { + this.maintenanceCurrent.push(item) + } else { + this.maintenancePast.push(item) + } + // Incidents + } else { + if (item.querySelector('description').textContent.includes('Resolved')) { + this.incidentPast.push(item) + } else { + this.incidentCurrent.push(item) + } + } + }) + + this.addAlert() + } + + StatusPageAlert.prototype.addAlert = function() { + var alertLocation = this.$module + var alertMessages = alertLocation.querySelectorAll('.alert-message') + + if (this.maintenanceFuture.length > 0 && (this.maintenanceCurrent.length > 0 || this.incidentCurrent.length > 0)) { + alertMessages[3].style.display = "block" + } else if (this.maintenanceCurrent.length > 0 || this.incidentCurrent.length > 0) { + alertMessages[1].style.display = "block" + } else if (this.maintenanceFuture.length > 0 && this.maintenanceCurrent.length == 0 && this.incidentCurrent.length == 0) { + var start = new Date(this.maintenanceFuture[0].querySelector('pubDate').textContent) + var end = new Date(this.maintenanceFuture[0].querySelector('maintenanceEndDate').textContent) + + var startDate = start.toLocaleDateString('en-GB') + var endDate = end.toLocaleDateString('en-GB') + var startTime = start.toLocaleTimeString('en-GB') + var endTime = end.toLocaleTimeString('en-GB') + + alertMessages[2].querySelector('.startDateTime').textContent = `${startDate} at ${startTime}` + alertMessages[2].querySelector('.startEndTime').textContent = `${endDate} at ${endTime}` + alertMessages[2].style.display = "block" + } else { + alertMessages[0].style.display = "block" + } + } + + Modules.StatusPageAlert = StatusPageAlert +})(window.GOVUK.Modules) diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss index f4b0f77941..3196e5d319 100644 --- a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +++ b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss @@ -74,6 +74,7 @@ $govuk-new-link-styles: true; @import "components/signup-link"; @import "components/single-page-notification-button"; @import "components/skip-link"; +@import "components/status-page-alert"; @import "components/step-by-step-nav-header"; @import "components/step-by-step-nav-related"; @import "components/step-by-step-nav"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_status-page-alert.scss b/app/assets/stylesheets/govuk_publishing_components/components/_status-page-alert.scss new file mode 100644 index 0000000000..c62026372b --- /dev/null +++ b/app/assets/stylesheets/govuk_publishing_components/components/_status-page-alert.scss @@ -0,0 +1,19 @@ +@import "govuk_publishing_components/individual_component_support"; + +.gem-c-status-page-alert { + .alert-message { + @include govuk-responsive-padding(3, "top"); + + display: none; + + p { + @include govuk-responsive-margin(3, "bottom"); + } + + .govuk-details__text { + p:last-child { + margin: 0; + } + } + } +} diff --git a/app/views/govuk_publishing_components/components/_status_page_alert.html.erb b/app/views/govuk_publishing_components/components/_status_page_alert.html.erb new file mode 100644 index 0000000000..9726389587 --- /dev/null +++ b/app/views/govuk_publishing_components/components/_status_page_alert.html.erb @@ -0,0 +1,57 @@ +<% + add_gem_component_stylesheet("status-page-alert") +%> + +
+
+

GOV.UK status: publishing apps are working and there is no maintenance planned.

+
+ +
+ <%= render "govuk_publishing_components/components/details", { + title: "GOV.UK status: there’s something happening right now that may affect you." + } do %> +

Happening now

+ + + +

To learn more visit the GOV.UK status page (opens in a new tab)

+ <% end %> +
+ +
+ <%= render "govuk_publishing_components/components/details", { + title: "GOV.UK status: there’s some maintenance coming up that may affect you." + } do %> +

Happening soon

+ + + +

To learn more visit the GOV.UK status page (opens in a new tab)

+ <% end %> +
+ +
+ <%= render "govuk_publishing_components/components/details", { + title: "GOV.UK status: there’s something happening right now that may affect you and there’s some maintenance coming up." + } do %> +

Happening now

+ + + +

Happening soon

+ + + +

To learn more visit the GOV.UK status page (opens in a new tab)

+ <% end %> +
+
diff --git a/app/views/govuk_publishing_components/components/docs/status_page_alert.yml b/app/views/govuk_publishing_components/components/docs/status_page_alert.yml new file mode 100644 index 0000000000..89ae35289a --- /dev/null +++ b/app/views/govuk_publishing_components/components/docs/status_page_alert.yml @@ -0,0 +1,7 @@ +name: Status page alert (experimental) +description: Displays an alert in a publishing app to inform users of incidents or ongoing and imminent maintenance that may effect them. +accessibility_criteria: | + - stuff +examples: + default: + data: