Blog

Animer des incidents avec des webhooks, Firebase et d3.js

par David Hayes 22 juillet 2013 | 2 min de lecture

Nous déployons Webhooks sur les incidents et cela ouvre beaucoup de nouvelles choses amusantes. Pour l'arrière-plan, les Webhooks vous permettent de recevoir des rappels HTTP lorsque des événements intéressants se produisent dans votre compte PagerDuty . Les détails entourant l'événement intéressant 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 à Base de feu . 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

À ce stade, tout a fonctionné dès le départ. Mieux encore, Firebase rend le code permettant de charger les Webhooks facile à insérer.

 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 attribué à chaque incident entrant une latitude et une longitude en pseudo-hachant son identifiant.

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

 lastwebhooks = webhooks.endAt().limit(40); // Ne regardez 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 ?

D'autres Webhooks à venir

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