For our final dashboard using Sideview modules, we will build a dashboard with a form that can be prefilled from a URL and allows the changing of the time range. The advantage of this dashboard is that it can be used as a destination of a click without being linked to from elsewhere. If the user accesses this dashboard directly, the default values specified in the dashboard will be used instead. Let's look at the code:
<?xml version="1.0"?> <view template="dashboard.html"> <!-- add sideview --> <module name="SideviewUtils" layoutPanel="appHeader"/> <!-- chrome --> <label>Chapter 9 - Sideview Three</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> <!-- URLLoader --> <module name="URLLoader" layoutPanel="panel_row1_col1" autoRun="True"> <!-- form --> <!-- user dropdown --> <module name="Search" layoutPanel="panel_row1_col1"> <param name="search"> source="impl_splunk_gen" user user="*" | top user </param> <param name="earliest">-24h</param> <param name="latest">now</param> <module name="Pulldown"> <param name="name">user</param> <!-- use valueField in SideView 2.0 --> <param name="searchFieldsToDisplay"> <list> <param name="value">user</param> <param name="label">user</param> </list> </param> <param name="label">User</param> <param name="float">left</param> <!-- logger textfield --> <module name="TextField"> <param name="name">logger</param> <param name="default">*</param> <param name="label">Logger:</param> <param name="float">left</param> <module name="TimeRangePicker"> <param name="searchWhenChanged">True</param> <param name="default">Last 24 hours</param> <!-- submit button --> <module name="SubmitButton"> <param name="allowSoftSubmit">True</param> <!-- html --> <module name="HTML"> <param name="html"><![CDATA[ <h2>Info for user $user$, logger $logger$.</h2> ]]></param> </module> <!-- search 1 --> <module name="Search" group="Chapter 9 - Sideview Three"> <param name="search"> source="impl_splunk_gen" user="$user$" logger="$logger$" | fillnull value="unknown" network | timechart count by network </param> <!-- JobProgressIndicator --> <module name="JobProgressIndicator"/> <!-- chart --> <module name="HiddenChartFormatter"> <param name="charting.chart">area</param> <param name="charting.chart.stackMode"> stacked </param> <module name="JSChart"/> </module> </module> <!-- search 2 --> <module name="Search" group="Chapter 9 - Sideview Three"> <param name="search"> source="impl_splunk_gen" user="$user$" logger="$logger$" | fillnull value="unknown" network | top network </param> <!-- table --> <module name="SimpleResultsTable"/> </module> </module> </module> </module> </module> </module> </module> </view>
This draws a dashboard that is similar to the following screenshot:
There are quite a few things to cover in this example, so let's step through portions of the XML.
Include SideviewUtils to enable the other Sideview modules. In this case, URLLoader, HTML, Pulldown, Search, and TextField are Sideview modules. This is done using the following code:
<module layoutPanel="appHeader" name="SideviewUtils"/>
Wrap everything in URLLoader so that we get values from the URL:
<module name="URLLoader" layoutPanel="panel_row1_col1" autoRun="True">
Start a search to populate the user dropdown. This query will find all the users who have been active in the last 24 hours:
<module name="Search" layoutPanel="panel_row1_col1"> <param name="search"> source="impl_splunk_gen" user user="*" | top user </param> <param name="earliest">-24h</param> <param name="latest">now</param>
Using a query to populate a dropdown can be very expensive, particularly as your data volumes increase. You may need to precalculate these values, either storing the values in a CSV using outputcsv and inputcsv or using a summary index. For examples of summary indexing and using CSV files for transient data, see Chapter 10, Summary Indexes and CSV Files.
This module draws the user selector. The menu is filled by the Search module, but notice that the value selected is from our URL value:
<module name="Pulldown"> <!-- use valueField in SideView 2.0 --> <param name="searchFieldsToDisplay"> <list> <param name="value">user</param> <param name="label">user</param> </list> </param> <param name="name">user</param> <param name="label">User</param> <param name="float">left</param>
Next is a text field for our logger. This is a Sideview version of ExtendedFieldSearch. It will prepopulate using upstream variables:
<module name="TextField"> <param name="name">logger</param> <param name="default">*</param> <param name="label">Logger:</param> <param name="float">left</param>
The TimeRangePicker module honors the earliest and latest values in the URL. Note that searchWhenChanged must be True to work properly in this case. As a rule of thumb, searchWhenChanged should always be True:
<module name="TimeRangePicker"> <param name="searchWhenChanged">True</param> <param name="default">Last 24 hours</param>
The SubmitButton module kicks off a search when values are changed. allowSoftSubmit allows outer modules to start the query either by choosing a value or by hitting return in a text field:
<module name="SubmitButton"> <param name="allowSoftSubmit">True</param>
The following are two Search modules, each containing an output module:
<module name="Search" group="Chapter 9 - Sideview Three"> <param name="search"> source="impl_splunk_gen" user="$user$" logger="$logger$" | fillnull value="unknown" network | timechart count by network </param> <!-- JobProgressIndicator --> <module name="JobProgressIndicator"/> <!-- chart --> <module name="HiddenChartFormatter"> <param name="charting.chart">area</param> <param name="charting.chart.stackMode"> stacked </param> <module name="JSChart"/> </module> </module> <!-- search 2 --> <module group="Chapter 9 - Sideview Three" name="Search"> <param name="search"> source="impl_splunk_gen" user="$user$" logger="$logger$" | fillnull value="unknown" network | top network </param> <!-- table --> <module name="SimpleResultsTable"> <param name="drilldown">row</param> </module>
For greater efficiency, these two searches can be combined into one query and the PostProcess module can be used.