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 3 | Concluding With The Final Touches

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:

<row>
        <chart id="detail" depends="$sourcetype$">
            <title>Detail: $sourcetype$</title>
            <searchTemplate>index=_internal sourcetype=$sourcetype$ | timechart count</searchTemplate>
            <earliestTime>[email protected]</earliestTime>
            <latestTime>now</latestTime>
        </chart>
    </row>

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:

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

Then assign the SearchManager to a variable called detailSearch:

var detailSearch = new SearchManager({
            id: "detailSearch",
            earliest_time: "[email protected]",
            latest_time: "now",
            preview: true,
            cache: false,
            search: "index=_internal sourcetype=$sourcetype$ | timechart count"
    }, {tokens: true, tokenNamespace: "submitted"});

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

var modal = new ModalView({ title : _title, search : detailSearch });

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:

var tokens = mvc.Components.getInstance("submitted");

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:

tokens.set('sourcetype', _title);

Your app.js file should look like this:

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

    var master = mvc.Components.get('master');
    var tokens = mvc.Components.getInstance("submitted");
    var detailSearch = new SearchManager({
            id: "detailSearch",
            earliest_time: "[email protected]",
            latest_time: "now",
            preview: true,
            cache: false,
            search: "index=_internal sourcetype=$sourcetype$ | timechart count"
    }, {tokens: true, tokenNamespace: "submitted"});

    master.on("click", function(e) {
        if(e.field === "sourcetype") {

            e.preventDefault();
            var _title = e.data['click.value'];
            tokens.set('sourcetype', _title);
            var modal = new ModalView({ title: _title,  search: detailSearch });
            modal.show();

        }

    });
});

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:

define([
    'underscore',
    'backbone',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/element/table',
    ], function(_, Backbone, $, mvc, SearchManager, TableElement) {

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

this.childViews = [];

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:

//create a new div in which we will add our table
$(this.el).find('.modal-body').append('<div id="modalVizualization"/>');
//modify the modal so it occupies 90% of the screen width
$(this.el).find('.modal').css({
    width:'90%',
    height:'auto',
    left: '5%',
    'margin-left': '0',
    'max-height':'100%'
);

//get a reference to the search
var search = mvc.Components.get(this.options.search.id);

//define our table view and we will use the search as the manager to populate it
var detailTable = new TableElement({
        id: "detailTable",
        managerid: search.name,
        pageSize: "5",
        el: $('#modalVizualization')
}).render();

//add our detailTable to our childViews array so we can remove them later
this.childViews.push(detailTable);

//run the search
search.startSearch();

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

_.each(this.childViews, function(childView){
    childView.unbind();
    childView.remove();
});

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.

Modal Window Table Loading Image

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.

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.