Dashboards & Visualizations

How to make panel depend on token value?

Communicator

I have 10 panels on a dashboard. I want to have a dropdown menu to select which panel to see (hiding the rest). Say this dropdown has a token called paneltok. Is there a way to make the panels depend on specific values of paneltok?

i.e., if I select "A" in the dropdown, only panel "A" should be visible.

1 Solution

SplunkTrust
SplunkTrust

@matstap, following are couple of options you have! Try the run anywhere dashboard examples.

Option 1: set only one depends token on selection of the corresponding panel. At the same time the tokens for other panels should be unset. You would also need to add a dependency of the token being set to specific Panel's Search query so that it runs only when the token is set. This is required since you one to run only 1 search when the dashboard loads, not 10.

    <form>
      <label>Option 1: Dropdown to Show Specific Panel and Hide Others</label>
      <fieldset submitButton="false">
        <input type="dropdown" token="tokShowHidePanel" searchWhenChanged="true">
          <label>Display Panel</label>
          <choice value="panelA">Panel A</choice>
          <choice value="panelB">Panel B</choice>
          <choice value="panelC">Panel C</choice>
          <default>panelA</default>
          <change>
            <condition value="panelA">
              <set token="tokShowPanelA">true</set>
              <unset token="tokShowPanelB"></unset>
              <unset token="tokShowPanelC"></unset>
            </condition>
            <condition value="panelB">
              <unset token="tokShowPanelA"></unset>
              <set token="tokShowPanelB">true</set>
              <unset token="tokShowPanelC"></unset>
            </condition>
            <condition value="panelC">
              <unset token="tokShowPanelA"></unset>
              <unset token="tokShowPanelB"></unset>
              <set token="tokShowPanelC">true</set>
            </condition>
          </change>
        </input>
        <input type="time" token="tokTime" searchWhenChanged="true">
          <label></label>
          <default>
            <earliest>-24h@h</earliest>
            <latest>now</latest>
          </default>
        </input>
      </fieldset>
      <row>
        <panel depends="$tokShowPanelA$">
          <title>Panel A - INFO</title>
          <chart>
            <search>
              <query>index=_internal sourcetype=splunkd log_level="INFO"
    | timechart count by component useother=f usenull=f limit=5
    | eval dummy="$tokShowPanelA$"
    | fields - "$tokShowPanelA$"</query>
              <earliest>$tokTime.earliest$</earliest>
              <latest>$tokTime.latest$</latest>
            </search>
            <option name="charting.chart">area</option>
            <option name="charting.drilldown">all</option>
            <option name="refresh.display">progressbar</option>
          </chart>
        </panel>
        <panel depends="$tokShowPanelB$">
          <title>Panel B - WARN</title>
          <chart>
            <search>
              <query>index=_internal sourcetype=splunkd log_level="WARN"
    | timechart count by component useother=f usenull=f limit=5
    | eval dummy="$tokShowPanelB$"
    | fields - "$tokShowPanelB$"</query>
              <earliest>$tokTime.earliest$</earliest>
              <latest>$tokTime.latest$</latest>
            </search>
            <option name="charting.chart">area</option>
            <option name="charting.drilldown">all</option>
            <option name="refresh.display">progressbar</option>
          </chart>
        </panel>
        <panel depends="$tokShowPanelC$">
          <title>Panel C - ERROR</title>
          <chart>
            <search>
              <query>index=_internal sourcetype=splunkd log_level="ERROR"
    | timechart count by component useother=f usenull=f limit=5
    | eval dummy="$tokShowPanelC$"
    | fields - "$tokShowPanelC$"</query>
              <earliest>$tokTime.earliest$</earliest>
              <latest>$tokTime.latest$</latest>
            </search>
            <option name="charting.chart">area</option>
            <option name="charting.drilldown">all</option>
            <option name="refresh.display">progressbar</option>
          </chart>
        </panel>
      </row>
    </form>

Option 2:
Set the Query to be run in Specific Panel in the dropdown change event handler. Keep only one panel and run the specific query.

