panel_iframe + "Visit Device" + ZigBee2MQTT not working together

[GsakuL]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

when setting the iFrame-Address in Z2M to report back as its "URL on which the frontend can be reached"; and using Z2M Autodiscovery/homeassistant: true and clicking "Visit Device" on a Z2M device page, it opens Z2M in the iFrame, but only the main page. Using Z2M "direct" address works as intended.

Describe the behavior you expected

The iFrame would open Z2M with the device page

Steps to reproduce the issue

0. Ports: a. 8123 Home Assistant b. 8090 ZigBee2MQTT
1. ZigBee2MQTT configuration.yml:

homeassistant:
  legacy_triggers: false 
# ....
frontend:
  url: http://z83.fritz.box:8123/zigbee2mqtt

3. HomeAssistant configuration.yaml:

panel_iframe:
  zigbee2mqtt:
    title: "zigbee2mqtt"
    url: "http://z83.fritz.box:8090"
    icon: mdi:zigbee
    require_admin: true

4. Have ZigBee devices be auto discovered
5. go to any Z2M device in Home Assistant
6. click the "Visit Device" Button/Link in the "Device Info" card
7. link that gets constructed: http://z83.fritz.box:8123/zigbee2mqtt/#/device/0xcc86ecfffe4c3e52/info
8. visit it
9. only see the Z2M Dashboard

Double check with "direct address":

1. change Z2M.frontend.url: http://z83.fritz.box:8090/
2. rediscover/reboot
3. "Visit Device" Link now produces http://z83.fritz.box:8090/#/device/0xcc86ecfffe4c3e52/info
4. visit it
5. land on the wanted device page

What version of Home Assistant Core has the issue?

2022.6.6

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

any (Win: Firefox 101.0.1 / Win: Brave 1.39.122 Chromium 102.0.5005.115 / Offical HA Android App 2022.6.0-minimal)

Which operating system are you using to run this browser?

Windows 11 21H2; Android 12

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

(only from Browser because it's not HTTPS)

Additional information

Zigbee2MQTT -> Settings -> About Zigbee2MQTT version: 1.25.2 commit: 3c5854f Frontend version: 0.6.97

[RoboMagus]

Do you have Z2M set up through HA-Addons? I'm using Z2M as well, and I cannot see anything related to "visit device" on the device pages. Just "MQTT info".

EDIT: After some digging through Z2M configuration options, it seems that your Z2M frontend URL should be changed to http://z83.fritz.box:8090 to function correctly. Please let me know if this solves your issue. To be honest, it's just a wild hunch of mine ;)

[GsakuL]

I'm sorry if this isn't clear. I'm using HA Container, managing my own containers. So no, i don't (/can't) use the HA-Addon.

version: '3'
services:
  zigbee2mqtt:
    tty: true
    stdin_open: true
    container_name: zigbee2mqtt
    image: koenkk/zigbee2mqtt
    volumes:
      - ./zigbee2mqtt/data:/app/data
      - /run/udev:/run/udev:ro
      - /etc/localtime:/etc/localtime:ro
    devices:
      - /dev/serial/by-id/usb-Silicon_Labs_slae.sh_cc2652rb_stick_-_slaesh_s_iot_stuff_00_12_4B_00_22_98_A4_3D-if00-port0:/dev/ttyACM0
    restart: unless-stopped
    network_mode: host
    environment:
      - TZ=Europe/Berlin
  mosquitto:
    tty: true
    stdin_open: true
    container_name: mosquitto
    image: eclipse-mosquitto:2.0
    restart: unless-stopped
    volumes:
      - ./mosquitto/config:/mosquitto/config
      - /etc/localtime:/etc/localtime:ro
    network_mode: host
  homeassistant:
    tty: true
    stdin_open: true
    container_name: homeassistant
    image: "ghcr.io/home-assistant/home-assistant:stable"
    volumes:
      - ./homeassistant/config:/config
      - /etc/localtime:/etc/localtime:ro
    restart: unless-stopped
    stop_grace_period: 2m
    privileged: true
    network_mode: host

and this is the Button/Link I'm speaking of:

Yes, i know, that http://z83.fritz.box:8090 would work. I stated that in my first comment. But the link opens in the current tab by default (thankfully middle mouse / ctrl click works for new tab), thus it would be "cleaner" to also have the Z2M frontend to open in the iframe. The iframe only opens the page configured in HAs config, and ignores any further URL parameter/paths.

[RoboMagus]

I'm sorry if this isn't clear. I'm using HA Container, managing my own containers. So no, i don't (/can't) use the HA-Addon.

Your setup is same as mine then. (Thats good news for me, as that means that I can also get the 'Visit device' link to work).

After some digging through Z2M configuration options, it seems that your Z2M frontend URL should be changed to http://z83.fritz.box:8090 to function correctly.

I should clarify here, that setting your Z2M configuration frontend URL to what I suggested here should solve your issue. I.e. fix the link that's behind that 'Visit device' button. Your Zigbee2MQTT configuration.yaml should look like this:

homeassistant:
  legacy_triggers: false 
# ....
frontend:
  url: http://z83.fritz.box:8090

Be sure to restart both HA and Z2M for the changes to take effect though.

[GsakuL]

I'm sorry but I'm not sure, if you understand me or you didn't read my comments completely. I have already said twice now (even in the opening comment/description! Take a look!), that this url WILL WORK. I have tested it!

Double check with "direct address":

1. change Z2M.frontend.url: http://z83.fritz.box:8090/
2. rediscover/reboot
3. "Visit Device" Link now produces http://z83.fritz.box:8090/#/device/0xcc86ecfffe4c3e52/info
4. visit it
5. land on the wanted device page

Yes, i know, that http://z83.fritz.box:8090 would work.

This is not what this Issue is about! I want it to work ALSO with the iFrame Panels. Having the iframes is cool - so one can have all "Smart Home relevant pages in one place". But it seems stupid to have to use the direct url.

[RoboMagus]

Well, that's just not how handling IFrame panels works. Not a bug.

Handling the URLs for custom IFrame panels is handled by the HA core, so if you'd like this feature to be implemented you should open up a feature request on the core section.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.