Solved: How do you show a progress bar on an HTML panel?

Sukisen1981 · ‎10-20-2018

I have a simple XML dashboard and some HTML panels in it.

The top panel is an HTML area and gives stats like search result rows, duration etc. I would like to add some sort of progress bar / spin icon while the panel waits for search to complete and retrieves results from the tokens.

Things to keep in mind

At first load , the HTML panel should NOT show any progress bar/ spin icon as the HTML panel is user drop down dependent.

For all subsequent processing after user changes / selects values from drop down, the HTML panel needs to indicate search is in progress through progress bar/spin icon.

Icon/bar of course should stop appearing once the panel retrieves results.

I am on simple XML and can not use custom CSS , JS or convert dashboard to HTML as this is a customer environment.

  <row depends="$STYLES$">
    <panel>
      <html>
         <style>
           #panel_grn2 .dashboard-panel {
                          background:grey !important;
             color:white !important;
             font-weight: bold;
           }
         </style>
       </html>
    </panel>
  </row>
  <row>
    <panel id="panel_grn2">
      <html> 
<table style="width:100%">
     <tr>
     <th>Search Duration</th>
     <th>Start Time</th> 
     <th>Result Rows</th>

   </tr>
   <tr>
     <td style="text-align: center;">$duration$</td>
     <td style="text-align: center;">$starttime$</td>
     <td style="text-align: center;">$resultcount$</td>   

   </tr>

 </table>
</html>
    </panel>
  </row>
  <row>

    <panel depends="$panel_show$">&gt;<table>

        <search>
          <query>index=_internal "$field1$" | stats count</query>
          <earliest>0</earliest>
          <latest></latest>
          <progress>
            <condition match="'job.resultCount' = 0">
              <set token="panel_show">true</set>

            </condition>
            <condition>
              <unset token="panel_show"></unset>

            </condition>
          </progress>
          <done>
            <eval token="field1">trim($field1$)</eval>
          </done>
        </search>
      </table>

    </panel>
    </html>
  </row>

Here is my panel / token set-unset query so far. It is working fine with no issues, but it looks odd when the HTML panel is waiting for search results for a long time, say ~ 15-20 seconds, and the panel continues to show the result of the last search based on the last user dropdown selection.

niketn · ‎10-21-2018

@Sukisen1981 you can check out one of my older answers to add a Spinner Progress Wheel using <html> panel depending on a token which is set in <progress> search handler and unset in the <done> search handler of corresponding search: https://answers.splunk.com/answers/587113/change-refresh-progress-bar-to-spinning-wheel-in-s.html

Please try out and confirm.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

mstjohn_splunk · ‎10-22-2018

@sukisen1981

Did the answer below solve your problem? If so, please resolve this post by approving it! If your problem is still not solved, keep us updated so that someone else can help ya. Thanks for posting!

niketn · ‎10-21-2018

@Sukisen1981 you can check out one of my older answers to add a Spinner Progress Wheel using <html> panel depending on a token which is set in <progress> search handler and unset in the <done> search handler of corresponding search: https://answers.splunk.com/answers/587113/change-refresh-progress-bar-to-spinning-wheel-in-s.html

Please try out and confirm.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

Sukisen1981 · ‎10-23-2018

hi @niketnilay
I tinkered a bit with the css and hide/unhide places for the token for my use case.
I wanted to pass some other token values while the search is being executed and there were some other panels taking too much time BEFORE the search where i pass the search meta data token.
I built a hidden all time panel at the top passed some dummy value to the search meta data tokens (executing...) and set the spinner token to be visible. I hid the token after the search meta data is passed in the last search which populates the search meta data tokens.
More or less exactly your approach with a bit of tinkering. I am going to accept your answer as this is exactly what I needed. Many thanks!

niketn · ‎10-23-2018

Glad you got it working 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

Sukisen1981 · ‎10-23-2018

hi @niketnilay - yes i did try this out a bit. I am able to get spinner icon etc.
The issue I am not able to figure out is this - the html panel actually does not have any search, it is just accepting tokens from the various meta job data like, search time, number of rows returned etc.
So there is no panel in my HTML area. Hence, I am able to get the spinner icon in the HTM area,but I am not able to start/stop it as the search progress proceeds, which would have been simpler if this was a search panel and not an HTML area. As of now, the spinner icon just keeps on rotating inside the HTML area

niketn · ‎10-23-2018

The spinner show/hide token should be set at the same place where the token to be displayed in html is being set.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

How do you show a progress bar on an HTML panel?

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor