Integrating jQuery DataTables Into Splunk: Tutorial Part 2

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

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:

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():

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:

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.

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:

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:

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.

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:

Once this is done, save DataTableView.js then open up index.js and load in the new 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:

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).