Dashboards & Visualizations

How to hide panels with no results from a dashboard?

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

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

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

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

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

Motivator

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

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

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

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.

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

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