Blog

Animating Incidents with webhooks, Firebase and d3.js

by David Hayes July 22, 2013 | 2 min read

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('https://eurica.firebaseio.com/webdemo');
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]
    processWebhook(message)
  }
});

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
  d3.map(pdwebhook.val().messages).forEach(processWebhooks)
});

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 support@pagerduty.com if you are interested in accessing outbound Webhooks.