Building customized dashboards with the Splunk UI Toolkit

Last updated
Save as PDF
Share
1. Share
2. Tweet
3. Share

The Splunk UI Toolkit (SUIT) is a collection of libraries that help you build Splunk user interfaces. With SUIT, you can create applications that:

Use custom resources outside of Splunk
Integrate with third party packages and libraries
Process displayed information with JavaScript/React programming logic under the hood

Included with SUIT is the Dashboard Framework that creates and renders dashboards in the Splunk platform. It takes in a JSON object with information about visualizations and data sources, and is actually what powers Dashboard Studio. However, compared to Dashboard Studio, SUIT provides greater flexibility for developing apps. This flexibility does come at the cost of greater complexity. The following table compares the two.

Dashboard Studio	Splunk UI Toolkit
Collection of UI tools to customize dashboards in the Splunk platform, such as designing your dashboard's layout, colors, images, and more.	An independent and semantically versioned library of React.js components, tools, utilities, and documentation (with examples) for building Splunk user interfaces.
Pros Easier to pick up, no coding required A lot of visualizations and features out of the box	Pros Flexibility and increased customization Ability to integrate with other libraries and services
Cons Limitations in customization	Cons Increased complexity and learning curve React knowledge is a hard requirement

Dashboard Studio

Splunk UI Toolkit

Collection of UI tools to customize dashboards in the Splunk platform, such as designing your dashboard's layout, colors, images, and more.

An independent and semantically versioned library of React.js components, tools, utilities, and documentation (with examples) for building Splunk user interfaces.

Pros

Easier to pick up, no coding required
A lot of visualizations and features out of the box

Pros

Flexibility and increased customization
Ability to integrate with other libraries and services

Cons

Limitations in customization

Cons

Increased complexity and learning curve
React knowledge is a hard requirement

This article explores the power of the Splunk UI Toolkit for rendering dashboards by looking at two use cases that required custom visualizations.

Custom data processing and handling

This first sample is a real-time drone monitoring dashboard, showing both their pathways and key telemetry data. It uses both custom and built-in visualizations. The following demo goes into detail about how the dashboard functions.

At a high level, this is the architecture of the dashboard in the demo. The data feed is managed right inside the application, with no additional API calls required. You don't have to manage any dependencies; everything is bundled and ready to install in the Splunk platform. To explore this dashboard further, you can view the complete source code here.

Use Case 1.png

3D visualization with external libraries

The second sample is a quality assurance dashboard for manufacturing. It uses data from computer numerical control (CNC) machining equipment for processing materials and a Plotly graphing library. It plots the roughness of the materials to see if there are defects that might raise an alert. The following demo goes into detail about how the dashboard functions.

At a high level, this is the architecture of the dashboard in the demo. The built-in visualizations interact with the custom visualizations to get exactly the output the user needs. This interaction can go in either direction as needed. Additionally, this application makes API calls to external services, which is not currently possible in Dashboard Studio. To explore this dashboard further, you can view the complete source code here.

Use Case 2.png

Next steps

Now that you have an idea of what you can build with the Splunk UI Toolkit, watch the full .conf25 Talk, Building Dynamic Custom Dashboards with Splunk UI Toolkit and Framework. In the talk, you'll learn about how the Splunk UI Toolkit operates, how much React knowledge is required to use it, and what the standard development workflow for a SUIT developer is.

In addition, these resources might help you understand and implement this guidance:

Splunk Resource: Splunk UI Toolkit
Splunk OnDemand Services: Use these credit-based services for direct access to Splunk technical consultants with a variety of technical services from a pre-defined catalog. Most customers have OnDemand Services per their Success Plan. Engage the ODS team at ondemand@cisco.com if you would like assistance.