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.jsonyour resources look good$ ./bin/percli apply -f [PATH_TO_RESOURCE]/myfirstdashboard.jsonobject "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.jsonyour resources look good$ ./bin/percli apply -f [PATH_TO_RESOURCE]/myfirstdashboard.jsonobject "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.jsonyour resources look good$ ./bin/percli apply -f [PATH_TO_RESOURCE]/myfirstdashboard.jsonobject "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:
Lab completed - Results
Contact - are there any questions?
Eric D. Schabell
Director Evangelism
Contact: @ericschabell {@fosstodon.org) or https://www.schabell.org
Director Evangelism
Contact: @ericschabell {@fosstodon.org) or https://www.schabell.org
