Solved: Re: How to show & hide panel by drilldown on a das...

claudio_manig · ‎09-03-2018

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-

renjith_nair · ‎09-03-2018

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

---
What goes around comes around. If it helps, hit it with Karma 🙂

View solution in original post

tomapatan · ‎01-23-2023

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>

joesrepsolc · ‎05-20-2019

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

niketn · ‎05-20-2019

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

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

renjith_nair · ‎09-03-2018

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

---
What goes around comes around. If it helps, hit it with Karma 🙂

claudio_manig · ‎09-03-2018

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

logloganathan · ‎08-07-2019

it help me too.
thanks for your help

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

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation