Draw.io Diagramme als Grafana Dashboard verwenden

Neben der Alarmierung ziehe ich es immer vor, ein Dashboard meines Datenflusses zu haben, um einen Überblick über die Gesamtleistung zu erhalten. In den meisten Fällen lande ich bei einem Dashboard mit zu vielen Diagrammen oder sogar mehreren Dashboards.

Mit dem Flowcharting-Plugin für Grafana können Sie Draw.io-Diagramme verwenden und Ihre Metrik darüber legen. Auf diese Weise erhalten Sie eine visuelle Darstellung Ihres Datenflusses, einschließlich der Leistungsmetriken in einer einzigen Übersicht. Die Integration mit Office 365 und Microsoft Teams Apps erweitert die Funktionalität. Außerdem ist es mit Google Drive innerhalb des Google Workplace-Ökosystems kompatibel.

Dieser Blog führt Sie durch den Prozess der Erstellung des folgenden Grafana-Dashboards. Es stellt einen einfachen Datenfluss dar und enthält Diagramme, die aufpoppen, wenn Sie den Mauszeiger über die verschiedenen Objekte bewegen, und ein Warnsymbol anzeigen, wenn bestimmte Schwellenwerte erreicht werden.

Voraussetzungen:

• Docker oder eine Grafana-Instanz
• Draw.io (optional)

Hinweis: Sie können auch die Online-Edition von Draw.io verwenden.

Schritt 1: Vorbereiten Ihres Draw.io-Diagramms

Umbenennung der Identifikatoren

Schritt 2: Grafana einrichten

Für dieses Beispiel habe ich Docker verwendet. Der folgende Befehl startet Grafana, wobei das richtige Plugin (agenty-flowcharting-panel) installiert wird.

docker run -d 
  -p 3000:3000 
  --name=grafana 
  -e "GF_INSTALL_PLUGINS=agenty-flowcharting-panel" 
  grafana/grafana

Wenn dies erfolgreich war, können Sie zu localhost:3000 navigieren und Grafana sollte angezeigt werden.

Melden Sie sich mit admin / admin an und ändern Sie das Passwort.

Alternativ, mit Ihrem eigenen Grafana

Wenn Sie Grafana bereits laufen haben, können Sie das Plugin mit dem folgenden Befehl installieren. Vergessen Sie nicht, Grafana nach der Installation des Plugins neu zu starten.

grafana-cli plugins install agenty-flowcharting-panel

Schritt 3: Fügen Sie die Datenquelle TestData hinzu.

In diesem Blog verwenden wir die Testdatenquelle in Grafana, um Beispieldaten für unsere Diagramme zu erstellen.

Angenommen, Sie haben die Grafana-Benutzeroberfläche geöffnet, dann führen Sie folgende Schritte aus:

1. Klicken Sie auf Configuration >> Data Sources
2. Klicken Sie auf Add data source
3. Suche nach TestData
4. Klicken Sie auf TestData
5. Klicken Sie auf Save & Test

Schritt 4: Erstellen Sie Beispieldiagramme

Lassen Sie uns ein Dashboard mit einem einzigen Panel und 7 Abfragen erstellen.

1. Klicken Sie auf + >> Dashboard
2. Klicken Sie auf Add new panel
3. Unten links sehen Sie eine Registerkarte mit dem Namen Query (1), die bereits eine definierte Abfrage mit dem Namen A
4. Ändern Sie den Abfragenamen in api-incoming-requests, indem Sie auf das Bleistiftsymbol hinter dem Feld A
5. Stellen Sie Scenario, Alias und String Input entsprechend den Werten in der Tabelle wie unten gezeigt ein.

6. Klicken Sie nach jeder Abfrage auf das Symbol Duplicate query, um die nächste Abfrage hinzuzufügen.

Ihr Diagramm sollte wie folgt aussehen

Schritt 5: Ändern Sie das Diagramm in das Draw.io Diagramm

Wir müssen unser Diagramm in XML "exportieren" und es in Grafana "importieren". Mit Draw.io können Sie Prozessdiagramme und UML-Diagramme erstellen, die dann nach Grafana exportiert werden können.

In Draw.io (Export):

1. Klicken Sie auf Extra >> Edit Diagram…. Dadurch wird Ihr Diagramm als XML dargestellt.
2. Wählen Sie das XML aus und kopieren Sie es in Ihre Zwischenablage

In Grafana (Import):

1. Klicken Sie auf der rechten Seite auf die Registerkarte Panel
2. Erweitern Sie den Bereich Visualizations
3. Klicken Sie auf FlowCharting

4. Erweitern Sie den Bereich FlowChart, der gerade unter dem Bereich Visualizations erschienen ist.
5. Ersetzen Sie den Inhalt von Source Content durch unser Diagramm, indem Sie das XML einfügen. Machen Sie sich keine Sorgen, wenn Ihr Diagramm nicht korrekt geladen wird!
6. Aktivieren Sie die folgende(n) Option(en): a. Draw.io-Quelle zulassen - dadurch wird das Diagramm korrekt geladen

Schritt 6: Verknüpfen Sie Grafana-Abfragen mit den Diagrammobjekten

Nun ist es an der Zeit, unsere Abfragen mit den Objekten im Diagramm zu verknüpfen. Das Plugin verwendet dazu rules.

