Embed Grafana dashboard in web application

We have a Spring web application . Now, I want to display a specific dashboard from Grafana into the web app. I have generated the API token. How to display the dashboard in html page outside the grafana dashboard. We have not enabled CORS. I was trying to access via Java HTTP client with basic auth . I am still getting 401. Can someone help how to embed a live Grafana dashboard which is password protected to a web app

1 Like

You can embedded panels via iframes or embedded whole grafana via iframe.

If you want to handle auth via your app you need to setup grafana with auth proxy settings and proxy all requests

What settings needed for proxy, can you please explain…I was able to embed via iframe. But is asking for login credentials . Is it possible to.load dashboard via server side I.e using API token login and getting html response and load that in front end.Below settings have been configured. How to handle this in js or server side. User should not relogin again to grafana.once authorized in the web app, he should be able to see the dashboard. At the same time, we can’t expose the dashboard to anonymous user

enabled = true
header_name = X-WEBAUTH-USER
header_property = username
auto_sign_up = true

This is my previous answer to a similar question (sorry, don’t have a very good answer to this question - it is not a use case that we will spend time trying to support but you might find what you need in the link to the GitHub issue #3752):

I have enabled auth proxy and also made nginx config. When I access from server side (Java) , only html page with alert title is being displayed.None of the css files or js getting downloaded.what might be he issue.

The root_url config setting might be incorrect:

http://docs.grafana.org/installation/behind_proxy/#running-grafana-behind-a-reverse-proxy

What should be the configuration for root url

What part of the documentation is unclear? It should explain this. (hopefully I can improve the docs so that the next person with a similar issue doesn’t get stuck). Do neither of the two examples (with and without a subpath) in the docs match your setup?

Rooturl should be configured to as mentioned below in order to get the css and js files while accessing via server side?

root_url = %https://ipaddress:/grafana

I couldn’t get the purpose of root url and proxy pass. I need to set up proxy so that I can access grafana in external application

Exactly. Grafana needs to know the root url to be able to build paths to the js and css files when bootstrapping the application on the frontend.

As I mentioned before, I have never embedded Grafana the way you are trying to do so I’m not sure if this is possible. But to get a bit further:

  • what does your nginx config look like
  • what error are you getting in the browser console and/or grafana server log

Actually , we have configured nginx .we have enabled Auth proxy as mentioned in the document and changed server setting to http_addr=localhost with no port. Enabled CORS and ssl configured for nginx. I am trying to connect to grafana with Httpurlconnection in Java with authorization header X-WEBAUTH-USER. I was able to get a html page as response but could find all css, js files has relative path . I was able to access those files by replacing with https://ip - address /public/css/grafana.min.css. But page is not rendering with that. I tried to access snapshot in the same way. Same kind of response I am getting. Alert page with 404 for all case and js files are coming. How can I embed Grafana dashboard into another web abb with auto login (anonymous access is not allowed) and we have configured nginx proxy sever

1 Like

root_url : %(protocol)s://%(domain)s:%(http_port)s/

Can you please tell is there any way to get html page of grafana in another web app that is using the auth header for authentication…I want to access the dashboard in another web app without users have to login again in to grafana as our app is handling the authentication and authorization

1 Like

Hi Daniel, is there any way where you can access the grafana without login from external application with auth proxy enabled or is it possible to auto login from certain domain. For example to allow requests from xyz.com to access grafana dashboard without login?is that configuration possible in grafana running behind nginx

I fixed that case and js issue. Now I am getting as cannot read property of ‘pageClass’ of undefined. In my html I could find contents of grafana-app tag is not rendering properly. How to get that. My issue is same as mentioned in https://github.com/grafana/grafana/issues/5735

I was able to view dashboard via browser .but when I try the same in Java HTTP connection , I am getting the above issue

Sorry, if I knew the answer I’d tell you! Nginx config can be tricky.

I was able to see the dashboard when I access via browser. My question is can we render the same page via Java HTTP connection with auth header set?

Via Java http? What? You need a browser to view grafana