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.
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.
I would suggest taking a look at the examples of dynamic dashboards in the Dashboards Examples App:
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:
and the "finalized" handler, which might be of use to you, is also discussed here:
Hope this helps!
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).
As you're trying to customize the dashboard behavior, here are a couple additional resources to consider.
There is also guidance on custom dashboards in our developer documentation:
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>