In this article by the author, Kyle Smith, of the book, Splunk Developer's Guide, we learn about search-related and view-related modules.

We will be covering the following topics:

• Search-related modules
• View-related modules

(For more resources related to this topic, see here.)

Search-related modules

Let's talk JavaScript modules. For each module, we will review their primary purpose, their module path, the default variable used in an HTML dashboard, and the JavaScript instantiation of the module. We will also cover which attributes are required and which are optional.

SearchManager

The SearchManager is a primary driver of any dashboard. This module contains an entire search job, including the query, properties, and the actual dispatch of the job. Let's instantiate an object, and dissect the options from this sample code:

Module Path: splunkjs/mvc/searchmanager
Default Variable: SearchManager
JavaScript Object instantiation
   Var mySearchManager = new SearchManager({
       id: "search1",
       earliest_time: "-24h@h",
       latest_time: "now",
       preview: true,
       cache: false,
       search: "index=_internal | stats count by sourcetype"
   }, {tokens: true, tokenNamespace: "submitted"});

The only required property is the id property. This is a reference ID that will be used to access this object from other instantiated objects later in the development of the page. It is best to name it something concise, yet descriptive with no spaces. The search property is optional, and contains the SPL query that will be dispatched from the module. Make sure to escape any quotes properly, if not, you may cause a JavaScript exception. earliest_time and latest_time are time modifiers that restrict the range of the events. At the end of the options object, notice the second object with token references. This is what automatically executes the search. Without these options, you would have to trigger the search manually. There are a few other properties shown, but you can refer to the actual documentation at the main documentation page http://docs.splunk.com/DocumentationStatic/WebFramework/1.1/compref_searchmanager.html.

SearchManagers are set to autostart on page load. To prevent this, set autostart to false in the options.

SavedSearchManager

The SavedSearchManager is very similar in operation to the SearchManager, but works with a saved report, instead of an ad hoc query. The advantage to using a SavedSearchManager is in performance. If the report is scheduled, you can configure the SavedSearchManager to use the previously run jobs to load the data. If any other user runs the report within Splunk, the SavedSearchManager can reuse that user's results in the manager to boost performance. Let's take a look at a few sections of our code:

Module Path: splunkjs/mvc/savedsearchmanager
Default Variable: SavedSearchManager
JavaScript Object instantiation
       Var mySavedSearchManager = new SavedSearchManager({
           id: "savedsearch1",
       searchname: "Saved Report 1"
           "dispatch.earliest_time": "-24h@h",
           "dispatch.latest_time": "now",
           preview: true,
           cache: true
       });

The only two required properties are id and searchname. Both of those must be present in order for this manager to run correctly. The other options are very similar to the SearchManager, except for the dispatch options. The SearchManager has the option "earliest_time", whereas the SavedSearchManager uses the option "dispatch.earliest_time". They both have the same restriction but are named differently. The additional options are listed in the main documentation page available at http://docs.splunk.com/DocumentationStatic/WebFramework/1.1/compref_savedsearchmanager.html.

PostProcessManager

The PostProcessManager does just that, post processes the results of a main search. This works in the same way as the post processing done in SimpleXML; a main search to load the event set, and a secondary search to perform an additional analysis and transformation. Using this manager has its own performance considerations as well. By loading a single job first, and then performing additional commands on those results, you avoid having concurrent searches for the same information. Your usage of CPU and RAM will be less, as you only store one copy of the results, instead of multiple.

Module Path: splunkjs/mvc/postprocessmanager
Default Variable: PostProcessManager
JavaScript Object instantiation
       Var mysecondarySearch = new PostProcessManager({
           id: "after_search1",
       search: "stats count by sourcetype",
   managerid: "search1"
       });

The property id is the only required property. The module won't do anything when instantiated with only an id property, but you can set it up to populate later. The other options are similar to the SearchManager, the major difference being that the search property in this case is appended to the search property of the manager listed in the managerid property. For example, if the manager search is search index=_internal source=*splunkd.log, and the post process manager search is stats count by host, then the entire search for the post process manager is search index=_internal source=*splunkd.log | stats count by host. The additional options are listed at the main documentation page http://docs.splunk.com/DocumentationStatic/WebFramework/1.1/compref_postprocessmanager.html.

View-related modules

These modules are related to the views and data visualizations that are native to Splunk. They range in use from charts that display data, to control groups, such as radio groups or dropdowns. These are also included with Splunk and are included by default in the RequireJS declaration.

ChartView

The ChartView displays a series of data in the formats in the list as follows. Item number one shows an example of how each different chart is described and presented. Each ChartView is instantiated in the same way, the only difference is in what searches are used with which chart.

Module Path: splunkjs/mvc/chartview
Default Variable: ChartView
JavaScript Object instantiation
       Var myBarChart = new ChartView({
           id: "myBarChart",
            managerid: "searchManagerId",
           type: "bar",
           el: $("#mybarchart")
       });

The only required property is the id property. This assigns the object an id that can be later referenced as needed. The el option refers to the HTML element in the page that this view will be assigned and created within. The managerid relates to an existing search, saved search, or post process manager object. The results are passed from the manager into the chart view and displayed as indicated. Each chart view can be customized extensively using the charting.* properties. For example, charting.chart.overlayFields, when set to a comma separated list of field names, will overlay those fields over the chart of other data, making it possible to display SLA times over the top of Customer Service Metrics. The full list of configurable options can be found at the following link: http://docs.splunk.com/Documentation/Splunk/latest/Viz/ChartConfigurationReference.

The different types of ChartView

Now that we've introduced the ChartView module, let's look at the different types of charts that are built-in. This section has been presented in the following format:

• Name of Chart
• Short description of the chart type
• Type property for use in the JavaScript configuration
• Example chart command that can be displayed with this chart type
• Example image of the chart

The different ChartView types we will cover in this section include the following:

Area

The area chart is similar to the line chart, and compares quantitative data. The graph is filled with color to show volume. This is commonly used to show statistics of data over time.

An example of an area chart is as follows:

timechart span=1h max(results.collection1{}.meh_clicks) as MehClicks max(results.collection1{}.visitors) as Visits

Bar

The bar chart is similar to the column chart, except that the x and y axes have been switched, and the bars run horizontally and not vertically. The bar chart is used to compare different categories.

An example of a bar chart is as follows:

stats max(results.collection1{}.visitors) as Visits max(results.collection1{}.meh_clicks) as MehClicks by results.collection1{}.title.text

Column

The column chart is similar to the bar chart, but the bars are displayed vertically.

An example of a column chart is as follows:

timechart span=1h avg(DPS) as "Difference in Products Sold"

Filler gauge

The filler gauge is a Splunk-provided visualization. It is intended for single values, normally as a percentage, but can be adjusted to use discrete values as well. The gauge uses different colors for different ranges of values, by default using green, yellow, and red, in that order. These colors can also be changed using the charting.* properties. One of the differences between this gauge and the other single value gauges is that it shows both the color and value close together, whereas the others do not.

An example of a filler gauge chart is as follows:

eval diff = results.collection1{}.meh_clicks / results.collection1{}.visitors * 100 | stats latest(diff) as D

Line

The line chart is similar to the area chart but does not fill the area under the line. This chart can be used to display discrete measurements over time.

An example of a line chart is as follows:

timechart span=1h max(results.collection1{}.meh_clicks) as MehClicks max(results.collection1{}.visitors) as Visits

Marker gauge

The marker gauge is a Splunk native visualization intended for use with a single value. Normally this will be a percentage of a value, but can be adjusted as needed. The gauge uses different colors for different ranges of values, by default using green, yellow, and red, in that order. These colors can also be changed using the charting.* properties.

An example of a marker gauge chart is as follows:

eval diff = results.collection1{}.meh_clicks / results.collection1{}.visitors * 100 | stats latest(diff) as D

Pie Chart

A pie chart is useful for displaying percentages. It gives you the ability to quickly see which part of the "pie" is disproportionate to the others. Actual measurements may not be relevant.

An example of a pie chart is as follows:

top op_action

Radial gauge

The radial gauge is another single value chart provided by Splunk. It is normally used to show percentages, but can be adjusted to show discrete values. The gauge uses different colors for different ranges of values, by default using green, yellow, and red, in that order. These colors can also be changed using the charting.* properties.

An example of a radial gauge is as follows:

eval diff = MC / V * 100 | stats latest(diff) as D

Scatter

The scatter plot can plot two sets of data on an x and y axis chart (Cartesian coordinates). This chart is primarily time independent, and is useful for finding correlations (but not necessarily causation) in data.

An example of a scatter plot is as follows:

table MehClicks Visitors

Summary

We covered some deeper elements of Splunk applications and visualizations. We reviewed each of the SplunkJS modules, how to instantiate them, and gave an example of each search-related modules and view-related modules.

Resources for Article:

Further resources on this subject:

• Introducing Splunk [article]
• Lookups [article]
• Loading data, creating an app, and adding dashboards and reports in Splunk [article]