Wie kann man ein Grafana Dashboard in *.php einbinden?

  • Guten Abend zusammen,


    ich bin mal wieder auf eure Hilfe angewiesen. :shy:


    Ich habe einen Pi Zero WH. Dieser läuft mit Raspberry OS Lite headless. Angeschlossen ist über die GPIO-Leiste ein DHT22-Sensor.

    Ein Python-Skript wird im Intervall aufgerufen, lässt den Sensor messen und schreibt die Daten in eine MySQL-Datenbank.

    Dann habe ich noch Grafana installiert und damit lasse ich mir die Messergebnisse in zwei Diagramme anzeigen. Das funktioniert bis hier her.


    Wenn alles stabil läuft, dann soll der Sensor die Temperatur eines Schildkrötengeheges überwachen. Jetzt finde ich es aber nicht schön, die Diagramme auf der Grafana-Seite anzusehen.

    Ich würde gerne eine Webseite haben, die (vorerst) nur meine zwei Diagramme enthält.


    Also eine leere Webseite mit einem beliebigen Titel und etwas Text habe ich geschafft (gibt ja genügend Vorlagen):

    PHP
    !DOCTYPE html>
    <html>
     <head>
      <title>Titel der Webseite</title>
     </head>
     <body>
      <div align=center>
      <h1>Das hier steht in der Mitte</h1>
     </body>
    </html>

    Wie kann ich jetzt hier meine Diagramme einfügen?


    Zu dem Thema fande ich diesen Link : https://stackoverflow.com/

    am hilfreichsten, allerdings verstehe ich nicht alles. Bin ich damit auf dem richtigen Weg? Kommt der '<script>...</script>' in den 'body' ?


    Dann steht da was von Proxy-Einstellungen und es ist ein Beispiel für nginx dabei. Kann mir jemand sagen was ich in meinem Fall einstellen muss und vorallem den Hintergrund dahinter, das ich auch verstehe warum ich da machen muss.


    Installiert ist folgendes:

    Code
    apt install php7.3 php7.3-cli php7.3-curl php7.3-gd php7.3-intl php7.3-json php7.3-mbstring php7.3-mysql php7.3-opcache php7.3-readline php7.3-xml php7.3-xsl php7.3-zip php7.3-bz2 libapache2-mod-php7.3 php7.3-imagick php-apcu
    Code
    apt install mariadb-server mariadb-client

    PhpMyAdmin:

    Code
     wget https://files.phpmyadmin.net/phpMyAdmin/5.0.4/phpMyAdmin-5.0.4-all-
    languages.zip

    Und natürlich Grafana:

    Code
    https://dl.grafana.com/oss/release/grafana-rpi_6.2.2_armhf.deb 
    sudo dpkg -i grafana-rpi_6.2.2_armhf.deb


    Ich danke euch schon einmal für eure Hilfe :)


    Grüße

    Dennis

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

  • Also eine leere Webseite mit einem beliebigen Titel und etwas Text habe ich geschafft (gibt ja genügend Vorlagen):

    Ist aber eine schlechte Vorlage - align verletzt die Trennung von Layout und Inhalt. Für erstes gibt es schliesslich CSS.


    Zu dem Thema fande ich diesen Link : https://stackoverflow.com/

    am hilfreichsten, allerdings verstehe ich nicht alles. Bin ich damit auf dem richtigen Weg? Kommt der '<script>...</script>' in den 'body' ?


    Dann steht da was von Proxy-Einstellungen und es ist ein Beispiel für nginx dabei. Kann mir jemand sagen was ich in meinem Fall einstellen muss und vorallem den Hintergrund dahinter, das ich auch verstehe warum ich da machen muss.

    Am einfachsten ist es vermutlich die Funktionalitäten zu verwenden, die Grafana von sich aus mitbringt.


    Jedes Panel hat im Kontextmenu eine "Share"-Option (vermutlich "Teilen" falls dein Grafana Deutsch spricht). Dort gibt es einen Tab "Embed" - den dortigen HTML-Code solltest du in deine Website einbinden können.


  • Danke Linus für deine Antwort.


    Die "Share"-Option habe ich schon gefunden, aber die sieht bei mir anders aus:



    Der Inhalt *.json sieht so aus:

    Aber damit kann ich nichts anfangen?


    Kann noch Snapshot auswählen:


    So wie ich das verstehe, ist das aber soetwas wie ein Screenshot, also ohne Funktion.


    Deine Anmerkung zu CSS werde ich nachher noch recherchieren. :thumbup:


    Grüße

    Dennis

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

  • Die "Share"-Option habe ich schon gefunden, aber die sieht bei mir anders aus:

    Du verwechselst "Share" des gesamten Dashboards mit "Share" eines einzelnen Panels. ;)



    Deine Anmerkung zu CSS werde ich nachher noch recherchieren. :thumbup:

    Zwar nur auf Englisch, aber vielleicht dennoch hilfreich: https://en.wikipedia.org/wiki/…_content_and_presentation

  • Oh wie schlau von mir :X


    Danke, das funktioniert jetzt auch fast. Das Problem ist nur diese Meldung, wenn ich die Webseite aufrufe:

    Quote


    Zu Ihrem Schutz erlaubt 192.168.x.x es Firefox nicht, diese Seite anzuzeigen, wenn sie in eine andere Seite eingebettet ist.

    Zur Anzeige der Seite muss diese in einem neuen Tab geöffnet werden.

    Okay im neuen Tab wird mein Diagramm angezeigt :thumbup:

    Meine *.php - Datei sieht so aus:

    HTML
    <!DOCTYPE html>
    <html>
     <head>
      <title>Titel der Webseite</title>
     </head>
     <body>
    <iframe src="http://192.168.0.67:3000/d-solo/2qYQh4zRz/diagramm?orgId=1&from=1603462134661&to=1603483734661&theme=light&panelId=6" width="450" height="200" frameborder="0">
    </iframe>
    </body>
    </html>

    Laut der Hilfe-Seite von Firefox soll ich eine 'Content Security Policy' einrichten oder 'X-Fram Options' einbauen. Für die 'X-Frame Options' gibt es auch Beispiele. Nur habe ich hier wieder etwas angefangen, von dem ich gar keine Ahnung habe und von dem her auch nicht weis, wo ich zum Beispiel: Header always set X-Frame-Options "sameorigin" einbauen soll.

    Und mal ganz Allgemein, ist das überhaupt der richtige Weg oder hängt das mit der schlechten Vorlage der *.php Datei zusammen? An dieser Stelle Danke euch beiden für die Links.


    Edit: Ich rufe die Seite mit 'http' auf und nicht mit 'https' falls das was zur Sache tut.


    Grüße Dennis

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

    Edited once, last by Dennis89 ().

    • Official Post

    Das passt imho eigentlich schon so. ;) Welche Version vom FF auf welchem OS verwendest Du? Kannst Du die Meldung nicht einfach wegklicken? Mach auch mal bitte einen Screenshot davon, denn das kenne ich so nicht.


    Zu dem Herader-Zeusch kann Dir Linus bestimmt besser helfen. ;)

  • Danke für deine Antwort hyle


    Hier die Screenshots:


    Wegklicken geht nicht, nur in dem neuen Tab öffnen. Unter weitere Informationen findet man Hilfe zu den erwähnten Optionen, die ich habe um den Fehler zu beseitigen. Ich nutze Firefox Version 81.0.1und als Betriebssystem läuft fedora.


    Edit: Mit einem Smartphone geht es auch nicht, es erscheint nur ein trauriger Smilie :(

    Ich bin soweit, das ich die 'X-Frame Options' in die Seite-Konfiguration eintragen muss, nur wo da sein soll habe ich noch nicht rausgefunden.


    Grüße

    Dennis

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

    • Official Post

    Seltsam, ich verwende für meine Zentrale zur Anzeige des MiniDLNA-Status auch ein iframe, aber habe unter Win10 / FF 81.0 diese Meldung noch nie gesehen. :conf:


    Du hast PHP installiert und ist damit der Apache2 automatisch Dein Webserver? Dann siehe hier: https://tecadmin.net/configure-x-frame-options-apache/


    Oder bringt Grafana etwa einen eigenen Webserver mit?

  • hyle Apache2 ist installiert und in der 'security.conf' ist die Header-Funktion aus deinem Link auskommentiert. Wenn ich die '#' bei 'Header set X-Frame-Options: "SAMEORIGIN"' entferne startet aber der Server nicht mehr.

    Ob Grafana einen eigenen Server mitbringt weis ich nicht, werde mich mal schlau machen.


    Tell Danke für deine Hilfe.

    Der Code steht in einer Datei mit der Endung 'php'. Mit deinem Zusatz sieht der Code dann so aus:


    Das änderte aber leider nichts.


    Grüße

    Dennis

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

    • Official Post

    Zeige mal bitte Deine /etc/apache2/conf-enabled/security.conf oder sieh selber mal nach, vielleicht ist da noch ein anderer Eintrag bezüglich Header set X-Frame-Options: aktiv.


    Wo liegen die Grafana-Dateien? Sorry, habe Grafana nicht installiert!

  • Zu dem Herader-Zeusch kann Dir Linus bestimmt besser helfen. ;)

    Na gut... :lol:


    Also erstmal, um das klarzustellen:

    VOR die erste Zeile setzen.

    Bringt nix. Der Header ist für die im iframe eingebettete Seite, nicht für die einbettende Seite - eine Seite muss schliesslich selbst bestimmen können, ob sie eingebettet werden darf.

    Der Browser prüft hier in der Antwort des iframe-Requests, ob die Seite das Einbetten verbietet (tut sie) und... macht es dann auch nicht.


    In der Grafana-Doku steht dazu:

    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.

    Also: standardmässig kann Grafana nicht mit einem iframe eingebettet werden, setzt man allow_embedding auf true, funktioniert es. Die haben an alles gedacht ;)


    Ob Grafana einen eigenen Server mitbringt weis ich nicht, werde mich mal schlau machen.

    Grafana bringt einen eigenen Webserver mit - siehe:


  • Guten Morgen und vielen Dank für die hilfreichen Antworten:)

    anderer Eintrag bezüglich Header set X-Frame-Options: aktiv.

    Es sind zwei Einträge vorhanden, wenn ich diese unabhängig von einander aktiviere startet Apache2 nicht mehr und meine Webseite wird dann nicht mehr angezeigt. Also stellt der Apache2-Server die Webseite bereit?


    Das hier sind die möglichen Einstellungen:



    Also: standardmässig kann Grafana nicht mit einem iframe eingebettet werden, setzt man allow_embedding auf true, funktioniert es. Die haben an alles gedacht

    Meine Datei /etc/grafana/grafana.ini hat jetzt diesen Inhalt:

    Code
    # set to true if you want to allow browsers to render Grafana in a <frame>, <if$
    ;allow_embedding = true

    Leider brachte auch das keine Änderung.

    Gibt es hier ein Zusammenspiel von Apache2 und dem Grafana-Server?


    Hier die vollständige 'security.conf' von Apache2:

    Das was ich in der Datei geändert habe, habe ich rot markiert.

    Und die vollständige 'Grafana.ini':


    Grüße

    Dennis

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

    • Official Post

    Meine Datei /etc/grafana/grafana.ini hat jetzt diesen Inhalt:


    Code
    # set to true if you want to allow browsers to render Grafana in a <frame>, <if$
    ;allow_embedding = true

    Leider brachte auch das keine Änderung.

    Hast Du nach den Änderungen mal den grafana-server oder RPi neu gestartet?

  • Comments in .ini Files

    Semicolons (the ; char) are the standard way to comment out lines in a .ini file. If you want to change a setting, you must delete the semicolon (;) in front of the setting before it will work.

    Example

    Code
    # The HTTP port  to use
    ;http_port = 3000

    A common problem is forgetting to uncomment a line in the custom.ini (or grafana.ini) file which causes the configuration option to be ignored.

  • Hast Du nach den Änderungen mal den grafana-server oder RPi neu gestartet?

    Danke für deine Hilfe, ja ich hatte beides gemacht. Die Lösung war der Hinweis aus dem letzten Beitrag von Linus .


    Linus Danke, genau das war das Problem. Ich bin davon ausgegangen, dass mit '#' auskommentiert wird, da in dieser Datei vor den Kommentaren '#' geschrieben wurde.



    Aber jetzt funktioniert es, vielen Dank nochmals :) Dann kann ich mich nun darum kümmern wie ich verschiedene Diagramm auf der Webseite anordne.



    Grüße

    Dennis

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?