Building your first dashboard
Garie comes with some preconfigured dashboards, but creating your own is straight forward. Lets look at how we can create a basic dashboard.
Step 1 - Create a new Dashboard
Click the + icon and create a new dashboard. You should now be shown your own dashboard.
Step 2 - Adding some panels
First lets add a single stat to our new dashboard.
Select Single Stat
and your new panel will be added to the screen.
Next lets setup the panel to read some data from one of the Garie plugins.
When clicking Edit
you should be shown the panel at the bottom with all the configurable options.
Displaying performance data in your panel
Garie preconfigures the Grafana data sources out the box. This means displaying data should be straight forward.
First look at the available data sources.
As you can see all the Garie Plugins have come through as data sources, which means you can read any data that is exported through the plugins.
Lets pick Lighthouse for now.
Picking what metric to show
Once you pick Lighthouse you will see more options appear below.
Lets go ahead a click select measurement.
As you can see these are all the metrics the Garie Lighthouse plugin collects.
Lets click on performance-score.
You might start to see a value in your panel now. If not don't worry we still have to setup the url.
Completing your panel
Down in the panel options, you should be able to see WHERE option in your query.
Click on the + icon, select url
, then select which ever url you want to visualise the data for.
That's it
You panel should now be showing some data which represents your Lighthouse Performance Score.
Try and go back through the small tutorial and change data-sources and metrics. Create more panels and graphs, and you should have your custom dashboard!
Further Reading
Grafana has some great documentation, if your interested or want to know what else can be done, like alerting, graphs, panels, colours, setting baselines go checkout their documentation.