Blog

Animation d'incidents avec des webhooks, Firebase et d3.js

par David Hayes 22 juillet 2013 | 2 minutes de lecture

Nous déployons Webhooks sur les incidents et ouvre de nombreuses perspectives intéressantes. Par exemple, les webhooks vous permettent de recevoir des rappels HTTP lorsque des événements intéressants se produisent dans votre compte PagerDuty . Les détails concernant l'événement seront envoyés via HTTP à une URL que vous spécifiez.

Webhooks en action

Voici une vue animée des incidents survenus dans mon compte webdemo :

Plutôt que de créer un backend pour recevoir les Webhooks, je les envoie simplement à Firebase . Après avoir créé un compte, j'ai créé une clé de démonstration Web, puis j'ai entré mon URL et ma clé d'authentification. J'avais un Webhook prêt à fonctionner :
Wet up Firebase as a webhook

Tout fonctionnait parfaitement dès le départ. Mieux encore, Firebase simplifie l'insertion du code de chargement des webhooks.

 var webhooks = new Firebase('https://eurica.firebaseio.com/webdemo'); webhooks.on('child_added', function(pdwebhook) { if(!pdwebhook.val().messages) { return; } // Au cas où il y aurait des fichiers indésirables dans la base de données messages = pdwebhook.val().messages for(k in messages){ message = messages[k]  processusWebhook(message)  } }); 

Pour ajouter un peu de punch à cet exemple, j'ai modifié un Exemple d3.js et a donné à chaque incident entrant une latitude et une longitude en pseudo-hachant son ID.

Montrons uniquement les 40 derniers bundles Webhook que nous avons reçus :

 lastwebhooks = webhooks.endAt().limit(40); // Ne regarde que les 40 webhooks les plus récents lastwebhooks.on('child_added', function(pdwebhook) { if(!pdwebhook.val().messages) { return; } // Au cas où il y aurait des fichiers indésirables dans la base de données d3.map(pdwebhook.val().messages).forEach(processWebhooks) }); 

Comme il s'agissait d'un projet hackday, je ne considérerais pas mon code comme un excellent exemple de JavaScript ou d3.js , mais voici le pseudo-code :

 processWebhooks = function(k,v) { //Vérifiez si nous avons vu un webhook ultérieur sur cet incident //Calculez la fausse géométrie //S'il s'agit d'un nouveau cercle : // - dimensionnez-le en fonction de son ancienneté // - Commencez à le rétrécir sur une heure // - Attachez un événement onclick //Colorez le cercle en fonction du type de webhook } 

Plutôt sympa, non ?

Plus de Webhooks à venir

Les webhooks sont actuellement disponibles pour un nombre limité d'utilisateurs de PagerDuty . Veuillez nous contacter. support@pagerduty.com si vous souhaitez accéder aux Webhooks sortants.