Dashboards & Visualizations

Show placeholder text/panel for a Hidden Panel on a dashboard

pepper_seattle
Path Finder

Description:
I have a dashboard with panels that do not load until the search completes via the following method:

<chart depends="$searchdone$">
<search>
<query>...</query>
<earliest>..</earliest>
<latest>..</latest>
<finalized><set token="searchdone">true</set></finalized>
</search>

While this is great because you don't have to watch a long running search load, it means that anyone new to the dashboard doesn't know the panel exists until it pops into existence.

Question:
Is there a way to show the panel (prior to the search results loading) with customized text like 'Loading...' until the search completes? Ultimately, what I want to see is a panel with the customized text until the search results are ready at which point the search results would replace the customized text.

0 Karma

cygnetix
Path Finder

Here's some demo code that worked for me. The trick is to use "rejects" to hide the loading panel once the search has completed. Using "depends" for the panel containing the chart does the opposite - shows the panel after the search completes.

<dashboard>
 <label>Test</label>
  <row>
    <panel rejects="$hide_progress_panel$">
      <html>
        <p align="center">Loading, please wait...</p>
      </html>
    </panel>
  </row>
  <row>
    <panel depends="$hide_progress_panel$">
      <chart>
        <search>
          <query>index=_internal | timechart count by host</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>

          <finalized>
            <set token="hide_progress_panel">true</set>
          </finalized>

        </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">area</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">default</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>
      </chart>
    </panel>
  </row>
</dashboard>

season88481
Contributor

Hey man, this is awesome. Works perfect for me.

0 Karma

frobinson_splun
Splunk Employee
Splunk Employee

Hi @pepper_seattle,
I would suggest taking a look at the examples of dynamic dashboards in the Dashboards Examples App:
https://splunkbase.splunk.com/app/1603/

In particular, the null search swapper example might show a use case somewhat similar to yours. It displays custom HTML in case there are no search results. In your case it sounds like you'd want to implement behavior to hide custom HTML (some kind of "Loading..." text) on search finalization.

Tokens are further discussed in our documentation here:
http://docs.splunk.com/Documentation/Splunk/6.3.0/Viz/tokens
and the "finalized" handler, which might be of use to you, is also discussed here:
http://docs.splunk.com/Documentation/Splunk/6.3.0/Viz/EventHandlerReference#finalized

Hope this helps!
@frobinson_splunk

0 Karma

pepper_seattle
Path Finder

@frobinson_splunk,

Thanks for this info, but what I'm looking for isn't quite what you have above.

The panels are hidden until search results populate, but what I'd like to know is if there's a way to have just custom text appear on the panel until search results are fully loaded instead of having the panel pop into existence once the search finalizes. It may be the finalized tag will not work for this as in the examples it asks for a hard value to relate to when setting conditions. As my query is a single value search which displays changing values until the search completes in full I wouldn't be able to set the condition properly (that I'm aware of).

frobinson_splun
Splunk Employee
Splunk Employee

Hi @pepper_seattle,
As you're trying to customize the dashboard behavior, here are a couple additional resources to consider.

We have some content on using JavaScript and/or CSS to customize dashboard styling and behavior:

http://docs.splunk.com/Documentation/Splunk/6.3.0/AdvancedDev/UseCSS

There is also guidance on custom dashboards in our developer documentation:
http://dev.splunk.com/webframework

Thanks,
@frobinson_splunk

0 Karma
Get Updates on the Splunk Community!

Exporting Splunk Apps

Join us on Monday, October 21 at 11 am PT | 2 pm ET!With the app export functionality, app developers and ...

Cisco Use Cases, ITSI Best Practices, and More New Articles from Splunk Lantern

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Build Your First SPL2 App!

Watch the recording now!.Do you want to SPL™, too? SPL2, Splunk's next-generation data search and preparation ...