Why a dashboard?
At Brightec, we help many clients develop and grow mobile applications. Quality is very important and so we write tests and adhere to style guides.
We strive to keep our master branch in a deployable state. We use CircleCi as our CI (continuous integration) tool. It runs our tests and checks on every pull request and deployment. This is great because we now have data on how our master branch is doing.
Now how do we make that data visible?
We use the visual medium of a dashboard. A TV mounted on the wall, displaying data we get from our CI tool.
We have also found that having a dashboard brings about a positive difference in our culture. Having a dashboard reflects how we care about our projects. It enables us, as a team, to be accountable for our changes and work together to find solutions.
We have used a few different CI tools in the past. Different tools lend themselves to different approaches to dashboards.
With CircleCi we used a tool called Dashing, hosted on a mac mini. That gave us something looking like this:
Why did we want to change?
Every time we added a new project to CircleCi we had to reconfigure Dashing. We found this didn’t happen often enough for us to get quick at doing it.
Dashing and its underlying technology is not something we work with all the time. So trying to fix issues and keep it running was difficult and time consuming.
For similar reasons we felt unable to write new features or stray too far from a fairly standard implementation.
Clarity & Aesthetics
We felt it was difficult to get the styling and clarity in design that we were looking for.
As a mobile development agency, Android TV felt a natural place to begin exploring a replacement. We are familiar with the platform and felt comfortable.
This familiarity and some previous experience with Android TV meant we could get started on an MVP.
Being careful to design for the form factor and use case led us to a simple block design. We created large and clear typefaces to display the important pieces of data. We used colour to represent the state of a build. Finally, we added some branding flourishes to make it fit our office environment well.
Under the hood, the app uses the CircleCi API to fetch the relevant data. First getting the projects and then the recent builds for each. We sort the list of projects by their latest build status. This ensures the projects which need our attention are displayed prominently.
I hope soon to make the code for this dashboard public, so keep an eye out for that. If that’s something you’d be interested in, let me know by leaving a comment or tweeting me @SykesAlistair.
We plan on expanding the functionality of the dashboard. We’d like to add: manually kicking off jobs, pulling in from other data sources, and creating a mobile app to match (amongst other features).
These prospects are now exciting rather than scary and cumbersome. That’s at least one win for our new dashboard.