Panel do not change until manual reloading of the page

[marcolino7]

Hi,
litte annoyng isssue. I have a Combo2 panel similar configuration.
On browser Chrome, when I change one of the parameter like from of panel, page/panel do not refresh automatically, but I have to refresh manually with reload button of the browser.
In Android App, instead, panel is reloaded if one of parameter change.
Is this normal behaviour or there is a way to avoid this?

Many Thanks

marco

[wborn]

Are these newly added items and did you try to restart openHAB to see if that fixes it? If restarting solves the issue it may be related to eclipse-archived/smarthome#2706 which should be fixed in openHAB 2.1.

[andiwirs]

I have the same issue. I am using a combo 3 webview and it does not reload when changing a parameter.
I am using Firefox and tried restarting OH2. Any way to provide you debug infos?

[wborn]

@Andirs55 The browser debug console may show some helpful errors or warnings:

1. Enter the Basic UI URL in your browser and navigate to page with the Grafana Webview
2. Open the Developer (Tools) windows from your browser menu or by pressing F12
3. Then reload the Basic UI page with the Grafana webview
4. Changing the values of some parameters

The developer console will then show any warnings/errors.

The browser developer tools also have a helpful "Network" view where you can monitor all page request and see the response result or error.

[andiwirs]

Ok the problems seem to start at 3.

Firefox can not connect to the server at http://192.168.1.20:8080/rest/sitemaps/events/dda51951-da34-49fe-bbf0-779db473af87?sitemap=default&pageid=0101. smart home grafana.js: 1: 1334
The connection to http://192.168.1.20:8080/rest/sitemaps/events/e3aa0fad-fda2-405c-9c46-2bf6d7f51d05?sitemap=default&pageid=default was interrupted while the page was loaded. smarthome.js:1:20867

What to do now?

[wborn]

Firefox can not connect to the server at http://192.168.1.20:8080/rest/sitemaps/events/dda51951-da34-49fe-bbf0-779db473af87?sitemap=default&pageid=0101. smart home grafana.js: 1: 1334
The connection to http://192.168.1.20:8080/rest/sitemaps/events/e3aa0fad-fda2-405c-9c46-2bf6d7f51d05?sitemap=default&pageid=default was interrupted while the page was loaded. smarthome.js:1:20867

Those errors seem to be "normal" with Firefox when you reload the page. I see them too while everything still works with openHAB 2.1.

Did you also test if it works Chrome?

Does openHAB properly update items on a page when they are updated? E.g. when you open the same Basic UI page in two tabs and then update items on one, the changes should also be updated in the other tab.

Do you use openHAB behind a webserver like Nginx or Apache2? It may not be properly configured for proxying websockets to openHAB. These are used for streaming item updates to your browser.

[andiwirs]

Ok i also tested with chrome and there is the same behaviour :( However it does not give that error when reloading the page. But when changing a parameter (e.g. time frame to display) the chrome console gives me that:

Uncaught DOMException: Blocked a frame with origin "http://192.168.1.20:8080" from accessing a cross-origin frame. VM226 smarthome-grafana.js:1
    at b (http://192.168.1.20:8080/static/grafana/smarthome-grafana.js:1:3606)
    at e (http://192.168.1.20:8080/static/grafana/smarthome-grafana.js:1:4717)
    at f (http://192.168.1.20:8080/static/grafana/smarthome-grafana.js:1:1265)
    at EventSource.<anonymous> (http://192.168.1.20:8080/static/grafana/smarthome-grafana.js:1:1656)
b @ VM226 smarthome-grafana.js:1
e @ VM226 smarthome-grafana.js:1
f @ VM226 smarthome-grafana.js:1
(anonymous) @ VM226 smarthome-grafana.js:1

OpenHAB properly updates items (switches etc.) on the page with the diagram across tabs and even across the two browsers Firefox and Chrome.

To the last point i would say no because did not setup something special. Just a normal OH package install (2.1 stable) on an ubuntu server and accessing the OH webview with a Win10 machine.

Thanks :)

[Terehi]

@Andirs55 That sounds like a "Same origin policy" violation. You need to use a reverse proxy like nginx or apache2 to prevent it. Browser blocks the connection because the request is to a different port and therefore it violates the policy.

To fix this with a reverse proxy:
Your OH address should be http://192.168.1.20 not http://192.168.1.20:8080
Grafana address should be http://192.168.1.20/grafana instead of http://192.168.1.20:3000.

[andiwirs]

@Terehi thanks a lot, that works

[marcolino7]

Hi,
yes I confirm is a CORS issue.
I solved with a reverse proxy.
All sub path of the URL is routed to OpenHab server, only /grafana folder is routed to grafana. I configured grafana to run into a folder and it works like a charm.

Regards

Marco

[wborn]

Great that setting up a reverse proxy resolved this issue @Andirs55, @marcolino7! I'll add some notes about this in the documentation.

[kleini]

I had to restart my openHAB 2.1.0 to get the dynamic reloading of the Webview. So the issue still exists in openHAB 2.1.0.

[HerzScheisse-zz]

I'm having the same issue... and cant get it to work....

can someone please post a example here, what i need to add to the nginx conf file to get this to work?

Thanks

[wborn]

@KugeLSichA This is one of the server { .. } blocks I use nowadays with openHAB, htaccess and SSL in a Docker setup, you most likely need to change the hostnames and ports of course:

server {
	listen                          443 ssl;
	server_name                     _;

	ssl_certificate                 /etc/nginx/certs/live/super.secret.domain.com/fullchain.pem;
	ssl_certificate_key             /etc/nginx/certs/live/super.secret.domain.com/privkey.pem;

	auth_basic                      "Username and Password Required";
	auth_basic_user_file            /etc/nginx/htpasswd;

	location / {
		proxy_pass                            http://openhab:8080/;
		proxy_set_header Host                 $http_host;
		proxy_set_header X-Real-IP            $remote_addr;
		proxy_set_header X-Forwarded-For      $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto    $scheme;
	}

	location /grafana/ {
		proxy_pass http://grafana:3000/;
	}
}

[HerzScheisse-zz]

Thanks for your quick reply @wborn ... :)
i tried with multiple parameters... but cant get it to work... :(
so i try again with as much infos i can provide,,, maybe you see the problem in my setup...

openhabianpi:8080 this is my openhabian adress
openhabianpi:3000 this is my grafana adress
both accessable in the browser

i'm running openhabian snapshot build #1143
my file in etc/nginx/sites-enabled/openhab

#################################
# openHABian NGINX Confiuration #
#################################

## Redirection
#server {
#   listen                          80;
#   server_name                     localhost;
#   return 301                      https://$server_name$request_uri;
#}

## Reverse Proxy to openHAB
server {
    listen                          80;
#   listen                          443 ssl;
    server_name                     localhost;
#   add_header                      Strict-Transport-Security "max-age=31536000; includeSubDomains";

## Secure Certificate Locations
#   ssl_certificate                 CERTPATH;
#   ssl_certificate_key             KEYPATH;

    location / {
        proxy_pass                              http://openhabianpi:8080/;
#        proxy_buffering                         off;  # openHAB supports non-buffering specifically for SSEs now
        proxy_set_header Host                   $http_host;
        proxy_set_header X-Real-IP              $remote_addr;
        proxy_set_header X-Forwarded-For        $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto      $scheme;

## Password Protection
#       auth_basic                              "Username and Password Required";
#       auth_basic_user_file                    /etc/nginx/.htpasswd;
    }

    location /grafana/ {
        proxy_pass      http://openhabianpi:3000/;
    }

## Let's Encrypt webroot location
#   location /.well-known/acme-challenge/ {
#       root                                    /var/www/localhost;
#   }
}

# vim: filetype=conf

for the value server_name i tried 127.0.0.1 / localhost / the fixed network IP of openhab

my smarthome-grafana-user-default.js file

// the prefix that is used for each Grafana panel URL
SMARTHOME_GRAFANA_DEFAULTS["urlPrefix"] = "http://openhabianpi:3000";

// use "false" so actual pages are loaded (or comment the line)
SMARTHOME_GRAFANA_DEFAULTS["debug"] = "false";

// use "default" for the default Eclipse SmartHome sitemap (or comment the line)
//SMARTHOME_GRAFANA_DEFAULTS["sitemap"] = "grafana";

if (SMARTHOME_GRAFANA_DEFAULTS["debug"] === "true") {
    console.log("Using SMARTHOME_GRAFANA_DEFAULTS = " + JSON.stringify(SMARTHOME_GRAFANA_DEFAULTS));
}

my .sitemap file

    	Text item=HF_SMETER_KWH {
			Selection item=Combo3_From mappings=["now-1h"="One hour ago", "now-1d"="One day ago", "now-1w"="One week ago", "now-1M"="One month ago", "now-1y"="One year ago"]
			Selection item=Combo3_To mappings=[now="Now", "now-1h"="One hour ago", "now-1d"="One day ago", "now-1w"="One week ago", "now-1M"="One month ago", "now-1y"="One year ago"]
			Switch item=Combo3_Theme mappings=[light="Light", dark="Dark"]
			Webview url="/static/demo.html?dashboard=test&fromItem=Combo3_From&toItem=Combo3_To&themeItem=Combo3_Theme&panel=4" height=13
    	}

I'm still getting

smarthome-grafana.js:1 Uncaught DOMException: Blocked a frame with origin "http://openhabianpi" from accessing a cross-origin frame.
    at b (http://openhabianpi/static/smarthome-grafana.js:1:3607)
    at e (http://openhabianpi/static/smarthome-grafana.js:1:4717)
    at f (http://openhabianpi/static/smarthome-grafana.js:1:1265)
    at EventSource.<anonymous> (http://openhabianpi/static/smarthome-grafana.js:1:1656)

[wborn]

@KugeLSichA

If you really access openHAB in your browser via http://openhabianpi you should use:

SMARTHOME_GRAFANA_DEFAULTS["urlPrefix"] = "http://openhabianpi/grafana";

If you use another hostname in your browser you should use that instead of openhabianpi.

So also make sure you really use the proxy in your browser by using the port 80 in the URL instead of 8080 (or by just omitting the port from the URL).

You also may need to reload/restart Nginx for the changes to be applied. 😉

[HerzScheisse-zz]

Thanks again @wborn for helping me to get this fixed...

yeah i noticed that i need to restart nginx... and also did always the test param before...

so now i'm a bit closer... but still not working...

As you can see here... someting with the path seems to be broken... it seems to be missing the /grafana folder in the URL
if i access the red GET error files... via http://openhabianpi/grafana/public..... then the script ist loaded

this is how it looks on my sitemap

In Debug mode... the URL seems to be okay... but if i click on it... i get the same error like in pic 1

i did not changed any openhab folder through setup... still all basic installations...

even i started (hmm i guess today more than 20 times today) the nginx and also the OH server... just to be sure ...

[wborn]

@KugeLSichA You most likely also need to update the Grafana configuration file (/etc/grafana/grafana.ini) so it contains something like:

# The full public facing url you use in browser, used for redirects and emails
# If you use reverse proxy and sub path specify full url (with sub path)
;root_url = http://localhost:3000
root_url = %(protocol)s://%(domain)s/grafana/

I don't use port 80 myself so maybe you also need to uncomment (remove ; from) the protocol in:

[server]
# Protocol (http or https)
;protocol = http

[HerzScheisse-zz]

Awesome!!!

Thank you sooooooo much.... after these changes to the grafana.ini and a restart of OH Server... it works now...!

[wborn]

I've finally made a little write-up about all of this in the README.md. So you are welcome to review this in PR #6. 😄