Simple dashboards

Simple dashboards

This topic describes how to build a dashboard to showcase search results and reports in one location. For example, make a network operations console where you can see an overview of your entire network, find out which machines are down and be notified of any firewall violations. The instructions on this page explain how to build a dashboard out of saved searches and reports with the visual dashboard editor or the simplified dashboard syntax.

Create a dashboard

Create a dashboard through Splunk's UI with the visual dashboard editor or Splunk's simplified XML syntax. This syntax is built on the advanced view syntax and supports a limited number of modules. If you want functionality in your dashboard beyond what's listed in this page, use the advanced dashboard syntax. Note that you currently cannot switch between simple and advanced syntax.

via the visual dashboard editor

Create a dashboard via the visual dashboard editor in Splunk Web. To begin, select the Actions menu in the upper left corner of Splunk Web:

Then, follow the instructions in the visual dashboard editor. Drag and drop any panels you create above, below or next to each other.

To read more about the visual dashboard editor, see "creating simple dashboards" in the User Manual.

via XML

Create simple dashboards without using the visual dashboard editor with Splunk's simplified XML. You can create simplifed XML dashboards through Splunk Manager or Splunk's file system.

in Splunk Manager

1. Navigate to Manager.

2. Click Views.

3. Select the New button to create a new view, or click on an existing dashboard to edit it.

4. Follow the instructions on the new view page and enter XML in the format described below.

For example, if you want to add a view to the Search App, navigate to the Search App in Splunk Web and then click the Manager link in the upper right-hand corner, then click Views. You'll see a list of existing views, which you can clone if you want to copy and make changes to an existing view. To create an entirely new view, click New.

in Splunk's file system

1. Copy your XML directly into your App via the file system.

2. Make sure your dashboard's XML file goes in $SPLUNK_HOME/etc/apps/<app_name>/default/data/ui/views/.

XML configuration

Once you've created a file for your dashboard, add XML to structure the dashboard. Start by creating a dashboard element and setting a label attribute. The label shows up in the drop-down menu in Splunk Web. Dashboard names can contain spaces, alphanumeric characters, underscores or dashes.

This example creates an empty dashboard page, which has the standard Splunk header, navigation and a label of "My dashboard":

<dashboard>
    <label>My dashboard</label>
</dashboard>

Set the refresh rate for the entire dashboard by adding a refresh="<seconds>" attribute:

<dashboard refresh="30">
    <label>My dashboard</label>
</dashboard>

Now you're ready to add content to your dashboard by creating rows and panels.

Add dashboard elements

Dashboards are built out of rows which are in turn made up of up to 3 panels. Start your XML by adding a single row, which can accommodate one or more panels.

<dashboard>
    <label>My dashboard</label>
    <row>
       PANELS GO HERE
    </row>
...
</dashboard>

The available attributes for panels are listed below. Panels take various configuration options, as well as a few general settings that can be applied to most of the panels listed below. The general settings include:

• title = title
  • Add a title to your panel, such as Failed logins. This title display at the top of the panel.
• searchName = saved search
  • Specify a saved search to load in your panel. Make sure this saved search is shared with all users and roles who access this dashboard. Any saved search referenced in searchName must exist in savedsearches.conf in the App's default or local directory or be set as global.
• searchString = search string
  • Specify an inline search to run whenever the dashboard loads.
• fields = comma separated list of fields
  • Restrict your search results to specific fields.
• earliestTime = Splunk time format
  • Restrict your search results to a specific time window, starting with the earliestTime.
• latestTime = Splunk time format
  • Restrict your search results to a specific time window, ending with the latestTime.

example

Here's an example of a table panel with three general options and two panel specific options.

<table>
    <title>Look here for errors that you need to care about</title>
    <searchName>Errors in the last 24 hours</searchName>
    <fields>host, source, errorNumber</fields>
    <option name="count">25</option>
    <option name="displayRowNumbers">true</option>
</table>

table

The table panel displays search data as a table. Use the searchName attribute to specify which saved search results to display as a table. Use other general options as specified above.

options

Here are table specific options.

• count = integer
  • The maximum number of rows to display.
• displayRowNumbers = true | false
  • Toggle display of row numbers to the left of results.
