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:
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.
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:
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:
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.
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:
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.
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.
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).
Visualization | Simple XML Wrapper | SplunkJS Stack View |
Chart | ChartElement | ChartView |
Checkbox | not available in Simple XML | CheckboxView |
Checkbox group | CheckboxGroupInput | CheckboxGroupView |
Data template | not available in Simple XML | DataTemplateView |
Dropdown list | DropdownInput | DropdownView |
Event table | EventElement | EventsViewerView |
Layout | no wrapper | LayoutView |
Inline HTML | HtmlElement | not necessary |
Link list | LinkListInput | LinklistView |
List | ListElement | not necessary |
Map | MapElement | SplunkMapView |
Multidropdown list | MultiSelectInput | MultiDropdownView |
Radio buttons | RadioGroupInput | RadioGroupView |
Result table | TableElement | TableView |
Search control | not available in Simple XML | SearchControlsView |
Searchbar | not available in Simple XML | SearchbarView |
Single | SingleElement | SingleView |
Submit button | SubmitButton | not necessary |
Text box | TextInput | TextInputView |
Time-range picker | TimeRangeInput | TimeRangeView |
Timeline | not available in Simple XML | TimelineView |
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.