A Brave New World

The Splunk .conf 2022 has been a truly inspiring convention where we made new friends and started new partnerships. In this post, we want to share our technical inspiration, and thank Justin Brown for drawing us into his presentation by naming it “React UI and Splunk: Fast, Flexible and Really, Really, Ridiculously Good Looking Dashboards”. That one we just had to attend!

A brave new world

For those of you who are web developers, React UI might be what you are living and breathing. As Splunk app developers, however, we are used to building dashboards in a declarative fashion in an XML file called ‘Simple XML’. This makes it really easy to build beautiful dashboards. You have many options at your disposal but will eventually find yourself restricted by the components provided unless you are willing to invest in some JavaScript development to customise it for more intuitive and appealing styling. As you can imagine, this is exactly what we have been doing. We started to reach the limits of what was technically possible but still wanted to provide an even better experience for our dashboard users. Then along came this presentation, opening the door to a whole new world, and a whole new can of worms.

But why?

The promise of React in Splunk is that you get access to all the components from the Splunk UI toolkit that you can use in a declarative fashion (XML or JSON) and then some, but this time you get to control where they appear. This might at first sound like more work to achieve the same result, but there is more! You also get to control when they refresh, and you can add your own. This is big, because as soon as you start to push the boundaries of Simple XML, your dashboard will start to run far more searches against the Splunk database than is actually needed to populate the dashboard. The result of moving to React? Your dashboard will be much more responsive and consistent, and yes, it will be ridiculously good-looking.

Is it done yet?

Well, no. There are quite a few things to arrange before seeing your first React UI dashboard in Splunk. Where you first needed to edit a single XML file for a complete dashboard, you now need to import the desired components and define the layout in a .jsx file, style it in another file, and compile the whole thing into a .js file using Babel. Suffice it to say that if you are not a web developer, you have your work cut out for you. If you like a good puzzle though, then you will have a blast! So with our team, we are currently setting up a new build street with Node JS for development on Amazon Linux, using Visual Studio Code to edit the code remotely over SSH (yes, you can), and bind mounting each team member’s stage (output) area into a personal Splunk search head Docker container so they can review their build output before committing their sources.

A/B? Go!

To challenge ourselves to get the most out of this new technology, we defined a test where we will be redesigning our most popular dashboard with the goal of making it easier to find answers. This dashboard is called ‘Replay user clicks’, which our customers use to retrace the steps of a Smallworld GIS operator when investigating a bug report. We will produce two new versions, which will be A/B tested. We expect that this new technology will greatly help us to provide our Diagnostics users with even better dashboards, and we look forward to the A/B test in a few weeks. Have a great day, and happy Splunking! Get in touch to find out more.