Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Browser checks dashboard - Iteration 3 #931

Merged
merged 6 commits into from
Sep 18, 2024
Merged

Conversation

VikaCep
Copy link
Contributor

@VikaCep VikaCep commented Sep 11, 2024

Improvements to the browser checks dashboard:

  • Adds explore links in web vitals panels so users can see how the number is calculated by getting access to the query in Explore.
    image

  • Removes the unit in the CLS column of the web vitals by url table
    image

Part of #866
Addresses #918 (review)

@VikaCep VikaCep self-assigned this Sep 11, 2024
@VikaCep VikaCep requested a review from a team as a code owner September 11, 2024 21:19
@VikaCep VikaCep requested a review from ckbedwell September 11, 2024 21:23
Copy link
Contributor

@ckbedwell ckbedwell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes a big difference so thank you for turning it round so fast ⚡

In terms of the UI, my preference would be adapting the web vital gauge so it is more in line with the other panels; so the explore link is in the three-dot hover menu on the panel. I found it a little jarring that the pattern is different to all the other panels on the page.

It shouldn't be too difficult to bring in <PanelChrome /> from @grafana/ui so most of the behaviour is baked in by default in that component but I was looking at src/scenes/ExplorablePanel and wondering if this was usable with a custom component rather than having to provide a pluginId?

Lastly, the Explore link should stay in the same tab and not open a new one with target=_blank.

@VikaCep
Copy link
Contributor Author

VikaCep commented Sep 17, 2024

Thanks for your feedback @ckbedwell! I went ahead and used the PanelChrome component as you suggested. I took a look at ExplorablePanel but it doesn't seem that straightforward to adapt it to support custom scene objects, and PanelChrome has all the behavior we need so I opted for that one, but let me know what you think 🙏

@VikaCep VikaCep requested a review from ckbedwell September 17, 2024 22:47
Copy link
Contributor

@ckbedwell ckbedwell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 💪

@VikaCep VikaCep merged commit b2766ed into main Sep 18, 2024
5 checks passed
@VikaCep VikaCep deleted the browser-checks-dashboard-3 branch September 18, 2024 13:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants