About SplunkJS Stack

The Splunk Web Framework includes a SplunkJS Stack component for web developers who want to create Splunk apps in a familiar JavaScript environment. This web stack includes a number of tools to help you create Splunk apps:

• Libraries for Splunk views and search managers for working with searches and interacting with Splunk data.
• Backbone.js provides an MVC framework as a structure for your code.
• RequireJS manages dependencies.
• jQuery helps manage the document object model (DOM).

So using SplunkJS Stack along with your favorite development tools, you can build rich interactive apps to access and manipulate Splunk data. You can also add third-party visualizations to your apps, as well as create your own reusable views.

Create Splunk apps to run in Splunk Enterprise

Use SplunkJS Stack to develop Splunk apps, which are apps that appear in Splunk Web in Splunk Enterprise, relying on Splunk's app server to interact with splunkd to render data into HTML pages. And with Splunk's built-in navigation bars and headers, you can give your apps the same look and feel as Splunk.

To get started with SplunkJS Stack to create Splunk apps:

• See Create an app to dive right in.
• See the Tutorials for step-by-step examples showing different features of the Splunk Web Framework.
• See the Code Examples to see full code examples of Simple XML extensions and HTML dashboards.

Add SplunkJS Stack to your own web apps

Add the SplunkJS Stack libraries to your own web apps to use the Web Framework search managers and Splunk views to interact with Splunk and display data. Download SplunkJS Stack here.

To learn more, see the following topics:

• Use SplunkJS Stack in your own web apps
• Load libraries and configure SplunkJS
• Communicate with the Splunk server
• Authenticate users
• How to add Splunk to your own web apps using SplunkJS Stack
• Code examples of SplunkJS Stack for apps outside Splunk Web

Overview of SplunkJS Stack search managers and views

Just as Simple XML provides a collection of visualization elements and forms, the SplunkJS Stack component of the Splunk Web Framework provides a collection of search managers and views to access with JavaScript. So, when you convert a Simple XML dashboard to HTML, all of the Simple XML visualizations are converted into the SplunkJS Stack equivalent.

Search managers

In SplunkJS Stack, searches are defined and managed separately from the visualizations that display their data by using a search manager. A search manager encapsulates the search job, which includes the search query and search properties, and handles the operation and lifetime of the search. The type of search manager depends on the type of search:

• SearchManager corresponds to an inline search.
• SavedSearchManager corresponds to a saved report.
• PostProcessManager corresponds to a post-process search.

Each search manager has a unique ID. To link a search to a particular visualization, set the visualization's managerid property to the search's id value.

Here's an example of how SplunkJS Stack defines a search manager in JavaScript:

    var mysearch = new SearchManager({
        id: "search1",
        preview: true,
        cache: true,
        status_buckets: 300,
        search: "index=_internal | head 1000 | stats count by sourcetype"
    });

For more about how to work with search managers, see Add searches with search managers. For reference information about search managers and their properties, see the Splunk Web Framework Component Reference.

Views

In SplunkJS Stack, visualizations are defined as views with properties. If a search is bound to the view, the managerid property indicates the search to use.

Here's an example of how SplunkJS Stack defines a chart view in JavaScript:

    var mychart = new ChartView ({
        id: "chart1",
        managerid: "search1",
        type: "bar",
        el: $("#mychart")
    }).render();

For more about how to work with views, see Display data with Splunk views. For reference information about views and their properties, see the Splunk Web Framework Component Reference.

Converting visualizations to views in HTML dashboards

In a Simple XML dashboard, each visualization is displayed within a panel that provides additional features such as a timestamp, and buttons to open the search, export results, and open the search job inspector:

When a Simple XML dashboard is converted to HTML, each visualization is converted into a SplunkJS Stack view, with a wrapper around the view that includes this panel implementation. You can use any view directly without the wrapper if you don't want the extra panel implementation. In addition, there are several SplunkJS Stack views that are not available in Simple XML, but you can add them to your HTML dashboards.

The following table shows the visualization, the name of the Simple XML wrapper that is created when the visualization is converted to HTML, and the name of the SplunkJS Stack view. Note that some of the Simple XML wrappers don't have corresponding SplunkJS Stack views because they aren't necessary (for example, inline HTML is just converted to HTML―no view needed), and some views do not have wrappers because those views aren't displayed within panels (such as the header).

Whether you use a wrapper or view (for example, ChartElement or ChartView), you can set and retrieve the same properties the same way. For reference information about these views and their properties, see the Splunk Web Framework Component Reference.