WTH - Grafana embedded cards issue -- 401: Unauthorized

Can you provide a solution for Grafana cards appearing as 401: Unauthorized after a reboot or some time has passed since I last accessed Grafana Web UI

I export my cards from Grafana as embedded:

I setup my cards in HA as iFrames with an URL, using the provided embedded link. Example with my domain removed: https://[local-HA-DNS]/api/hassio_ingress/DV_UHGmIIMcNPABt5sKeT9EPIt438P0BvTQujnxLMrc/d-solo/edd3be32-7643-409f-8f43-bb359f9ddcf9/temperatures?orgId=1&panelId=1" width=“450” height=“200” frameborder=“0”

And when the 401: Unauthorized message appears,

I absolutely MUST go to the Add-On Panel, Click on Grafana:
Capture d’écran, le 2024-12-04 à 22.23.13

Then click on Access Web UI:
Capture d’écran, le 2024-12-04 à 22.23.20

Then finally I can see my card when I go back to my lovelace dashboard panel:

I was suggested this multiple times but it doesn’t work.

Thanks

It works for me, but I also use it over ngnx (swag container)

I have grafana.mydomain.com pointing to port 3000 on my HA OS

# 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;

    }
}

I’m using Cloudflare, maybe I should add a rule pointing toward port 3000?

I’m also using dnsmasq to redirect some request on other local servers under sub-domains.

I wrote a new webpage card which supports addon ingress: GitHub - lovelylain/ha-addon-iframe-card: HA webpage card with addon ingress support.

Thank you @lovelylain!

I just installed it and will test with great optimism! I’ll update you soon! But if your addon works as expected, I guess it shows there is a real WTH issue with integrating Grafana cards inside dashboards. I believe it should be considered as one of the picks for the next wave of solutions to HA users issues collected with this WTH 2024 edition!

Quick update, on the HA-Companion App, when I navigate to my dashboard where the Grafana card should appear, it displays the 401: Unauthorized message. The card below with TEST as a name is the one using your iFrame HACS.

If I open the Grafana WebUI on the Companion App, then go back to my dashboard, the cards will display correctly:

I’m sorry to say but it seems your HACS does not work for me on the Companion App. I will update you if the same happens with my browser on local network with my HA domain address.

Show me your url please, you must replace the scheme://host:port/random part with the addon slug, otherwise it’s the same as the original webpage card.

The URL provided by Grafana is the following:

https://[MY-HA-URL]/api/hassio_ingress/DV_UHGmIIMcNPABt5sKeT9EPIt438P0BvTQujnxLMrc/d-solo/edd3be32-7643-409f-8f43-bb359f9ddcf9/temperatures?orgId=1&panelId=1" width=“450” height=“200” frameborder=“0”

I released a new version, will apply ingress logic to thw copied urls like yours.

Ok, I installed version 1.0.2 and will test it.

In fact, the full URL provided by Grafana is the following:

<iframe src="http://localhost:3000/api/hassio_ingress/DV_UHGmIIMcNPABt5sKeT9EPIt438P0BvTQujnxLMrc/d-solo/edd3be32-7643-409f-8f43-bb359f9ddcf9/temperatures?orgId=1&from=1697753700000&to=1733460822100&panelId=1&__feature.dashboardSceneSolo" width="450" height="200" frameborder="0"></iframe>

But since it’s an embedded URL, I keep this part:
http://localhost:3000/api/hassio_ingress/DV_UHGmIIMcNPABt5sKeT9EPIt438P0BvTQujnxLMrc/d/edd3be32-7643-409f-8f43-bb359f9ddcf9/temperatures?orgId=1&from=2023-10-19T22:15:00.000Z&to=now&viewPanel=panel-1

And since I use an https:// DNS domain, I must change localhost:3000 for MY-HA-URL
https://[MY-HA-URL]/api/hassio_ingress/DV_UHGmIIMcNPABt5sKeT9EPIt438P0BvTQujnxLMrc/d/edd3be32-7643-409f-8f43-bb359f9ddcf9/temperatures?orgId=1&from=2023-10-19T22:15:00.000Z&to=now&viewPanel=panel-1

By the way, while using [MY-HA-URL], I cannot keep the port :3000 part otherwise it will not work:
http://[MY-HA-URL]:3000/api/hassio_ingress/DV_UHGmIIMcNPABt5sKeT9EPIt438P0BvTQujnxLMrc/d/edd3be32-7643-409f-8f43-bb359f9ddcf9/temperatures?orgId=1&from=2023-10-19T22:15:00.000Z&to=now&viewPanel=panel-1

just use the part from the beginning of ‘/api/hassio_ingress/’, remove the domain part.

Ok, I just did. By the way, if I remove the domain and keep this part ‘/api/hassio_ingress/’ with the regular web card, it’s also working. But I haven’t saved the regular web card to see if your trick will work. I’ll keep an eye as to when the regular web card shows the 401 message and update if your HACS iFrame card keeps working correctly.

It’s easy to verify.
Remove my card, keep only the offical webpage card, then restart browser, see 401 unauthorized.
Change card type to mine, then restart browser.

Hello @lovelylain,

I had another Home Assistant system on which I tested your iFrame HACS. Accessing it remotely from the HA Companion App, I could see the standard iFrame Web card was showing the 401: Unauthorized message, but your iFrame card was able to access my Granafa card. I took 2 individual screenshots, and while I wanted those 2 cards in the same screenshot, I started editing the dashboard and when I entered edit mode, the standard iFrame Web card could access Grafana. So your HACS also helps the standard iFrame Web card to access Grafana without the user actually accessing Grafana Web UI. Here is a montage of the two screenshots put together so you can see your card was working while the standard iFrame Web card wasn’t.

I definitely believe your fix should be officially added to the standard iFrame Web card.