A real-time dashboard for OpsGenie using AWS Lambda and PubNub

OpsGenie Webhook integration provides great flexibility to build solutions for specific requirements. In this blog post, we'll build a real-time dashboard for OpsGenie alerts. This dashboard will provide a quick overview of the most recent open alerts in OpsGenie, and when there are new activities on alerts, the dashboard will reflect these changes immediately.

The solution leverages AWS API Gateway and Lambda services as a serverless backend and PubNub for the real-time data stream. Both AWS and PubNub offer free tiers.

The Real-Time Alert Dashboard has three main parts:

• AWS Lambda function that receives the alert updates via OpsGenie Webhook integration and sends those updates toPubNub.
• PubNub service publishes the alert updates to all connected dashboards in real-time. It uses Publish/Subscribe model.
• The WEB Project is the front-end for that interacts with AWS Lambda function and PubNub to obtain the data and present to the dashboard users.

Configuring AWS Lambda Function

First, we'll create the Lambda function to retrieve OpsGenie alert updates (create, ack, note, close, etc.) via OpsGenie Webhook integration. The Lambda function is also responsible for pushing those updates to PubNub. Below is the sample package configuration for related Lambda function.

{
    "name": "opsgeniewebhook",
    "version": "1.0.0",
    "description": "Publish an event comes from OpsGenie Webhook integration over a PubNub Channel",
    "main": "index.js",
    "dependencies": {
        "pubnub": "^3.7.14"
    },
    "devDependencies": {},
    "scripts": {},
    "author": "Kaan Basal",
    "license": "ISC"
}

index.js contains all related configurations and functions. Do not forget to set those variables after configuring PubNub:

var publishKey = "<PUBNUB_PUBLISH_KEY>";
var subscribeKey = "<PUBNUB_SUBSCRIBE_KEY>";
var channelId = "<PUBNUB_CHANNEL>";

We'll use the AWS API Gateway service to set up an HTTPS REST API endpoint for our AWS Lambda function. OpsGenie Webhook will make a request to this endpoint and pass the alert data. Here is a walkthrough on how to use API Gateway to create a custom API and connect it to a set of Lambda functions: Walkthrough: API Gateway and Lambda Functions.

When AWS API Gateway service is ready, create a new OpsGenie Webhook integration with the API endpoint URL as the Webhook URL.

Configuring PubNub

PubNub detects appropriate communication protocol (WebSockets, Socket.IO, SignalR, WebRTC Data Channel, etc.) for streaming data from server to all connected clients. It identifies end-user's device/browser/technology and selects the most suitable protocol, also initializes the client and makes it ready-to-communicate. We'll use Publish/Subscribe method.

PubNub message consists of a channel and its associated data payload. A publishing client publishes messages to a given channel, and a subscribing client receives only the messages associated with the channels it is subscribed to. Let's say, our channel name will be "Alerts".

AWS Lambda function uses both subscribe_key and publish_key; WEB project needs only the subscribe_key (since it does not publish).

Configuring WEB Project

WEB project has 2 main functions: The first is to retrieve the most recent n open alerts using Opsgenie Alert API. And the second is to start listening (subscribe) to Alerts PubNub channel (PubNub comes into play at that point) so that all alert updates are received via the JavaScript callback function.

For more information on the PubNub JavaScript implementation, consider reading theJavaScript Publish/Subscribe Tutorial for Realtime Apps documentation.

WEB project is built on the Angular framework, so we'll use the PubNub AngularJS SDK.

Download the full project from GitHub

OpsGenie Real-Time Alert Dashboard is available on GitHub. You can reach the release page from here:

https://github.com/opsgenie/opsgenie-real-time-alert-view

The project can be served as static files via any web server or even AWS S3.