Custom Error View in Splunk Part 2: Converting Your Error to a JS Module

Part 2 of this tutorial series should help you understand a bit more about the basics of modular creation in JavaScript, as well as taking that a step further and knowing how to turn your search event into a module and better organize your code.



Imagine you are wanting to check the progress of a bunch of searches and you need a separate on event for each one. This would become very lengthy and increase the risk of error, which of course you want to avoid if possible. This is where modules come in handy. In this tutorial, I am going to be taking the next step in showing you how to convert your error into a JavaScript module.

In Custom Error View in Splunk Part 1: Listening for Search Events we were able to create a customized error component in Splunk. What we have from this works fine in some cases, but by nature JavasSript can easily turn into a complete mess, as it doesn't have any concept of classes. Fortunately, JavaScript does have a concept of modules, which can help us to better organize our code.

You can either watch the screencast below, that covers the basics of module creation in JavaScript, or continue reading.

What is a Module?

The great thing about modules is that they help to prevent global variables that can be easily overwritten. Since Javascript won’t have classes until the upcoming arrival of EcmaScript 6, we can modularize our Javascript components. RequireJS, which Splunk uses to load and create its modules, follows this modular pattern.

So, the code we wrote originally is already in good shape, i.e.

require([...],
function() {
    //...variables defined here will not be global...
});

When we define a new module, we do something like this instead:

define([...],
function() {
    //...variables defined here will not be global...
});

Notice the similarity? That is because using both require and define follow the module pattern. This goes more specifically for AMD, which is more efficient and helps to ensure that all the dependencies are loaded before doing anything.

Time to Modularize Our Search Event

Inside of the same directory where your app.js and app.css files are, add a new folder called 'components.' This isn’t necessary, but it helps to organize our modules. Inside of the components folder create a new file called ErrorView.js

The first thing to do inside of ErrorView is to create a new module definition and also list it’s dependencies:

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

});

Next, we’ll define our function expression. We’ll assign ErrorView to our unnamed function:

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

    var ErrorView = function(search, viz) {

    }

});

We are going to pass two parameters to our ErrorView, the search and the visualization. Then, inside of our function we’ll just add in the on event we had used in part 1. The only change here is that instead of using table, I switched it to ‘viz’ to make it more generic. I did this because if we reuse this for multiple types of visualizations, someone else looking at this may find it to be misleading if we use the term ‘table’.

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

    var ErrorView = function(search, viz) {
        search.on('search:done', function(properties) {
            var responseMsg = properties.content.messages[0];
            viz.$el.find(".error-response").remove();
            if(responseMsg != undefined) {

                var r_type = responseMsg.type;
                var r_text = responseMsg.text;

                if(r_type == 'ERROR') {
                    viz.$el.find('.panel-body').append('<div class="error-response">'+r_text+'</div>');
                }
            }
        });
    }
    return ErrorView;
});

Now, back in our app.js file we will need to make a reference to the new component we created. We can then completely replace the on event we had previously with one line new ErrorView(search, table); and we’ll assign it to a variable called error. We then pass the search and table variables to our new module.

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

    var search = mvc.Components.get('errorTestSearch');
    var table = mvc.Components.get('errorTestTable');
    var error = new ErrorView(search, table); 
});

Restart Splunk and you should find that your error still works.

Now you should understand a bit more about the basics of modular creation in JavaScript, as well as taking that a step further and knowing how to turn your search event into a module and better organize your code.




Close off Canvas Menu