mirror
/
sitespeed.io
mirror of https://github.com/sitespeedio/sitespeed.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs: new dashboard setup (#3918)

This commit is contained in:
Peter Hedenskog 2023-07-25 21:21:52 +02:00 committed by GitHub
parent 9197ae932b
commit 9ebabfff18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/index/dashboard.md
View File

@ -2,7 +2,7 @@
* * *
[<img src="{{site.baseurl}}/img/dashboard-front.png" class="pull-left img-big" alt="Performance dashboard" width="500" height="227">]({{site.baseurl}}/documentation/sitespeed.io/performance-dashboard/)
Using sitespeed.io together with Grafana and Graphite enables you to monitor the performance of your web site. We have a prepared [docker-compose file](https://github.com/sitespeedio/sitespeed.io/blob/main/docker/docker-compose.yml) for your setup and some ready made [generic Grafana dashboards](https://github.com/sitespeedio/grafana-bootstrap-docker/tree/main/dashboards/graphite) that will make it easy for you to get it up and running. You can get it up and running in almost 5 minutes!
Using sitespeed.io together with Grafana and Graphite enables you to monitor the performance of your web site. We have a prepared [docker-compose file](https://github.com/sitespeedio/sitespeed.io/blob/main/docker/docker-compose.yml) for your setup and some ready made [generic Grafana dashboards](https://github.com/sitespeedio/sitespeed.io/tree/main/docker/grafana/provisioning/dashboards) that will make it easy for you to get it up and running. You can get it up and running in almost 5 minutes!
We have a version of the dashboard at [dashboard.sitespeed.io](https://dashboard.sitespeed.io/) where you can have look and try it out.

12
docs/documentation/sitespeed.io/graphite/index.md
View File

@ -192,7 +192,8 @@ First take a copy of your whisper directory so you have a backup if something go
### Update to our new dashboards
When you converted the data you need to update your graphs. If you use our premade graphs you can just [download the new versions](https://github.com/sitespeedio/grafana-bootstrap-docker/tree/main/dashboards/graphite) and use them.
When you converted the data you need to update your graphs. If you use our premade graphs you can just [download the new versions](https://github.com/sitespeedio/sitespeed.io/tree/main/docker/grafana/provisioning/dashboards) and use them.
### Change your home made Grafana dashboards
If you have your own created dashboards, you need to add the testname as variable and update all the other variables. Start by adding the testname as in the screenshot below.
@ -212,14 +213,17 @@ When you changed all the variables, you need to update the metrics on your dashb
Copy the JSON and add it to your favourite editor and search and replace all keys. Search for the key `$base.$path.pageSummary.` and replace that with `$base.$path.$testname.pageSummary.`. Replace all occurrence. Then copy the changed JSON, pastes into Grafana and save the dashboard again.
## Dashboards
We have [pre-made Grafana dashboards](https://github.com/sitespeedio/grafana-bootstrap-docker/tree/main/dashboards/graphite) that works with Graphite. They are generic and as long as your [namespace](#namespace) consists of three parts (including the slug), they will work. You can import them one by one or [inject them using Docker](https://github.com/sitespeedio/grafana-bootstrap-docker).
We have [pre-made Grafana dashboards](https://github.com/sitespeedio/sitespeed.io/tree/main/docker/grafana/provisioning/dashboards) that works with Graphite. They are generic and as long as your [namespace](#namespace) consists of three parts (including the slug), they will work. You can import them one by one. You can also checkout our [docker-compose file](https://github.com/sitespeedio/sitespeed.io/blob/main/docker/docker-compose.yml) on how to set it up.
## Namespace
The default namespace when you send metrics to Graphite is *sitespeed_io.default*. You can change the namespace with `--graphite.namespace`. All premade dashboards are prepared to work with namespaces that starts with two parts: *first.second* and with adding a slug/test name. To add a slug add `--graphite.addSlugToKey true` and the actual test name/slug to all your test by adding `--slug YOUR_TEST_NAME`.
If you want more parts, the [default dashboards](https://github.com/sitespeedio/grafana-bootstrap-docker/tree/main/dashboards/graphite) will break.
If you want more parts, the [default dashboards](https://github.com/sitespeedio/sitespeed.io/tree/main/docker/grafana/provisioning/dashboards) will break.
When we use sitespeed.io we usually keep the first part (*sitespeed_io*) to separate metrics from other tools that sends metrics to Graphite. We then change the second part: *sitespeed_io.desktop*, *sitespeed_io.emulatedMobile* or *sitespeed_io.desktopSweden*. As long as your namespace has three parts, they will work with the [default dashboards](https://github.com/sitespeedio/grafana-bootstrap-docker/tree/main/dashboards/graphite).
When we use sitespeed.io we usually keep the first part (*sitespeed_io*) to separate metrics from other tools that sends metrics to Graphite. We then change the second part: *sitespeed_io.desktop*, *sitespeed_io.emulatedMobile* or *sitespeed_io.desktopSweden*. As long as your namespace has three parts, they will work with the [default dashboards](https://github.com/sitespeedio/sitespeed.io/tree/main/docker/grafana/provisioning/dashboards).
## Delete old tags/annotations
By default annotations and there tags are stored in the SQLite database that comes with Graphite. The size of that database will increase over time and that will make the annotations slower to load in the Grafana GUI.

8
docs/documentation/sitespeed.io/performance-dashboard/index.md
View File

@ -37,18 +37,18 @@ If you want to play with the dashboards, the default login is sitespeedio and pa
When you run this in production make sure to checkout [our production guidelines](#production-guidelines).
## Docker compose file
We have prepared a Docker Compose file that downloads and sets up Graphite/Grafana and sitespeed.io with a couple of example dashboards. It works perfectly when you want to try it out on localhost, but if you want to run it in production, you should modify it by making sure that the metrics are stored outside of your container/volumes. If you prefer InfluxDB over Graphite, you can use that too, but right now we only have [one ready-made dashboard](https://github.com/sitespeedio/grafana-bootstrap-docker/blob/main/dashboards/influxdb/pageSummary.json) for InfluxDB (thank you Olivier Jan for contributing to that dashboard!).
We have prepared a Docker Compose file that downloads and sets up Graphite/Grafana and sitespeed.io with a couple of example dashboards. It works perfectly when you want to try it out on localhost, but if you want to run it in production, you should modify it by making sure that the metrics are stored outside of your container/volumes. If you prefer InfluxDB over Graphite, you can use that too, but there's no pre made dashboards.
## Pre-made example dashboards
We insert ready-made dashboards with a Docker container using curl, making it easy for you to get started. You can check out the container with the dashboards here: [https://github.com/sitespeedio/grafana-bootstrap-docker](https://github.com/sitespeedio/grafana-bootstrap-docker)
We insert ready-made dashboards with our docker compose file using provisioning. You can checkout the [compose file](https://github.com/sitespeedio/sitespeed.io/blob/main/docker/docker-compose.yml) and use it as an example.
Some of our dashboards uses Grafana plugins. To make sure the dashboards work you need to install these three plugins: *grafana-piechart-panel,marcusolsson-json-datasource,marcusolsson-dynamictext-panel*
Some of our dashboards uses Grafana plugins. To make sure the dashboards work you need to install these three plugins: *marcusolsson-json-datasource,marcusolsson-dynamictext-panel*
If you setup Grafana using Docker you can install those using the envireonment configuration:
```
environment:
- GF_INSTALL_PLUGINS=grafana-piechart-panel,marcusolsson-json-datasource,marcusolsson-dynamictext-panel
- GF_INSTALL_PLUGINS=marcusolsson-json-datasource,marcusolsson-dynamictext-panel
...
```