Integrating jQuery DataTables Into Splunk: Tutorial Part 2

By |Published On: July 13th, 2016|

PLEASE NOTE: This blog series is currently out-of-date, but if you’d like to download a working example you may refer to the associated GitHub Repo. In the meantime, we’re working on updating this series.

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:

Copy to Clipboard

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:

Copy to Clipboard

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

Copy to Clipboard

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:

Copy to Clipboard

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.

Copy to Clipboard

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:

Copy to Clipboard

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:

Copy to Clipboard

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.

Copy to Clipboard

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:

Copy to Clipboard

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

Copy to Clipboard

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:

Copy to Clipboard

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

About Hurricane Labs

Hurricane Labs is a dynamic Managed Services Provider that unlocks the potential of Splunk and security for diverse enterprises across the United States. With a dedicated, Splunk-focused team and an emphasis on humanity and collaboration, we provide the skills, resources, and results to help make our customers’ lives easier.

For more information, visit www.hurricanelabs.com and follow us on Twitter @hurricanelabs.