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

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:

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:

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:

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