Customize your status page with CloudFlare Worker and Atlassian Status Page
Introduction
In today’s world, where online presence is everything, businesses and organizations must ensure their online services are up and running 24/7. A downtime or outage can result in a significant loss of revenue, user trust, and reputation. That’s where a status page comes in. A status page is a web page that provides real-time updates on the status of an online service or application. In this blog post, we will discuss how to customize your status page using CloudFlare Worker and Atlassian’s Status Page.
Atlassian’s Status Page
Atlassian’s Status Page is a hosted status page service that enables businesses and organizations to create and maintain a status page for their online services. Atlassian’s Status Page provides build-in components of many Cloud Services, such as AWS, Azure, Google Cloud, and more. It also provides a REST API that allows developers to customize the appearance and behavior of the status page.
Add a new component
You could add a new component to your status page by clicking the Add Component button on the top right corner of the page. (https://support.atlassian.com/statuspage/docs/what-is-a-component/)
Add Custom System Metrics
You could also add custom system metrics to your status page by clicking the Your Page then System Metrics button on the top right corner of the page. With the code generated by the status page, you could send custom metrics to your status page.
Get API Key
You could get the API key of your status page by clicking the Your Page then API button on the top right corner of the page. With the API key, you could send custom metrics to your status page.
Demo code
var http = require('http');
// The following 4 are the actual values that pertain to your account and this specific metric.
var apiKey = 'your-api-key-goes-here';
var pageId = 'your-page-id';
var metricId = 'your-metric-id';
var apiBase = 'https://api.statuspage.io/v1';
var url = apiBase + '/pages/' + pageId + '/metrics/' + metricId + '/data.json';
var authHeader = { 'Authorization': 'OAuth ' + apiKey };
var options = { method: 'POST', headers: authHeader };
// Need at least 1 data point for every 5 minutes.
// Submit random data for the whole day.
var totalPoints = 60 / 5 * 24;
var epochInSeconds = Math.floor(new Date() / 1000);
// This function gets called every second.
function submit(count) {
count = count + 1;
if(count > totalPoints) return;
var currentTimestamp = epochInSeconds - (count - 1) * 5 * 60;
var randomValue = Math.floor(Math.random() * 1000);
var data = {
timestamp: currentTimestamp,
value: randomValue,
};
var request = http.request(url, options, function (res) {
if (res.statusMessage === "Unauthorized") {
const genericError =
"Error encountered. Please ensure that your page code and authorization key are correct.";
return console.error(genericError);
}
res.on("data", function () {
console.log("Submitted point " + count + " of " + totalPoints);
});
res.on("end", function () {
setTimeout(function () {
submit(count);
}, 1000);
});
res.on("error", (error) => {
console.error(`Error caught: ${error.message}`);
});
});
request.end(JSON.stringify({ data: data }));
}
// Initial call to start submitting data.
submit(0);
CloudFlare Worker
CloudFlare Workers is a serverless platform that provides developers with a way to run their code on CloudFlare’s edge network. CloudFlare Workers are event-driven, meaning they only run when triggered by an event. In the context of a status page, CloudFlare Workers can be used to customize the appearance and behavior of the page.
See Website Health Check with Cloudflare Worker to get formiliar with CloudFlare Worker and start a new project.
Start a new project
To start a new project, besides use Cloudflare web UI, you could also install the CloudFlare Worker CLI and initialize a new project. The following command will create a new project in the current directory.
```bash
npm install -g @cloudflare/wrangler
wrangler init [NAME] [-y / --yes] [--from-dash]
```
To release the project to CloudFlare Worker.
```bash
wrangler publish
```
Send custom metrics to status page
The following demo code will send random custom metrics to your status page. You could change the apiKey, pageId, metricId to your own values.
Demo code
async function gatherResponse(response) {
const { headers } = response;
const contentType = headers.get("content-type") || "";
if (contentType.includes("application/json")) {
return JSON.stringify(await response.json());
} else if (contentType.includes("application/text")) {
return response.text();
} else if (contentType.includes("text/html")) {
return response.text();
} else {
return response.text();
}
}
async function submit(count) {
var apiKey = 'your-api-key';
var pageId = 'your-page-id';
var metricId = 'your-metric-id';
var apiBase = 'https://api.statuspage.io/v1';
var url = apiBase + '/pages/' + pageId + '/metrics/' + metricId + '/data.json';
var randomValue = Math.floor(Math.random() * 100);
var currentTimestamp = count;
var data = {
value: randomValue,
timestamp: currentTimestamp,
};
const init = {
body: JSON.stringify({ data: data }),
method: "POST",
headers: {
"content-type": "application/json",
'Authorization': 'OAuth ' + apiKey,
},
};
const response = await fetch(url, init);
const results = await gatherResponse(response);
}
export default {
async fetch(request, env, ctx) {
let localDate = Date.now()/1000;
await submit(localDate);
return new Response('Hello World!');
},
async scheduled(controller, env, ctx) {
let localDate = Date.now()/1000;
ctx.waitUntil(submit(localDate));
console.log("cron processed");
},
};
Conclusion
Atlassian’s Status Page provides businesses with a powerful tool for communicating real-time status updates to users. In addition, the platform comes with built-in metrics that can help businesses better understand the health and performance of their services. By leveraging these metrics, businesses can identify areas for improvement, optimize service performance, and ultimately provide a better user experience. Cloudflare workers can be used to send custom metrics to your status page serverlessly and easily.
Reference
https://support.atlassian.com/statuspage/docs/what-are-system-metrics/https://workers.cloudflare.com/https://developers.cloudflare.com/workers/wrangler/install-and-update/https://betterstack.com/https://uptimerobot.com/