Animating Incidents with webhooks, Firebase and d3.js

Animating Incidents with webhooks, Firebase and d3.js

We’re rolling out Webhooks on incidents and it opens up a lot of fun new things. For background, Webhooks let you recieve HTTP callbacks when interesting events happen within your PagerDuty account. Details surrounding the interesting event will be sent via HTTP to a URL that you specify.

Webhooks in action

Here’s an animated view of incidents in my webdemo account:

Rather than building a backend to receive the Webhooks, I’m just sending them to Firebase. After I set up an account, I made a webdemo key and then enter my URL and auth key, I had a Webhook good to go:
Wet up Firebase as a webhook

Everything just worked out of the box at this point. Best of all, Firebase makes the code to load the Webhooks easy to just drop in.

var webhooks = new Firebase('');
webhooks.on('child_added', function(pdwebhook) {
  if(!pdwebhook.val().messages) { return; } //In case there's junk in th DB
  messages = pdwebhook.val().messages
  for(k in messages){
    message = messages[k]

To add a little punch to this example, I modified a d3.js example and gave each incoming incident a latitude & longitude by pseudo-hashing its ID.

Let’s only show the last 40 Webhook bundles that we received:

lastwebhooks = webhooks.endAt().limit(40); //Only look at the 40 most recent webhooks
lastwebhooks.on('child_added', function(pdwebhook) {
  if(!pdwebhook.val().messages) { return; } //In case there's junk in the DB

Since this was a hackday project, I wouldn’t look at my code as a great example of JavaScript or d3.js, but here’s the pseudo-code:

processWebhooks = function(k,v) { 
  //Check to see if we saw a later webhook on this incident

  //Calculate the fake geometry 

  //If this is a new circle:
  // - size it according to how old it is
  // - Start it shrinking over an hour
  // - Attach an onclick event

  //Colour the circle according to the webhook type

Pretty neat huh?

More Webhooks to come

Webhooks are currently being released to a limited subset of PagerDuty users. Please contact if you are interested in accessing outbound Webhooks.


Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

Comments are closed at this time

Please visit our Community to engage with other PagerDuty users.