Dashboards & Visualizations

Change Refresh Progress bar to spinning wheel in Splunk dashboard

vik123ash
Explorer

Hi,

When I change time in Splunk dashboard, it shows a progress bar while searching data.

is it possible to replace Progress Bar with spinning wheel while searching data and spinning wheel goes off once search is completed.

Vikash

1 Solution

niketn
Legend

Hi @vik123ash, you can add a HTML panel after the chart where you want to display "spinner" search progress indicator (through CSS animation), instead of default progress bar. The html panel can be displayed or hidden through dependsattribute with token which is set during <progress> Event Handler of search and unset during <done> Event Handler of search.

alt text

Following is the run anywhere dashboard to compare built in vs custom search progress indicator.

<form>
  <label>Spinner instead of Progress Bar</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <single>
        <title>Default Progress Indicator</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
        </search>
        <option name="refresh.display">none</option>
      </single>
    </panel>
    <!-- Panel id="panel1" for hiding default progress indicator -->
    <panel id="panel1">
      <single>
        <title>Custom Progress Indicator (Spinner)</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <progress>
            <!-- Set the token to Show Spinner when the search is running -->
            <set token="showSpinner">true</set>
          </progress>
          <done>
            <!-- Unset the token to Hide Spinner when the search completes -->
            <unset token="showSpinner"></unset>
          </done>
        </search>
        <option name="refresh.display">none</option>
      </single>
      <!-- HTML Panel for Spinner -->
      <html depends="$showSpinner$">
        <!-- CSS Style to Create Spinner using animation -->
        <style>
          .loadSpinner {
            margin: 0 auto;
            border: 5px solid #FFF; /* White BG */
            border-top: 5px solid #3863A0; /* Blue */
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
          }
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
          <!-- CSS override to hide default Splunk Search Progress Bar -->
          #panel1 .progress-bar{
            visibility: hidden;
          }
        </style>
        <div class="loadSpinner"/>
      </html>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Nadhiyaa
Path Finder

Hi @niketnilay

I am having the same requirement. it's not setting the setting the token "showSpinner" so the html not getting visible .

When in edit mode , i can see the spin.

0 Karma

niketn
Legend

@Nadhiyaa when the search completes Spinner will be hidden. Only when search is in progress spinner will be displayed. Also as mentioned in the above comment, in the edit mode Spinner will always show since token is unset in Edit Mode.

So if the expectation is something else please elaborate on your use case.

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

Nadhiyaa
Path Finder

@niketnilay

The expectation is exactly the same .But when my base search runs its not setting/unsetting the token properly , so it always hides the spinner ,

Yes i agree in edit mode it always shows. But when my search is in progress , its not setting the token so it always hides in my dashboard .

0 Karma

niketn
Legend

Can you share the Simple XML code for search with token being set? Have you coded both <progress> and <done> Search Event Handlers?

Also have you tried the run anywhere search example? Does it work for you or not?

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

Nadhiyaa
Path Finder

@niketnilay

Below find my shared image .

https://ibb.co/2snkJqh

https://ibb.co/R6z7tw6

0 Karma

Nadhiyaa
Path Finder

@niketnilay

Now the spin is showing up for few seconds at the end of the search .

the moment the search starts , it should show the spinning .not at the end of the search .

0 Karma

niketn
Legend

@Nadhiyaa surprisingly as per your code snippet this should work. Which version of Splunk are you on? Also how does the run anywhere example behave which I have provided with my answer?

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

niketn
Legend

Hi @vik123ash, you can add a HTML panel after the chart where you want to display "spinner" search progress indicator (through CSS animation), instead of default progress bar. The html panel can be displayed or hidden through dependsattribute with token which is set during <progress> Event Handler of search and unset during <done> Event Handler of search.

alt text

Following is the run anywhere dashboard to compare built in vs custom search progress indicator.

<form>
  <label>Spinner instead of Progress Bar</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <single>
        <title>Default Progress Indicator</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
        </search>
        <option name="refresh.display">none</option>
      </single>
    </panel>
    <!-- Panel id="panel1" for hiding default progress indicator -->
    <panel id="panel1">
      <single>
        <title>Custom Progress Indicator (Spinner)</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <progress>
            <!-- Set the token to Show Spinner when the search is running -->
            <set token="showSpinner">true</set>
          </progress>
          <done>
            <!-- Unset the token to Hide Spinner when the search completes -->
            <unset token="showSpinner"></unset>
          </done>
        </search>
        <option name="refresh.display">none</option>
      </single>
      <!-- HTML Panel for Spinner -->
      <html depends="$showSpinner$">
        <!-- CSS Style to Create Spinner using animation -->
        <style>
          .loadSpinner {
            margin: 0 auto;
            border: 5px solid #FFF; /* White BG */
            border-top: 5px solid #3863A0; /* Blue */
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
          }
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
          <!-- CSS override to hide default Splunk Search Progress Bar -->
          #panel1 .progress-bar{
            visibility: hidden;
          }
        </style>
        <div class="loadSpinner"/>
      </html>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

vikesh
Loves-to-Learn

Can we implement this in the Splunk cloud dashboards? I know that CSS scripting is prohibited/rejected during cloud vetting of the app.

 

Thanks 

0 Karma

BernardEAI
Communicator

Thanks for the code. I have tested this, and the result is that both versions show the standard loading bar.  Maybe this does not work with the latest version of Splunk? 

We are running Version:7.3.3

UPDATE: the problem was that the new version of Splunk breaks the "inline" CSS. As a corrective hack, the tag <p/> can be a placed before <style>, this fixes the problem.

0 Karma

niketn
Legend

@vik123ash, can you please test and confirm whether the solution works for you or not?

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

vik123ash
Explorer

@niketnilay

it didn't work. it was showing spiinner down the page. my expectation is during search this spin should work and once search completed spin should goes off.

0 Karma

niketn
Legend

@vik123ash, As you can see in the attached screenshot, there are three steps to the search. Spinner shows up when the search starts and progresses. Once it completes you can see in the third screenshot that it is hidden again.

Do you have dashboard open in Edit Mode? (Edit mode shows all elements including the hidden).
If not what version of Splunk are you using?

If the spinner is working fine and you have issue with its position, please provide a screenshot of where you want it to be. You can definitely adjust through CSS override.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...