1. Choose the uptime monitoring tool
A simple google/bing search will do the trick here. We decided to use the service by www.uptimerobot.com. This is a reliable (we have been using it for 3 years now) and free service that provide -amongst other features- email notifications and an API layer. We use the latter to fetch service data in our uptime monitoring page later on.
2. Set up the API call and get the results
(kudos to this post: http://stackoverflow.com/questions/2499567/how-to-make-a-json-call-to-a-url).
Now, some things to consider:
- We request the uptime percentages for 7, 30 and 365 days and we pass this info to the url as: 'customUptimeRatio=7-30-365'. You may set your own custom periods.
- The jsonUptimeRobotApi function consumes the data that are returned by the API. For example, the uptime percentage is returned in the data object as a string separated by dashes. To get the individual uptime percentages, we split the data object using the following code:
var ArrayOfUptime = data.monitors.monitor.customuptimeratio.split("-");
- Finally, we call the drawChart() function that is included in the Google Chart Tools (https://developers.google.com/chart/) and we pass the ArrayOfUptime to it: drawChart(ArrayOfUptime). That generates the correct percentage values in the Gauge graphs (see step 3 below).
3. Load the Google Chart Tools
To use the Google Chart Tools, we need to add the following libraries just before the closing of the 'head' tag:
Then, we can call the drawChart function that looks like this:
the chart.draw(data, options); is the call that sketches the graphs.
4. Bring in the latest tweets of your application
On many occasions, especially if the service is down, adding a Twitter stream provides an easy source of useful information about the service, for example, the expected time when the service will be up again! To add it, we use the native twitter widget which can be customized easily. It can be found at: https://twitter.com/about/resources/widgets.
EDIT: As you may have heard, the twitter API has been discontinued. The new link to create your own widget is at: https://twitter.com/settings/widgets/new
5. Set-up a server response (ping) timer
Some things to consider:
- The server response time should be visible only if the status of the server is operating normally (status==2 in our case). If there is a service disruption, there is no need to display the response time.
- We define a starttime variable to log the current time
- We use a tiny image (an 1KB, 1x1 pixel 'NoImg.gif' in our case) and we place it in a folder where the application resides (for example megaventory.com/images/).
- The onLoad event fires when the src attribute of the img is set and the image is fetched from the server and loaded in the browser. This is exactly when we subtract the 'starttime' from 'new Date()' to get the time in ms
- We add a random number to the URL that requests the image and we do so to prevent caching of the image in the browser when the user refreshes the page. For example, the image should be fetched with a URL that looks like: 'http://www.megaventory.com/images/NoImg.gif?0.434387483'
6. Add everything in a single html file and upload it to a server
After we finish with all the coding and widgets, we need to publish our index.html file. A good and fast way to make the file available online is to add it in the public folder of your drop-box folder. This will assign a unique URL to it (for example https://dl.dropbox.com/u/XYZ/index.html) and you may send the link to your friends for a review. Once everything is finalized, you can publish it officially using the standard monitoring page URL which looks like http://status.YourCompanyName.com. The status URL must resolve to another hosting environment than the one your application is hosted at. The reason is obvious: if your hosting environment goes down, users should still be able to look up your application status and twitter stream. The web is full of options for hosting a static html page. We use FastMail (http://www.fastmail.fm) for managing our e-mail & DNS, and hosting the monitoring page as it provides a 50MB web space for static html pages.
So how does the end result look? See for yourself at status.megaventory.com. Feel free to provide your feedback in the comments section below!