Dashboards & Visualizations

How to hide panels with no results from a dashboard?

bclarke5765
Explorer

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.

1 Solution

proylea
Contributor

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>

View solution in original post

proylea
Contributor

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>

eholz1
Contributor

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
Tags (1)
0 Karma

alex1895
Path Finder

For me this did not work. I needed to use a base search to make the search happen before the depends in the panel!

0 Karma

johnraftery
Communicator

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$".

spkunkercg
New Member

You can try something like this below

    <panel depends ="firsttoken_tok, secondtoken_tok">

$ is not required for multiple tokens.

0 Karma

bowesmana
SplunkTrust
SplunkTrust

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.

0 Karma

bclarke5765
Explorer

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.

0 Karma

johnraftery
Communicator

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?

0 Karma

splunkian
Path Finder

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.

smuppava
Explorer

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.

0 Karma

proylea
Contributor

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' &lt; 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.

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...