Grafana chart with time ranges

[kreutzer_peter (kreutpet)]

some news from my side.
I finally got grafana panel integrated in OH3 UI.
I identified different issue.

1. first I configured nginx proxy manager with grafana a sub location.
   this never worked stable. I could open it from the internal network but not from outside.
   the grafana sub location was configured as http but that created an issue on https .
   I figured out that the firefox browser was not able to handle the the mixed http and https
2. i then configured in nginx proxy manager as subdomain .e.g. grafana.example.com with independent let’s encrypt certificate . It was still not working as i decided to protect the subdomain with a nginx proxy manager access list.
   I took the same access list as openhab. This work for web browser but not for android as in the app the authentication was not forwarded properly
   4 So i removed the access list and e vola it works in browser and in the app . Internal and external.

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

Does anybody has a good way to forward the authentication properly to the grafana?
any specific setting required in nginx to forward the authentication fro openhab to grafana?
thx

[Duncan_Pullen]

I’d like to thank you so much @maxmaximax. This is such an awesome contribution you’ve made to the OH community.

The only change I made was to add a default to the timerange widget:

    - default: from=now-6h&to=now;6h,from=now-12h&to=now;12h,from=now-1d&to=now;24h,from=now/d&to=now/d;Day,from=now-3d&to=now;Last 3 Days,from=now-7d&to=now;Last 7 Days,from=now-14d&to=now;Last 14 Days
      description: Comma-separated List of options. Example "from=now-6h&to=now;-6h,from=now-1d/d&to=now-1d/d;yesterday" for past "6h" and "yesterday". First entry is default.
      label: Time range options
      name: timerange
      required: true
      type: TEXT

[maxmaximax (Marcus)]

good suggestion to set some default timeranges - I used your example and updated the code in the first post.
Thank you!

[Bert (Bert Visscher)]

Strange, in widget development mode I see this:

in the page I get this:

Anyone have an idea where the problem is?

[DeBaschdi (Bastian)]

Hi, ich hab das Widget etwas modifiziert, für eine Solaranzeige optimiert und einen Kalender hinzugefügt, noch hardcoded.

uid: Grafana chart with timeranges mod
tags: []
props:
  parameters:
    - description: Title of the chart
      label: Title
      name: title
      required: false
      type: TEXT
    - description: URL to show in the frame
      label: Source URL
      required: false
    - default: https://xxxx/solaranzeige/d-solo/KyT4EHHVz/eiche-10?orgId=1&refresh=5s&{period}&panelId=118"
      name: URL
      required: true
      type: TEXT
    - default: from=now%2Fd&to=now%2Fd;Heute,from=now-1d%2Fd&to=now-1d%2Fd;Gestern,from=now-2d%2Fd&to=now-2d%2Fd;Vorgestern,from=now-3d&to=now;Die letzten 3 Tage,from=now-7d&to=now;Die letzten 7 Tage
      description: Comma-separated List of options. Example "from=now-6h&to=now;-6h,from=now-1d/d&to=now-1d/d;yesterday" for past "6h" and "yesterday". First entry is default.
      label: Time range options
      name: timerange
      required: true
      type: TEXT
    - description: Height of the Frame (empty = default)
      label: Height
      name: height
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 28, 2023, 9:05:58 AM
component: f7-card
config:
  outline: true
  style:
    --f7-card-margin-horizontal: 3px
    --f7-card-margin-vertical: 3px
    --f7-card-padding-horizontal: 10px
    --f7-card-padding-vertical: 10px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.3)
    margin-bottom: 5px
    margin-top: 5px
    noShadow: false
  title: =props.title
slots:
  default:
    - component: oh-webframe-card
      config:
        borders: false
        height: =props.height
        noBorder: false
        noShadow: true
        src: =props.URL.replace('{period}', items.Grafana_Epoch_select.state)
    - component: f7-segmented
      config:
        class:
          - padding-bottom-half
        outline: false
        round: false
        style:
          --f7-button-border-radius: 4px
          --f7-button-font-size: 14px
          --f7-button-font-weight: 300
          --f7-button-outline-border-width: 1px
          --f7-button-padding-horizontal: 0px
          --f7-button-padding-vertical: 0px
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-text-transform: none
          margin-left: 10px
          margin-top: -5px
          margin-bottom: -5px
          margin-right: 15px
      slots:
        default:
          - component: oh-repeater
            config:
              for: size
              fragment: true
              sourceType: range
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: period
                    fragment: true
                    in: =[props.timerange.split(",")[loop.size].split(";")[1]]
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: Grafana_Epoch_select
                          actionCommand: =props.timerange.split(",")[loop.size].split(";")[0]
                          fill: "=(([props.timerange.split(',')[loop.size].split(';')[0]] == items.Grafana_Epoch_select.state) || (props.timerange.split(',')[0].split(';')[1] === loop.period) && !items.Grafana_Epoch_select.state) ? true : false"
                          outline: true
                          round: false
                          style:
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                          text: =loop.period
          - component: oh-input
            config:
              outline: true
              round: false
              item: Grafana_Datepicker
              sendButton: true
              type: date
              style:
                font-size: 20px

dazu musste ich 2 Items Anlegen mit einer Rule

Datepicker Item (vom Kalender)