1. Erweitern Sie den Bereich Mapping auf der rechten Registerkarte Panel
2. Dies zeigt eine Standardregel namens MyRule
3. Erweitern Sie die Standardregel MyRule
4. Konfigurieren Sie die Regel entsprechend den in der Tabelle API angegebenen Werten. Jede Tabelle ist eine einzelne Regel. Der unten stehende Screenshot zeigt das Ergebnis, nachdem die erste Regel api konfiguriert wurde.

Hinweis: Möglicherweise sehen Sie weitere Felder und Optionen, aber das sind die wichtigsten.

5. Scrollen Sie ein wenig nach oben und klappen Sie die soeben erstellte Regel aus, um Platz zu schaffen.
6. Klicken Sie auf das Symbol Clone this rule, um die nächste Regel hinzuzufügen.

Nachdem Sie die erste Regel namens api hinzugefügt haben, sollten Sie ein Diagramm sehen, wenn Sie mit der Maus über das API-Objekt fahren.

7. Fahren Sie mit den nächsten 4 Regeln(Warteschlange, APP, Datenbank, Pipeline) fort, indem Sie die Schritte 4, 5 und 6 wiederholen.

Schritt 7: Schwellenwerte festlegen und sichtbar machen

Für jede Regel können Sie Schwellenwerte festlegen. Wenn ein bestimmter Schwellenwert erreicht wird, ändert sich der Status dieser Regel von [0: Ok] auf z.B. [1: Warnung] oder [2: Kritisch]. Basierend auf diesem Status können wir das Aussehen der Objekte ändern. Sie können den Text und die Größe des Objekts ändern, ein kleines Warnsymbol einblenden oder es ganz altmodisch blinken lassen.

Um Ihnen eine Vorstellung davon zu geben, wie Sie dies einrichten können, fügen wir einen Schwellenwert für die App hinzu, der uns warnt, wenn die Anzahl der fehlerhaften Nachrichten in der APP über 10 liegt.

1. Erweitern Sie die Regel app
2. Aktivieren Sie Icon state. Dadurch wird ein kleines Warnsymbol neben dem App-Objekt angezeigt.
3. Aktivieren Sie Invert. Dadurch wird die Schwellenwertlogik invertiert.
4. Legen Sie die folgenden Schwellenwerte fest:

   Farbe	Nummer	Lvl (Zustand)
   Grün	Basis	0 (Ok)
   Orange	10	1 (Warnung)
   Rot	25	3 (Kritisch)

    
5. Aktivieren Sie unter Tooltips die Option Color with state. Dadurch ändert sich die Farbe des Diagramms entsprechend dem Status (Grün, Orange, Rot). Wenn Sie mehrere Diagramme in einem Popup haben, können Sie auf diese Weise für jedes Diagramm den aktuellen Status leicht erkennen.

Schritt 8: Lösen Sie die Regel aus und sehen Sie, was passiert

Lösen Sie die Regel aus, indem Sie der Abfrage app-mallformed einen zusätzlichen Datenpunkt hinzufügen.

1. Suchen Sie die Abfrage app-mallformed auf der Registerkarte Query unten links.
2. Und fügen Sie ,12 zu den String input

Im Diagramm wird neben dem App-Objekt ein Warnsymbol angezeigt. Wenn Sie nun mit der Maus über das App-Objekt fahren, sehen Sie, dass das Diagramm zu Orange wechselt. Fügen Sie nun einen weiteren Datenpunkt hinzu (,26), um den nächsten Schwellenwert auszulösen, und überprüfen Sie, ob das Diagramm auf rot wechselt.

Erledigt

Sie sollten nun ein Diagramm mit 5 Objekten (einschließlich Pfeil) haben, wie am Anfang gezeigt. Wenn Sie mit dem Mauszeiger über ein Objekt fahren, werden die verschiedenen Diagramme eingeblendet, ein Warnsymbol wird in der Nähe von APP angezeigt und das APP-Diagramm sollte rot eingefärbt sein.

Extra: Mehr Spaß mit Regeln

Gehen Sie zurück zur Regel app-mallformed und suchen Sie nach den folgenden Optionen:

- Label/Text-Zuordnungen - Link-Zuordnungen - Ereignis/Animation-Zuordnungen

Diese können die Diagrammobjekte für einen bestimmten Zustand manipulieren. Die Verwendung dieser Optionen ähnelt der Einstellung der Schwellenwerte in Schritt 6. Ich werde die Optionen kurz erklären.

Label/Text Mappings Damit können Sie die Textbeschriftung des Objekts im Diagramm ändern, wenn ein bestimmter Schwellenwert erreicht wird. Die folgende Konfiguration fügt den Wert hinzu.

Link Mappings Basierend auf den Schwellenwerten können Sie eine URL für das Objekt im Diagramm festlegen. Damit können Sie z.B. einen Link zu einem detaillierteren Dashboard für die App erstellen.

Zuordnungen von Ereignissen und Animationen Um Ihr Diagramm noch interessanter zu gestalten bling bling, können Sie Objekten, Textbeschriftungen und Pfeilen Animationen hinzufügen.

Referenzen:

• Grafana-Plugin-Seite
• Offizielle Flowcharting-Dokumentation