How to build an advanced dashboard

How to build an advanced dashboard

Not all modules are available in the simple dashboard configuration described in the Build dashboards section of this manual. Use the instructions on this page if you'd like to make a more sophisticated dashboard, using modules that aren't available in the simple dashboard configuration. However, it's a good idea to start out with the simplified XML first and then move on to the topics discussed in this page when you're more familiar with Splunk view XML. You can always convert your simplified XML to advanced via the showsource URI:

http://localhost:8000/en-US/app/<app_name>/<dashboard_name>?showsource=true

(Replace with your Splunk host and port.)

Here's a general overview of how to build a dashboard:

1. Decide how to visualize and display your data. For example, you may want to showcase your search results in a graph or you may want to present a list of links to search results.
2. Construct searches and optionally save them.
3. Build panels for each search.
4. Construct your dashboard from the panels you've built.
5. Finally, layout your dashboard panels.

Begin your dashboard

Add your dashboard to $SPLUNK_HOME/etc/apps/<your_app>/default/data/ui/views/. Then, open the XML file for editing. Start by adding the following:

<view template="dashboard.html">

This specifies that you're using the dashboard template. Dashboard views use a different Mako template than the default template used by search views, so you must specify this template at the beginning of your dashboard's XML file.

You can also set the refresh rate here by adding a refresh=<seconds> tag. This will rerun your HiddenSearches, or get any new HiddenSavedSearch results.

This example sets the dashboard to refresh automatically every 30 seconds:

<view refresh="30" template="dashboard.html">

Name your dashboard

Name your dashboard by adding a label:

<view template="dashboard.html">
  <label>My Dashboard</label>

Add chrome

Next add the chrome, which defines how your dashboard appears.

For each module in your dashboard, specify a layoutPanel to specify the chrome. A top-level module requires a layout panel. A nested module can also specify a layout panel. If you don't specify a layout panel for a nested module, it inherits the layout module from its parent. For the most control of the appearance of your dashboard, it is a good idea to always specify a layout panel for each module.

<view template="dashboard.html">
  <label>My Dashboard</label>
  <module name="AccountBar" layoutPanel="appHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>
  <module name="Message" layoutPanel="messaging">
    <param name="filter">*</param>
    <param name="clearOnJobDispatch">False</param>
    <param name="maxSize">1</param>
  </module>

Note: To see how the default Search dashboard specifies layout panels for its modules, go to:

http://localhost:8000/en-US/app/search/dashboard_live?showsource=true

Scroll to the XML source to view the implementation.

Chrome layout panels

These are the layout panels available to you:

• messaging
  • Use this layoutPanel for messaging modules.
• appHeader
  • appHeader contains all the overall links for Splunk AccountBar.
• navigationHeader
  • Use this layoutPanel for the AppBar module, which contains all the navigation for the App.
• viewHeader
  • viewHeader is a header panel for your view, where you can put a title for your page.

Add panels

A panel is a set of results displayed in a dashboard. Dashboards can contain any number of panels. Each panel contains a useful visualization of your data, for example a table or a chart. When you're building a dashboard, decide how you want to showcase your data with the available modules. The results modules are the most useful modules to display search results in dashboards.

Here's an example panel:

And here's the XML behind this panel:

 <module name="HiddenSearch" layoutPanel="panel_row1_col1" group="Messages per minute last hour" autoRun="True">
   <param name="search">search index=_internal eps group=per_source_thruput NOT filetracker Metrics | eval events=eps*kb/kbps | timechart sum(events)</param>
   <param name="earliest">-1h</param>
   <module name="ResultsHeader">
     <param name="entityName">scanned</param>
     <param name="entityLabel">Events</param>
     <module name="FlashChart">
       <param name="height">180px</param>
       <param name="width">100%</param>
     </module>
   </module>
 </module>

Each panel usually has only one search associated with it, via the HiddenSearch or HiddenSavedSearch module. Display results from the search in a results module, like a chart or a link list. Notice that there are only 3 modules in the panel XML above -- HiddenSearch, ResultsHeader and FlashChart. HiddenSearch generates all the search results and FlashChart displays them. ResultsHeader displays a header with the amount of events searched by HiddenSearch.

Since HiddenSearch is the parent module, it takes a few other settings like layoutPanel, group and autoRun. LayoutPanel denotes where to place the panel within the dashboard. Group is a header that displays at the top of the panel. AutoRun indicates that the search in the panel should be run upon loading the page. Generally, you'll want to set autoRun = true.

Searches and dashboard panels

You can include searches in your dashboard panels in one of two ways:

1. Create the search, save it and run it on a schedule. Then reference the search results from your dashboard with the HiddenSavedSearch module. If you have a lot of users accessing your dashboard or the search takes a while to return, this is the best method.

2. Reference the search string directly in the dashboard panel with the HiddenSearch module. The HiddenSearch module runs your search every time the dashboard loads, so it works best if the search returns results quickly and there are only a few users accessing the dashboard at any given time.

Lay out your panels

Dashboards use a coordinate system. The parent module in any panel specifies what coordinate to use. The coordinate system specifies a row and a column for the panel, such as: layoutPanel=panel_rowX_colY. You can use any number of rows, but you will want to limit yourself to about 3 or 4 columns (2 is standard for displaying data).

For example, here are two parent modules of panels in the tutorial dashboard:

  <module name="HiddenSearch" layoutPanel="panel_row1_col1" group="Messages per minute last hour" autoRun="True">

...

 <module name="HiddenSearch" layoutPanel="panel_row1_col2" group="KBps indexed per hour last 2 hours" autoRun="True">

You can also set up a group of panels within a larger panel. To set this up, specify one parent module. This example uses StaticContentSample to set a header for the entire group of panels. Each panel then has one parent module which specifies the layoutPanel with the addition of the grp tag for placement within the group.

<module name="StaticContentSample" layoutPanel="panel_row2_col1" group="All Indexed Data" autoRun="True">
  <param name="text">This will show you all of the data you have loaded into index=main over all time.</param>
  <module name="GenericHeader" layoutPanel="panel_row2_col1_grp1">
      <param name="label">Sources</param>
...
  <module name="GenericHeader" layoutPanel="panel_row2_col1_grp2">
    <param name="label">Sourcetypes</param>
...
  <module name="GenericHeader" layoutPanel="panel_row2_col1_grp3">
    <param name="label">Hosts</param>

Add a search bar

You can optionally add the search bar to your dashboard, using the same panels you would use for the search bar in a search view:

• splSearchControls-inline
  • This panel aligns search modules next to each other in columns, with the first module taking up any space the other modules don't.
• mainSearchControls
  • This panel aligns search controls one after another, generally vertically.

Here's an example of the search bar, with a ViewRedirector module to launch your searches in a different view. to send searches to another view:

 <module name="SearchBar" layoutPanel="mainSearchControls">
    <param name="useAssistant">true</param>
    <param name="useTypeahead">true</param>
    <module name="TimeRangePicker">
      <param name="selected">This month</param>
      <module name="ViewRedirector">
        <param name="viewTarget">simple_search_view</param>
      </module>
    </module>
  </module>

• Was this topic useful?
• Post a comment