The Splunk .conf22 has been a truly inspiring convention where we made new friends and started new partnerships. But in this post I want to share my technical inspiration, and thank Justin Brown for drawing me into his presentation by naming it “React UI and Splunk: Fast, Flexible and Really, Really, Ridiculously Good Looking Dashboards”. That one I 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 make beautiful dashboards. You have many options at your disposal however at some point you find yourself restricted by the components that are provided, unless you are willing to invest in some JavaScript development to customize it for more intuitive and appealing styling. You can imagine this is exactly what we have been doing, and we started to reach the limits of what was technically possible, however still wanted to provide an even better experience for our dashboard users. Around comes this presentation, opening the door to a whole new world, and a 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 already use in declarative fashion (XML or JSON) and some more, 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 the appearance will be even more consistent across dashboards, and yes, they will be ridiculously good looking.
Is it done yet?
Well, no. There are quite some 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, which I do, then you will have a blast! So with my team I am currently setting up a new build street using 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 current most popular dashboard with the goal of making it even more easy 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 2 new versions which will compete in an A/B test. I expect that this new technology will greatly help us to provide our Diagnostics users with even better dashboards, so I look forward to the A/B test in a few weeks. Do you want to have a look at the new dashboard for yourself? Just let me know and I will add you to the list for the A/B test.
For now a big thank you to Justin for introducing me to this new technology and to all of you: have a great day, and happy Splunking!
Coen Pörteners
Solutions Architect
coen.porteners@diagnosticsincontrol.com
