Hey all,
Is there a simple way to hide/show panels on a dashboard based on the number of results? I have a dynamic drop-down and if I select a value that doesn't generate any results for specific panels, I want to hide any panels that don't have results.
I looked at http://answers.splunk.com/answers/65310/hiding-panel-with-no-results-in-advanced-xml.html but I'm getting an error saying the ajaxComplete function couldn't be found.
This can be done now in simple xml with 6.3, here is a working dashboard example:
<dashboard>
<row>
<panel depends="$panel_show$">
<chart>
<title>Internal sourcetypes over the last 5 seconds</title>
<search id="your_search">
<query>index=_internal sourcetype=splunkd_ui_access | timechart count by sourcetype</query>
<earliest>-5s@s</earliest>
<latest>now</latest>
<progress>
<condition match="'job.resultCount' > 0">
<set token="panel_show">true</set>
</condition>
<condition>
<unset token="panel_show"/>
</condition>
</progress>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.enabled">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">column</option>
<option name="charting.chart.bubbleMaximumSize">50</option>
<option name="charting.chart.bubbleMinimumSize">10</option>
<option name="charting.chart.bubbleSizeBy">area</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.showDataLabels">none</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">stacked</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">all</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.placement">right</option>
<option name="refresh.auto.interval">5</option>
</chart>
</panel>
</row>
</dashboard>
This can be done now in simple xml with 6.3, here is a working dashboard example:
<dashboard>
<row>
<panel depends="$panel_show$">
<chart>
<title>Internal sourcetypes over the last 5 seconds</title>
<search id="your_search">
<query>index=_internal sourcetype=splunkd_ui_access | timechart count by sourcetype</query>
<earliest>-5s@s</earliest>
<latest>now</latest>
<progress>
<condition match="'job.resultCount' > 0">
<set token="panel_show">true</set>
</condition>
<condition>
<unset token="panel_show"/>
</condition>
</progress>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.enabled">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">column</option>
<option name="charting.chart.bubbleMaximumSize">50</option>
<option name="charting.chart.bubbleMinimumSize">10</option>
<option name="charting.chart.bubbleSizeBy">area</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.showDataLabels">none</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">stacked</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">all</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.placement">right</option>
<option name="refresh.auto.interval">5</option>
</chart>
</panel>
</row>
</dashboard>
This seems to be an excellent tip. But, it no works for me.
I get two rows back from as search - sorted by _time. Each row has a field called UserAction.
One row (the latest) has a UserAction value of "Off", the earlier row has a value of "On"
Ideally I would like to show only one row - "On" and when the "Off" comes in I would like to hide that row.
I have tried two panels in a parent dashboard - my idea was to hide the panel that has the "On" search result.
I would also like to have the "Off" panel hidden on the parent dashboard.
I have tried things as shown here - but it seems the second panel is always hidden regardless of my token
<set token="showPanel">true</set>. If I set it to false - the dashboard remains hidden.
I am missing something but have not yet found what I am missing
Thanks for a helpful resource
eholz1
For me this did not work. I needed to use a base search to make the search happen before the depends in the panel!
This is really useful, thanks! I'm trying to do something similar - but using two tokens in the depends attribute. Can I combine them with a boolean OR? Something like this: panel depends="$TOKEN1$ OR $TOKEN2$".
You can try something like this below
<panel depends ="firsttoken_tok, secondtoken_tok">
$ is not required for multiple tokens.
Hi John, I have found different behaviour with RT panels with this. It looks like RT and non RT panels that use with gt 0 work in the opposite way.
I don't know if you can create an "OR" dependency. I know that you can comma separate multiple tokens to get an "AND" dependency.
Thanks bclarke. Pity it's not straightforward to get the OR. Well, I suppose you could say ¬(X AND Y). Is there a "NOT" available?
This was asked a while ago, but hopefully this helps someone. You could accomplish this using some JavaScript.
This example uses the "id" and "depends" attributes available in 6.2's Simple XML. If you're using a version under 6.2, this won't work.
Simple XML:
<dashboard script="awesome.js">
<row>
<panel depends="$awesome_token$">
<table>
<search id="your_search">...</search>
</table>
</panel>
</row>
</dashboard>
So, we're saying this panel will depend on the the $awesome_token$ being set before we make it visible. So, when you first load the dashboard its not going to show up until the token value is set, which is done in the JavaScript below. We are also providing an id to the search so we can target it in the JavaScript file.
In your awesome.js file you would then do:
require([
'splunkjs/mvc',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/simplexml/ready!'
], function(mvc, SearchManager) {
var tokens = mvc.Components.getInstance("submitted");
//the getInstance part pulls the id of the search you defined in your simple xml
var your_search = mvc.Components.getInstance("your_search");
//on the search progress event check and see if any events come back
your_search.on('search:progress', function(properties) {
//access the returned search properties to get access to the event count returned from the search
var props = properties.content;
//if the eventCount is greater than 0 set your token, $awesome_token$, that you defined in your simple xml with a value - can be any value
if(props.eventCount > 0) {
//bingo! we've got events so set the token value so the panel displays
//don't include the wrapping $ used in the simple xml
tokens.set('awesome_token', 'true');
}
});
});
A couple of extra notes: You'll want to upload the javascript file to the app your dashboard is in. You can also do this on the command line by adding it to the $SPLUNK_HOME/etc/apps//appserver/static
folder. And you will definitely need to restart Splunk before the changes will work.
The simple xml shown above hides the panel although there are search results displayed. Any other solution to this issue? Need to incorporate xml code so I can hide panel there are NO search results.
Yes you can use progress and condition to display or not display panels in the event of results or no results returned. Here is an example of a neat way to show a panel if there is a results or show a dummy panel that reads from an inputlookup so as not to have a panel showing N/A
<single depends="$result4$">
<title>Visit to About Us Page</title>
<search>
<query>| inputlookup user_usage.csv | search .......</query>
<earliest>-30d@d</earliest>
<latest>now</latest>
<progress>
<condition match="'job.resultCount' < 1">
<set token="fill4">true</set>
<unset token="result4"></unset>
</condition>
<condition>
<set token="result4">true</set>
<unset token="fill4"></unset>
</condition>
</progress>
</search>
<option name="drilldown">all</option>
<option name="colorBy">trend</option>
<option name="colorMode">block</option>
<option name="numberPrecision">0</option>
<option name="rangeColors">["0x65a637","0x65a637"]</option>
<option name="rangeValues">[1]</option>
<option name="showSparkline">1</option>
<option name="showTrendIndicator">1</option>
<option name="trendColorInterpretation">standard</option>
<option name="trendDisplayMode">absolute</option>
<option name="unitPosition">after</option>
<option name="useColors">1</option>
<option name="useThousandSeparators">1</option>
<option name="link.visible">false</option>
<option name="underLabel">Compared to Previous Week</option>
<option name="refresh.time.visible">false</option>
<drilldown>
<set token="detail-about">true</set>
</drilldown>
<option name="linkView">search</option>
</single>
<single depends="$fill4$">
<title>Visit About Us</title>
<search>
<query>| inputlookup fillnull.csv | timechart count span=7d</query>
<earliest>-30d@d</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="colorBy">trend</option>
<option name="colorMode">block</option>
<option name="numberPrecision">0</option>
<option name="rangeColors">["0x65a637","0x65a637"]</option>
<option name="rangeValues">[1]</option>
<option name="showSparkline">1</option>
<option name="showTrendIndicator">1</option>
<option name="trendColorInterpretation">standard</option>
<option name="trendDisplayMode">absolute</option>
<option name="unitPosition">after</option>
<option name="useColors">1</option>
<option name="useThousandSeparators">1</option>
<option name="link.visible">false</option>
<option name="underLabel">Compared to Previous Week</option>
<option name="refresh.time.visible">false</option>
</single>
The fillnull.csv lookup just has a date column and a count column with zeros in it.