Information Security and Network Awareness

Hurricane Labs

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


Blog Feed Post

Splunk Custom Modal View Creation Part 2 | Adding The Functionality

In Part 1 of this tutorial, which you can view here, I walked you through how to get started and on your way to building out a modal view in Splunk. Part 2 of the tutorial will take the next step in continuing to build out the modal view by adding more functionality to the modal window.

Watch and learn below with the “Continue Building Out the Modal View in Splunk” Screencast, and/or read on for more.

Show the Modal

Passing values to the console isn’t very exciting. So now, let’s actually show the modal. We will first create a template for our modal. Above the definition of our modal view 

var ModalView = Backbone.View.extend({
 we will add:

var modalTemplate = "<div id=\"pivotModal\" class=\"modal\">" +
                        "<div class=\"modal-header\"><h3><%- title %></h3></div>" +
                        "<div class=\"modal-body\"></div>" +
                        "<div class=\"modal-footer\"><button " +
                        "class=\"dtsBtn close\">Close</button></div>" +
                        "</div>" +
                        "<div class=\"modal-backdrop\"></div>";

There are more elegant solutions to creating a template, but for now, this will do. Notice the 

<%- title %>
 variable. This is using an Underscore variable to pass the title value to our template. You will see how this works shortly. Inside of the initialize method add:
this.template = _.template(modalTemplate);

And then, in the render function, add:

render: function() {
            /* Define the data object where we specifically set&nbsp;
            the title value here it is what we pass into the new instance of 
            the this view in app.js
            */
            var data = { title : this.options.title }
            //take our data object and pass it to our template
            this.$el.html(this.template(data));
            return this;
        },

Now, let’s define our show function. This will be used when we actually show the modal:

show: function() {
            //append the modal to the document.body and call this view’s
            //render function
            $(document.body).append(this.render().el);
        },

Finally, let’s build out the close function:

close: function() {
            this.unbind();
            this.remove();
        }

    });

    return ModalView;

In the end you should have something like this:

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

    'splunkjs/mvc/searchmanager'
    ], function(_, Backbone, $, SearchManager) {
    var modalTemplate = "<div id=\"pivotModal\" class=\"modal\">" +
                        "<div class=\"modal-header\"><h3><%- title %></h3></div>" +
                        "<div class=\"modal-body\"></div>" +
                        "<div class=\"modal-footer\"><button "+
                        "class=\"dtsBtn close\">Close</button></div>" +
                        "</div>" +
                        "<div class=\"modal-backdrop\"></div>";

    var ModalView = Backbone.View.extend({
 
        defaults: {
            title: 'Not Set'
        },

        initialize: function(options) {
            this.options = options;
            this.options = _.extend({}, this.defaults, this.options);
            this.template = _.template(modalTemplate);
            console.log('Hello from Modal View: ' + this.options.title);
        },

        render: function() {
            var data = { title : this.options.title }
            this.$el.html(this.template(data));
            return this;
        },

        show: function() {
            $(document.body).append(this.render().el);
        },

        close: function() {
            this.unbind();
            this.remove();
        }

    });

    return ModalView;
});

Save the ModalView.js file and now we’re going to make some modifications to the app.js file.

Adding a click event to our ‘master’ table

Currently, our app.js file looks like this:

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({ title : 'An Amazing Modal Title' });

});

We want to pass the sourcetype value from the master table as the header of our modal window. So, to do this we will set up a click event on the table. Below where we created our modal variable, add the following:

master.on("click", function(e) {
        if (e.field === "sourcetype") {
            e.preventDefault();
            //pass the value of the item we clicked on to the title variable
            var _title = e.data['click.value'];
            var modal = new ModalView({ title : _title });
            modal.show();
        }
    });

Next, remove the original modal variable above the on click function, so now your app.js should look like:

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

    var master = mvc.Components.get('master');

    master.on("click", function(e) {
        if (e.field === "sourcetype") {
            e.preventDefault();
            //pass the value of the item we clicked on to the title variable
            var _title = e.data['click.value'];
            var modal = new ModalView({ title : _title });
            modal.show();
        }
    });

});

Save app.js and reload your dashboard. Click on one of the sourcetypes in the master table and your modal window should appear:

Modal Window Appear Image

Notice how it is automatically passing the sourcetype value to the title? Nice.

One problem though, it doesn’t close. Let’s handle that next by adding our close events. In ModalView.js add the following right below the initialize function:

events: {
            //clicking on a button with a class of close calls the close function 'click .close': 'close', 
            //clicking on the modal backdrop calls the close function 'click .modal-backdrop': 'close',
        },

Save ModalView.js and reload the dashboard. You should now be able to close the modal window. The next, and final, portion of this tutorial will wrap things up with populating our modal window with a new search visualization.

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.