Next-Level Splunk Visualizations Via Splunk UI

When you need to show value, collecting data is only half the battle. And that’s if you’re collecting the right data in the first place. But what happens after you get the data you need? Well, imagine if someone just told you that you were vulnerable to the latest Apache 0-day vulnerability and you needed to take quick action to protect yourself! Maybe you jump straight into action getting ready to perform updates or you give them a puzzled look. After all, it doesn’t matter if there’s an Apache 0-day if you’re only using Nginx in your environment. 

Context and communication. Once we have the right data we need, we can tailor our messaging using the right context and present it in a meaningful way.

Splunk makes it simple and easy to collect data and visualize it. The visualizations we create are the methods by which we communicate the value and insights of the data. 

Built-In Dashboard Experiences

Until a few years ago, the most popular method for creating dashboards and visualizations in Splunk was using their Simple XML experience. This primarily leveraged XML and HTML elements and you had the option to use a built-in XML source code editor or the UI editor mode. In addition to the very limited styling controls, you have one option for layouts: a grid. Simple XML dashboards fulfilled their purpose, but now there are more options with even greater advantages: Dashboard Studio and Splunk UI Toolkit (SUIT).

Moving up from XML, Dashboard Studio is now offered as a built-in dashboard-building experience alongside the classic Simple XML style. Dashboard Studio relies on JSON data instead of XML so you’ll be using either the JSON source editor or the UI editor. 

You also have a new layout option called Absolute in addition to the original Grid. The Grid layout will function and appear similar to the classic Simple XML style but the Absolute layout allows you to fully customize where panels are placed – you can even layer panels on top of each other and add functionality to dynamically hide certain panels based on dashboard inputs. There are also more options for styling.

Splunk UI

And then there’s the Splunk UI Toolkit. You’ll get the most flexibility and customization if you choose to go this route with only one drawback – there is no code editor available in Splunk that allows you to directly edit the code. 

Using SUIT, you will create React components and/or Splunk apps in ReactJS. SUIT provides a few packages, the most notable being @splunk/create (provides the main code needed to start a new app), @splunk/react-ui (includes a ton of UI elements like buttons and cards), and Dashboard Framework (gives you access to tokens, themes, time range pickers, custom layouts, and more). You can even use third-party packages if you need a different visualization. If you’re comfortable working with ReactJS, this may be a good option for your Splunk app.

You can also consider third-party packages or customize visualization components. Many of these packages include examples and example code that you can extend. If you like a visualization but it doesn’t quite suit your needs out of the box, you can always add your own code to the component for a customized experience with your branding and features.

	Classic XML	Dashboard Studio	Splunk UI
Code	XML	JSON	ReactJS, TS, CSS
Built-in Code Editor	Yes	Yes	No
Dashboard Layouts	Grid	Grid or Absolute	Full Control
Beginner Friendly	Yes	Yes	No
3rd Party Compatibility	Some	Not yet supported	Yes
Total Flexibility	Good	Better	Best

When Would You Use Splunk UI?

The flexibility of SUIT is counteracted by its complexity. Where Classic XML or Dashboard Studio dashboards provide an easy WYSIWYG (What You See is What You Get) interface for building your dashboards in a convenient user interface, there are some areas where these tools can fall short of your needs.

• Are you building rich interactive Splunk applications that need to take in user input, and act on this user input?
  While this can be done with Classic XML or Dashboard Studio, the experience can be slow and limited.
• Do you require visualizations that don’t yet exist in Splunk’s Visualization library or require more modifications to suit your needs?
  React libraries are not Splunk-specific and are industry standard in web development, vastly expanding the types of charts and diagrams you can present. 
• Do you need to extend existing Dashboard Studio dashboards?
  Splunk’s UI Toolkit with Dashboard Framework allows you to augment Dashboard Studio with your own React visualizations.

It’s important to note the end result of each of the methods. Both the Classic and Dashboard Studio experiences allow you to create a dashboard page. However, when creating visualizations and dashboards with Splunk UI, you’re actually creating a web application inside of a Splunk application. This can be more challenging to manage but may be appropriate for your situation. 

Splunk UI requires web development knowledge as you are essentially building a web application that will run inside of a Splunk app. Still depending on your use case, this may be appropriate. 

Getting Started With SUIT

It’s important to understand the requirements for building a Splunk UI application. SUIT requires some capabilities and knowledge before you’re going to be successful with it. Building a Splunk UI app is very much like building a React Web Application, and Web development experience in Javascript or Typescript with React experience is essential.

The initial starting point for any development work with Splunk UI should definitely be Splunk’s Toolkit walkthrough and tutorials. These tutorials are a great first step in your journey. 

After you have completed these tutorials, we recommend you take a look at Splunk’s Examples Gallery. Splunk provides a gallery of example apps and visualizations that were created using Splunk UI. These also include links to the corresponding Github repositories for each visualization where you can clone and modify to your needs.

We would also encourage you to check out our Github repository for our Splunk .conf 2024 Builder Bar Theater Session. This can provide some helpful tips for setting up your Splunk UI development environment and a containerized testing environment for building out your first Splunk UI app. In addition to this, we’ve added some CI/CD tools for testing your app within Github using Splunk’s AppInspect.

↑