Is there a recommended way to embed Grafana panels within the Lovelae UI? My grafana is installed with hass.io as an add-on.
1 Like
There’s no easy way to do it, and there was an issue filed against the addon closed because it wasn’t deemed to be a problem with the addon. The only way that I’ve been able to do it is to render a graph or dashboard to an image on a regular basis via a script and then display that image in Lovelace. The problem with that is that it’s very difficult to get the scaling and display to work properly when part of a more complex Lovelace layout and I’ve only had luck displaying the graph in its own view. For my main Lovelace view, I gave up on Grafana and just played with with mini-graph-card until I got something close to what I wanted.
1 Like
I just use an iframe :
In grafana add-on you need to specify an extra port :
Then: (from raw editor)
- aspect_ratio: 65%
type: iframe
url: >-
https://grafana.mydomain.com/api/hassio_ingress/7Juc5fyqIuHvPH_0k4DmgMllLQoD-Q_9K2JqKa125g4/d-solo/7lwqddXZk/temperatuur?orgId=1&from=1584081845683&to=1584168245683&panelId=2"
width="450" height="200"
frameborder="0"&refresh=5m&theme=light&from=now-24h&to=
It does require that you punch another hole in your firewall, though. It would be much better to be able to tunnel through the Ingress interface, but my experience with that is documented here: https://github.com/hassio-addons/addon-grafana/issues/56
I don’t know where you got that idea from. There is one hole in my firewall: 443. All other ports are closed.
Your guidance to open port 3000 and your tunneling through Ingress don’t make sense together. With the former, you’d need to poke a hole in your firewall to talk to port 3000. With the latter, I and many others saw the issue described in the github issue.
Only port 443 is open on my router, forwarded to my nginx reverse proxy. From there I divert ‘grafana.mydomain.com’ to port 3000, ‘HA.mydomain.com’ to port 8123. So no issues there.
(but with forwarded/opened port)
1 Like
The iframe works for me except from the mobile app I get a 401 unauthorized error. How do I configure grafana add-on to allow unauthorized requests?
In the grafana add-on settings :
plugins: []
env_vars:
- name: GF_AUTH_ANONYMOUS_ENABLED
value: 'true'
ssl: false
certfile: fullchain.pem
keyfile: privkey.pem
How do you change the port in the Grafana Add-on ? I’m not able to find this.
I’ve the same issue, with the (Webpage) card being replaced with a ‘401: Unauthorized’ error, when viewing via the mobile app, outside of my LAN.
But is this method, of allowing anonymous access to Grafana secure?
Thanks
In my case, it is behind a nginx reverse proxy using https, so I don’t think there is a security issue.
Has anyone had any luck in getting the Grafana to show in the app? For me, I am on an android pixel 3 running stock android 11.
On my laptop when in the home, I can see my Grafana dashboard nicely using a playlist in the url.
I am also reversed proxied with Nginx, with only port 80 exposed on my router pointing to my nginx server that handles the redirects.
On my Android phone:
- When on my home lan, I get a 401 unauthorized.
- If I switch to my wireless carrier.
– I can access my HA and see other dashboards, but my grafana just shows a blank dashboard.
– I also then connected via vpn on my phone to my home, and get the same blank screen for
grafana.
I also did add to grafana config as follows, but it did not seem to make a difference:
env_vars:
- name: GF_AUTH_ANONYMOUS_ENABLED
value: 'true'I also tested in a browser on my phone.
In a browser on my phone when on my lan, I also get a 401 unauthorized.
and in a browser on my phone when outside my lan and connecting via vpn, also get a blank screen.
And also tested with a Windows VM on my server (same server HA runs on), and that machine also gave me a 401 error. So only my main home laptop sees the dashboard. All very strange when all on the same home lan.
2 Likes
Try adding GF_SECURITY_ALLOW_EMBEDDING='true' to allow embedding: https://grafana.com/docs/grafana/latest/administration/configuration/#allow_embedding
Hello,
I want to add my grafana trend in my lovelace, but I’m in docker configuration and no with hassio. I’m looking a easier solution like you but, I don’t how I can use as link…
- aspect_ratio: 65%
type: iframe
url: >-
https://grafana.mydomain.com/api/**hassio_ingress**/7Juc5fyqIuHvPH_0k4DmgMllLQoD-Q_9K2JqKa125g4/d-solo/7lwqddXZk/temperatuur?orgId=1&from=1584081845683&to=1584168245683&panelId=2"
width="450" height="200"
frameborder="0"&refresh=5m&theme=light&from=now-24h&to=
I have a very similar problem.
Have you solved yours yet?
Hi @francisp, I use nginx as you do, may you help posting how exactly you divert grafana.mydomain.com to port 3000 in nginx add-on configuration?
Thanks!
This is my grafana.subdomain.conf
# make sure that your dns has a cname set for grafana and that your grafana container is not using a base url
server {
listen 443 ssl;
listen [::]:443 ssl;
server_name grafana.*;
include /config/nginx/ssl.conf;
client_max_body_size 0;
# enable for ldap auth, fill in ldap details in ldap.conf
#include /config/nginx/ldap.conf;
location / {
# enable the next two lines for http auth
#auth_basic "Restricted";
#auth_basic_user_file /config/nginx/.htpasswd;
# enable the next two lines for ldap auth
#auth_request /auth;
#error_page 401 =200 /login;
include /config/nginx/proxy.conf;
resolver 127.0.0.11 valid=30s;
set $upstream_app grafana;
set $upstream_port 3000;
set $upstream_proto http;
proxy_pass $upstream_proto://10.0.0.67:$upstream_port;
}
}
Thanks @francisp , you’ve been very kind!
I’m a beginner so I need to ask you a few things more to be able to implement your guide:
- for the cname, I can use duckdns right? I still need to do that for grafana…
- how to check the url which grafana is using? In grafana add-on it uses my server cname ***.duckdns.org
- where you mention the server name is this cname or the server host system name (in my case homeassistant)?
- I dont’t find the path /config/nginx that you include here, is it possible that it is different since I’m using HassIO with NGINX add-on?
- should I change the IP at the resolver line?
- the ip in your last line is the static ip of my server?
- where should I save this grafana.subdomain.conf file?
I’m sorry for being so unexpert, hope not to put your patiance at prove!
Bonus question: I’m also trying to set up wireguard in order to be able to access from remote my LAN, but I’d like to keep also the actual solution to access remotely to my server (dns with ssl and nginx) so that some automations related to my mobile app work also without being under vpn on my cellphone… Do I need to set something in particular to make this work?
Thanks in advance!
Have a good day
Hi all
I have Grafana not as HA addon and I am not able to embed a panel as iframe.
In /etc/grafana/grafana.ini I’ve set
[auth.anonymous]
# enable anonymous access
enabled = true
# specify organization name that shou2B2Bld be used for unauthenticated users
org_name = MyOrganization
# specify role for unauthenticated users
org_role = Viewer
# set to true if you want to allow browsers to render Grafana in a <frame>, <iframe>, <embed> or <object>. default
allow_embedding = true
then when I cut&paste the link from Panel-Share to the ui-lovelace.yaml in an iframe I see nothing
If I use the same link in the broswer, I always get tthe login page.
What should I do to make it work?
Thanks