As a web developer my main job is done as soon as a website is coded tested and launched, but I want my projects to stay online 24 hours a day 7 days a week and at least for a few years.
Statuscake website monitoring
Statuscake is a free website monitoring service I use for some of my websites.
Statuscake has email and SMS notifications but I also wanted to see the status of the most important projects live on my dashing dashboard, so I decided to create a custom dashing widget.
Dashing Widget
This widget can be used with a free statuscake account, you just need your API key and the ids of your tests.
- You can find the API key here: https://www.statuscake.com/App/APIKey.php
- The test id is part of the url if you just view the details of one of your tests e.g. https://www.statuscake.com/App/AllStatus.php?tid=xxxxxxx
Features
The Widget shows a list of your tests and a status for each of the tests.
As long as all test have status “Up” the widget is green, but as soon as one website is down the whole widget color changes to red.

I assume you know how to add dashing widgets, so I just paste the required code here.
statuscake.html
<h1 class="title" data-bind="title"></h1> <ul class="list-nostyle"> <li data-foreach-item="items"> <span class="site" data-bind="item.site"></span> <span class="status" data-bind="item.status"></span> <br><span class="lasttest" data-bind="item.lasttest"></span><br> </li> </ul> <p class="updated-at" data-bind="updatedAtMessage"></p>
statuscake.coffee
class Dashing.Statuscake extends Dashing.Widget ready: -> super onData: (data) -> node = $(@node) status = data.overall_status node.addClass "status-#{status}"
statuscake.scss
// ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- $background-color-ok: rgba(67, 101, 0, 1); $background-color-warning: rgba(204, 0, 0, 1); $value-color: #fff; $title-color: rgba(255, 255, 255, 0.7); $label-color: rgba(255, 255, 255, 0.7); $moreinfo-color: rgba(255, 255, 255, 0.7); // ---------------------------------------------------------------------------- // Widget-statuscake styles // ---------------------------------------------------------------------------- .widget-statuscake { background-color: $background-color-ok; vertical-align: top; .title { color: $title-color; } ol, ul { margin: 0 15px; text-align: left; color: $label-color; } ol { list-style-position: inside; } li { margin-bottom: 5px; } .list-nostyle { list-style: none; } .site { color: $label-color; } .status { float: right; margin-left: 12px; font-weight: 600; color: $value-color; } .lasttest{ margin-left: 15px; font-size: 10px; } .updated-at { color: rgba(0, 0, 0, 0.3); } &.status-ok { background-color: $background-color-ok; } &.status-warning { background-color: $background-color-warning; } }
Add the files above to a new folder “widgets/statuscake”
The following code can be saved to “jobs/statuscake.rb”
require 'json' require 'pp' username = 'YOUR_USERNAME' key = 'YOUR_API_KEY' testids = ['111111', '1111111', '111111', '1111111'] SCHEDULER.every '5s' do items=[] is_down=0 overall_status='ok' testids.each{ |testid| response = Net::HTTP.get_response(URI('https://www.statuscake.com/API/Tests/Details/?TestID='+testid+'&Username='+username+'&API='+key)) website = JSON.parse(response.body) items << { site: website['WebsiteName'], status: website['Status'], lasttest: website['LastTested'] } if website['Status']!='Up' overall_status='warning' end send_event('welcome', { text:response.body}) } send_event('statuscake', { items:items,overall_status: overall_status }) end
And now just add the widget to your dashboard:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div data-id="statuscake" data-view="Statuscake" data-title="Monitoring"></div> </li>
More about dashing
Dashing Graph from Google Spreadsheet
Hi,
The widget interests me, so I copy pasted the code and put in in the right places in a freshly installed dashing dashboard.
But when I start the application, I have errors in the terminal and the widget doesn’t show the websites …
I have reconstructed an url for one testid, pasted the url in the browser, and it outputs JSON in the browser, so username, TESTID’s and API key are correct…
I tried to install the required pp by gem install pp, but gem does not find a valid pp in any repository …
Any ideas ? What could I be doing wrong ? Thank a lot !
Terminal output :
scheduler caught exception:
A JSON text must at least contain two octets!
/var/lib/gems/1.9.1/gems/json-1.8.2/lib/json/common.rb:155:in `initialize’
/var/lib/gems/1.9.1/gems/json-1.8.2/lib/json/common.rb:155:in `new’
/var/lib/gems/1.9.1/gems/json-1.8.2/lib/json/common.rb:155:in `parse’
/home/vagrant/projects/dashboards/project-dashboard-statuscake/jobs/statuscake.rb:15:in `block (2 levels) in ‘
/home/vagrant/projects/dashboards/project-dashboard-statuscake/jobs/statuscake.rb:12:in `each’
/home/vagrant/projects/dashboards/project-dashboard-statuscake/jobs/statuscake.rb:12:in `block in ‘
I made a tiny modification to your CoffeeScript to get this working on team dashboards.
“`
onData: (data) ->
node = $(@node)
status = data.overall_status
node.removeClass “status-warning”
node.removeClass “status-ok”
node.addClass “status-#{status}”
“`
Because the original code was only adding CSS classes and never removing them, the widget was still display as “warning” even if the StatusCake test was back to “Up”. By removing the status classes first, the display is correct even when going from down to up.
Thank you for sharing your code !!!!
Or potentially something more elegant:
“`
node.removeClass (index, css) ->
(css.match(/(^|\s)status-\S+/g) or []).join ‘ ‘
“`
Very nice widget, thanks for sharing,
because of this widget Status cake will have +1 new customer.
I will now get a basic license and try the widget.
nice