Splunk Custom Modal View Creation: Part 1 | Revealing The Path

By |Published On: June 29th, 2015|

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:

Problem

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.

Solution

Modal window

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.

Getting Started

This implementation extends off of a previous tutorial I created that went over how to use Javascript modules in order to better organize our Javascript. If you are not familiar with Javascript modules, I recommend looking specifically at require.js’ documentation plus AMD. I also cover it briefly in my previous tutorial. You can download the final source files here.

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:

Copy to Clipboard

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.

Take note of the top table with an id of ‘master’, we will be referencing this in our Javascript file shortly.

Let’s make a couple of changes. First, add reference to our JavaScript file we will be creating shortly:

Copy to Clipboard

Change the label to just say Modal Demo:

Copy to Clipboard

And then we will remove the drilldown XML from the table:

Copy to Clipboard

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:

Copy to Clipboard

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:

Copy to Clipboard

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:

Copy to Clipboard

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.

Copy to Clipboard

First, define a default title for the modal. So, if one is not defined, then it will display ‘Not Set’.

Copy to Clipboard

The initialize function allows us to set initialize properties of the view.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

Now save your app.js and reload your dashboard. In your console window you should now see:

This is the end of Part 1. In Part 2, we’ll set up the rest of our modal.

Share with your network!
Get monthly updates from Hurricane Labs
* indicates required

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.