Skip to content

Creating your own Status Dashboard with Gatsby

30/10/20193 min readCategory: Tutorial

When you need to handle a lot of Netlify or CircleCI (or both) projects at the same time and want a clear, minimalist overview of those, your own status dashboard could come in handy. You can visit mine on status.lekoarts.de and see all my (public) repositories hosted on Netlify + some CircleCI tests. By leveraging the status badges from both providers the information is always up to date and you only need to rebuild the site when you add another project. This blogpost will explain how I approached the problem and how you can set up your own status dashboard.

#Building gatsby-theme-status-dashboard

In preparation to creating the dashboard I needed to publish two Gatsby source plugins first: gatsby-source-circle-ci and gatsby-source-netlify. Before writing my own thing I searched for JS/Node libraries that wrap the respective API and luckily found something for both plugins. Writing them was fairly straightforward - if you want to start creating source plugins, too, I'd recommend reading Creating a Source Plugin!

You can find the source code of the theme in my gatsby-themes monorepo. The theme itself only exposes three components so that you can integrate it into your own site more easily. What is also really handy: You can also just use this theme to access the custom hooks (useCircleCI and useNetlify) if you want 🎉

But enough about that, how do you actually use it...?

#Creating your own dashboard

You have two possibilities: Using the provided starter or leveraging the components the theme exports.

#Using a starter

Make sure that you have the Gatsby CLI installed and run:

gatsby new status-dashboard LekoArts/gatsby-status-dashboard

This will install the starter into the directory "status-dashboard".

Next, copy the file .env.example and rename it to .env. To get the CircleCI key, you need to go to the Account dashboard and create a new API token. Place that after CIRCLECI_KEY. For the Netlify key you should go to OAuth applications and create a new personal access token.

After also editing the other values (e.g. SITE_URL), you should be good to go. Run gatsby develop in your terminal and visit the site at localhost:8000. Lastly, you could upload the project to GitHub and connect it to Netlify or build the starter and upload it to your desired destination. More information about the starter is available in its repository.

#Using components

By using the exported components you have more flexibility e.g. when wanting to use it in your own site. The theme directly export the components Grid and Info, however like with every theme you can also import files from the theme or shadow files.

After also defining the ENV variables (see "Using a starter" section) you could them like:

src/pages/index.js
import React from "react"
import { Grid, Info } from "@lekoarts/gatsby-theme-status-dashboard"

const Index = () => {
  return (
    <main>
      <Info />
      <Grid />
    </main>
  )
}

export default Index

Isn't this flexibility great?! Now, if you want to change the design of the card you need to shadow the file. The doc Shadowing in Gatsby Themes is a good read about it.

Create a file at the given path and you're able to override the design of the card:

src/@lekoarts/gatsby-theme-status-dashboard/components/card.js
import CircleCI from "@lekoarts/gatsby-theme-status-dashboard/src/icons/circle-ci"
import GitHub from "@lekoarts/gatsby-theme-status-dashboard/src/icons/github"

const Card = ({ site, isOnCircleCI, GH_POSTFIX }) => (
  <div key={site.netlify_id}>
    <div data-name="card-top">
      <a href={site.url}>{site.name}</a>
      <div>
        {isOnCircleCI && (
          <a aria-label={`View ${site.name} on CircleCI`} href={`https://circleci.com/gh/${GH_POSTFIX}`}>
            <CircleCI />
          </a>
        )}
        <a aria-label={`View ${site.name} source on GitHub`} href={site.build_settings.repo_url}>
          <GitHub />
        </a>
      </div>
    </div>
    <div>
      <a href={`https://app.netlify.com/sites/${site.name}/deploys`}>
        <img
          alt={`Netlify Deploy status of ${site.name}`}
          src={`https://api.netlify.com/api/v1/badges/${site.netlify_id}/deploy-status`}
        />
      </a>
      {isOnCircleCI && (
        <img alt={`CircleCI status of ${site.name}`} src={`https://circleci.com/gh/${GH_POSTFIX}.svg?style=svg`} />
      )}
    </div>
  </div>
)

export default Card

Feel free to use this example code or structure it in a completely different way. The component gets access to the props site,isOnCircleCI,GH_POSTFIX.

Hope you enjoyed this short article! If you want to see more themes head over to themes.lekoarts.de 👏

Sparked your interest? Read all posts in the category Tutorial

More posts