Embedding Grafana Dashboard to ReactJS app

Question

I would like to add Grafana dashboard in a ReactJS app. Is there a way to embed or a library that we can use to display the Grafana dashboard?

Currently, I'm looking at grafana/ui but it does not have any documentation on how it can be used.

Answer 1

Grafana provides a share funcionality for panels out of the box which generates the necessary code to embed them via HTML iframe elements.

Although the share functionality for dashboards does not display this option, the same strategy can be used to embed entire dashboards just by copying its URL and setting it in an iframe. However, the entire Grafana UI is displayed, including its navigation sidebar, and users are free to move as if they were in Grafana itself (e.g. switch dashboards).

Note that you can specify that dashboard should be initially displayed in kiosk mode, which hides all interface elements leaving only the panels, but it does not prevent the user from exiting this mode (which is as simple as pressing the Esc key)

However, in order to view the panel or dashboard, users will need to identify themselves in Grafana first. This can be avoided by enabling anonymous authentication, which may or may not be an option depending on security policies.

It is worth mentioning that if users are already authenticated (i.e. if they have accessed Grafana recently and their session is still active), the panels or dashboards will be displayed right away, with no extra authentication required.

With this in mind, one possible approach to circumvent this limitation would be to proxy requests to Grafana and have the proxy server automatically authenticate the user. An example of how to achieve this can be found in an article on Fusebit.

Strengths of this approach

• Minimal effort required
• Can easily specify time range and refresh interval

Limitations

• Needs to authenticate the user or have anonymous access enabled
• The user can interact with Grafana, which produces a poor user experience
  • For dashboards, users are free to move as if they were in Grafana itself (e.g. switch dashboards)
  • For panels, users can perform some actions but not others (e.g. they can zoom in but cannot zoom out, as the time range is not visible)
• Does not allow for any communication between Grafana and the host application out of the box