We're not aware of any issues affecting our systems.
`
+ : `Affected: ${affected.map((component) => `${escapeHtml(component.name)} (${COMPONENT_STATUS_LABEL[component.status]})`).join(", ")}. We'll post an update here.
`
+ : `): string => {
+ const first = days[0]
+ const last = days.at(-1)
+ const label =
+ first === undefined || last === undefined
+ ? "Uptime"
+ : `Uptime, ${formatDay(first.day)} to ${formatDay(last.day)}`
+ const bars = days
.map((bar) => {
const state = dayState(bar)
return `${bars} `
+ return `${bars} `
}
const renderComponent = (component: StatusPageSnapshotComponent): string => {
const description =
component.description === null ? "" : `${escapeHtml(component.description)}
`
- return `${escapeHtml(component.name)} ${COMPONENT_STATUS_LABEL[component.status]}
${description}${renderBars(component)}
${percent === null ? "No data" : `${formatPercent(percent)} uptime`} `
+ return `${statusName(component.name, component.status)}${uptime}
${description}${showsBars ? renderBars(days) : ""}
System status ${shown === undefined ? "" : pager("window", label, "90 days")}`
const groups = groupComponents(snapshot.components)
.map((group) => {
- const head =
+ const groupHead =
group.name === null
? ""
- : `${escapeHtml(group.name)} ${COMPONENT_STATUS_LABEL[group.status]}
`
- return `${head}${group.components.map(renderComponent).join("")}
`
+ : `${statusName(group.name, group.status)}
`
+ return `${groupHead}${group.components.map(renderComponent).join("")}
`
})
.join("")
- return ``
+ return ``
}
-const renderSection = (id: string, title: string, inner: string): string =>
- ``
+const WEEKDAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+
+/** `Oct 18, 2026: 2 incidents`, naming maintenance apart from incidents. */
+const dayLabel = (day: string, mark: CalendarDay, entries: ReadonlyArray): string => {
+ const kinds = mark.entries.map((index) => entries[index]?.kind)
+ const incidents = kinds.filter((kind) => kind === "incident").length
+ const maintenance = kinds.length - incidents
+ const parts = [
+ incidents === 0 ? "" : `${incidents} ${incidents === 1 ? "incident" : "incidents"}`,
+ maintenance === 0 ? "" : `${maintenance} maintenance`,
+ ].filter((part) => part !== "")
+ return `${formatDay(day)}: ${parts.join(", ")}`
+}
+
+const renderCalendar = (
+ today: string,
+ days: ReadonlyMap,
+ entries: ReadonlyArray,
+): string => {
+ const [yearText = "1970", monthText = "01"] = today.split("-")
+ const year = Number(yearText)
+ const month = Number(monthText)
+ const cells = monthCells(year, month).map((date) => {
+ if (date === 0) return "${date} ${date} ${cells.slice(week * 7, week * 7 + 7).join("")} `,
+ ).join("")
+ const head = WEEKDAYS.map((name) => `${name.slice(0, 1)} `).join("")
+ return `
Calendar ${pager("month", `${MONTHS[month - 1] ?? ""} ${year}`, "month")}
,
+ days: ReadonlyMap,
+) => {
+ const withBars = barComponents(snapshot.components)
+ const longest = withBars.reduce(
+ (best, component) =>
+ best === undefined || component.days.length > best.days.length ? component : best,
+ undefined,
+ )
+ return {
+ end: longest?.days.at(-1)?.day ?? today,
+ len: longest?.days.length ?? 0,
+ windows: windowCount(snapshot.components),
+ bars: Object.fromEntries(
+ withBars.map((component) => [
+ component.id,
+ component.days.map((bar) =>
+ bar.checks === 0 ? 0 : [bar.checks, bar.failures, bar.downChecks],
+ ),
+ ]),
+ ),
+ today,
+ months: calendarMonthCount(today),
+ entries: entries.map((entry) => ({
+ title: entry.title,
+ tone: entry.tone,
+ meta: `${entry.kind === "maintenance" ? "Maintenance" : IMPACT_LABEL[entry.impact]} · ${entry.status}`,
+ href: entry.listed ? `#incident-${entry.id}` : null,
+ })),
+ days: Object.fromEntries(
+ [...days].map(([day, mark]) => [day, [mark.tone, mark.entries, dayLabel(day, mark, entries)]]),
+ ),
+ }
+}
+
+/** JSON safe inside a ``,
].join("")
return renderDocument({
diff --git a/packages/status-page/src/preview.ts b/packages/status-page/src/preview.ts
index b0b006be1b..4e8ef35212 100644
--- a/packages/status-page/src/preview.ts
+++ b/packages/status-page/src/preview.ts
@@ -9,7 +9,7 @@ import {
incidentComponentStatus,
isActiveIncident,
lastDays,
- STATUS_PAGE_HISTORY_DAYS,
+ STATUS_PAGE_WINDOW_DAYS,
STATUS_PAGE_SNAPSHOT_VERSION,
type StatusPageSnapshot,
type StatusPageSnapshotIncident,
@@ -29,7 +29,8 @@ export interface PreviewComponent {
/**
* A snapshot of what the page would look like with the editor's draft, for the dashboard
- * preview. Monitored components get empty day bars: the preview shows shape, not history.
+ * preview. Monitored components get one window of empty bars: the preview shows shape, not
+ * history. The calendar marks the incidents passed in.
*/
export const previewSnapshot = (input: {
readonly pageId: StatusPageId
@@ -40,7 +41,7 @@ export const previewSnapshot = (input: {
readonly nowMs: number
}): StatusPageSnapshot => {
const active = input.incidents.filter(isActiveIncident)
- const emptyDays = lastDays(input.nowMs, STATUS_PAGE_HISTORY_DAYS).map((day) => ({
+ const emptyDays = lastDays(input.nowMs, STATUS_PAGE_WINDOW_DAYS).map((day) => ({
day,
checks: 0,
failures: 0,
@@ -78,5 +79,15 @@ export const previewSnapshot = (input: {
}
}),
incidents: input.incidents,
+ incidentHistory: input.incidents
+ .filter((incident) => !(incident.kind === "maintenance" && incident.status === "scheduled"))
+ .map((incident) => ({
+ id: incident.id,
+ title: incident.title,
+ kind: incident.kind,
+ impact: incident.impact,
+ startedAt: incident.startedAt,
+ resolvedAt: incident.resolvedAt,
+ })),
}
}
diff --git a/packages/status-page/src/render.test.ts b/packages/status-page/src/render.test.ts
index 8a11388f00..eae0537a4a 100644
--- a/packages/status-page/src/render.test.ts
+++ b/packages/status-page/src/render.test.ts
@@ -5,6 +5,7 @@ import {
type StatusPageSnapshot,
type StatusPageTheme,
} from "@maple/domain/status-page"
+import { Schema } from "effect"
import { describe, expect, it } from "vitest"
import {
FIXTURE_NOW,
@@ -50,6 +51,8 @@ const hostileSnapshot = makeSnapshot({
logoUrl: "http://insecure.example/logo.png",
theme: DEFAULT_STATUS_PAGE_THEME,
showPoweredBy: false,
+ privacyUrl: "javascript:alert(1)",
+ termsUrl: null,
},
components: [makeComponent(0, { name: HOSTILE, group: HOSTILE, description: HOSTILE })],
incidents: [
@@ -75,7 +78,8 @@ describe("renderPage", () => {
it("escapes every piece of customer text and drops unsafe URLs and colours", () => {
const html = renderPage(hostileSnapshot, live, FIXTURE_NOW)
expect(html).not.toContain(`