Der Blog

Animieren von Vorfällen mit Webhooks, Firebase und d3.js

von David Hayes 22. Juli 2013 | 2 Minuten Lesezeit

Wir rollen aus Webhooks bei Vorfällen und es eröffnet viele neue, spannende Möglichkeiten. Als Hintergrundinformation: Mit Webhooks können Sie HTTP-Rückrufe empfangen, wenn interessante Ereignisse in Ihrem PagerDuty Konto auftreten. Details zu dem interessanten Ereignis werden per HTTP an eine von Ihnen angegebene URL gesendet.

Webhooks in Aktion

Hier ist eine animierte Ansicht der Vorfälle in meinem Webdemo-Konto:

Anstatt ein Backend zum Empfangen der Webhooks zu erstellen, sende ich sie einfach an Feuerbasis . Nachdem ich ein Konto eingerichtet, einen Webdemo-Schlüssel erstellt und dann meine URL und meinen Authentifizierungsschlüssel eingegeben hatte, hatte ich einen einsatzbereiten Webhook:
Wet up Firebase as a webhook

An diesem Punkt hat alles sofort funktioniert. Und das Beste ist, dass Firebase den Code zum Laden der Webhooks ganz einfach einfügt.

 var webhooks = new Firebase('https://eurica.firebaseio.com/webdemo'); webhooks.on('child_added', function(pdwebhook) { if(!pdwebhook.val().messages) { return; } //Falls die DB Müll ist, messages = pdwebhook.val().messages for(k in messages){ message = messages[k]  ProzessWebhook(Nachricht)  } }); 

Um diesem Beispiel etwas mehr Schwung zu verleihen, habe ich ein d3.js Beispiel und jedem eingehenden Vorfall einen Breiten- und Längengrad zugewiesen, indem seine ID mit einem Pseudo-Hash erstellt wurde.

Wir zeigen nur die letzten 40 Webhook-Pakete, die wir erhalten haben:

 lastwebhooks = webhooks.endAt().limit(40); //Nur die 40 aktuellsten Webhooks anzeigen lastwebhooks.on('child_added', function(pdwebhook) { if(!pdwebhook.val().messages) { return; } //Falls die Datenbank Datenmüll enthält d3.map(pdwebhook.val().messages).forEach(processWebhooks) }); 

Da dies ein Hackday-Projekt war, würde ich meinen Code nicht als ein großartiges Beispiel für JavaScript betrachten oder d3.js , aber hier ist der Pseudocode:

 processWebhooks = function(k,v) { //Überprüfen, ob wir zu diesem Vorfall einen späteren Webhook gesehen haben //Die gefälschte Geometrie berechnen //Wenn dies ein neuer Kreis ist: // - Passen Sie die Größe seinem Alter an // - Lassen Sie ihn nach einer Stunde schrumpfen // - Fügen Sie ein Onclick-Ereignis an //Färben Sie den Kreis entsprechend dem Webhook-Typ } 

Ziemlich cool, oder?

Weitere Webhooks folgen

Webhooks werden derzeit nur für eine begrenzte Anzahl von PagerDuty Benutzern freigegeben. Bitte kontaktieren Sie support@pagerduty.com wenn Sie am Zugriff auf ausgehende Webhooks interessiert sind.