Webview (Grafana chart) and item selector for timezone not working properly

noppes123 · February 25, 2020, 8:35pm

Can you try the Webview statements outside a frame? Just to see what happens.

BTW, what other browser did you use, besides Chrome?

c_PROG · February 27, 2020, 2:47pm

@noppes123:
Thank you for your helpfulness and patience.
As browser I tried it with chrome, firefox and microsoft edge.

Now i create a new sitemap without a frame:

sitemap home label="grafana chart" {
       
 Switch item=room1_chartSwitch
     label="Select"
         icon="sofa"
             mappings=[1="12h",
                       2="24h",
                       3="day view"]
                Webview icon="none"
                url="http://IP-ADRESS:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2Fd&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="3"]    
                Webview icon="none"
                url="http://IP-ADRESS:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2D24h&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="2"]    
                Webview icon="none"
                url="http://IP-ADRESS:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2D12h&to=now&panelId=2"  height=18 visibility=[room1_chartSwitch=="1"]   
}

The result:
The grafana chart is displayed correctly.
I dont’ get the message " error parsing query: invalid duration".
When I press the buttons (12h, 24h, day view) nothing happens :-/
In the debug modus of gogle chrome I get the messages:

6

Blocked autofocusing on a form control in a cross-origin subframe.

VM387 vendors~app.ee…17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

VM402 vendors~app.ee…17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

VM413 vendors~app.ee…17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

2

tti-polyfill.js:3 GET http://IP-ADRESS:3000/api/datasources/proxy/1/query?db=openhab_db&q=SE…e%20>%3D%20now()%20-%2024h%20GROUP%20BY%20time(1y)%20fill(null)&epoch=ms 400 (Bad Request)

I don’t know where is the problem:-(

noppes123 · February 27, 2020, 3:36pm

Even after a refresh?

Somehow the browser believes that you are switching to another protocol:host:port combination, that’s where these ‘cross-origin’ messages comes from.
Since you masked the actual addresses used I cannot see if all used and logged addresses are the same (BTW, I assume these are private IP addresses - like 10.x.y.z or 192.168.x.y - so no harm in sharing them ).

c_PROG · February 27, 2020, 7:49pm

Hello @noppes123:
Thank you for your input.
When I select in the sitemap with the button (12h, 24h, day view) a view and then I press the refresh button F5 it works. Just the first smal success…

oh, sorry:

sitemap home label="grafana chart" {
               
 Switch item=room1_chartSwitch
     label="Select"
         icon="sofa"
             mappings=[1="12h",
                       2="24h",
                       3="day view"]
                Webview icon="none"
                url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2Fd&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="3"]   
                Webview icon="none"
                url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2D24h&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="2"]    
                Webview icon="none"
                url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now-12h&to=now&panelId=2"  height=18 visibility=[room1_chartSwitch=="1"]    
}

This are the debug modus messages with google chrome:

Blocked autofocusing on a form control in a cross-origin subframe.

VM1484 vendors~app.e…17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

VM1495 vendors~app.e…17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

VM1514 vendors~app.e…17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

tti-polyfill.js:3 GET http://192.168.178.38:3000/api/datasources/proxy/1/query?db=openhab_db&q=SE…e%20>%3D%201582758000000ms%20GROUP%20BY%20time(1y)%20fill(null)&epoch=ms 400 (Bad Request)

tti-polyfill.js:3 GET http://192.168.178.38:3000/api/datasources/proxy/1/query?db=openhab_db&q=SE…e%20>%3D%20now()%20-%2024h%20GROUP%20BY%20time(1y)%20fill(null)&epoch=ms 400 (Bad Request)

noppes123 · February 27, 2020, 7:55pm

Can you share the details on how exactly you defined the Grafana panel?

c_PROG · February 27, 2020, 8:13pm

@noppes123:
Strangely that it works, when i press the refresh button F5.
I don’t know what do you exactly mean…
The grafana *.ini file modification: Openhab2+Grafana HABdroid Webview

sudo nano /etc/grafana/grafana.ini
#################################### Users ####################################
[users]
# disable user signup / registration
allow_sign_up = false

...
#################################### Anonymous Auth ##########################
[auth.anonymous]
# enable anonymous access
enabled = true

...
#################################### Basic Auth ##########################
[auth.basic]
enabled = false


[security]
allow_embedding=true

Do you think that in my grafana *.ini file is something wrong?
In the grafana website I click on the chart ->share->embed->copy the large part of the html code and insert it in my sitemap.
I used the instruction: https://www.youtube.com/watch?v=T0GnfHt8aLg

noppes123 · February 28, 2020, 6:06pm

It might (wild guess) be related to authentication - try disabling it in grafana.ini, if it is enabled now.
But I meant the actual graph panel definition; are there other sources involved, external rendering, or …

c_PROG · February 28, 2020, 7:29pm

@noppes123
sorry for the stupid question: which authentication do you mean exactly?
I hope I understood you correctly:
My esp send datas (temp and hum) to my db and then I would like to display the values to my grafana chart in my openhab sitemap. So I think that I dont’ use other sources or external rendering.

noppes123 · February 28, 2020, 7:43pm

I was a little brief: I meant Grafana authentication. Best to share your complete grafana.ini so we can verify the settings.

c_PROG · February 28, 2020, 9:38pm

@noppes123:
uff… I have problems to copy my grafana.ini file to the community.
My program WinSCP get allways the error message: " etc/grafana/grafana.ini: Permission denied’
Now I have to search a possiblity to copy the file…

