Dynamically embed Grafana dashboards in a React Component
Embedding a Grafana dashboard is as easy as embedding any other HTML element i.e. using an iframe. Also, you will find that there has been a lot of discussions on the same. But, difficulty is finding a way to dynamically view or change the dashboard in a situation when you can’t show the dropdowns that actually change the dashboard panels value or even the dashboard itself.
So, the research started with an aim of displaying the dashboards in a better way. What was needed is a simple yet clean way of embedding the dashboards which needed to be redirected through an auth proxy so that users (of different roles) never have to login to Grafana and also, won’t be able to change the dashboard panels or even the dashboards.
Found a way of implementing it in the following way:
1. Have different organizations (let organisation1 & organisation2) for different roles so that no user from organisation1 can view dashboards of users in organisation2 (i.e. a built in feature of Grafana).
2. Disable any access to changing the names of organization or email or username, so that even pressing ESCAPE inside iframe doesn’t harm the functionality that being built into the product.
3. Neither show any dropdowns of users nor their states & cities. Actually no way of selection at all.(only if you want to hide the selection from inside the dashboard)
4.Either create a link of the dashboard from Grafana itself or copy from the address bar. Keep noting the parameters that are needed to be changed according to users and even the other values you have.
Now the magic begins. Create the react component where you will embed the dashboard.
For each user role or organization conditionally embed the dashboard links along with the username and password stored from the configuration file or if you don’t want to store the credentials you may call it as a response from the auth endpoint (not recommended). As you can see, the code snippet above clearly shows how a dashboard link changes when the user role changes, also removing the dropdowns from Grafana dashboards and passing the value dynamically either through a dropdown in the very component or through props or even state change is a better alternative here. Make sure the values you are passing to the variables of the dashboard link is same as you have kept inside the original dropdows in Grafana dashboards else you won’t receive the response as expected. Similarly, you can do with the dashboard panels separately.
Give it a clap if you liked it. Happy Visualisation !