Splunk Custom Modal View Creation: Part 1 | Revealing The Path
I was recently working on a Splunk dashboard, and I ran into a particular case where there were multiple pivots that could occur across several table links. Situations like this can lead to a confusing user experience, to say the least, because panel visibility isn’t always there. So, I needed to come up with a better solution, which was the reason I ended up creating a custom modal implementation in Splunk. In this three-part tutorial, I will be walking you through how to build out a custom modal view.
Feel free to watch the “Getting Started” screencast below, and/or read on for more information about the basics of what will be needed to build out a modal view in Splunk:
Originally, I attempted to solve the problem using Splunk’s relatively new Contextual Drilldown feature. It became clear that this was not going to work well in my particular case. The hidden drilldown panels are statically defined within the dashboard, which causes it to become confusing. If, say, the hidden panels are at the bottom of the dashboard, but the user clicks at the top – the user would have no idea of the existence of the newly visible panels.
Ultimately, I decided on a modal window and, thankfully, Splunk already utilizes the Bootstrap Modal in it’s UI. So, all we need to do is incorporate the necessary file into our app in order to customize it. Splunk has a basic implementation of this on their blog, but I knew I wanted something more dynamic. Specifically, I wanted a new search and visualization to be inserted into the modal window. This search, in the modal window, would have token values set so that it changes depending on what is clicked on in the parent table on the dashboard.
I decided to use the contextual drill-down example from Splunk’s 6.x Dashboard Examples app. Copy the following XML into a new dashboard:
Once added into your dashboard, go ahead and click on the sourcetype in the table and it opens a new panel to view Detail information pertaining to that sourcetype.
Change the label to just say Modal Demo:
And then we will remove the drilldown XML from the table:
That way the $sourcetype$ token will never get set and we will never see the ‘detail’ panel. Now save your changes.
At this point your dashboard XML should look like:
Depending on where you saved your dashboard, go into that app’s appserver/static directory (you might have to create these directories if they don’t already exist) and create app.js.
Inside of app.js set up the following:
All we’re doing is loading our dependencies and then getting a reference to our master table. Save the file.
Building the Modal Module
Now comes the fun part, which is building out our own custom modal module. View the screencast and read on:
In the directory where your app.js file exists create a new directory called ‘components.’ Go into your components directory and create a new file called ModalView.js
Inside of ModalView.js add the following:
This is setting up the module and loading all of the necessary dependencies. Let’s go ahead and set up the basics of our modal view. We are building out an extension of a Backbone.js View, which Splunk uses as it’s core JS framework. If you’ve never used Backbone before, I recommend you take some time to read through some of the documentation.
Next, let’s lay out the basic structure of our view. Now, when I say view this it has nothing to do with the actual HTML or CSS, this is all about functionality.
First, define a default title for the modal. So, if one is not defined, then it will display ‘Not Set’.
The initialize function allows us to set initialize properties of the view.
For the moment, let’s stop there and open up the app.js file and include a reference to our newly created ModalView.
Note: My app is called Splunk-Modal-Window, which is why it’s referenced when loading in the ModalView. Make sure to change this so your app context is different. For example, if you’re in the Search and Reporting app it would just be ../app/search/components/ModalView.
Now save the file and reload your dashboard. Open up the console window and you should see the following:
Remember how we set our default object to return ‘Not Set’ if no value is passed in? That is what is happening here. Let’s change this and actually pass a value.
Now save your app.js and reload your dashboard. In your console window you should now see:
About Hurricane Labs
Hurricane Labs is a dynamic Managed Services Provider that unlocks the potential of Splunk and security for diverse enterprises across the United States. With a dedicated, Splunk-focused team and an emphasis on humanity and collaboration, we provide the skills, resources, and results to help make our customers’ lives easier.
For more information, visit www.hurricanelabs.com and follow us on Twitter @hurricanelabs.