<form>
  <label>Option 2: Dropdown to Show Specific Panel and Hide Others</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="tokShowHidePanel" searchWhenChanged="true">
      <label>Display Panel</label>
      <choice value="panelA">Panel A - INFO</choice>
      <choice value="panelB">Panel B - WARN</choice>
      <choice value="panelC">Panel C - ERROR</choice>
      <default>panelA</default>
      <change>
        <condition value="panelA">
          <set token="tokShowPanelQuery">index=_internal sourcetype=splunkd log_level=&quot;INFO&quot;| timechart count by component useother=f usenull=f limit=5</set>
          <set token="tokPanelTitle">$label$</set>
        </condition>
        <condition value="panelB">
          <set token="tokShowPanelQuery">index=_internal sourcetype=splunkd log_level=&quot;WARN&quot;| timechart count by component useother=f usenull=f limit=5</set>
          <set token="tokPanelTitle">$label$</set>
        </condition>
        <condition value="panelC">
          <set token="tokShowPanelQuery">index=_internal sourcetype=splunkd log_level=&quot;ERROR&quot;| timechart count by component useother=f usenull=f limit=5</set>
          <set token="tokPanelTitle">$label$</set>
        </condition>
      </change>
    </input>
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel depends="$tokPanelTitle$">
      <title>$tokPanelTitle$</title>
      <chart>
        <search>
          <query>$tokShowPanelQuery$</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
        </search>
        <option name="charting.chart">area</option>
        <option name="charting.drilldown">all</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>

PS: I have used three Panels/Queries for Run anywhere Example, but you can extend to the 10 that you need.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Explorer

Hey there, I'm trying to implement this into one of my dashboards but have run into a problem.

I've implemented the option 2 and it works really well so far. However I would like to be able to not only select an option in the dropdown, but also by clicking on a value in another panel. And while I've implemented the drilldown, and the selected value shows up in my dropdown, the corresponding search is not getting executed. Instead the selected value is just getting added in the dropdown list although the same value is already existing.
Could anyone help me out here?

0 Karma

SplunkTrust
SplunkTrust

@matstap, following are couple of options you have! Try the run anywhere dashboard examples.

Option 1: set only one depends token on selection of the corresponding panel. At the same time the tokens for other panels should be unset. You would also need to add a dependency of the token being set to specific Panel's Search query so that it runs only when the token is set. This is required since you one to run only 1 search when the dashboard loads, not 10.

    <form>
      <label>Option 1: Dropdown to Show Specific Panel and Hide Others</label>
      <fieldset submitButton="false">
        <input type="dropdown" token="tokShowHidePanel" searchWhenChanged="true">
          <label>Display Panel</label>
          <choice value="panelA">Panel A</choice>
          <choice value="panelB">Panel B</choice>
          <choice value="panelC">Panel C</choice>
          <default>panelA</default>
          <change>
            <condition value="panelA">
              <set token="tokShowPanelA">true</set>
              <unset token="tokShowPanelB"></unset>
              <unset token="tokShowPanelC"></unset>
            </condition>
            <condition value="panelB">
              <unset token="tokShowPanelA"></unset>
              <set token="tokShowPanelB">true</set>
              <unset token="tokShowPanelC"></unset>
            </condition>
            <condition value="panelC">
              <unset token="tokShowPanelA"></unset>
              <unset token="tokShowPanelB"></unset>
              <set token="tokShowPanelC">true</set>
            </condition>
          </change>
        </input>
        <input type="time" token="tokTime" searchWhenChanged="true">
          <label></label>
          <default>
            <earliest>-24h@h</earliest>
            <latest>now</latest>
          </default>
        </input>
      </fieldset>
      <row>
        <panel depends="$tokShowPanelA$">
          <title>Panel A - INFO</title>
          <chart>
            <search>
              <query>index=_internal sourcetype=splunkd log_level="INFO"
    | timechart count by component useother=f usenull=f limit=5
    | eval dummy="$tokShowPanelA$"
    | fields - "$tokShowPanelA$"</query>
              <earliest>$tokTime.earliest$</earliest>
              <latest>$tokTime.latest$</latest>
            </search>
            <option name="charting.chart">area</option>
            <option name="charting.drilldown">all</option>
            <option name="refresh.display">progressbar</option>
          </chart>
        </panel>
        <panel depends="$tokShowPanelB$">
          <title>Panel B - WARN</title>
          <chart>
            <search>
              <query>index=_internal sourcetype=splunkd log_level="WARN"
    | timechart count by component useother=f usenull=f limit=5
    | eval dummy="$tokShowPanelB$"
    | fields - "$tokShowPanelB$"</query>
              <earliest>$tokTime.earliest$</earliest>
              <latest>$tokTime.latest$</latest>
            </search>
            <option name="charting.chart">area</option>
            <option name="charting.drilldown">all</option>
            <option name="refresh.display">progressbar</option>
          </chart>
        </panel>
        <panel depends="$tokShowPanelC$">
          <title>Panel C - ERROR</title>
          <chart>
            <search>
              <query>index=_internal sourcetype=splunkd log_level="ERROR"
    | timechart count by component useother=f usenull=f limit=5
    | eval dummy="$tokShowPanelC$"
    | fields - "$tokShowPanelC$"</query>
              <earliest>$tokTime.earliest$</earliest>
              <latest>$tokTime.latest$</latest>
            </search>
            <option name="charting.chart">area</option>
            <option name="charting.drilldown">all</option>
            <option name="refresh.display">progressbar</option>
          </chart>
        </panel>
      </row>
    </form>

