Learn How To Build a Real-time filtering table in Splunk: Part 2

In part 1 we covered the basics of creating an app through the Splunk Web Framework; I demonstrated how to create custom Django template tags for both the input field and table; and then added rendering functionality of those template tags with the help of Splunk’s JS stack.

If, by chance, you already know how to do all of that, or you just want the end result from Part 1, feel free to download the app here

If you want to watch the Screencast for this, go here.

Let’s start by picking up where we left off and begin by adding filter functionality to the table.

Part 1: Sending data between modules

What we want is for the data in our table to filter down as the user types in the filter field. The first step is to add a reference of the table module in our input field. Since all of our rendering and logic is handled through our JavaScript modules, we will add this functionality in there.

Open up filterinput.js and modify the file by adding in the highlighted areas:

Essentially, we want this view to listen for a keyup event and then trigger the pushValuemethod to take the input’s value and push it to our table.

We still need to add a filter method to our table module to catch the input values, which we will use to filter the actual table. Otherwise, if we start typing in the fields now, we’ll get an error in the console: Uncaught TypeError: undefined is not a function

Now open up filtertable.js and add the following highlighted code:

Now, if you go back to the browser, refresh the page, and open up your console window, you should see output for every character you type.

Great. Now that we have our table registering every keyup event, we need to actually filter our table.

Part 2: Filter our table

Since we know this is working, we can remove our console.log() from our filter()method and replace it with the following:

Here, all we are doing is checking if the value provided from our input is empty. If it is, then we do nothing, otherwise we begin the filtering process. So, if we go back to the browser and refresh the page and start typing the list, it should start to filter in real-time. The only problem is that it isn’t case insensitive. Typing in ALCASAR and alcasar are registered as two completely different things, but there is a way around this. Go ahead and enter the following code at the very top of our filter() method:

Credit goes to user ‘Highway of Life’ on StackOverflow for this solution (http://stackoverflow.com/questions/8746882/jquery-contains-selector-uppercase-and-lower-case-issue)

Then, in our tableRows.filter() method find if (row.is(“:contains(‘” + data[d] + “‘)”)) { and change the :contains part to :icontains

What we’ve done here is to define a new jQuery expression called icontains, which will make our filtering case-insensitive. Now, when we filter our table it no longer matters if it’s uppercase or lowercase.

At this point, the table should completely filter based off the input you provide – congratulations on building a real-time filtering table in Splunk!

Part 3: Final notes

We are doing some heavy manipulation on the DOM, so be careful of how many results you are returning. You probably want to test it out based on your specific needs. However, if you return 10,000 results, that could become an awfully heavy burden on your browser, since it essentially needs to redraw the table with keyup value.

Another option is to add a filter button and only filter the results when you click on the button, thus reducing the amount of times it needs to be redrawn.

Also, this doesn’t take into account spacing, so if you type wordpress and then wordpress and a space plus another word, it’s not going to filter it exactly. However, for the purpose of filtering down for specific terms, this works well.

Feel free to download the final app here plus leave any comments you may have below.