Epoch Item (Umgerechnet nach Rule)

Und die Rule

Viel Spaß beim Nachbauen

[Guido_Stoppler (Guido Stöppler)]

Dear community,

I use this great widget and it works fine when I access openHAB from my local PC in my local network (i.e. 192.168.86.81:8080).

When I try to access it in the Android APP or via cloud (https://home.myopenhab.org/) the widget remains empty (with a white screen). I got no error message.

My URL in the widget is:

   http://63.33.xx.xxx:3000/d/fVuLOofVz/netzfrequenz?orgId=1&{period}&viewPanel=2&orgId=1

I have to say that my InfluxDB and my Grafana are hosted at AWS.
Of course I made the necessary changes to my grafana.ini, i.w.

[security]
admin_password=jFlHxxxxxxxxxxxxxxxxx
admin_user=admin
secret_key=5690cef21b3daffd6xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 allow_embedding = true

 allow_embedding = true

[users]
# disable user signup / registration
 allow_sign_up = false

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

When I put in the URL above in a browser I can access this dashboard without any login.

I then tried to make a snapshot in Grafana and use this is a web frame card. This works locally as well as in the Android app as well as on a remote PC from openHAB cloud.
So I thought it could not be anything with credentials, right ?

Does iframe handle http ?
I did not manage to set up https with my AWS cloud instance so far.

Thanks a lot for your help.
Guido

[Wolfgang_S]

@Guido_Stoppler

Does iframe handle http ?

Think so but …
the main page is https and the embedded page / iframe content is http then http will be blocked. I would assume that you should see this being reported in the browsers console.

[krolli53 (Florian)]

Hi,

openhab newbe here.
I wanted to use this widget but when I want do add it to my Overview page (latest stable Openhab version), there is only some cryptic text (482eeeea4-d5e0-454c-9c24-528fdc523fad) I can add (which is supposed to be the grafana widget). If I do so, nothing happens on my Overview page. Is it just the wrong place I want to do that or what is missing for me?

[BlackAlpha (Carsten)]

Hi,

I’ve the same problem like @krolli53.
After adding the widget to the overview page and saving the changes, the page can’t be loaded again. It only shows “Loading…”.

The logs don’t show any abnormalities.

[Stifler (Brownian Motion)]

I’m having the same problem. Seems like this widget isn’t registering itself properly. I know this is the widget, if I remove it, this option goes away.

If I ignore that it’s not a nice name, and try to use it anyway it hangs up the page.

@maxmaximax Any ideas?

[Stifler (Brownian Motion)]

This is all that appears in the widget code:

[maxmaximax (Marcus)]

Honestly, no idea…
I’m on OH 3.4.4 with no such issues.
Which OH build are you running?

[Stifler (Brownian Motion)]

I’m on OpenHAB 3.4.3 installed on Debian 11. I just went to the market place in installed this addon from the UI page. This is how is shows up. There are others who have posted same issue here (few posts before my post).

[Stifler (Brownian Motion)]

I’ve just upgraded to OH 3.4.4-2, and this problem still occurs.

[Stifler (Brownian Motion)]

Ok so I found your widget code in that discussion you posted about (somewhere at the bottom of the conversation):

Grafana chart with time ranges

With great support by @BobMiles, @RGroll and @ysc I managed to create a widget to embed grafana charts with configurable time ranges. If interested, you can find the whole discussion here. [Grafana chart widget] [Grafana widget props] Source URL: Make sure you insert {period} inside the URL where you would want to have the time range pasted. Example: http://192.168.0.13:3000/d-solo/4OdYJNbMk/energie-pv-haus?orgId=1&refresh=1m&from=now-{period}&to=now&panelId=2 Resources Full widget YAML…

I copied and pasted that and created a widget locally, and it worked. So I believe the problem is the marketplace, or how/what is being downloaded. I don’t know if you can at least check that the widget in the marketplace is not corrupt or something?

I have installed other marketplace widgets, all successfully. So this hopefully points you in the right direction.

[maxmaximax (Marcus)]

Thank you for troubleshooting…

I will make a note in the first post suggesting this workaround until the issue with the marketplace is fixed.

[odinhab]

This looks stellar Rob!
Any chance you’ll share the yaml for it?
I love this.

[odinhab]

Hi @maxmaximax thanks for sharing your work!

[UPDATE] [SOLVED]: from the in-depth post on this subject:

@BobMiles

make sure you get the URL in grafana by clicking on the chart context menu and select share - embed.

So far, this is really close to being 100% in OH4.01 except for one minor irritance: the frame shows the full dashboard controls.

I made sure to copy the link only to the panel, but in my widget, it continually gives me the dashboard controls.

Any idea what I might be doing incorrectly?

Thanks again, great stuff!

[maxmaximax (Marcus)]

Glad you like the widget
Worth noting that I have not yet upgraded to OH4 - and will not upgrade any time soon due lack of time.

Have you tried this?

Hope this works for you.

[odinhab]

Thanks @maxmaximax
I should have updated my post. I was using an external link instead of ‘share embed’, which is what was causing the controls issue.
After using the proper link, it works fine (I do have to log back into grafana via the widget from time to time, as I could not find a way for it to store cookies, but that’s a different issue).

Works great, thanks, and I do, I really like it!