Während des Betriebes einer Cloud- bzw. Rechenzentrumsinfrastruktur kommt es regelmäßig vor, dass der aktuelle Systemzustand – zum Beispiel der Kühlinfrastruktur – analysiert und bewertet wird. Falls es einen ungünstigen Betriebszustand oder Ausfall gibt, wird ein Trouble-Shooting betrieben. Personen oder Teams, die eine solche Infrastruktur überwachen, benötigen dabei einen schnellen Überblick über relevante Parameter wie Temperaturen, Serverauslastung oder Datenraten. Mit zunehmender Anzahl an Parametern steigt jedoch die Komplexität: Der Prozess zur Beantwortung der Frage „Wo ist es denn jetzt zu warm?“ wird schnell unübersichtlich und zeitintensiv, was Analyse und Reaktion unnötig verzögert.
In diesem Artikel zeigen wir, wie sich Messdaten aus Cloud- und Rechenzentrumsinfrastrukturen mit dem Canvas-Feature von Grafana übersichtlich darstellen lassen. Mit Canvas Panels können Operations-Teams Abweichungen von Sollzuständen schnell erkennen und Fehler strukturiert eingrenzen. Jedoch hat die Erstellung von diesen Panels einige Herausforderungen, die wir auf Basis unserer praktischen Erfahrungen hier gezielt adressieren.
Über Grafana und das Canvas-Feature
Für die Visualisierung wird Grafana, eine Open-Source-Anwendung zur grafischen Darstellung von Daten aus verschiedenen Datenquellen, verwendet. Grafana greift auf Messdaten, die in einer Datenbank vorhanden sind, zu. Die Messdaten stammen zum Beispiel von Sensoren der technischen Gebäudeausrüstung oder auch Messwerten von der Stromverteilung im Rechenzentrum. An dieser Stelle sind viele weitere Werte, wie Serverauslastung, Datenraten, verfügbarer Speicher oder Tank-Füllstände, denkbar.
Auf Basis dieser Messdaten stellt Grafana zum Beispiel ein Diagramm in einem Dashboard dar. In Abbildung 1 wird ein beispielhaftes Panel von Grafana mit einem Diagramm dargestellt.
Abbildung 1: Beispiel eines Diagramms in Grafana
Ein spezieller und relativ neuer Typ von Diagrammen ist das sogenannte Canvas. Dieses dient dazu, Messwerte optisch ansprechend und anschaulich zu präsentieren. Es ermöglicht, Messwerte nicht nur als klassische Zeitreihen darzustellen, sondern frei auf einer gestaltbaren Fläche anzuordnen und visuell ansprechend aufzubereiten. Dabei können Elemente, wie Formen, Statusanzeigen oder sogar interaktive Schaltflächen, integriert werden. Auf diese Weise lassen sich neben reinen Visualisierungen auch einfache interaktive Benutzeroberflächen (GUIs) realisieren. Obwohl wir in diesem Artikel Anwendungsbeispiele aus dem Cloud-Infrastruktur-Bereich adressieren, kann Canvas für sehr viele Anwendungen genutzt werden. In Abbildung 2 ist ein beispielhaftes Canvas Panel zur Steuerung eines Sonnenrollos zu sehen.
Abbildung 2: Beispiel Canvas Panel
Die Erstellung eines Canvas Panels ist jedoch insbesondere für Einsteiger aufwendiger und weniger intuitiv als klassische Diagramme. Wie wir im Folgenden sehen werden, müssen dafür mehrere Schritte bewusst geplant und umgesetzt werden. Deshalb lohnt es sich, einige Erfahrungswerte aus der Praxis zu zeigen.
Zur Erstellung und Bearbeitung der in diesem Artikel vorgestellten Panels wird nur eine aktuelle Grafana-Installation benötigt. Um Canvas nutzen zu können, wird Version 11 (Grafana Release 2024-04) oder neuer und eine Datenquelle benötigt. Es wird kein zusätzliches Werkzeug benötigt. Alle Anpassungen erfolgen im integrierten „what you see is what you get“-Editor. Dieser stellt grundlegende Elemente mit unterschiedlichen Formen und Typen bereit, die für die Erstellung von Visualisierungen und interaktiven Panels verwendet werden können. Tabelle 1 fast die Grundelemente zusammen.
Tabelle 1: Überblick an Elementen im Grafana Canvas Editor
Element
Beispielbild
Beschreibung
Wolke
Text in Wolkenumriss
Ellipse
Text in Ellipsenumriss
Parallelogramm
Text in Parallelogrammumriss
Rechteck
Text in Rechteckumriss
Dreieck
Text in Dreieckumriss
Verbindungslinie
Linie mit und ohne Pfeile an den Enden
Text
Text ohne Rahmen (ähnlich wie Parallelogramm aber mit transparentem Hintergrund)
Icon
Auswahl an gängigen Icons und Symbolen
Server
Server-Symbol mit anpassbarer Statusleuchte
Windrad mit einstellbarer Drehzahl
Interaktive Schaltfläche, die mit den Methoden GET, POST oder PUT mit einer API kommunizieren kann
Drone in verschiedenen Ansichten mit einstellbarer Propeller-Drehzahl
Eigene Bilder
Als Hintergrund eines Elementes eingebundener URL-Pfad zu einem Bild
1 verfügbar, wenn die Option „Experimental element types“ aktiviert ist.
In den meisten dieser Elemente lassen sich Text, Rahmenfarbe und Hintergrundfarbe statisch oder durch eine Metrik gesteuert einfügen. Die offizielle Dokumentation gibt ausführliche Beispiele für das Arbeiten mit dem Editor, die ersten Schritte und einen Überblick über die einzelnen Aspekte des Plugins.
Anwendungsbeispiele für das Grafana Canvas
Im Folgenden präsentieren wir zwei Anwendungsfälle aus dem Cloud- und Rechenzentrumsinfrastruktur-Kontext für die Nutzung des Canvas-Plugin in Grafana. Wir zeigen, wie die Panels erstellt werden können und worauf insbesondere bei der Umsetzung geachtet werden sollte. Es wurde Grafana in v12.2.0 verwendet.
In unseren Beispielen übertragen wir bereits bestehende Schaubilder mit Messwerten einer Anlage, die zuvor basierend auf einem SVG-Bild mit dem marcuscalidus-svg-panel dargestellt wurden. Da dieses Plugin eine Fremdanbieter-Lösung ist, kann ein Grafana-Update zu Problemen führen, die ein Debugging und individuelle Problemlösungen notwendig machen könnten. Dieses Risiko ist bei dem seit dem 11 Grafana Release integrierten Canvas-Plugin deutlich niedriger, da die Entwicklercommunity hier dafür Sorge trägt, dass mit jedem Release die Funktion sichergestellt ist.
Anwendungsbeispiel 1: Serverraum
In einem Serverraum haben wir mehrere Lufttemperatursensoren sowie Power Distribution Unit (PDU)-Messwerte für die elektrische Eingangsleistung an den Serverschränken. In einer Diagrammdarstellung kann zwar der zeitliche Verlauf gut ausgewertet werden (s. Abbildungen 3 und 4 für Beispiele). Es ist allerdings aufwändig, die Messwerte direkt einem bestimmten Ort im Raum zuzuordnen, da dafür ein separater Raumplan notwendig ist.
Abbildung 3: Raumtemperaturen in einem Diagramm
Abbildung 4: Elektrische Eingangsleistungen in einem Diagramm
Abbildung 5 zeigt das aktuelle SVG-Panel, welches mit dem marcuscalidus-svg-panel-Plugin eingebunden wurde.
Abbildung 5: Bisheriges SVG-Bild des Raumes
Beim zweiten Blick fällt auf, dass das aktuelle Panel unvollständig ist, da die elektrische Leistung hier noch nicht mit dargestellt wurde. Wir nutzen diese Gelegenheit, um das Panel entsprechend zu überarbeiten und um alle relevanten Informationen zu ergänzen.
Um nun in dem bestehenden Setup, in dem bereits alle Metriken verfügbar sind, auf ein Canvas Panel umzusteigen, wird zunächst ein neues Panel erstellt (s. Abbildung 6). Wird von Grund auf begonnen, muss auch noch ein neues Dashboard angelegt werden.
Abbildung 6: Neues Panel im vorhandenen Dashboard anlegen
In dem Drop-down-Menü muss der Diagramm-Typ in „Canvas“ geändert werden (Abbildung 7).
Abbildung 7: Panel Typ „Canvas“ auswählen
Im nächsten Schritt wird eine Datenquelle ausgewählt und alle notwendigen Metriken (Queries) nacheinander eingefügt. Da wir keinen zeitlichen Verlauf, sondern nur den aktuellsten Wert darstellen wollen, muss der Typ auf Instant gesetzt werden. Um die spätere Zuordnung der Messwerte zu den einzelnen Canvas-Elementen zu vereinfachen, empfiehlt es sich, an der Stelle gleich konsistente und treffende Benennungen (Legend) einzutragen (s. Abbildung 8). Eine nachträgliche Umbenennung führt dazu, dass die umbenannte Metrik bei allen Elementen, in denen sie genutzt wird, neu zugewiesen werden muss.
Abbildung 8: Eingefügte Queries mit Benennung
Nun stoßen wir schon auf einen ersten Sonderfall: Da wir unterschiedliche physikalische Größen in dem Panel darstellen wollen, benötigen wir mehrere Einheiten. Eine globale Einheit ist in diesem Fall nicht sinnvoll, da sie für alle Werte gleichermaßen gelten würde. Daher lassen wir die globale Einheit des Panels frei und setzen die Einheit stattdessen in Abhängigkeit der Benennung mit Hilfe der Überschreiben- bzw. Override-Funktion (s. Abbildung 9).
Abbildung 9: Mit Hilfe von Overrides individuell angepasste Einheiten für die Metriken
Erst jetzt wird das bestehende Schaubild mithilfe der in Canvas verfügbaren Mitteln nachempfunden. Um Zeit zu sparen, ist es gut, wiederkehrende Elemente als eine Gruppe zu behandeln, in kleinen zu entwerfen und sie erst später zu duplizieren (s. Abbildungen 10 und 11). Dabei zeigt sich, dass die Vielfalt der verfügbaren Formen begrenzt ist.
Abbildung 10: Elementansicht der Symbole, die in Gruppe für ein Rack dupliziert werden sollen
Abbildung 11: Layeransicht der Symbole, die in Gruppe für ein Rack dupliziert werden sollen
Diese Einschränkungen entpuppen sich jedoch nach einigem Ausprobieren schnell als Segen, da so das Schaubild im Ergebnis sehr schlicht und übersichtlich ausfällt. Nachdem wir alle notwendigen Elemente platziert haben, können wir beginnen, die Textboxen mit Leben zu füllen. Dafür muss im nächsten Schritt eine Zuordnung zwischen Element und Metrik erfolgen (s. Abbildung 12). Die Zuordnung kann in dem ausgewählten Element bei Text erfolgen. Dazu Source auf Field umstellen und im Drop-down-Menü die Metrik per Name auswählen. Hier zahlt es sich aus, vorher eine Benennung vorzunehmen.
Abbildung 12: Datenquellen für die Texte auswählen
Nachdem so die Texte in den Elementen durch Metriken ersetzt wurden, kann sich unser Raum auf Abbildung 13 wirklich sehen lassen.
Abbildung 13: Mit Grafana Canvas gezeichneter Raumgrundriss mit Messdaten
Falls die Option Inline editing eingeschaltet ist, sind die Elemente außerhalb des Editors auswähl- und verschiebbar, was von den Benutzern als unerwartet und störend empfunden werden kann. Ein Deaktivieren von Inline editing bei einem fertigen Panel löst das Problem (s. Abbildung 14).
Abbildung 14: Die Schaltfläche Inline editing zu aktivieren, ist nur während der Bearbeitung hilfreich.
Anwendungsbeispiel 2: Serverrack
Auch für ein Serverrack ist die Zuordnung der Temperaturwerte in einem Zeitreihen-Diagramm unübersichtlich. In diesem Fall wurde ebenfalls bisher ein SVG-Bild genutzt, um eine Zuordnung zur Lage der Messstellen zu bekommen (s. Abbildung 15). Das mit dem marcuscalidus-svg-panel-Plugin eingebundene SVG-Bild war ein direkt aus der Projektdokumentation übernommenes Schema. Es wurde nicht vereinfacht oder für den Zweck angepasst.
Abbildung 15: Altes SVG-Schema des Serverracks
Wie im ersten Beispiel wird in diesem Fall ein neues Panel angelegt, um das SVG-Schema in dem Canvas Plugin neu zu erstellen. Im nächsten Schritt wird überlegt, welche Queries notwendig sind, um die Metriken zu erhalten (s. Abbildung 16).
Abbildung 16: Ausschnitt der Queries für das Serverrack
Sind diese eingetragen, ist es für später von Vorteil, eindeutige und aussagekräftige Namen zu vergeben, aus denen sich die physikalische Größe ableiten lässt. Jetzt passen wir mit „field override“ die Einheit an, indem wir via Fields with name matching regex die Namen nach bestimmten Texten – zum Beispiel /.*temp.*/ – durchsuchen. Daraufhin kann unter Standard options -> Unit die Einheit gesetzt werden (s. Abbildung 17).
Abbildung 17: Setzen der Einheiten der Metriken in Abhängigkeit des Metrik-Namens
Nachdem die Metriken vorbereitet sind, kann das Zeichnen des Schemas begonnen werden. Oft entstehen einige Entwürfe und Versuche, bis man ein finales Layout gefunden hat. Es ist daher aus unserer Erfahrung sinnvoll, die ersten Entwürfe auf dem Papier zu erstellen und auszuwählen. Erst anschließend sollte man mit dem Editor starten und wenige ausgewählte Entwürfe umsetzen (s. Abbildung 18).
Abbildung 18: Zwischenentwurf
Sind die Elemente platziert, werden in den ausgewählten Elementen die Metriken den Texten zugeordnet. Dazu wird die Option Source auf Field umgestellt und im Drop-down-Menü die Metrik per Name ausgewählt. Das Schema kann in Abbildung 19 gesehen werden. Das Ergebnis wirkt erneut auf das Wesentliche reduziert, was als positiver Effekt der eingeschränkten Vielfalt von Elementtypen gesehen werden kann.
Abbildung 19: Ansicht des in Canvas umgesetzten Schemas
Hilfreiche Tipps
Während der Bearbeitung der beiden Anwendungsbeispiele haben sich einige praktische Hinweise ergeben, die im Folgenden als Tipps für die Nutzung von Canvas zusammengefasst sind:
-
- Eine Umsetzung von Schaubildern in Canvas ist häufig mit zusätzlichem Aufwand verbunden, da bestehende Bilder nicht direkt übernommen werden können, sondern nachempfunden werden müssen. Die Visualisierung kann allerdings helfen, Abweichungen vom Sollzustand schnell zu erkennen. Der Mehraufwand wird sich daher in den meisten Fälle lohnen.
-
- Zeichnen in Canvas-Editor kann langsam sein, da man häufig in dem rechten Optionsfenster scrollen muss, um die gesuchte Option auszuwählen. Wir empfehlen, die ersten Entwürfe auf dem Papier zu zeichnen und wenige ausgewählte Entwürfe im Editor umzusetzen.
-
- Es gibt keine Möglichkeit, eine Änderung mit einen „Schritt zurück“ im Canvas-Editor rückgängig zu machen. Verbindungspfeile sollte man daher erst ganz am Ende erstellen, da diese am schwierigsten zu handhaben sind. Sie müssen häufig gelöscht werden (Entf Taste), da sie nicht richtig an einem Punkt verbunden sind oder einfach der Pfad korrigiert werden muss.
- Um effektiv beim Aufbau zu sein, ist es besser, sich zuerst auf die Metriken zu fokussieren. Dazu werden die erforderlichen Queries eingetragen und anschließend aussagefähig, treffend und kurz benannt.
- Die optischen Elemente sollten erst platziert werden, wenn alle Metriken eingerichtet sind. Danach können die Metriken bei den Elementen via Text -> Field zugeordnet werden, um unnötige Schleifen zu vermeiden.
- Ist die Option „Inline editing“ aktiv, hilft das beim Bearbeiten sehr, da so die Elemente schnell ausgewählt werden können. Leider trifft das auch zu, wenn der Editor verlassen worden ist. Die Elemente sind auch während der Ansicht auswähl- und bearbeitbar. Das ist aus Sicht der Nutzer unerwartet und kann als störend empfunden werden. Damit dies nicht so ist, sollte die Option nach Fertigstellung eines Panels deaktiviert werden.
- Ein Vor- und Nachteil zugleich ist, dass Elementvielfalt eingeschränkt ist. Das reduziert die Darstellungsmöglichkeiten, sorgt aber gleichzeitig dafür, dass die Schaubilder auf das Wesentliche reduziert sind und übersichtlicher wirken.
- Der Quellcode der Panels in JSON-Format kann eingesehen und bearbeitet werden. Fertige Panels können somit auch kopiert und als Vorlage genutzt werden:
-
-
-
- … => inspect => Panel JSON (s. Abbildung 20)
- Inhalt kopieren
- Im Ziel Dashboard neues Panel anlegen
- … => inspect => Panel JSON
- Kopierten Inhalt einfügen und ID anpassen
-
-
Abbildung 20: Bearbeitung in JSON-Format
Zusammenfassung
In diesem Artikel haben wir zunächst das Grafana Canvas kurz erläutert und seine grundlegenden Funktionen skizziert, um einen ersten Überblick zu geben. Anschließend wurden zwei konkrete Anwendungsbeispiele durchgespielt, um die praktische Handhabung zu demonstrieren und typische Einsatzszenarien zu verdeutlichen. Dabei sind uns einige Aspekte aufgefallen, die wir als praxisnahe Tipps zusammengefasst haben.
Unser Ziel war es, nicht nur die Funktionsweise des Tools zu zeigen, sondern auch aus der praktischen Erfahrung heraus hilfreiche Hinweise, besonders für neue Nutzer des Tools, bereitzustellen. Wir hoffen, dass die gezeigten Beispiele und Tipps den Einstieg erleichtern und dabei unterstützen, Grafana Canvas effektiv einzusetzen.
