How to use switcher modules

How to use switcher modules

Switchers are useful for creating nav within your view, like tabs or pulldown menus that users can use to switch between content. Switchers create a fork between different branches of XML, but the choice doesn't influence any individual search in those child branches. This is similar to lister modules, but listers allow the user to insert input that affects the search(es) underneath.

The current Switcher modules that are most useful are 'PulldownSwitcher', 'TabSwitcher' and 'LinkSwitcher'. Here is an example of LinkSwitcher. There are more examples in the UI examples app, available on Splunkbase.

Add chrome

You must first add the chrome and nav for your page:

<view template="dashboard.html">
  <label>Switcher Intro</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>
  <module name="TitleBar" layoutPanel="viewHeader">
    <param name="actionsMenuFilter">dashboard</param>
  </module>

The group attributes can be confusing cause sometimes they are pulled to populate the dashboard panel titles, as in the module immediately below. But in the immediate child modules of switcher modules, the group attributes become the relevant 'label' for the switcher element. ie the tab's or pulldown option's text.

LinkSwitcher

This is a basic example using a LinkSwitcher with four children. All children use chart patterns:

• HiddenSavedSearch: Use this module to specify a search to drive the chart.
• HiddenChartFormatter: Use this module to specify custom charting configurations.
• JobProgressIndicator: This module is optional but useful -- it displays the amount of chart left to load.
• FlashChart: This module displays the actual Flash chart.

The last child adds a TimeRangePicker to drive the time of results.

<module name="LinkSwitcher" layoutPanel="panel_row2_col1">
  <param name="mode">independent</param>
  <param name="label"> </param>

first switcher child

Note that the group attribute set on HiddenSavedSearch governs what 'label' represents this branch in the switcher. For LinkSwitcher the label displays as a link.

<module name="HiddenSavedSearch" group="cpu time by processor" autoRun="True">
  <param name="savedSearch">Pipeline processors with most processor time</param>
    <module name="HiddenChartFormatter">
      <param name="chart">line</param>
      <param name="primaryAxisTitle.text">CPU seconds</param>
      <param name="secondaryAxisTitle.text">Pipeline processors</param>
      <param name="legend.placement">right</param>
        <module name="JobProgressIndicator"/>
        <module name="FlashChart">
          <param name="width">100%</param>
          <param name="height">300px</param>
        </module>
    </module>
</module>

second switcher child

<module name="HiddenSearch" group="KB Indexed by sourcetype" autoRun="True">
  <param name="search">index=_internal source=*metrics.log component=metrics group=per_sourcetype_thruput | chart sum(kb) by series | sort -sum(kb) | head 10</param>
  <param name="earliest">-1h</param>
    <module name="HiddenChartFormatter">
       <param name="chart">bar</param>
       <param name="primaryAxisTitle.text">Sourcetype</param>
       <param name="secondaryAxisTitle.text">KB Indexed</param>
       <param name="legend.placement">none</param>
         <module name="JobProgressIndicator"/>
         <module name="FlashChart">
           <param name="width">100%</param>
           <param name="height">300px</param>
         </module>
     </module>
</module>

third switcher child

<module name="HiddenSearch" group="eps Indexed over time" autoRun="True">
  <param name="search">index=_internal source=*metrics.log component=metrics group=per_sourcetype_thruput | timechart avg(eps) by series</param>
  <param name="earliest">-1h</param>
    <module name="StaticContentSample">
      <param name="text">On this one I've thrown in some static text to describe the elements.</param>
    </module>
    <module name="HiddenChartFormatter">
      <param name="chart">line</param>
      <param name="primaryAxisTitle.text">Sourcetype</param>
      <param name="secondaryAxisTitle.text">events per second</param>
      <param name="legend.placement">right</param>
        <module name="JobProgressIndicator"/>
        <module name="FlashChart">
          <param name="width">100%</param>
          <param name="height">300px</param>
        </module>
     </module>
</module>

fourth switcher child

Instead of using HiddenSavedSearch, this pattern uses HiddenSearch driven by a TimeRangePicker. Instead of setting to autoRun=true, this search will not actually run until given user input.

<module name="TimeRangePicker">
  <param name="searchWhenChanged">True</param>
  <param name="selected">All time</param>
    <module name="HiddenSearch" autoRun="True">
      <param name="search">| dbinspect bins=400</param>
        <module name="HiddenChartFormatter">
          <param name="chart">line</param>
          <param name="primaryAxisTitle.text">Time</param>
          <param name="chartTitle">Distribution of index buckets over time</param>
            <module name="JobProgressIndicator"/>
            <module name="FlashChart"/>
        </module>
     </module>
</module>

• Was this topic useful?
• Post a comment