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

docs: Explain how to get the screenshot/video in Grafana. 

https://github.com/sitespeedio/sitespeed.io/issues/3350
This commit is contained in:
soulgalore 2021-04-15 20:57:22 +02:00
parent df8dfbb887
commit b7e38f6c27
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_posts/2021-04-15-sitespeed.io-17.0-browsertime-12.0.md
View File

@ -21,7 +21,7 @@ One of the new things in 17 is the support for one extra key in Graphite: the na
You can read how to upgrade in the [documentation](https://www.sitespeed.io/documentation/sitespeed.io/graphite/#upgrade-to-use-the-test-slug-in-the-namespace).
When you have updated you will add one extra parameter to your test: `--copyLatestFilesToBase`. When you have done all these step you are ready for ... using the new dashboards in Grafana with screenshot and video from last run. This is SUPER useful to be able to fast see what's going on. Checkout what it looks like [here](https://dashboard.sitespeed.io/d/000000064/page-metrics-mobile?orgId=1) and [here](https://dashboard.sitespeed.io/d/d-pdqGBGdse/wikipedia-login?orgId=1).
When you have updated you will add one extra parameter to your test: `--copyLatestFilesToBase`. When you have done all these step you are ready for ... using the new dashboards in Grafana with screenshot and video from last run. This is SUPER useful to be able to fast see what's going on. Checkout what it looks like [here](https://dashboard.sitespeed.io/d/000000064/page-metrics-mobile?orgId=1) and [here](https://dashboard.sitespeed.io/d/d-pdqGBGdse/wikipedia-login?orgId=1). And [read the documentation](https://www.sitespeed.io/documentation/sitespeed.io/performance-dashboard/#how-to-get-the-latest-videoscreenshot-visible-in-grafana) how to make sure you see them in Grafana.
We ship [all new dashboards](https://github.com/sitespeedio/grafana-bootstrap-docker/tree/main/dashboards/graphite) with some extra focus on Google Web Vitals (for sitespeed.io, WebPageTest, Google Page Speed Insights, Lighthouse and CRUX). We understand that these metrics is important for some users so lets focus on them. We also ship a couple new example dashboards for how to setup user journeys. Documentation for those will come soon.

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

@ -122,6 +122,24 @@ You can configure all the thresholds (green/yellow/red) so that they match your
![Configure thresholds in Grafana]({{site.baseurl}}/img/configuring-thresholds-grafana.jpg)
{: .img-thumbnail}
## How to get the latest video/screenshot visible in Grafana
To get the screenshot and video visible in Grafana you need to:
* Set a `--resultBaseURL` and the value need to match the Grafana variable *resulturl*
* Set `--copyLatestFilesToBase true`. That will make a copy of the last screenshot and video in the base directory so it can be found by Grafana.
* Add a testname/slug to your test with `--slug`.
* Make sure that the screenshot content type `--screenshot.type` matches *screenshottype* variable in Grafana. By default the screenshot type is *png*.
If you add all that it should work.
In the Grafana panel the path to the screenshot is generated by:
`$resulturl/$testname/$group.$page.$browser.$connectivity.$screenshottype`
And the video:
`$resulturl/$testname/$group.$page.$browser.$connectivity.mp4`
If you can't see the screenshot or the video you can debug it by either inspect the HTML in Grafana, check the network log in devtools (to see if the full URL is correct) or add `<div>$resulturl/$testname/$group.$page.$browser.$connectivity.$screenshottype</div>` to the panel so you can see the generated URL.
## Setup your own user journey dashboard
When you import that dashboard you need to add the correct variables. For the login user journey we meausure four pages. When you import that dashboard into Grafana it will look something like this: