Dashboard Erweiterungen mit dem Splunk UI Toolkit

Martina Hunfeld  /  24.11.22  /  Digitale Transformation

 

Mit der Einführung des Dashboard Studios bietet Splunk viele Freiheiten zur Gestaltung von Dashboards. Allerdings gibt es immer wieder außergewöhnliche Kundenanforderungen, die sich auch damit nicht umsetzen lassen. In den traditionellen SimpleXML Dashboards konnten individuelle Anpassungen mit Hilfe von JavaScript und CSS Extensions eingebunden werden. Mit dem neueren Dashboard Studio ist dies aktuell noch nicht möglich.

Splunk hat parallel zum Dashboard Studio auch das Splunk UI Toolkit (SUIT) veröffentlicht, mit dessen Hilfe schnell und einfach Dashboards in React erstellt werden können. Das Splunk UI Toolkit (SUIT) besteht aus mehreren Bibliotheken und Tools. Eine ausführliche Dokumentation mit Beispielen befindet sich unter https://splunkui.splunk.com/home und auf Github unter https://github.com/splunk

In diesem Blogbeitrag schauen wir uns an, wie wir ein bestehendes Dashboard aus dem Dashboard Studio in ein (SUIT) React-Projekt überführen können, um es später mit eigenen Komponenten zu erweitern.

Um mit dem Splunk UI Toolkit ein Dashboard zu bauen, kommen diese Komponenten zum Einsatz:

Unified Dashboard Framework:

Das Unified Dashboard Framework ist das Herzstück des Dashboard Studios und erleichtert viele Aufgaben, die zum Erstellen eines Dashboards notwendig sind.

Wenn das Unified Dashboard Framework initialisiert wurde, können Dashboards anhand einer JSON-Definition erstellt und strukturiert werden.

Die JSON-Definition kennen wir bereits aus dem Dashboard Studio.

@splunk/create

Aus der React-Welt ist der Generator "create-react-app" bekannt, mit dem in wenigen Schritten ein Basis-React-Projekt erstellt werden kann.

@splunk/create ist ein ähnlicher Generator, der ein Splunk-Projekt mit den dazugehörigen Bibliotheken aus dem Splunk UI Toolkit und einem Basis-Dashboard erstellt.

Voraussetzungen für die Entwicklung mit dem Splunk UI Toolkit sind:

  • node.js ab Version 8.9
  • yarn ab Version 1.7
  • lokale Splunk-Entwicklungsinstanz
  • Grundkenntnisse Javascript, React und JSX

Step 1: React-SUIT-Projekt erstellen

Als Erstes erstellen wir ein leeres Verzeichnis, in dem wir das Dashboard entwickeln möchten. Das Verzeichnis sollte nicht innerhalb der Splunk-Instanz liegen, da die Splunk-App in einem Unterverzeichnis liegt und später in die Splunk-Instanz verlinkt oder kopiert wird. Innerhalb des Verzeichnisses rufen wir den Splunk Generator mit dem Befehl npx @splunk/create auf und wählen als Projekttyp eine Splunk App.

React-SUIT-Projekt erstellen

Die App in diesem Tutorial nenne ich my-app, der Name für die Komponente ist für dieses Tutorial unerheblich. Anschließend initialisieren wir das Projekt mit dem Befehl yarn setup. Dies kann einige Minuten dauern.

Die Splunk App, in der wir weiterarbeiten möchten, befindet sich unter ./packages/my-app/. Innerhalb dieser App gibt es nun unter anderem ein src-Verzeichnis. Hier liegt die React App, in der wir später auch die Custom Visualization entwickeln.

Im stage-Ordner liegt die eigentliche Splunk-App mit einem Dashboard und den Javascript-Dateien aus dem Bundling-Prozess. Den Stage-Ordner mit der Splunk App müssen wir nun noch in unsere Splunk-Instanz installieren bzw. verlinken. Im generierten Projekt wurde ein Script hinterlegt, das diesen Schritt für uns übernimmt.

Im Verzeichnis der Splunk App rufen wir nun folgenden Befehl auf

yarn run link:app

Das Script erstellt nun einen symbolischen Link von stage in das ./etc/apps Verzeichnis mit dem Namen der App.

Hinweis: Um das Script nutzen zu können ist nun wichtig, dass SPLUNK_HOME in den Umgebungsvariablen gesetzt wurde! Unter Windows musste ich diesen Befehl mit Administratorrechten ausführen.

Nach einem Restart der Splunk-Instanz sollte nun die neue Splunk-App unter http://localhost:8000/de-DE/app/my-app/start aufrufbar sein.

Im nächsten Schritt schauen wir nun, wie wir das Unified Dashboard Framework integrieren können.

Step 2: Unified Dashboard Framework integrieren und bestehendes Dashboard übertragen

Das Unified Dashboard Framework ermöglicht, die bestehende Dashboard Definition weiterzuverwenden. Dieses Framework ist aber aktuell nicht Teil der generierten App. Die fehlenden Bibliotheken installieren wir mit folgendem Befehl nach:

yarn add @splunk/dashboard-context @splunk/visualization-context @splunk/dashboard-core @splunk/dashboard-presets

Um während der Entwicklung unsere Änderungen kontinuierlich zu sehen, versetzen wir das Environment über yarn run start in den Watch-mode.

Dann legen wir unter .\src\main\webapp\pages\start\ eine neue Datei Dashboard.jsx an und fügen folgenden Inhalt ein (siehe auch der Source Code als ZIP-Download):

Inhalt der Dashboard-jsx-Datei

In Zeile 7 importieren wir die Datei definition.json. Diese Datei wird später die Definition unseres Dashboards enthalten. Zunächst legen wir nun die Datei im gleichen Verzeichnis an.

Anschließend rufen wir unser Dashboard im Dashboard-Studio im Edit-Modus auf.

Tipp: Um uns die Arbeit zu erleichtern, können wir einen Platzhalter an der Stelle im Dashboard einfügen, an dem unsere Visualisierung zukünftig dargestellt werden soll. Falls auch bereits eine Suche für die zukünftige Visualisierung bekannt ist, können wir diese auch bereits erstellen und mit der Platzhalter-Visualisierung verbinden. Alle Objekte, die wir später im JSON wieder finden möchten, versehen wir mit einem sprechenden Namen, damit wir die Stellen später leichter finden können.

Ein Beispiel für einen Platzhalter mit Suche sieht so aus:

Beispielhafter Platzhalter im Splunk-Dashboard

Anschließend öffnen wir den Quellcode-Editor im Dashboard Studio (siehe Abb.).

Öffnen des Quellcode-Editors im Dashboard Studio

Dort markieren wir das gesamte JSON und fügen es in die Datei definitions.json ein.

Nach diesen Vorbereitungen binden wir nun unser Dashboard in der eingangs erwähnten Einstiegsseite „index.jsx“ ein.

Zunächst importieren wir die Datei Dashboard.jsx über import Dashboard from './Dashboard'; und tauschen das „Hello World“-Panel aus dem generierten Code mit unserer Dashboard-Komponente aus:

Einbindung der Dashboard-Komponente im Quellcode

Die Datei index.jsx sollte nun wie folgt aussehen:

Inhalt der index-jsx-Datei

Im Hintergrund hat der Watch Mode jede unserer Änderungen mitbekommen, sodass wir nun unser Dashboard auch in unserer SUIT React App sehen können.

Fazit

Die Einstiegshürde in das Splunk UI Toolkit ist recht hoch. Das Setup für ein einfaches Projekt ist, trotz Generator, relativ kompliziert. An einigen Stellen ist meiner Meinung nach die Dokumentation auch noch lückenhaft. Tiefere Kenntnisse aus der Frontend-Entwicklung, insbesondere zu React und JSX, sind definitiv von Vorteil.

Allerdings werden wir im Verlauf dieser Artikelserie sehen, dass sich dieser Aufwand lohnen kann. Insbesondere mit Unified Dashboard Framework aus dem Splunk UI Toolkit sind sehr flexible Anpassungen möglich. Es können nicht nur CustomVisualizations, sondern auch CustomInputs, CustomDatasources, CustomLayouts und vieles mehr erstellt werden. Gleichzeitig können Dashboard-Definitionen aus dem Dashboard Studio weiterverwendet werden, sodass keine komplette Neuentwicklung notwendig ist.

 

Download des Source Code: myApp - Dashboard Studio