noppes123 · February 28, 2020, 10:28pm

Do you have SSH access as well? Try to connect with that user account.

c_PROG · February 29, 2020, 11:23am

@noppes123:
Yes, I use putty and I have a ssh access and I just able to open the sudo nano /etc/grafana/grafana.ini file.
Sorry, but I don’t know how can I copy all content of the file and paste it on the community. I tried to select all the content and use copy / paste but it copy allways a part…

c_PROG · March 1, 2020, 10:26am

@noppes123:
Thats my grafana.ini file:
grafana ini.txt (23.1 KB)

noppes123 · March 5, 2020, 10:41pm

Looking back at your earlier posts, I noticed a strange message:

This looks like an InfluxDB query on the same address:port (3000)… did you double check the InfluxDB settings as well?

c_PROG · March 8, 2020, 9:52am

@noppes123:
Good morning,
Thank you for your support.
I used this tutorial to work with openhab, influxdb and grafana.
Strange that it works when i select the time and update (F5) the website (sitemap).
I will check the whole thing again.

c_PROG · March 31, 2020, 9:54am

Hello @noppes123!
At the moment I have more time and so I can spend more time for my openhab project.
Actually I try to use this code:

sitemap grafana_chart 
        label="grafana chart" {
    Switch item=room1_chartSwitch
           label="Select"
           icon="sofa"
           mappings=[1="week to date",
                     2="the day so far",
                     3="last 5 minutes"]
    Webview icon="none"
            url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?refresh=5s&from=now/w&to=now&orgId=1&panelId=2" 
            height=10
            visibility=[room1_chartSwitch==1]   
    Webview icon="none"
            url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?refresh=5s&from=now-5m&to=now&orgId=1&panelId=2" 
            height=10
            visibility=[room1_chartSwitch==3,
                        room1_chartSwitch=="Uninitialized" ]   
    Webview icon="none"
            url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?refresh=5s&from=now/d&to=now&orgId=1&panelId=2"
            height=10
            visibility=[room1_chartSwitch==2]
}

I add now in the url a refresh of 5s.
When I switch from one time range to a other I get the message “error parsing query: invalid duration” but after some seconds the message disappear (I don’t know why I get this error message ) and I see the grafana chart and is constantly updated.
In the debug mode (F12) of chrome I get regular message like this:

GET http://192.168.178.38:3000/api/datasources/proxy/1/query?db=openhab_db&q=SELECT%20mean("value")%20FROM%20"room1_temperature"%20WHERE%20time%20>%3D%20now()%20-%205m%20GROUP%20BY%20time(1y)%20fill(null)%3BSELECT%20mean("value")%20FROM%20"room1_humidity"%20WHERE%20time%20>%3D%20now()%20-%205m%20GROUP%20BY%20time(1y)%20fill(null)&epoch=ms 400 (Bad Request)

It is possible that is it do do with this:

When I change on my smartphone the time range on the browser I see simultaneous the same change on my browser of the pc. It is impratical.
It is possible to do the change seperatily?

Thank you for the support!!!

rossko57 · March 31, 2020, 12:41pm

Only by having different sitemaps.

Udo_Hartmann · March 31, 2020, 12:59pm

I don’t want to annoy you, but I would suggest to be more consistent with formatting.

Short lines:

sitemap grafana_chart 
        label="grafana chart" {
    Switch item=room1_chartSwitch
           label="Select"
           icon="sofa"
           mappings=[1="week to date",
                     2="the day so far",
                     3="last 5 minutes"]
    Webview icon="none"
            url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?refresh=5s&from=now/w&to=now&orgId=1&panelId=2" 
            height=10
            visibility=[room1_chartSwitch==1]   
    Webview icon="none"
            url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?refresh=5s&from=now-5m&to=now&orgId=1&panelId=2" 
            height=10
            visibility=[room1_chartSwitch==3,
                        room1_chartSwitch=="Uninitialized" ]   
    Webview icon="none"
            url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?refresh=5s&from=now/d&to=now&orgId=1&panelId=2"
            height=10
            visibility=[room1_chartSwitch==2]
}

or one Widget per line:

sitemap grafana_chart label="grafana chart" {
    Switch item=room1_chartSwitch label="Select" icon="sofa" mappings=[1="week to date", 2="the day so far", 3="last 5 minutes"]
    Webview icon="none" url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?refresh=5s&from=now/w&to=now&orgId=1&panelId=2" height=10 visibility=[room1_chartSwitch==1]
    Webview icon="none" url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?refresh=5s&from=now-5m&to=now&orgId=1&panelId=2" height=10 visibility=[room1_chartSwitch==3, room1_chartSwitch=="Uninitialized" ]   
    Webview icon="none" url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?refresh=5s&from=now/d&to=now&orgId=1&panelId=2" height=10 visibility=[room1_chartSwitch==2]
}

c_PROG · March 31, 2020, 1:28pm

Thank you for your answer.
So I have to give every user the link to a specific sitemaps and can’t give a general sitemaps link?

Thank you for your input and your work.
I formated the code now.
The line spacing is the result when I copy and paste my code from visual studio code. How can I change it the line spacing when I paste the code on the community?

Udo_Hartmann · March 31, 2020, 1:30pm

Hmm… I don’t get weird spaces when copying from VSCode. Maybe wrong encoding?