• showPager = true | false
  • Show paging in the table.

example

Here's an example snippet of a table panel. Set this in a row within a dashboard.

...
  <table>
    <title>Look here for errors that you need to care about</title>
    <searchName>Errors in the last 24 hours</searchName>
    <option name="count">25</option>
    <option name="displayRowNumbers">true</option>
 </table>
...

chart

The chart panel displays search data in chart format. Pair the chart panel with a saved report you've already created. Saved reports contain chart formatting parameters. Saved searches, on the other hand, do not. For more information, see "Saving reports and sharing them with others" in the User manual.

When you load a saved report in the chart panel, your saved report format will also be loaded. However, chart formatting can be overridden inline via the options. Charts support all the general options listed above as well as chart specific options listed below.

options

Here are chart specific options.

• height = CSS dimension
  • Set the height of the chart.
• charting.chart = bar | line | column | area | pie | scatter | bubble
  • Set the chart type.
• charting.legend.placement = top | left | bottom | right | none
  • Indicates the placement of the legend.
• charting.* = charting options
  • All of the chart formatting options are supported here; see charting reference.

example

Here's an example snippet of a chart panel. Set this in a row within a dashboard.

...
<chart>
  <searchString>index=_internal metrics group="pipeline" NOT sendout | 
head 1000 | timechart per_second(cpu_seconds) by processor</searchString>
  <earliestTime>-30h</earliestTime>
  <latestTime>-10h</latestTime>
  <option name="charting.chart">line</option>
  <option name="charting.primaryAxisTitle.text">Time</option>
  <option name="charting.secondaryAxisTitle.text">Load (%)</option>
</chart>
...

event

The event panel displays the search results as individual events. This panel supports the general options listed above and the following options.

• count = integer
  • The maximum number of rows to display.
• displayRowNumbers = true | false
  • Toggle whether row numbers are shown to the left of results.
• entityName = events | results
  • Toggle whether to show events or results. Events are individual events, while results are created by statistical operators.
  • Defaults to results.
• segmentation = none | inner | outer | full
  • Set the segmentation of events displayed. This affects what you can and can't click on within the event.
• maxLines = integer
  • The maximum number of lines to display for each result/event.
• showPager = true | false
  • Toggle pagination on or off.

example

Here's an example snippet of an event panel. Set this in a row within a dashboard.

...
<event>
  <title>Event view</title>
  <searchString>changelist | head 1000 | dedup changelist</searchString>
  <fields>added deleted changed</fields>
  <option name="showPager">true</option>
  <option name="count">20</option>
  <option name="displayRowNumbers">false</option>
</event>
...

single

The single panel displays a single value (the first row/first column) from search data, regardless of the total size of the dataset. You can change the color of the panel depending on what your search returns. This panel support the following options:

• additionalClass = css class name
  • An optional additional css class name to add to the result container.
• linkView = view
  • Specify which view to execute the linked search against.
  • Defaults to dashboard.
• field = field
  • Field to display.
  • Defaults to first field returned.
• linkFields = result | beforeLabel | afterLabel
  • Set which part of the text in the single value to use as a link.
  • To link the result and both labels, set as result,beforeLabel,afterLabel.
  • Defaults to result.
• classField = class | severe | elevated | low | None
  • Adds the value of the classField of the first result as an additional CSS class to the result container.
  • Pre-defined classes include 'severe', 'elevated', 'low', and 'None' (default).
• beforeLabel = text
  • Label to display before the result.
• afterLabel = text
  • Label to display after the result.
• linkSearch = search query
  • Specify a valid complete search query to turn the result into a clickable link.

example

Here's an example snippet of a single panel. Set this in a row within a dashboard.

<single>
  <searchString>| metadata type="sources" | stats count</searchString>
  <option name="afterLabel">sources</option>
</single>

If you want to change colors on your single results panel, set up your search with range map:

<single>
    <searchString>index=_internal 404 source="*web_access.log" earliest=-1h |
stats count | rangemap field=count low=0-0 elevated=1-100 default=severe</searchString>
      <title>404s this hour</title>
      <option name="classField">range</option>
</single>

html

