Building a CRUD Dashboard Utilizing a KV Store in Splunk: Part 1

Editing Our Dashboard

Click ‘Edit’ < ‘Edit Panels’. Then click the magnifying glass icon on the search panel and ‘Edit Search String’. Change your search so it looks like this:

Your table should now look like this:

Now, we’re going to add a form to our dashboard. Click ‘Edit’ < ‘Edit Source’.

First, add a reference to a new css file in the top: <dashboard stylesheet=”crud_style.css”> (We haven’t created this yet but we will shortly).

After this, find the first <panel></panel> and below the closing </panel> tag add the following:

Before saving, in the top panel, add an id of taskCollectionPanel.

In the end, your Simple XML will look like this:

The reason our table is getting cut off is because the width of the form panel is 50%. Let’s make some slight adjustments to the style using the crud_style.css we added earlier.

In crud_style.css add the following:

After making this style change your table should be taking up more space with your form now appearing more narrow. This helps to improve the readability of the table’s contents.

Updating the Data

When we click ‘Update’ in a table row, we’ll need to populate our form with the values of the specific row we click on so that we can then modify the values and update them by clicking ‘Submit’.

To do this we’re going to write some JavaScript. First, go into your dashboard’s source and add a reference to our soon-to-be created JavaScript file. We also need to add an id to the table itself — we will call the JavaScript file crud.js and apply an id of ‘taskCollectionTable’ to the table:

So, go into your app’s appserver/static directory. I’m working in the Search app so it would be in the search/appserver/static directory.

Once there, create a file called crud.js and add the following:

Note: For development purposes, you may want to modify web.conf in $SPLUNK_HOME/etc/system/local/ to disable JavaScript caching:

If it doesn’t exist just create one.

Save the file and then restart Splunk. Once you restart go back to the dashboard and you should see ‘Hello World!’ output in the console. If you do not, go back and check to make sure your crud.js file matches what is above as well as making sure it is in your app’s appserver/static directory.

Pull the Table Cell Values

Now that we have our JavaScript hooked up, let’s work on pulling the values from the table so modify your JavaScript file:

First, we are creating a reference to our taskCollectionTable:

Then we are registering a click event on the table and preventing its default drilldown behavior. We then log out the values of ‘e’:

Save the file. If you turned off JavaScript caching all you will need to do is refresh the dashboard. Otherwise, you will need to run http://<your_splunk_address>/en-US/_bump

Now click on the table after refreshing and look in the console window — you should see something similar to this:

As you can see, we have access to all of our table information. We can use this information to populate our form.

Populating the Form

First remove the console.log() and at the top of the file, inside the main function, add:

Then, below our Input variables, add a reference to the variables that will hold the value of our inputs:

This will get each input element from our form.

Next, lets add an if statement to determine if we are clicking on the ‘Update’ field or not, as we only want this functionality to exist if we click ‘Update’:

Inside of the if statement add:

Above, we are setting our value variables to the values we are pulling out of the table. Next, we take those value variables and use them to set the value of the input fields using jQuery’s .val() method:

Above, we are setting the value of each of input field to the values we pulled from our table earlier. This will populate our form.

Finally, let’s log out each of the values from our form. This will allow us to also ensure our _key field is getting filled in as it is a hidden field.

Refresh your dashboard and click on the ‘Update’ column. It should fill in the entire form as well as log out the values of the form including the _key’s value in the console. If you click on any of the other columns it should drill down as expected.

In Part 2, we will cover how to CRUD our KV Store data.