First status page docs

site/config.toml

@@ -112,6 +112,11 @@ disqusShortname = "checkly"
     url = "/docs/dashboards/"
     weight = 80
 
+[[menu.resources]]
+    name = "Status Pages"
+    url = "/docs/status-pages/"
+    weight = 85
+
 [[menu.resources]]
 	name = "Accounts & Users"
 	url = "/docs/accounts-users/"

site/content/docs/cli/constructs-reference.md

@@ -766,6 +766,69 @@ This is required if `customUrl` is not specified.
 
 [Learn more about dashboards in our docs](/docs/dashboards/)
 
+## `StatusPage`
+Creates a status page showing the uptime of connected services through cards on a public page.
+
+```ts {title="statusPage.check.ts"}
+import { StatusPage } from 'checkly/constructs'
+
+
+new StatusPage('acme-status', {
+    name: 'A.C.M.E Status',
+    url: 'acme-status',
+    customDomain: 'status.acme.com',
+    logo: 'https://acme.com/logo.png',
+    redirectTo: 'https://acme.com',
+    favicon: 'https://acme.com/favicon.ico',
+    defaultTheme: 'DARK',
+    cards: [
+        {
+            name: 'API Endpoints',
+            services: [
+                apiEndpoints,
+            ],
+        },
+        {
+            name: 'Notifications',
+            services: [
+                smsService,
+                emailService,
+                webhookService,
+            ],
+        },
+    ],
+})
+```
+- `name`: Name of the status page.
+- `url`: A subdomain name under "checkly-status-page.com". Needs to be unique across all accounts.
+- `customDomain`: A custom user domain, e.g. "status.example.com". Verification of the domain through the UI is needed after deploying the status page. [See the docs on updating your DNS and SSL usage](/docs/status-pages/#custom-domains).
+- `logo`: A URL pointing to an image file that will be used as logo in the status page header.
+- `redirectTo`: A URL link to redirect when the status page logo is clicked.
+- `favicon`: A URL pointing to an image file used as status page favicon.
+- `defaultTheme`: Theme of the status page. One of `DARK`, `LIGHT` or `AUTO`. See [status page customization for details](/docs/status-pages/#customization)
+- `cards`: An array of cards. The order of the cards determines the layout of the page.
+  - `name`: The name of the card.
+  - `services`: An array of the [services](/docs/cli/constructs-reference/#statuspageservice) displayed on the card.
+
+
+
+[Learn more about status pages in our docs](/docs/status-pages)
+
+## `StatusPageService`
+Creates a service used on status pages for providing uptime information.
+
+```ts {title="statusPageService.check.ts"}
+import { StatusPageService } from 'checkly/constructs'
+
+new StatusPageService('apiEndpoints', {
+    name: 'API Endpoints',
+})
+```
+
+- `name`: Name of the service. Displayed on the status page.
+
+[Learn more about services in our docs](/docs/status-pages/#services)
+
 ## `PrivateLocation`
 
 Creates a Private Location, so you can deploy one or more Checkly Agents on-prem, in a VPC or any segregated network.

site/content/docs/status-pages/_index.md

@@ -0,0 +1,88 @@
+---
+title: Checkly Status Pages - Checkly Docs
+displayTitle: Checkly Status Pages    
+navTitle: Overview
+weight: 47
+slug: /
+menu:
+  resources:
+    parent: "Status Pages"
+    identifier: status-pages
+---
+
+Checkly status pages allow you to easily communicate the uptime and health of your applications and services to your customers.
+
+![Status page example](/docs/images/status-pages/status-pages-overview-1.png)
+
+Status pages allow you to do the following:
+
+- Display the health and uptime of services representing critical parts of your product or business
+- Connect services to synthetic checks to automatically open incidents when checks fail and alert.
+- Automatically notify subscribed users whenever an incident is published.
+
+> Status pages are available as an add-on for customers on the enterprise plan. [Contact support for access](mailto:[email protected]).
+
+## Creating a status page
+
+To set up a status page, select ‘New status page’ on the [Status page overview](https://app.checklyhq.com/status-pages).
+
+1. Begin by selecting a name for your page.
+2. Next, create at least one **card** for your page. Cards define the order and grouping of services on your page. One card can contain one or multiple **services** and will show the average uptime for all the services on the card.
+3. If you haven’t already created a service for your page, you can do so from the `Services` dropdown. [Read more about services here](/docs/status-pages/#services).
+4. Select a subdomain for your page. By default status pages will use the domain `.checkly-status-pages.com` but you can also use your own domain. See [Custom domains](/docs/status-pages/#custom-domains) for details on how to configure this.
+5. When you are happy with your setup, click ‘Create status page.’ You will now see a preview of your page, and below the status page name, you have a link to the public page.
+
+You can now share the link to your status page, and your users can subscribe to receive notifications when incidents are posted.
+
+### Customization
+You can customize your status page with a logo, favicon, and theme.
+
+- **Logo:** Display your company logo on your status page and on email notifications for incident updates
+- **Logo link:** Direct visitors to your company website when they click the logo.
+- **Favicon:** Display your company logo or brand as the status page shortcut icon.
+- **Theme:** The theme for your status page. `Auto` will use the system settings of the user visiting the page to determine light or dark mode. Select `light` or `dark` to always display your status page in that theme.
+
+## Services
+
+A service represents a functional piece of your application of website, such as landing page, API, support portal etc. You manage your services from the service overview page, accessible in the sidebar.
+
+When naming a service, use a name that is identifiable for your users, as this is used when sending out incident notifications.
+
+Services are what connect checks and status pages. A service can listen to multiple checks and automatically opening incidents whenever one of these checks trigger a check failure alert. [See incident automation for more details](/docs/status-pages/incidents/#incident-automation).
+
+A service can be used by multiple status pages. When an incident is opened for a service, it will appear on all pages that use it. Subscribers of each of those pages will receive email notifications for the incident.
+
+
+![Services diagram](/docs/images/status-pages/status-pages-services-1.png)
+
+
+## Connecting services and status pages
+
+To display a service on a status page, go to the status page editor and open the `Services` dropdown on the card you want to display your service on. 
+
+Select your service from the list and save your status page. The page will now display the selected service. 
+
+You can also create new services directly from the dropdown by entering a new service name and pressing `Create`.
+
+You can display the same service on multiple pages. An incident declared on that service will be shown on all status pages which contain that service.
+
+## Connecting services and checks
+
+Use incident automation to connect a service and a check to automatically open incidents for services based on check alerts. [See Incident automation for details](/docs/status-pages/incidents/#incident-automation).
+
+## Custom domains
+
+You can host your status page under your own domain. To make this work, you need to do two things:
+
+1. Add a valid custom domain to your status page.
+![Custom domain configuration](/docs/images/status-pages/status-pages-custom-domain-1.png)
+
+2. Create a CNAME record in your DNS that points to custom-domain.checkly-status-page.com
+Any DNS provider will have the option to easily add CNAME records. For example on Cloudflare this looks as follows.
+![Custom domain CNAME configuration](/docs/images/status-pages/status-pages-custom-domain-2.png)
+If your provider is Cloudflare, you also need to disable the proxy on the CNAME, it should always be set to DNS only.
+
+3. Verify you are the owner of the domain by adding a `TXT` record to your DNS. The record can be copied from the status page configuration page after providing a custom domain and saving the page once.
+
+4. Add validation `TXT` record(s). The record can be copied from the status page configuration page after providing a custom domain and saving the page once.
+![Custom domain CNAME configuration](/docs/images/status-pages/status-pages-custom-domain-3.png)

site/content/docs/status-pages/incidents.md

@@ -0,0 +1,90 @@
+---
+title: Incidents - Checkly docs
+displayTitle: Incidents  
+navTitle: Incidents
+weight: 48
+menu:
+  resources:
+    parent: "Status Pages"
+---
+
+Incidents are used to communicate downtime on one or more services. You can open incidents manually as part of your incident management process, or automatically by connecting a check to a service using incident automation. 
+
+When an incident is posted, a notification will be sent to all users subscribed to the status page, unless you opt out of notifications when creating the incident update.
+
+## Creating an incident
+
+Create an incident when you want to communicate downtime or known issues of your services to users via your status page.
+
+1. Click ‘Status page’ in the sidebar and open your status page.
+2. Click ‘Add incident’
+3. Enter the name of the incident
+4. Select the severity of the incident
+5. Select which services are impacted in the dropdown list.
+
+> Note that incidents will be posted on all status pages where a service is present. [See Services for more details](/docs/status-pages/#services).
+
+6. Provide an incident update message.
+7. Select the status of the incident.
+8. If you want to backfill the incident, select `Use custom date`. See [Backfilling incidents for more information](/docs/status-pages/#backfilling-an-incident).
+9. Select if you want to notify subscribers of your status page about the incident.
+10. Click ‘Create incident’
+
+Your incident will now appear on all status pages that show the selected service(s).
+
+## Updating an incident
+
+To update an ongoing incident go to the ‘Incidents’ tab on your status page and select the incident to update.
+
+![Incidents view](/docs/images/status-pages/status-pages-incidents-1.png)
+
+
+Here you can post a new status update for the incident, or you can edit existing updates. You can also edit the impacted services or the incident severity, and delete the incident.
+
+## Incident notifications
+
+Whenever you post an incident update, Checkly can automatically send email notifications to users subscribed to your status page.
+
+Emails are sent out only when an update is first posted. Notifications are not sent again if the incident update is edited.
+
+If you want to post an incident update without notifying your subscribers you can uncheck the ‘Notifications’ checkbox when updating the incident.
+![Incident notification settings](/docs/images/status-pages/status-pages-notifications-2.png)
+
+
+Incident notifications contain information about the incident name, the severity and status as well as which services are impacted.
+![Example notification](/docs/images/status-pages/status-pages-notifications-1.png)
+
+
+## Subscribing to incident notifications
+
+Subscribing to incident notifications is done on your status page. To subscribe, a user needs to enter a valid email address. A verification email will be sent to the registered email, and only after confirming the subscription will the user start receiving incident notifications.
+
+## Incident automation
+
+Automatically open incidents whenever a check would alert with incident automation. The incident will be automatically resolved when the check recovers.
+
+Incident automation works by connecting a check to a service. When the check fails and triggers an alert it will also open an incident on the connected service. Multiple checks can be connected to the same service through incident automation.
+
+![Incident automation settings](/docs/images/status-pages/status-pages-incident-automation-1.png)
+
+1. Open your check from the home dashboard.
+2. Click ‘Edit’ in the check overview page.
+3. For API and TCP checks, click the ‘Incident triggers’ tab. For Browser and Multistep checks, first click ‘Settings’ then ‘Incident triggers’.
+4. Check the ‘Enable incident automation’ checkbox.
+5. Fill in the incident name, a first status update and the severity of the incident.
+6. Select which service the incident should be opened on.
+7. Select if the status page subscribers should be notified when the automatic incident updates are posted.
+8. Save your check.
+
+## Backfilling an incident
+
+Backfilling allows you to add incidents for downtime that happened in the past. Use backfilling to provide accurate uptime information to your users.
+
+To backfill an incident, follow the steps 1 - 7 in the [Creating an incident](/docs/status-pages/incidents/#creating-an-incident) process. Next, select ‘Use custom date to backfill incident’ and pick the date and time when the incident started.
+
+![Incident backfilling](/docs/images/status-pages/status-pages-backfilling-1.png)
+
+
+We recommend to uncheck notifications when backfilling incidents to avoid notifying customers about resolved incidents.
+
+If you only want to provide the history of the incident, you can set the first incident update to resolved. This will correctly show the incident as having occurred, but without a duration. If you want to have correct uptime on your service you should post two incident updates, with the timestamps for when the incident started and resolved respectively.