Ultimately, I decided on a modal window and, thankfully, Splunk already utilizes the Bootstrap Modal in it’s UI. So, all we need to do is incorporate the necessary file into our app in order to customize it. Splunk has a basic implementation of this on their blog, but I knew I wanted something more dynamic. Specifically, I wanted a new search and visualization to be inserted into the modal window. This search, in the modal window, would have token values set so that it changes depending on what is clicked on in the parent table on the dashboard.
I decided to use the contextual drill-down example from Splunk’s 6.x Dashboard Examples app. Copy the following XML into a new dashboard:
Once added into your dashboard, go ahead and click on the sourcetype in the table and it opens a new panel to view Detail information pertaining to that sourcetype.
Change the label to just say Modal Demo:
And then we will remove the drilldown XML from the table:
That way the $sourcetype$ token will never get set and we will never see the ‘detail’ panel. Now save your changes.
At this point your dashboard XML should look like:
Depending on where you saved your dashboard, go into that app’s appserver/static directory (you might have to create these directories if they don’t already exist) and create app.js.
Inside of app.js set up the following:
All we’re doing is loading our dependencies and then getting a reference to our master table. Save the file.
Building the Modal Module
Now comes the fun part, which is building out our own custom modal module. View the screencast and read on: