Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GIFT Week, Winter 2024: create new Status Page Alert (experimental) component #3825

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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 = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>GOV.UK Status - Incident History</title>
<link>https://status.publishing.service.gov.uk</link>
<description>Statuspage</description>
<pubDate>Mon, 08 Jan 2024 17:43:10 +0000</pubDate>
<item>
<title>[maintenanceFuture] GOV.UK Publishing maintenance Tue 16 Jan 12:00-16:00 GMT (future planned maintenance)</title>
<description>
&lt;p&gt;&lt;strong&gt;THIS IS A SCHEDULED EVENT Jan &lt;var data-var=&apos;date&apos;&gt;16&lt;/var&gt;, &lt;var data-var=&apos;time&apos;&gt;12:00&lt;/var&gt; - &lt;var data-var=&apos;time&apos;&gt;16:00&lt;/var&gt; GMT&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;small&gt;Jan &lt;var data-var=&apos;date&apos;&gt; 8&lt;/var&gt;, &lt;var data-var=&apos;time&apos;&gt;16:20&lt;/var&gt; GMT&lt;/small&gt;&lt;br&gt;&lt;strong&gt;Scheduled&lt;/strong&gt; - Hello,&lt;br /&gt;&lt;br /&gt;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.&lt;br /&gt;&lt;br /&gt;Everything should continue to work normally throughout.&lt;br /&gt;&lt;br /&gt;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.&lt;br /&gt;&lt;br /&gt;We&apos;re letting you know so that you can plan around these times if you so wish.&lt;br /&gt;If you have highly time-sensitive content to publish at the same time as the maintenance, contact [email protected] 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.&lt;br /&gt;&lt;br /&gt;If you encounter problems during or after the maintenance, please contact GOV.​UK support as normal.&lt;br /&gt;&lt;br /&gt;You can follow updates on the GOV.UK Status Page.&lt;br /&gt;&lt;br /&gt;Best wishes,&lt;br /&gt;Chris Banks, on behalf of the GOV.UK Platform Engineering team&lt;br /&gt;&lt;br /&gt;Background information for the curious:&lt;br /&gt;&lt;br /&gt;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.&lt;br /&gt;&lt;br /&gt;We&apos;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&apos;s always a chance of unforeseen circumstances arising in production that didn&apos;t come up during testing.&lt;/p&gt; </description>
<pubDate>Tue, 16 Jan 2024 12:00:00 +0000</pubDate>
<maintenanceEndDate>Tue, 16 Jan 2024 16:00:00 +0000</maintenanceEndDate>
<link>https://status.publishing.service.gov.uk/incidents/cnntrg2j816c</link>
<guid>https://status.publishing.service.gov.uk/incidents/cnntrg2j816c</guid>
</item>
</channel>
</rss>`;
}

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('<strong>Resolved</strong>')) {
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)
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<%
add_gem_component_stylesheet("status-page-alert")
%>

<div class="gem-c-status-page-alert" data-module="status-page-alert">
<div class="alert-message">
<p class="govuk-body">GOV.UK status: publishing apps are working and there is no maintenance planned.</p>
</div>

<div class="alert-message">
<%= render "govuk_publishing_components/components/details", {
title: "GOV.UK status: there’s something happening right now that may affect you."
} do %>
<p class="govuk-!-font-weight-bold">Happening now</p>

<ul>
<li>Some publications can't be retrieved for GOV.UK frontend applications</li>
</ul>

<p>To learn more visit the <a href="https://status.publishing.service.gov.uk/" target="_blank">GOV.UK status page</a> (opens in a new tab)</p>
<% end %>
</div>

<div class="alert-message">
<%= render "govuk_publishing_components/components/details", {
title: "GOV.UK status: there’s some maintenance coming up that may affect you."
} do %>
<p class="govuk-!-font-weight-bold">Happening soon</p>

<ul>
<li>Delayed publishing due to scheduled maintenance from <span class="startDateTime">[datetime]</span> to <span class="startEndTime">[datetime]</span></li>
</ul>

<p>To learn more visit the <a href="https://status.publishing.service.gov.uk/" target="_blank">GOV.UK status page</a> (opens in a new tab)</p>
<% end %>
</div>

<div class="alert-message">
<%= 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 %>
<p class="govuk-!-font-weight-bold">Happening now</p>

<ul>
<li>Some publications can't be retrieved for GOV.UK frontend applications</li>
</ul>

<p class="govuk-!-font-weight-bold">Happening soon</p>

<ul>
<li>Delayed publishing due to scheduled maintenance from [datetime] to [datetime]</li>
</ul>

<p>To learn more visit the <a href="https://status.publishing.service.gov.uk/" target="_blank">GOV.UK status page</a> (opens in a new tab)</p>
<% end %>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -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:
Loading