Synchronisiertes Zoomen zwischen Diagrammen in Splunk Dashboards

Im letzten Teil unserer Serie zur Erstellung dynamischer Splunk-Dashboards zeigen wir, wie man das Zoomen in mehreren Charts synchronisieren kann.

Splunk selbst bietet eine Lösung an, bei der man im ersten Diagramm einen Zeitraum auswählt, der anschließend für alle folgenden Diagramme übernommen wird. Für Analysen mit einem Top-Down-Ansatz, also wenn man sich zunächst einen Gesamtüberblick verschaffen und anschließend in einen kleineren Zeitraum hineinzoomen möchte, ist dieses Vorgehen meist ausreichend (Dokumentation).

Hierzu wird ein <select>-Block in das Diagramm eingefügt, der Start- und Endzeitpunkt als Token übergibt. Diese Tokens werden in den nachfolgenden Diagrammen als Zeitparameter verwendet. Wie Tokens grundsätzlich in Dashboards eingebunden werden, haben wir bereits in einem früheren Beitrag erläutert.

Wenn man jedoch erwartet, dass beim Zoomen in Diagramm A automatisch auch Diagramm B denselben Zeitraum anzeigt, funktioniert das standardmäßig nicht.

Daher beschreiben wir im Folgenden eine beispielhafte Umsetzung eines Simple-XML-Dashboards, welches diese Funktion bietet.

Aufbau des Dashboards

Das Dashboard enthält zwei Charts und eine Tabelle:

• Chart 1 und die Tabelle zeigen eine Übersicht der internen Splunk-Logs im gewählten Zeitraum.
• Chart 2 stellt das häufigste Log als Liniendiagramm über die Zeit dar.

Nach einem Zoom in ein Diagramm wird automatisch ein „Reset Time“-Button aktiviert, mit dem man wieder auf den ursprünglich gewählten Zeitraum zurückwechseln kann. Zudem enthält das Dashboard eine Eingabe zur Auswahl des Suchzeitraumes.

Im Code sind drei Basissuchen definiert:

1. Zeitfilter: Setzt earliest und latest für die Diagramme. Über einen Token wird gesteuert, ob die Zeiten aus dem Zoom oder aus der manuellen Zeitauswahl stammen.
2. Datenbasis 1: Liefert Daten für das erste Diagramm.
3. Datenbasis 2: Liefert Daten für das zweite Diagramm und die Tabelle.

Innerhalb des <fieldset>-Tags wird ein Input-Feld für die Zeitauswahl definiert. In den Charts selbst befindet sich jeweils ein <selection>-Tag, der Start- und Endzeitpunkt bei einem Zoom-Vorgang festlegt.

Verwendete Tokens

JavaScript-Logik

Das Setzen des Tokens tok_time erfolgt im JavaScript.

Zunächst werden MVC und jQuery importiert, um auf Splunk-Elemente wie Tokens zugreifen zu können. jQuery wird außerdem für den Zugriff auf den Reset Time-Button und für Event Listener benötigt. Am Anfang des Skripts befinden sich mehrere Hilfsfunktionen zum Lesen und Setzen der Tokenmodelle.

Die eigentliche Logik findet am Ende des Skripts statt: Sobald der Nutzer in einem Diagramm zoomt, ändert sich der Token tok_drag_time. Ein Event Listener überwacht diese Änderung und ruft die Funktion setTimeToken() auf. Diese setzt anschließend die Werte für tok_time und prüft mithilfe weiterer Hilfsfunktionen, ob der Wert numerisch ist oder ob eine Rundung notwendig ist – abhängig vom gewählten Zeitintervall.

Da sich durch das Setzen des Zeittokens tok_time die Basissuchen neu ausführen, laden sich die Charts und die Tabelle automatisch mit dem neu gewählten Zeitraum. Über einen weiteren Token wird der Reset Time-Button sichtbar gemacht.

Der Handler für diesen Button befindet sich ebenfalls im JavaScript. Mit Klick auf dem Button wird der Wert von tok_inp_time in tok_time gespeichert. Durch die Anpassung der Token werden die Basissuchen erneut ausgeführt und die Visualisierungen auf den Dashboard laden neu.

Falls Sie die beschriebene Implementierung und den Quellcode einsehen möchten, so freuen wir uns auf Ihre Anfrage. Wenn Sie vor ähnlichen Herausforderungen stehen oder selbst Wissen zu Splunk aufbauen möchten, so wenden Sie sich gern an uns. Ob Entwurf, Beratung, Betrieb, Implementierung oder Schulung - wir unterstützen Sie gern. Nutzen Sie hierfür bitte unser Kontaktformular (Link).