Dashboards & Visualizations

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

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

1 Solution

renjith_nair
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>
Happy Splunking!

View solution in original post

tomapatan
Communicator

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>

0 Karma

joesrepsolc
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

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

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

renjith_nair
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>
Happy Splunking!

claudio_manig
Communicator

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

0 Karma

logloganathan
Motivator

it help me too.
thanks for your help

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...