Information Security and Network Awareness

Hurricane Labs

Subscribe to Hurricane Labs: eMailAlertsEmail Alerts
Get Hurricane Labs: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: Intel XML, XML Magazine

Blog Feed Post

Splunk Custom Modal View Creation Part 1 | Revealing a Path Toward Enhanced Visibility and Functionality

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.

Panel Example 1

Solution

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.

Modal Window Example 1

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:

<form>
    <label>In-Page Drilldown with Perma-linking</label>

    <fieldset submitButton="false">
        <input type="text" token="sourcetype" searchWhenChanged="true" />
    </fieldset>

    <row>
        <table id="master">
            <title>Master</title>
            <searchString>index=_internal | stats count by sourcetype</searchString>
            <earliestTime>-60m@m</earliestTime>
            <latestTime>now</latestTime>
            <option name="drilldown">row</option>
            <drilldown>
                <set token="sourcetype">$row.sourcetype$</set>
                <set token="form.sourcetype">$row.sourcetype$</set>
            </drilldown>
        </table>
    </row>

    <row>
        <chart id="detail" depends="$sourcetype$">
            <title>Detail: $sourcetype$</title>
            <searchTemplate>index=_internal sourcetype=$sourcetype$ | timechart count</searchTemplate>
            <earliestTime>-60m@m</earliestTime>
            <latestTime>now</latestTime>
        </chart>
    </row>
</form>

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:

<form script="app.js">

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

<drilldown>
                <set token="sourcetype">$row.sourcetype$</set>
                <set token="form.sourcetype">$row.sourcetype$</set>
            </drilldown>

That way the $sourcetype$ token will never get set and we will never see the ‘detail’ panel. Now save your changes.

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:

require([
    'underscore',
    'backbone',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, Backbone, mvc) {

    //get an instance of the master table
    var master = mvc.Components.get('master');

});

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:

define([
    'underscore',
    'backbone',
    'jquery',

    'splunkjs/mvc/searchmanager'
    ], function(_, Backbone, $, SearchManager) {

});

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.

var ModalView = Backbone.View.extend({
        defaults: {
            /*default values if none are given i.e the modal’s title*/
        },
        initialize: function(options) {
            /* Where initial values passed in to an instance
               of this view will be handled */
        },

        events: {
            /* events such as the click of a button */
        },

        render: function() {
            /* renders the view */
        },

        show: function() {
            /* actually shows the modal window*/
        },

       close: function() {
            /* handles the closing of the modal window */
        }
    });

    //return the modal in order to access it
    return ModalView;

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

defaults: {
            title: 'Not Set'
        },

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

initialize: function(options) { 
            //the options parameter allows us to pass values to our view
            this.options = options;
            //this checks for values in the default object or if a title was
            //actually passed through the options parameter
            this.options = _.extend({}, this.defaults, this.options);
            //for testing purposes we will log out the title
            console.log('Hello from Modal View: ' + this.options.title);
        },

For the moment, let’s stop there and open up the app.js file and include a reference to our newly created ModalView.

require([
    'underscore',
    'backbone',
    'splunkjs/mvc',
    '../app/dev_app/components/ModalView',
    'splunkjs/mvc/simplexml/ready!'
], function(_, Backbone, mvc, ModalView) {

    var master = mvc.Components.get('master');
    var modal = new ModalView();

});

Now save the file and reload your dashboard. Open up the console window and you should see the following:

Consol Window Image 1

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.

var modal = new ModalView({ title : 'An Amazing Modal Title' });

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

Consol Window Image 2

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

 

 

Read the original blog entry...

More Stories By Hurricane Labs

Christina O’Neill has been working in the information security field for 3 years. She is a board member for the Northern Ohio InfraGard Members Alliance and a committee member for the Information Security Summit, a conference held once a year for information security and physical security professionals.