Dashboards & Visualizations

How to dynamically show/hide a dashboard panel based on drop-down selection?

Cheng2Ready
Communicator

I have 3 panels for dropdown menu.

if A is selected 
panel 1 shows Search A
panel 2 shows Title and the link to URL
panel 3 shows Another Search of its own (if "drop down" is selected A)

if B is selected
Panel 1 shows Search B 
Panel 2 Disappear
Panel 3 Disappear

if C is selected
Panel 1 shows Search C
Panel 2 Disappear 
Panel 3 Disappear

if D is selected
Panel 1 shows Search D
Panel 2 Disappear 
Panel 3 Disappear


 

<input type="dropdown" token="tokenSearchOption1" searchWhenChanged="true">
<label>Sources</label>
<choice value="A">A</choice>
<choice value="B">B</choice>
<choice value="C">C</choice>
<choice value="D">D</choice>
<change>
<condition value="A">
<set token="tokenSearchQuery"> index= search query A</set>
</condition>
<condition value="B">
<set token="tokenSearchQuery">index= search query B</set>
</condition>
<condition value="C">
<set token="tokenSearchQuery">index=search query C</set>
</condition>
<condition value="D">
<set token="tokenSearchQuery">index= search query D</set>
</condition>
</change>
<initialValue>"A"</initialValue>
</input>
</panel>
</row>

<row>



<panel id="URL test">
<title>Title URL</title>
<html>
<!-- <style>
.dashboard-row Title .dashboard-panel h2.panel-title {
font-size: 40px !important;
text-align:left;
font-weight:bold;
}
</style>-->
<center> <style>.btn-primary { margin: 5px 10px 5px 0;font-size: 40px !important; }</style>
<a href="URL for a website" target="blank" class="btn btn-primary"> Click here </a>
</center>
</html>
</panel>
</row>



<row>
<panel depends=dropdown A>
<title>Magic</title>
<table>
<search>
<query>Index=Run this search when drop down A </query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
<option name="wrap">false</option>
</table>
</panel>

 


 

Labels (1)
0 Karma

Cheng2Ready
Communicator

Hi @ITWhisperer  Sorry must have forgotten to ask the question lol

Is there a way to make the dashboard react to the scenario below?


I have 3 panels for dropdown menu.

if A is selected 
panel 1 shows Search A
panel 2 shows Title and the link to URL
panel 3 shows Another Search of its own (if "drop down" is selected A)

if B is selected
Panel 1 shows Search B 
Panel 2 Disappear
Panel 3 Disappear

if C is selected
Panel 1 shows Search C
Panel 2 Disappear 
Panel 3 Disappear

if D is selected
Panel 1 shows Search D
Panel 2 Disappear 
Panel 3 Disappear


This is what I have so far that doesn't seem to work as expected

<input type="dropdown" token="tokenSearchOption1" searchWhenChanged="true">
<label>Sources</label>
<choice value="A">A</choice>
<choice value="B">B</choice>
<choice value="C">C</choice>
<choice value="D">D</choice>
<change>
<condition value="A">
<set token="tokenSearchQuery"> index= search query A</set>
</condition>
<condition value="B">
<set token="tokenSearchQuery">index= search query B</set>
</condition>
<condition value="C">
<set token="tokenSearchQuery">index=search query C</set>
</condition>
<condition value="D">
<set token="tokenSearchQuery">index= search query D</set>
</condition>
</change>
<initialValue>"A"</initialValue>
</input>
</panel>
</row>

<row>



<panel id="URL test">
<title>Title URL</title>
<html>
<!-- <style>
.dashboard-row Title .dashboard-panel h2.panel-title {
font-size: 40px !important;
text-align:left;
font-weight:bold;
}
</style>-->
<center> <style>.btn-primary { margin: 5px 10px 5px 0;font-size: 40px !important; }</style>
<a href="URL for a website" target="blank" class="btn btn-primary"> Click here </a>
</center>
</html>
</panel>
</row>



<row>
<panel depends=dropdown A>
<title>Magic</title>
<table>
<search>
<query>Index=Run this search when drop down A </query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
<option name="wrap">false</option>
</table>
</panel>
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Is there a question here?

0 Karma

Cheng2Ready
Communicator

Is there a way to make the dashboard react to the scenario below?


I have 3 panels for dropdown menu.

if A is selected 
panel 1 shows Search A
panel 2 shows Title and the link to URL
panel 3 shows Another Search of its own (if "drop down" is selected A)

if B is selected
Panel 1 shows Search B 
Panel 2 Disappear
Panel 3 Disappear

if C is selected
Panel 1 shows Search C
Panel 2 Disappear 
Panel 3 Disappear

if D is selected
Panel 1 shows Search D
Panel 2 Disappear 
Panel 3 Disappear


This is what I have so far that doesn't seem to work as expected

<input type="dropdown" token="tokenSearchOption1" searchWhenChanged="true">
<label>Sources</label>
<choice value="A">A</choice>
<choice value="B">B</choice>
<choice value="C">C</choice>
<choice value="D">D</choice>
<change>
<condition value="A">
<set token="tokenSearchQuery"> index= search query A</set>
</condition>
<condition value="B">
<set token="tokenSearchQuery">index= search query B</set>
</condition>
<condition value="C">
<set token="tokenSearchQuery">index=search query C</set>
</condition>
<condition value="D">
<set token="tokenSearchQuery">index= search query D</set>
</condition>
</change>
<initialValue>"A"</initialValue>
</input>
</panel>
</row>

<row>

 

<panel id="URL test">
<title>Title URL</title>
<html>
<!-- <style>
.dashboard-row Title .dashboard-panel h2.panel-title {
font-size: 40px !important;
text-align:left;
font-weight:bold;
}
</style>-->
<center> <style>.btn-primary { margin: 5px 10px 5px 0;font-size: 40px !important; }</style>
<a href="URL for a website" target="blank" class="btn btn-primary"> Click here </a>
</center>
</html>
</panel>
</row>

 

<row>
<panel depends=dropdown A>
<title>Magic</title>
<table>
<search>
<query>Index=Run this search when drop down A </query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
<option name="wrap">false</option>
</table>
</panel>

0 Karma
Get Updates on the Splunk Community!

See just what you’ve been missing | Observability tracks at Splunk University

Looking to sharpen your observability skills so you can better understand how to collect and analyze data from ...

Weezer at .conf25? Say it ain’t so!

Hello Splunkers, The countdown to .conf25 is on-and we've just turned up the volume! We're thrilled to ...

How SC4S Makes Suricata Logs Ingestion Simple

Network security monitoring has become increasingly critical for organizations of all sizes. Splunk has ...