Lab 7 - Building advanced++ dashboards
Lab Goal
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.
Previously, the advanced dashboard
In the previous lab you used a basic dashboard specification resource file we provided and
added more advanced dashboard components called line charts in a new row. This lab assumes you've
completed the previous lab and that we'll continue to use the resource file
myfirstdashboard.json
. Your Perses server is up and running and the dashboard
should look like this:
Dashboard design - Adding a new row
Now we need to rework the layouts
to add another grid
section, this
one will be where we put our Team Status
information components. You
can use part of the existing layouts to create a new grid above the current one, moving
our existing two rows down in the list:
"layouts": [
{
"kind": "Grid",
"spec": {
"display": { "title": "Team Status", "collapse": { "open": true } },
"items": []
}
},
... (GRID_STATS_CHART_ROW_SECTION) ...
Apply changes - Testing and apply
Test our resource file for errors, fix if needed, and apply:
$ ./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"
Viewing dashboard design - New row ready!
Click on the WorkshopProject -> MyFirstDashboard
in the center menu to view your
new renamed row in your dashboard:
Team documentation - A new component
Let's add your first documentation panel
for the team using this dashboard. This
component can host anything you like as it's just a markdown document inside. This is what
your adding should look like when done:
Team documentation - Design description
At the end of the panels
section (after the lineChartLoad
panel), add
a comma after the closed curly bracket. From here on you will creating a new entry called
teamDocs
following a design description for you to work out in JSON:
- Top level name of the panel is:
"teamDocs"
- The kind element is:
"Panel"
- The spec element will be given in the next slide
Team documentation - Design for spec section
The spec
section should have the following design elements:
- display - with two attributes;
"name"
and "description"
- The name is:
"Team documentation"
- The description is:
"This is my first documentation panel!"
- plugin - the design details for the plugin will be given on the next slide
Team documentation - Design for plugin section
The plugin
section should have the following design elements:
- kind - set to
"Markdown"
- spec - contains a single attribute
"text"
with markdown (cut and paste to
a single line):
- "### Troubleshooting starts here:\nOn this page, you'll find all the help you need on this team.\n\nWho you gonna call? [Ghostbusters direct line](https://chronosphere.io)\n| Dashboard | Link |\n| :----------- | :----------- |\n| Dashboard 1 | [link](https://chronosphere.io) |\n| Dashboard 2 | [link](https://chronosphere.io) | \n\n"
Team documentation - A cheat sheet
Having trouble? Here's a cheat sheet answer:
"teamDocs": {
"kind": "Panel",
"spec": {
"display": {
"name": "Line Chart Memory Totals",
"description": "This is my first line (time series) chart!"
},
"plugin": {
"kind": "Markdown",
"spec": {
"text": ... INSERT_MARKDOWN_TEXT_PREVIOUS_SLIDE_HERE ...
}
}
}
}
Team documentation - Adding layout section
We won't see our total memory component until we add it to the layouts
section! Add it in the grid for our Team Status
row first entry:
"items": [
{
"x": 0,
"y": 0,
"width": 6,
"height": 8,
"content": { "$ref": "#/spec/panels/teamDocs" }
}
]
Apply changes - Testing and apply
Test our resource file for errors, fix if needed, and apply:
$ ./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"
Viewing team documentation - Super job!
Click on the WorkshopProject -> MyFirstDashboard
in the center menu to view your
new total memory component in your dashboard:
System status - A new multi gauge panel
Let's add a second panel
that provides a system status view to our example instance,
which should eventually look something like this:
System status - Design description
At the end of the panels
section (after the teamDocs
panel), add a comma after the closed curly bracket. From here on you will creating a new entry called
systemStatusMultiGauge
following a design description for you to work out in JSON:
- Top level name of the panel is:
"systemStatusMultiGauge"
- The kind element is:
"Panel"
- The spec element will be given in the next slide
System status - Design for spec section
The spec
section should have the following design elements:
- display - with two attributes;
"name"
and "description"
- The name is:
"Current system status"
- The description is:
"This is my first multi gauge chart!"
- plugin - the design details for the plugin will be given on the next slide
System status - Design for plugin section
The plugin
section should have the following design elements:
- kind - set to
"GaugeChart"
- spec - contains 4 attributes:
"query", "calculation", "unit", and "thresholds"
- query - contains a
"kind"
and a "spec"
and will be detailed on
the next slide
- calculation - is set to
"LastNumber"
- unit - is set to
"kind": "PercentDecimal"
- thresholds - has one attribute
"steps"
with a list of 2 values:
- value - set to
0.2
- value - set to
0.35
System status - the query section
The query
section is as follows:
"query": {
"kind": "TimeSeriesQuery",
"spec": {
"plugin": {
"kind": "PrometheusTimeSeriesQuery",
"spec": {
"series_name_format": "{{mode}} mode - {{job}} {{instance}}",
"query": "avg without (cpu)(rate(node_cpu_seconds_total{job='$job',instance=~'$instance',mode!=\"nice\",mode!=\"steal\",mode!=\"irq\"}[$interval]))"
}
}
}
},
System status - A cheat sheet (part 1)
Having trouble? Here's a cheat sheet answer (more on next slide):
"systemStatusMultiGauge": {
"kind": "Panel",
"spec": {
"display": {
"name": "Current system status",
"description": "This is my first multi gauge chart!"
},
System status - A cheat sheet (part 2)
And here's more of the cheat sheet answer:
"plugin": {
"kind": "GaugeChart",
"spec": {
"query": {
... INSERT_QUERY_FROM_A_PREVIOUS_SLIDE_HERE ...
}
}
},
System status - A cheat sheet (part 3)
And here's the final bit of the cheat sheet answer:
"calculation": "LastNumber",
"unit": { "kind": "PercentDecimal" },
"thresholds": {
"steps": [ { "value": 0.2 }, { "value": 0.35 } ],
}
}
}
}
}
System status - Adding layout section
We won't see our system status component until we add it to the layouts
section! Add it in the grid for our Team Status
row as the second entry:
"items": [
{
"x": 0,
"y": 0,
"width": 6,
"height": 8,
"content": { "$ref": "#/spec/panels/teamDocs" }
},
{
"x": 6,
"y": 0,
"width": 18,
"height": 6,
"content": { "$ref": "#/spec/panels/systemStatusMultiGauge" }
}
]
Apply changes - Testing and apply
Test our resource file for errors, fix if needed, and apply:
$ ./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"
Viewing system status - The finish line!
Click on the WorkshopProject -> MyFirstDashboard
in the center menu to view your
new total memory component in your dashboard:
Contact - are there any questions?
Lab and workshop completed!