Option 2:
Set the Query to be run in Specific Panel in the dropdown change event handler. Keep only one panel and run the specific query.

<form>
  <label>Option 2: Dropdown to Show Specific Panel and Hide Others</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="tokShowHidePanel" searchWhenChanged="true">
      <label>Display Panel</label>
      <choice value="panelA">Panel A - INFO</choice>
      <choice value="panelB">Panel B - WARN</choice>
      <choice value="panelC">Panel C - ERROR</choice>
      <default>panelA</default>
      <change>
        <condition value="panelA">
          <set token="tokShowPanelQuery">index=_internal sourcetype=splunkd log_level=&quot;INFO&quot;| timechart count by component useother=f usenull=f limit=5</set>
          <set token="tokPanelTitle">$label$</set>
        </condition>
        <condition value="panelB">
          <set token="tokShowPanelQuery">index=_internal sourcetype=splunkd log_level=&quot;WARN&quot;| timechart count by component useother=f usenull=f limit=5</set>
          <set token="tokPanelTitle">$label$</set>
        </condition>
        <condition value="panelC">
          <set token="tokShowPanelQuery">index=_internal sourcetype=splunkd log_level=&quot;ERROR&quot;| timechart count by component useother=f usenull=f limit=5</set>
          <set token="tokPanelTitle">$label$</set>
        </condition>
      </change>
    </input>
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel depends="$tokPanelTitle$">
      <title>$tokPanelTitle$</title>
      <chart>
        <search>
          <query>$tokShowPanelQuery$</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
        </search>
        <option name="charting.chart">area</option>
        <option name="charting.drilldown">all</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>

PS: I have used three Panels/Queries for Run anywhere Example, but you can extend to the 10 that you need.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

SplunkTrust
SplunkTrust

I know this is quite an old post but the first to come up in google, I've confirmed that newer versions of Splunk allow:

<search depends="$token$">

Newer versions of the Simple XML Reference documentation also states this...(I checked as far back as 7.0.0 and it appears to be there)

Excellent example.

I am looking for option/setting which would make the panel execute the search only on certain condition.

Right now, the searches run with default values and they cause the dashboard to take a very long time and heavy load on the SH.

Suggestions and guidance much appreciated.

-MV

0 Karma

Path Finder

Minor typo fix for Option 1 - for the addition to the search queries so that the search only triggers when the token is set. Instead of this

    | eval dummy="$tokShowPanelA$"
     | fields - "$tokShowPanelA$"

It should be this (i.e. the field to hide is dummy). Otherwise the dummy field does show up when the search is run:

    | eval dummy="$tokShowPanelA$"
     | fields - "dummy"

SplunkTrust
SplunkTrust

@Ranazar thanks for the correction. Got to know even better way to do this would be

Option 1) Don't use eval just use the following. If the token does not exist search will not run. If the token exist fields - will not remove anything provided the existing search result does not have any field which may have same name as the value of token $tokShowPanel$

     | fields - "$tokShowPanelA$"

Option 2) Use built in comment macro in Splunk with the token dependency. The comment macro does not execute but adds the dependency with the token.

      `comment("RUN SEARCH ONLY WHEN $tokShowPanelA$ IS SET")`
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

Path Finder

Oh, that's just brilliant! I know there's documentation and dashboard examples that probably cover this sort of thing, but it's near impossible to find time for that. Coming across these posts is super helpful.

0 Karma