Splunk Custom Modal View Creation Part 3 | Concluding With The Final Touches

By |Published On: July 7th, 2015|

Part 1 and Part 2 of the “Splunk Custom Modal View Creation” tutorial, have finally lead us to the point where we are able to add the final functionality to the modal view in Splunk. In this step I will be showing you how to populate a search in the visualization within our modal.

Read on to learn more, and if you’re interested in the more interactive, visual route, feel free to watch the screencast below:

Originally, this dashboard I’m working on worked by using Splunk’s built-in, in-context drilldown functionality. It will only show once the $sourcetype$ token is given a value, but we removed that functionality so it never shows the panel.

What we want to do now is make that drilldown table appear in the modal window. We’re going to start by removing the following from our xml, as we simply won’t need it:

Copy to Clipboard

At this point your dashboard XML should look like the following:

Copy to Clipboard

Then, we’re going to replace all of this with JavaScript in our app.js and ModalView.js files.

Let’s start by going to our app.js file and defining our drilldown search. We want to first add reference to the SearchManager:

Copy to Clipboard

Then assign the SearchManager to a variable called detailSearch:

Copy to Clipboard

Now we will pass the search to our ModalView as a second parameter:

Copy to Clipboard

Since we are using a token of $sourcetype$ in the search, we have to pass a value to it in order for the search to function properly. In app.js add the following to the top under where we defined the master table:

Copy to Clipboard

Next, inside of the on click event, we will want to provide our $sourcetype$ token with the value of the sourcetype, which also happens to be the value of the modal title. So, we can just set it to the _title variable:

Copy to Clipboard

Your app.js file should look like this:

Copy to Clipboard

If you reload the dashboard you will see that our modal is still empty. This means we need to populate it with our visualization and search.

The first thing to do is to add a reference to a table element, since that will be the visualization we will be using in the modal window:

Copy to Clipboard

Next, add the following into the initialize() function in ModalView.js:

Copy to Clipboard

We will use this array to push our child views into it so we can later remove them when we close the modal window. In Backbone, you must handle the removal of all of your child views manually.

Add the following to the show() function in ModalView.js:

Copy to Clipboard

Finally, let’s handle the removal of our child views. In the close() function add the following:

Copy to Clipboard

We loop through all of the child views added and first unbind them and then remove them. Go ahead and save ModalView.js and reload your browser. You should now have a table loading in the modal window.

Congratulations, you now have a modal window with a search population in Splunk. As the modal window is a separate module from our app.js file, we can easily and quickly add new modal windows to our dashboard without have to write a ton of additional code, which is a pretty awesome benefit.

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.