A Real-time Dashboard to Track Your GitHub Commits

3 min read Michael Carroll on May 4, 2015
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

This blog post shows you how to build a dashboard that displays GitHub commits in real time on a live-updating dashboard using JavaScript, C3.js and PubNub.

Real-time C3.js chartsReal-time dashboards and graphs are an effective way to monitor activity within organizations. For engineering teams, one of those trackable metrics are GitHub commits. This blog post will walk you through how to retrieve and display GitHub commit data in a live-updating, interactive graph.

We’ll be using PubNub to stream the commit data and C3.js to display the data. If you want to learn more about real-time C3.js charts, we have a great tutorial.

Let’s get started!

1. Add a GitHub Webhook

  1. Create a GitHub repository.
  2. Click ‘Settings’ on the right side of the page
  3. Click ‘Webhooks & Services’ on the left side of the page
  4. Click ‘Add Webhook’ in the upper right
  5. GitHub will prompt for your password, enter it
  6. Under ‘Payload URL’ enter: Replace ORG-NAME with the name of your organization and TEAM-NAME with the team controlling the repo.
GitHub Webhook

2. Load the Dashboard

Visit this page. You’ll see a list of all the commits sent through the PubNub dashboard — sweet! When you push one of your commits to GitHub, you should see a message appear on the dashboard within a few dozens of milliseconds, and the charts will update in real time.

If you’re going to display this dashboard in your office, we recommend filtering down the commits to your organization only. Enter the ORG-NAME from the prior step in the text area and hit enter: the dashboard will update to reflect only your organization.

3. How It Was Done

The dashboard is a mashup of GitHub, the PubNub Data Stream Network, and D3 chart visualizations powered by C3.js. When a commit is pushed to GitHub, the commit metadata is posted to a small Heroku instance which publishes it to the PubNub network. We’re hosting on dashboard page on GitHub pages.

Once our Heroku instance receives the commit data from GitHub, it publishes a summary of that data to PubNub using the public publish/subscribe keys on the channel pubnub-git. You can monitor the pubnub-git channel through our developer console here.

Here’s an example message payload:



The second half of the magic happens when the dashboard receives this information through its subscribe callback. If you look at the source of the dashboard, you’ll see this code:

This subscribe call ensures that the JavaScript function displayLiveMessage() gets called every time a  message is received on the pubnub-git channel. displayLiveMessage() adds the commit push notification to the top of the log and updates the C3 visualization charts.

But wait, how is the dashboard populated when it first loads?

4. Leveraging the PubNub Storage & Playback API

PubNub keeps a record of each message sent, and provides developers a way to access those saved messages with the Storage & Playback (History) API. Deeper in the web dashboard, you’ll see the following code:

This is a request to retrieve the last 1,000 messages sent over the pubnub-git channel. So, even though the web dashboard may have been offline when those messages were sent, it is able to retrieve them and use that data to populate the dashboard as though it was permanently online.

This feature is especially useful when dealing with devices with intermittent or unreliable connectivity, such as mobile apps on cellular networks or connected cars. Thanks to the PubNub network, our visualization dashboard doesn’t require a backend to store the state of the application.

5. Building Your Own Dashboard

Building Your Own Dashboard

A sample C3.js real-time chart.

Feel free to fork the Git Commit UI repository to build out your own custom dashboard. The dashboard can be hosted on any static server, even your local laptop. As long as it has internet connectivity, it will receive live GitHub commit data.

Add your own charts, leaderboards, or call-outs for updates. The C3 charting library contains a plethora of different examples. I would love to see a time-series chart with real-time updates, or custom pop-ups when large groups of commits are pushed. Please reach out and share your changes, or create a pull request so we can incorporate them into our dashboard.

Good luck!

More from PubNub

NPP and HIPAA: Notice of Privacy Practices Definition
Healthcare CategoryJan 6, 20235 min read

NPP and HIPAA: Notice of Privacy Practices Definition

A Notice of Privacy Practices (NPP) is one of the requirements of HIPAA and helps patients understand their personal data rights.

Michael Carroll

Michael Carroll

HIPAA Violation Examples
Healthcare CategoryJan 5, 20236 min read

HIPAA Violation Examples

HIPAA violations can be financially expensive and devastating to a brand. Examine some examples of HIPAA violations, and learn...

Michael Carroll

Michael Carroll

HIPAA Technical Safeguards: How To Protect Sensitive Data
Healthcare CategoryJan 5, 20236 min read

HIPAA Technical Safeguards: How To Protect Sensitive Data

HIPAA covered entities must follow the five technical safeguards to achieve HIPAA compliance and prevent data corruption.

Michael Carroll

Michael Carroll