search

grafana / grafana

The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
https://grafana.com
GNU Affero General Public License v3.0
64.65k stars 12.1k forks source link

Panel sharing improvements #94145

Open natydej opened 4 weeks ago

natydej commented 4 weeks ago

Goal The goal is to enable image rendering within the same dialog (drawer) to maintain user context and improve the flow without redirecting to a new tab.

Background Currently, the image render feature in the sharing panel opens in a new tab, causing users to lose context by leaving the page. We propose allowing the image to render within the same dialog (drawer) to keep the user engaged and maintain context within the flow.

CTA to render image in a new tab: Image

Image rendered in a new tab: Image

natydej commented 3 weeks ago

Figma file Designs proposals OptionA: Showing the render image right away without any action from the user Image

OptionB:Having a CTA that will render the image in the same context below Image Image Image

juanicabanas commented 3 weeks ago

My opinion on this:

Option A It will call the render service whenever the user opens the drawer. That consumes a lot of resources and the user may not want to render the image, but make modifications in the configuration and copy the link. Therefore, I prefer option B

Option A and B

  1. Once the image is generated, it cannot be generated again. With the current approach, you reload the browser page and get a new image with, for example, updated data due to the relative time range. We would need a refresh button to create it again
  2. The copy link button seems weird. As it's next to the Download image button, it appears to copy the URL image while it's the panel URL inside grafana
  3. Although the current URL that renders the image is an API URL that calls the service every time the user access it, it's a way of "sharing" the image. I mean, the user can share that URL with anyone with access and get an image. I think we should add a "copy" image link button, but improving this case: instead of being the URL that generates an image once again, investigate if it's possible to return the path where the image is stored (I think it's possible)
  4. I prefer this design, as it doesn't cause a screen flickering and changes the buttons position
juanicabanas commented 2 weeks ago

Discuss if it's possible to add some inputs to customize the image, as some users are currently changing the URL parameters

natydej commented 1 week ago

I have 2 designs proposals: Figma link

Option A Image

Option B Image