During .conf21, we announced the public release of the Splunk UI Toolkit, a collection of packages and libraries that provides some of the same underlying tools powering our product line to you, the Splunk developer. Now, any Splunk developer can incorporate Splunk UI components into their own custom applications and tools. This includes everything from buttons and inputs from our @splunk/react-ui package, or our new parallel coordinates visualization from our @splunk/visualizations package. 

It’s no secret that developers are crucial to us here at Splunk, and this initiative is one of many investments that we are making to show that. We want to provide our developer community with the correct tools to help them build great apps and help them drive value. External developers represent a large portion of the thousands of apps and add-ons on Splunkbase and the thousands more built for private use. This means that we have a responsibility to provide solutions that are functional, accessible, and also live up to modern development practices, with extensive documentation.

This same UI Framework that we are showing you here today, is the same one that exists in some of our latest products, such as our observability suite, Mission Control, and Dashboard Studio on Splunk Enterprise and our Splunk Cloud Platform. Now, with the Splunk UI Toolkit, we bring some of the same front-end tools used by those products to the front-end developer community at large. 

Why the Splunk UI Toolkit?

The world of software development is always changing, with new frameworks, practices, languages and tools being released. The tools we have provided in the past for our front-end, such as XML extensions and SplunkJS, are quickly falling behind more modern development frameworks. Splunk apps of the past were burdened with clunky workflows and poor component management. Moreover, a larger focus had to be put into complying with modern accessibility standards. Through some of our research, we've found that developers want to make great apps, without sacrificing accessibility and reusability while also leveraging new developer talent that is more accustomed to modern technologies. 

UI Libraries

One of the main advantages of using the Splunk UI Toolkit is gaining access to Splunk created UI assets and components from our UI library. This allows Splunk developers to integrate reusable UI components that look and feel like Splunk, throughout their own apps. They can do this all without needing to design or create their own custom components. The Splunk UI Toolkit is rich with various features, ranging from simple foundational components, such as buttons and color pickers, to more complex composite components, such as time range pickers and event viewers. The Splunk UI Toolkit also offers UI based utilities, such as side panels and layouts. These components are the same components used with some of our Splunk products today. By utilizing them, you will be giving your custom app the same look and feel as a Splunk-built app without any additional design work. 

Dashboard Framework

The Splunk UI Toolkit allows developers to seamlessly integrate value-driving features into their own app using the Splunk Dashboard Framework. Using this framework, a developer can display their data in a single visualization, or dashboard, built right into the app they are creating. They can do this using all of the latest features and visualizations that the Splunk Dashboard Framework has to offer. 

A custom example built with Splunk UI and the Splunk Dashboard Framework

You may be familiar with using this framework today if you’ve utilized our Splunk Dashboard Studio experience. Dashboard Studio is a phenomenal product that is built on top of our Splunk Dashboard Framework. By utilizing Dashboard Studio, you are provided a user interface which helps you to create, edit, and render a dashboard definition inside of Splunk Enterprise or Splunk Cloud Platform. We understand that there is a world of possibilities out there when it comes to dashboarding, and developers want to explore many of them outside of what we provide today. One of our goals in providing you with our new Splunk UI Toolkit is to help you unlock those possibilities, outside of Dashboard Studio, by using ReactJS. By leveraging the Splunk Dashboard Framework outside of Dashboard Studio you’re getting the ability to extend the functionality of a dashboard definition and render it in your own app. We’ll cover more on this in a future blog. 

Overview of Different Dashboard Development Methods

 

Simple XML

SXML Extensions

Dashboard Studio

Direct Development with Dashboard Framework

Editing Interfaces

UI Editor

XML Source Editor

UI Editor

XML Source Editor

Custom JavaScript and CSS

WSIWYG Edior for Absolute and Grid Layouts

JSON Source Editor

ReactJS 

Source Editing (outside of app)

Use Cases and Benefits

Simple Grid Dashboards with interactivity 

Grid Dashboards with added Styling and custom workflows with third party libraries

Absolute and Grid layout dashboards with interactivity with styling options built in to one experience

Production level custom application with easy use of external libraries and 3rd party packages

Skills 

XML, JS, CSS

ReactJS

Drawbacks

Limited layout and styling control

Legacy tools and framework, hard to manage multiple components at scale

No direct interface to custom code

No direct editing within app UI itself

Tools and Utilities

The Splunk UI Toolkit goes beyond just offering visual components for developers to use. To fully assist developers at various stages of the app development process, we are offering various build tools, utilities, and quality control tools which promote an easier development process and high quality code. For quality, the ESLint and Style-Lint packages can assist with formatting code. The various utility packages such as @splunk/splunk-utils and @splunk/search-job assist with interacting with Splunk Enterprise and Splunk Cloud Platform by helping you manage search jobs. Lastly, the powerful @splunk/create app generator can be used to quickly initiate a Splunk application already set up with various quality management tools and React packages to simplify the app creation process. Now, going from app design to a functioning and testable build on Splunk Enterprise, can be done much quicker with the @splunk/create package. Another blog in this series will take a deeper dive into the @splunk/create package and how developers can leverage it to assist in their app development process. 

Next Steps

We hope this blog inspired you to go and try our packages and build tools for the next Splunk app you’re planning to create. We would love your feedback on configurations, features, and use cases. We’re also open to taking requests for new examples in our examples gallery. Our goal for this Gallery is to help developers of all skill levels get up and running with Splunk UI. Finally, stay tuned for a few more blogs in this series that will provide you with some deep dives on generating and packaging apps with @splunk/create, using our Splunk UI Toolkit, and lastly, using our Splunk Dashboard Framework inside of your app. 

Resources:  

.conf21 Talks around Splunk UI and the Splunk Dashboard Framework

---

This article was co-authored by Nusair Haq, Product Manager for Splunk Dashboard Framework.