The html panel displays inline HTML. The entire contents between the HTML tags will be interpreted literally, and displayed on the page. Remember that any link references, i.e. images, will be relatively homed to the current view location. The html panel does not use any options above (except title) and there are no specific options to set for html.

example

<html>
    This lists all of the data you have loaded into <strong>your</strong> default indexes over all time.
</html>

list

The list panel displays data in a list. Use this panel to display information from saved searches or search results. This panel supports the following options.

required

• labelField = field name
  • The field you want to use to generate labels for your list.
• valueField = field name
  • The field you want to use to generate values for the labels in your list.

optional

• initialSortDir = asc | desc
  • The direction to sort the results based on the initialSort field.
• labelFieldSearch = search string
  • The search string to generate when the user clicks on the label field.
  • Requires labelFieldTarget to be defined to a valid view.
  • The value of the label field is automatically added to the search.
• valueField
  • The name of the result field whose value should be displayed in the label part of the link list.
  • Link lists are generally a combination of a descriptive label and a numeric count or other (value) field.
  • Required.
• labelFieldTarget
  • The view to target if the label field is setup to generate a clickable link that dispatches a search.
  • Optional
• initialSort
  • The field in the result set to sort on when the link list is first rendered.
  • Optional

example

Here's a snippet of a list panel. Set this in a row within your dashboard.

<list>
    <searchName>Top recipients</searchName>
    <option  name="labelField">to</option>
    <option  name="valueField">to</option>
</list>

Examples

multiple panels

Add more panels to the same row. This example displays three panels side-by-side:

<dashboard>
    <label>My dashboard</label>
    <row>
        <table>
            <searchName>my errors</searchName>
        </table>
        <table>
            <searchName>your possible errors</searchName>
        </table>
        <table>
            <searchName>their definite errors</searchName>
        </table>
    </row>
</dashboard>

Or spread your panels across multiple rows. This example puts one panel in its own row and two panels in one other row:

<dashboard>
    <label>My dashboard</label>
    <row>
        <table>
            <searchName>my errors</searchName>
        </table>
    </row>
    <row>
        <table>
            <searchName>your possible errors</searchName>
        </table>
        <table>
            <searchName>their definite errors</searchName>
        </table>
    </row>
</dashboard>

Group panels within a row under the same heading. Multiple panels within a row can also be grouped by adding a grouping attribute to the row node. The following example places your possible errors and their definite errors under the same group heading:

<dashboard>
    <label>My dashboard</label>
    <row>
        <table>
            <searchName>my errors</searchName>
        </table>
    </row>
    <row grouping="2">
        <table>
            <searchName>your possible errors</searchName>
        </table>
        <table>
            <searchName>their definite errors</searchName>
        </table>
    </row>
</dashboard>

You can further group panels on the left or right sides within a single row. The following with create a single row of panels, with 3 tables in the left group and 2 tables in the right:

<dashboard>
    <label>My dashboard</label>
    <row grouping="3,2">
        <table>
            <searchName>my errors</searchName>
        </table>
        <table>
            <searchName>your possible errors</searchName>
        </table>
        <table>
            <searchName>their definite errors</searchName>
        </table>
        <table>
            <searchName>known unknown errors</searchName>
        </table>
        <table>
            <searchName>unknown unknown errors</searchName>
        </table>
    </row>
</dashboard>

search options

All of the previous examples use a simple table panel and a saved search. But there are more options for specifying searches in a panel.

Specify an inline search. For example:

<table>
    <searchString>search foo this | timechart that</searchString>
    <earliestTime>-20h</earliestTime>
    <latestTime>-2h</latestTime>
</table>

Restrict your saved search output by field:

<table>
    <searchName>Errors in the last 24 hours</searchName>
    <fields>host, source, errorNumber</fields>
</table>

Add a title to the panel:

<table>
    <title>Look here for errors that you need to care about</title>
    <searchName>Errors in the last 24 hours</searchName>
    <fields>host, source, errorNumber</fields>
</table>

Set display options for your panel. For example:

<table>
    <title>Look here for errors that you need to care about</title>
    <searchName>Errors in the last 24 hours</searchName>
    <fields>host, source, errorNumber</fields>
    <option name="count">25</option>
    <option name="displayRowNumbers">true</option>
</table>