Integrating jQuery DataTables Into Splunk: Tutorial Part 2

This blog-screencast tutorial covers how to integrate jQuery DataTables into Splunk. Data tables are a great way to easily integrate awesome features into simple HTML tables. After following along with this tutorial, the final result will be a table that you can filter down and integrate into your own Splunk environment and do some cool stuff with it.



In Part 1 of this 4-part tutorial, we got started by setting up the essential components to prepare for putting together some of the JavaScript that we need, to start integrating the data tables into Splunk. Now, let's move on to Part 2.

Getting Search Data

When developing it's common that you're going to be making changes and checking your work on a frequent basis. This can become time-consuming if you need to manually refresh a cash every time you make a change to one of these files. This is why it may be optimal to turn off caching on your JavaScript files in order to prevent having to run _bump every time.

(Note: Again, feel free to follow along with the screencasts, or you can simply read through the blog post).

To do this, you can create a local version of web.conf in $SPLUNK_HOME/etc/system/local/ and put:

[settings]
js_no_cache = True

If you’re working on a production machine you may not want to turn caching off. In that case, you will need to run http://<your_splunk_url>/en-US/_bump every time you make a change to the JavaScript file.

Finally, restart Splunkweb for the file to show up.

Setting Up Our Entry Point

Inside of the /appserver/static folder create a file called index.js.

Put the following inside of that file:

require([
    'splunkjs/ready!',
    'splunkjs/mvc/simplexml/ready!',
    'jquery'
], function(mvc, ignored, $) {

});

Getting Our Search Data

Remember how we set an id of "dataTableSearch" on our search in the simple XML earlier? Now we will use that id to reference the search and pull the results. Since this will be a custom view, we need to be able to manipulate the data slightly in order for us to reference it and ultimately get it into our DataTable properly.

We can go ahead and remove the console.log we had previously set up in our index.js file.

Here are the next pieces we will add in order to start pulling data out of the search.

1.) Make a reference to the the search using mvc.Components.get():

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

2.) Next, we pull the results out of the search. We also pass an optional second parameter of count: 0 to ensure we get back all of our results. Otherwise the result set would be limited to 100 events:

    var results_obj = dataTableSearch.data('results', {count: 0});

3.) We will have the results_obj listen for the ‘data’ event. We will then extract out each row of data from the results_obj.

results_obj.on('data', function() {

    var rows = results_obj.collection().raw.rows;

    console.log('rows: ', rows);

});

Once you refresh (if you set js_no_cache to True in web.conf earlier) or run _bump in the url you should see the following if you open of the console window in your browser:

If you expand any of the Arrays you will see data for the _time and message fields.

Setting Up the DataTable View

We’re going to be using require.js define() method to set up a view for our DataTable. We will then create an instance of that DataTable view in our index.js file and pass our results to it.

Inside of the components folder create a new file called DataTableView.js. Now, put in the following:

define([
    'splunkjs/ready!',
    'splunkjs/mvc/simplexml/ready!',
    'underscore',
    'backbone',
    'jquery'
], function(mvc, ignored, _, Backbone, $) {

});

Here, we are simply setting up a define() function that will be used as a wrapper for our DataTableView. Using define allows us to load an instance of the view in our index.js file.

Inside of the define function put in the following:

    var DataTableView = Backbone.View.extend({

        className: 'data-table-view',

        initialize: function(options) {
           	this.options = _.extend({}, options);
           	options = this.options;
           	this.data = options.data;
	 	this.data_table = null;
        },

        render: function() {
            console.log('DataTables Data: ', this.data);
        }

    });

    return DataTableView;

This sets up the very basics we need in order to pass data to our DataTable view. We are extending a simple Backbone view that will give us the base minimum features we need in order to eventually render out the DataTable.

How does this work?

  1. className simply provides a class for our view in the DOM
  2. The initialize method allows us to handle data coming and set up the appropriate variables needed before doing anything else
  3. The render method will eventually render the actual DataTable, but for right now we are just logging out of the console to ensure it receives the data we send it

Next, we need to load in the DataTables library. We aren’t doing anything with this yet, but because this is an external library we’ve added to Splunk we need do a little extra work to load it in properly. We're going to use require.config() to get this to work. This will help us to load components that Splunk does not know about.

require.config({
    paths: {
        datatables: "../app/<app_name>/components/DataTables-1.10.12/media/js/jquery.dataTables",
        bootstrapDataTables: "../app/<app_name>/components/DataTables-1.10.12/media/js/dataTables.bootstrap",
    },

    shim: {
        'bootstrapDataTables': {
            deps: ['datatables']
        }
    }
});

How does this work?

  1. Define the paths for our data tables library, as well as the Bootstrap components for the data table
  2. Add a shim, which tells the require library that bootstrap DataTables depends on the core datatables file to work. This ensures that require.js loads the core file before loading the bootstrap components

Next, we need to load in the datatable:

define([
    'splunkjs/ready!',
    'splunkjs/mvc/simplexml/ready!',
    'underscore',
    'backbone',
    'datatables',
    'jquery'
], function(mvc, ignored, _, Backbone, DataTables, $) {

Once this is done, save DataTableView.js then open up index.js and load in the new DataTableView:

require([
    'splunkjs/ready!',
    'splunkjs/mvc/simplexml/ready!',
    '../app/datatable_fun/components/DataTableView',
    'jquery'
], function(mvc, ignored, DataTableView, $) {

Then, inside of where the data_obj is listening for the ‘data’ event, create a new instance of the DataTableView and pass in the value of ‘rows’ for data key. Also remove the console.log() if that still exists:

var dataTableView = new DataTableView({
    data: rows
}).render();

Once you save, you should see the console output of DataTables Data: and then the row arrays. This means you have successfully passed the search data into an instance of the DataTable view.

In Part 3, we will start setting up our template for our data table and go on from there!

(Just in case you missed it, here's the link to Part 1).




Close off Canvas Menu