Dashboards & Visualizations
Highlighted

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

Communicator

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-

Highlighted

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

SplunkTrust
SplunkTrust

@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>

View solution in original post

Highlighted

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

Communicator

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

0 Karma
Highlighted

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

Motivator

it help me too.
thanks for your help

0 Karma
Highlighted

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

Communicator

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

0 Karma
Highlighted

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

Legend

@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/




| eval message="Happy Splunking!!!"


0 Karma