O11y Guide - Building Advanced++ Dashboards

The ongoing series covering my journey into the world of cloud native observability continues in this article, where I'm continuing to explore an open source dashboard and visualization project. If you missed any of the previous articles, head on back to the introduction for a quick update.

After laying out the groundwork for this series in the initial article, I spent some time in the second article sharing who the observability players are. I also discussed the teams that these players are on in this world of cloud native o11y. For the third article I looked at the ongoing discussion around monitoring pillars versus phases. In the fourth article I talked about keeping your options open with open source standards. My last installment, the fifth article in this series, I talked about bringing monolithic applications into the cloud native o11y world. In my sixth article, I provided you with an introduction to a new open source dashboard and visualization project and shared how to install the project on your local developer machine. The seventh article I explored the API and tooling provided by the Perses project. Then I spent time in an article  covering the open dashboard specification that you need to follow and then you started creating your first dashboard. Finally, in the previous article, you expanded your dashboard with a few charts, gauges, and rows.

In this article you'll complete the workshop and add a few advanced components to your dashboard.

This article is part of my ongoing effort to get practical hands-on experience in the cloud native o11y world. I'm going to get you started using a basic template for a minimal dashboard from the previous lab, and start designing components for your very first dashboard. This is one lab in the more extensive free online workshop. Feel free to start from the very beginning of this workshop here if you missed anything previously:

Now let's dive into designing your first dashboard. Note this article is only a short summary, so please see the complete lab found online as the lab 4.7 here to work through building an advanced++ dashboard yourself:

The following is a short overview of what is in this specific lab of the workshop.

Finalizing the dashboard

Each lab starts with a goal, in this case it is fairly simple:

This lab shows you how to build extend your advanced dashboard, sprucing it up with a few more important components until you have an advanced++ dashboard you can be proud of

The lab kicks off with a view of what your server should be showing you after completing the previous lab. It's a dashboard with the first two rows completed from your previous efforts. This lab jumps right in where you left off and you start adding a new row at the top of your layouts section:

1 2 3 4 5 6 7 8

"layouts": [ { "kind": "Grid", "spec": { "display": { "title": "Team Status", "collapse": { "open": true } }, "items": [] } },

Note that in the workshop lab you are given these code snippets as helpers but I've also attempted to share proper testing and validation as you work towards a final dashboard using the provided CLI tooling:

$ ./bin/percli lint -f [PATH_TO_RESOURCE]/myfirstdashboard.json

your resources look good

$ ./bin/percli apply -f [PATH_TO_RESOURCE]/myfirstdashboard.json

object "Dashboard" "MyFirstDashboard" has been applied in the project "WorkshopProject"

Then verify that they were applied on your dashboard:

You then continue on and add a documentation component that is often put on a dashboard to provide specific links to information to help the on call team member to quickly resolve issues. This is the first addition to our Team Status row:

Finally, you'll add a complex multi-gauge component to finalize your dashboard. The systemStatusMultiGuage is added to the panel section as follows: 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

"systemStatusMultiGauge": { "kind": "Panel", "spec": { "display": { "name": "Current system status", "description": "This is my first multi gauge chart!" }, "plugin": { "kind": "GaugeChart", "spec": { "query": { ... INSERT_QUERY_FROM_A_PREVIOUS_SLIDE_HERE ... } } }, "calculation": "LastNumber", "unit": { "kind": "PercentDecimal" }, "thresholds": { "steps": [ { "value": 0.2 }, { "value": 0.35 } ], } } }

The reader is referred to the lab content to work through these last additions and the final result is something to be proud of:

This was a short tour of finishing up this workshop and your dashboard and visualization learning path. Congratulations to you and good luck with your further visualization efforts!