Integrating jQuery DataTables Into Splunk: Tutorial Part 1

In the end, you will have something that looks like this:

While this may look like a regular Splunk table with an input element, it is in fact built using DataTables and the input allows us to filter our results in real-time. Unlike Splunk, which would require us to rerun the search every time, we changed the value in the input.

Why would you want to build something like this? Let’s say, for example, you’ve got a large saved search in Splunk that takes hours to complete. You then want to search over that data for specific keywords or phrases. Normally, you wouldn’t be able to do this against a saved search, but with a DataTable you can filter the results in real-time.

Let’s get started.

The Basics

This first step is optional. You do not have to create an app in order to follow along, so feel free to skip this part.

Apps < Manage Apps then click ‘Create App’.

Fill in all the necessary information. You may call the app whatever you like:

In your app’s directory you will need to create three new folders. The first is appserver and, inside of the appserver directory, create a folder called static. Finally, inside of static create a third folder called components.

If you’re using the command line (*nix) you can do:mkdir -p appserver/static/components to create all the folders you need.

datatable_fun/appserver/static/components is the final folder structure

Download DataTables

You can go to https://datatables.net/download/index and click ‘Download Release Packages’ then click on the big ‘Download Datatables’ button. Move the zipped folder into your components folder and unzip it.

Getting Some Data:

This will work with any data set using either the table or stats command. For this, I am going to be using data from the splunkd.log.

$SPLUNK_HOME is just a placeholder which will be different depending on where you installed Splunk. For example, if your copy of Splunk is installed in /opt then your source file path will be “/opt/splunk/var/log/splunk/splunkd.log”.

Setting up a dashboard:

Now that we have the search set up we are going to create our dashboard. Click on ‘Save As’ < ‘Dashboard Panel’.

Save in a new dashboard:

You may name the dashboard and panel whatever you like:

Then click ‘Save’ and then ‘View Dashboard’. Now we have our default dashboard and panel set up. At this point it’s not very exciting, but we’ll get there.

Next, click ‘Edit’ < ‘Edit Source’ and modify the outer <form> tag to include a reference to our soon to be created JavaScript file: <dashboard script=”index.js”>

Also, add an id to the <search> tag. We will reference this later:

<search id=”dataTableSearch”>

Then click ‘Save’.

We now have the essential components set up. We’ve built a simple app and we’ve set up a dashboard. In the next tutorial we’re going to start putting together some of the JavaScript that we need to start integrating the data tables into Splunk.

Next up: Part 2!

(If you’re looking to move right along, here are the links to Part 3 and Part 4 as well).