ioBroker/Grafana: Dashboards und Panels in vis nutzen

Hallo zusammen,

in diesem Artikel möchte ich aufschreiben, wie ich es nach langem hin und her nun final geschafft habe, meine Flot iFrames in vis durch Grafana zu ersetzen. Ein großer Blocker hierbei war, dass ich den Anspruch hatte meine Grafana Konfiguration mittels Nutzer und Passwort abzusichern + entsprechend https nutzen wollte. Zusätzlich sollten aber die Visualisierungen lokal in vis eingebunden werden können, was sich mit https als schwierig erweist. Meine finale Lösung besteht nun aus zwei Grafana Docker Containern, wobei es auch ohne Docker gehen würde.

Kurz ein paar Worte zu den Vorteilen. Ich habe vorher eine SQLite Datenbank genutzt und hatte Flot als Visualisierung für die Daten eingesetzt. Mit der SQLite Datenbank oder auch wenn ihr die Aufzeichnung via History Adapter nutzt, werdet ihr mit Sensordaten welche sich hochfrequent ändern schnell an die Grenze kommen. Influx ist hier deutlich performanter da es für diese Art von Daten optimiert wurde. Diesen Umstieg habe ich bereits vor einiger Zeit vorgenommen.

Leider ist Flot nach wie vor sehr langsam, wenn es darum geht Daten aus der influx auszulesen und zu visualisieren. In meinen Tests mit Grafana hat sich dies als deutlich performanter herausgestellt und man hat die Möglichkeit Aggregationen direkt bei der Abfrage mittels der Flux Query Language vorzunehmen. Nach der Umstellung bin ich nun sehr zufrieden was die Performance betrifft. Gerade beim Ändern der Zeitfenster mittels mdui, ist die Ladezeit quasi nicht mehr vorhanden und auch das initiale Laden beim View geht deutlich schneller als mit Flot.

Final zeige ich noch die eher kleinen Anpassungen, welche ich machen musste um die die Zeitanpassung in den iFrames wieder mittels mdui steuerbar zu machen.

Voraussetzung für Grafana ist eine laufende influxdb. Für die Einbindung in den ioBroker muss zusätzlich der influxdb Adapter genutzt werden. Auch sollte Docker bereits installiert sein und ihr am Besten schon 1 - 2 mal damit gearbeitet haben.

Docker Container deployen

Als erstes wird der Docker Container deployed, welcher nur per https erreichbar ist. Für diesen erstellen wir zu erst ein Volume mittels

Jetzt erstellen wir schon mal den Ordner in welchen Grafana die Daten persistieren soll.

Dann wechseln wir in das Verzeichnis wo das Zertifikat abgelegt werden soll

Und erstellen hier das nötige Zertifikat und passen die Rechte an.

Anschließend wird der Container wie folgt erstellt:

Zweiter Container für http Exports

Der zweite Container wird nun ohne https erstellt und mounted das Verzeichnis der ersten Containers. Somit sollten sich beide Container synchron verhalten, wir können dann den SSL Container nutzen um Änderungen am Dashboard vorzunehmen und für die exports den ungeschützten Container ins iFrame einbinden. Hierfür nutze ich den Port 3001 statt 3000, da hier bereits der erste Container läuft.

Nun sollten beide Container erfolgreich laufen, was ihr mit

überprüfen könnt.

Portieren von mdui Flot iFrame zu Grafana iFrame

Wie bereits angekündigt nutze ich in meiner vis das mdui Framework. Hier ist es möglich Buttons zu erstellen um das gezeigte Zeitfenster anzupassen. Beim Export müsst ihr den Link so umbauen, dass statt der Unix Timestamps die Angaben mit

ersetzt werden, wobei das now- beliebig angepasst werden kann.
In dem Button in welchem bislang die CSS Klasse mdui-timespan-xx genutzt wurde muss nun die Klasse genutzt werden, wobei ihr from und to wieder beliebig anpassen könnt. Das Ergebnis schaut bei mir wie folgt aus:

Transparenter Hintergrund

Aktuell habe ich noch das Problem, dass der Hintergrund nicht eingefärbt, geschweige denn transparent gemacht werden kann. Wer das tun möchte, kann die folgenden Schritte, ausführen, der Workaround ist jedoch etwas hacky.
Zu erst müssen wir die views/index.html bearbeiten.

Hier muss innerhalb des ersten style tag

eingefügt werden. Dann mittels drücken von Escape,Eingabe von :w gefolgt von :q speichern und schließen. Nun mittels docker ps die ID des containers raussuchen und den Container mittels

neu starten.

TADA!

Falls Ihr Fragen, Wünsche, Videoideen oder andere Anregungen habt, stellt diese gerne in Form eines Kommentars oder schreibt eine Mail an info@iot-blog.net.