topic Re: How to show & hide panel by drilldown on a dashboard? in Dashboards & Visualizations

How to show & hide panel by drilldown on a dashboard?

claudio_manig — Mon, 03 Sep 2018 08:29:09 GMT

Hi Ninjas

I played around a bit but stuck somehow-

I have a dashboard with panel A and panel B- B is a detailed View from A. My goal is:

Only Panel A is showed when opening the dashboard, clicking somewhere on the panel, panel B shows up.
If i then click on panel B, it should disappear again.

I tried out various things with depend and reject but nothing did the trick above-

Thx in advance-

Re: How to show & hide panel by drilldown on a dashboard?

renjith_nair — Mon, 03 Sep 2018 08:52:12 GMT

@claudio.manig ,

Try this

<dashboard>
  <label>DrillDown</label>
  <row>
    <panel>
      <table>
        <search>
          <query>index=_*|stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <drilldown>
          <set token="tok_sourcetype">$click.value$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel depends="$tok_sourcetype$">
      <chart>
        <search>
          <query>index=_* sourcetype=$tok_sourcetype$|timechart count</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">line</option>
        <option name="charting.drilldown">all</option>
        <drilldown>
          <unset token="tok_sourcetype"></unset>
        </drilldown>
      </chart>
    </panel>
  </row>
</dashboard>

Re: How to show & hide panel by drilldown on a dashboard?

claudio_manig — Mon, 03 Sep 2018 09:10:05 GMT

Works like a charm, even without using the token in the actual search-thanks!

Re: How to show & hide panel by drilldown on a dashboard?

joesrepsolc — Mon, 20 May 2019 15:35:17 GMT

Awesome help renjith.nair

Follow-up question, how would I make a RESET function, that basically clears the dashboard and resets the tokens (like when you first load the dashboard?). Trying to add a reset link at the top of the dashboard.

Thanks in advance!

Joe

Re: How to show & hide panel by drilldown on a dashboard?

niketn — Mon, 20 May 2019 17:04:48 GMT

@joesrepsolc refer to one of my answers as comment which uses Simple XML JS Button which can be coded to reset all tokens using jquery to access html button click and SplunkJS stack to access token model to unset token: https://answers.splunk.com/answers/558739/is-it-possible-to-unset-drilldown-tokens-when-glob.html

Alternatively try the following run anywhere example which drilldowns to the same dashboard without any form tokens hence simulates dashboard reset.

<form>
  <label>Reset Button</label>
  <search>
    <query>
      | makeresults
      | eval app="$env:app$",page="$env:page$"
    </query>
    <progress>
      <set token="tokApp">$result.app$</set>
      <set token="tokPage">$result.page$</set>
    </progress>
  </search>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel id="panelInput">
      <input type="dropdown" token="field1">
        <label>field1</label>
        <choice value="apple">Apple</choice>
        <choice value="banana">Banana</choice>
        <choice value="carrot">Carrot</choice>
        <default>apple</default>
      </input>
      <input type="radio" token="field2" searchWhenChanged="true">
        <label>field2</label>
        <choice value="yes">Yes</choice>
        <choice value="no">No</choice>
        <default>yes</default>
      </input>
    </panel>
    <panel id="panelRefresh">
      <html>
        <style>
          #panelInput .dashboard-panel{
            margin-right: 0px !important;
          }
          #myTable table thead, #myTable div[id^="myTable-footer"]{
            visibility:hidden !important;
          }
          #myTable table tbody tr td{
            float: right;
            padding-right: 20px;
          }
        </style>
      </html>
      <table id="myTable">
        <search>
          <query>| makeresults 
| fields - _time 
| eval message="Reset Inputs"</query>
          <earliest>-1s</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">cell</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <link target="_self">/app/$tokApp$/$tokPage$</link>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <div>
          <b>Change Inputs and click on Reset</b>
        </div>
        <div>field1: $field1$</div>
        <div>field2: $field2$</div>        
      </html>
    </panel>
  </row>
</form>

PS: You can change "Reset Inputs" in above code with copy pasting unicode character to have emoji icon for drilldown: https://emojipedia.org/anticlockwise-downwards-and-upwards-open-circle-arrows/

Re: How to show & hide panel by drilldown on a dashboard?

logloganathan — Wed, 07 Aug 2019 13:00:17 GMT

it help me too.
thanks for your help

Re: How to show & hide panel by drilldown on a dashboard?

tomapatan — Mon, 23 Jan 2023 13:55:23 GMT

Here`s another way to hide the drilldown panel:

<row depends="$tokenName$">
<panel>
<single>
<search>
<query>
|makeresults |eval label="Close"
</query>
</search>
<option name="drilldown">all</option>
<option name="height">50</option>
<drilldown>
<unset token="tokenName"></unset>
</drilldown>
</single>
</panel>
</row>