Grafana Panels anderswo einbetten

Benutzung / Usage Datenanzeige / Data display
, , , ,
1

Einleitung

Für das Einbetten von Panels muss ich mir immer irgendwo ein Beispiel hier im Forum suchen, daher wollte ichs mal hier dokumentieren.

Die Panel-ID findet man, wenn man in Grafana auf view oder edit geht, dann in der Adresszeile als URL-Parameter panelId=1.

Beispiel

<iframe 
    src="https://swarm.hiveeyes.org/grafana/dashboard-solo/db/muc-mh-b99?from=20170214T162500&to=now&theme=light&panelId=1" 
    width="100%" height="425" frameborder="0">
</iframe>

Ergebnis

1 Like
2

Es geht aber auch noch ein Stück komfortabler im Grafana selbst - direkt im jeweiligen Kontext des Panels:

  1. Im Kontextmenü des entsprechenden Panels “Share” auswählen.
    image

  2. Die zweite Karteikarte “Embed” auswählen.

    image
    image.png749×404 71.2 KB

  3. Unten den iframe code rauskopieren und ggf. vorher noch die angebotenen Optionen anpassen.

Wenn man damit dann interaktiv spielen will, lassen sich bei den “from” und “to” Parametern wieder die menschenlesbaren Formate einsetzen, wie im Beispiel von @clemens:

from=20170214T162500&to=now

Auch relative Zeitberechnungen sind möglich:

# Daten der letzen eindreiviertel Stunden
from=now-1h-45m&to=now

# Daten der vorletzten Woche
from=now-2w&to=now-1w
2 Likes
3

Sehr cool, den dashboard-share-link hatte ich auf dem Schirm, den fürs panel nicht. Danke!

Die default-Werte sollte man noch etwas pimpen, können wir das generell bei Grafana ändern?

<iframe 
    src="https://swarm.hiveeyes.org/grafana/d-solo/rrJQQWiiz/open-hive-peter?refresh=15m&panelId=1&orgId=2&from=1519383253490&to=1520716481180&tab=general" 
    width="450" height="200" frameborder="0">
</iframe>

width=“100%” height=“425” wären als default besser.

4

Ich hätte da jetzt nicht darauf gewettet, dass das klappt, aber man findet die Werte hier in den Quellen

/usr/share/grafana/public/app/features/dashboard/shareModalCtrl.ts

und hier im Kompilat

/usr/share/grafana/public/build/0.62c2e3e7aa607c7f2d09.js

Die Änderung (bisher nur auf swarm.hiveeyes.org) auf die gewünschten Werte hat scheinbar geklappt, beim nächsten Update würde sie aber natürlich wieder überschrieben werden.

P.S.: Hier wird noch in zwei Varianten beschrieben, wie man die iframes auch dynamisch per Javascript erzeugen kann. Das würde den Einbettungscode nochmals einfacher machen.

5

Cool, Danke!

6

Wenn ein statisches Bild eines Panelzustands gebraucht wird, dann kann man direkt an der gleichen Stelle einen modifizierbaren Link erzeugen, der ein image rendert:

image

https://weather.hiveeyes.org/grafana/render/d-solo/BHHuC_ziz/dwd-cdc-mosmix-mix-current-frickel?refresh=5m&panelId=17&orgId=1&from=1522187148681&to=1523483148682&var-CDC_STA_NAME=Berlin-Tegel&var-WMO_STA_NAME=BERLIN-TEGEL&var-RENDER_DATETIME=20180401%200200&var-TIME_DIFF=All&var-WMO_STA_HEIGHT=37.0&var-LAST_RENDER_UNIXTIME=1522598400000&theme=light&width=1000&height=500&tz=UTC%2B02%3A00 dashboard abandoned

ergibt (noch! ;) ) ergab dieses rendering; die annotation ist bei ‘now’:

image
image.png1000×500 131 KB

(DWD-MOSMIX-Wettervorhersage, siehe Grafana https://weather.hiveeyes.org/grafana/d/YVm0P1miz/meteogramm-einer-station)

1 Like
7

Im Zuge von Looking at Grafana 6 fanden wir heraus, dass man ab Grafana 6.2 eine neue Einstellung anschnackeln muss, damit das Einbetten von Dashboards und Panels weiterhin gut klappt.

Upgrading to v6.2

Embedding Grafana

If you’re embedding Grafana in a <frame>, <iframe>, <embed> or <object> on a different website it will no longer work due to a new setting that per default instructs the browser to not allow Grafana to be embedded. The new setting allow_embedding will control the respective behavior starting with Grafana 6.2.

– Upgrade Grafana | Grafana documentation

allow_embedding

When false, the HTTP header X-Frame-Options: deny will be set in Grafana HTTP responses which will instruct browsers to not allow rendering Grafana in a <frame>, <iframe>, <embed> or <object>. The main goal is to mitigate the risk of Clickjacking. Default is false.

– https://grafana.com/docs/installation/configuration/#allow-embedding

Wir werden diese Einstellung bis auf weiteres und ohne weitere Restriktionen auf true setzen, sofern nicht wirklich für den Betrieb der Plattform relevante Sicherheitsaspekte dagegen sprechen.

1 Like