Dashboards & Visualizations

How to unset tokens for all filters and set to their default values when hitting refresh button from browser

nagar57
Communicator

Most of our dashboard users refresh the dashboard by hitting the refresh button from the browser.
I want to implement a functionality that when they hit the refresh button all the tokens are unset and values are set to default just like when we remove the filter values (form.token=tokenValue) from the URL and dashboard gets set to default.

1 Solution

niketn
Legend

@nagar57 if you want to do it via Simple XML JS Extension you can try one of older answers: https://answers.splunk.com/answers/554639/i-want-to-refresh-the-dashboard-on-button-click-is.html

Recently I have learnt that you can mimic something similar using pure Simple XML code. Since it was on slack and got cleaned up I am going to record this on Answers.

Add the following code to your dashboard and test. It basically refreshes the dashboard by opening the link to itself in the same browser:

<panel>
  <html>
    <div id="simplexml_refresh_button">
      <a href="http://$tokServer$:$tokHTTPPort$/en-US/app/$env:app$/$env:page$">
        <i class="icon-rotate"/>
      </a>
    </div>
    <style>
      #simplexml_refresh_button{
          border-width: thin;
          border-radius: 50%;
          background: #eee;
          width: 25px;
          float: right;
          position: absolute;
          top: 40px;
          right: 20px;
          height: 25px;
      }
      #simplexml_refresh_button a{
        font-size:large;
        position:relative;
        top:2px;
        left:6px;
      }
    </style>
  </html>
  <table depends="$alwaysHiddenDummySearchForPreBuiltPanelTokens$">
    <search>
      <query>| rest splunk_server=local /servicesNS/-/-/server/settings
  | fields host_resolved httpport
      </query>
      <done>
        <condition match="$job.resultCount!=0$">
          <set token="tokServer">$host_resolved$</set>
          <set token="tokHTTPPort">$httpport$</set>
        </condition>
        <condition>
          <set token="tokServer">localhost</set>
          <set token="tokHTTPPort">8000</set>
        </condition>
      </done>
    </search>
  </table>
</panel>

PS: The dummy search above runs the REST API to get the current Splunk server and http port no. for the URL. Splunk App Name and current Dashboard name are pulled through global environment tokens.

If this works you can save the above code as Prebuilt panel in my example below I have named the prebuilt panel pp_refresh_button

alt text

Then try the following run anywhere example Simple XML Dashboard code to set few tokens, change them and refresh dashboard using Refresh button (PS: prebuilt panel above has been added using <panel ref="pp_refresh_button"></panel> in the Simple XML dashboard code):

<form>
  <label>Dashboard with Refresh Button</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label></label>
        <default>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="dropdown" token="tokDD" searchWhenChanged="true">
        <label></label>
        <choice value="a">Alpha</choice>
        <choice value="b">Beta</choice>
        <choice value="c">Charlie</choice>
        <choice value="d">Delta</choice>
        <default>a</default>
      </input>
    </panel>
    <panel ref="pp_refresh_button"></panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Click to set table drilldown token!</title>
        <search>
          <query>| makeresults</query>
        </search>
        <option name="drilldown">cell</option>
        <drilldown>
          <set token="tokTableDDTime">$click.value$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <div>
          <ul>
            <li>tokDD: $tokDD$</li>
            <li>Time Tokens: $tokTime.earliest$ | $tokTime.latest$</li>
            <li>tokServer: $tokServer$</li>
            <li>Current App Name: $env:app$</li>
            <li>Current Dashboard Name: $env:page$</li>
            <li>tokTableDDTime: $tokTableDDTime$</li>
          </ul>
        </div>
      </html>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@nagar57 if you want to do it via Simple XML JS Extension you can try one of older answers: https://answers.splunk.com/answers/554639/i-want-to-refresh-the-dashboard-on-button-click-is.html

Recently I have learnt that you can mimic something similar using pure Simple XML code. Since it was on slack and got cleaned up I am going to record this on Answers.

Add the following code to your dashboard and test. It basically refreshes the dashboard by opening the link to itself in the same browser:

<panel>
  <html>
    <div id="simplexml_refresh_button">
      <a href="http://$tokServer$:$tokHTTPPort$/en-US/app/$env:app$/$env:page$">
        <i class="icon-rotate"/>
      </a>
    </div>
    <style>
      #simplexml_refresh_button{
          border-width: thin;
          border-radius: 50%;
          background: #eee;
          width: 25px;
          float: right;
          position: absolute;
          top: 40px;
          right: 20px;
          height: 25px;
      }
      #simplexml_refresh_button a{
        font-size:large;
        position:relative;
        top:2px;
        left:6px;
      }
    </style>
  </html>
  <table depends="$alwaysHiddenDummySearchForPreBuiltPanelTokens$">
    <search>
      <query>| rest splunk_server=local /servicesNS/-/-/server/settings
  | fields host_resolved httpport
      </query>
      <done>
        <condition match="$job.resultCount!=0$">
          <set token="tokServer">$host_resolved$</set>
          <set token="tokHTTPPort">$httpport$</set>
        </condition>
        <condition>
          <set token="tokServer">localhost</set>
          <set token="tokHTTPPort">8000</set>
        </condition>
      </done>
    </search>
  </table>
</panel>

PS: The dummy search above runs the REST API to get the current Splunk server and http port no. for the URL. Splunk App Name and current Dashboard name are pulled through global environment tokens.

If this works you can save the above code as Prebuilt panel in my example below I have named the prebuilt panel pp_refresh_button

alt text

Then try the following run anywhere example Simple XML Dashboard code to set few tokens, change them and refresh dashboard using Refresh button (PS: prebuilt panel above has been added using <panel ref="pp_refresh_button"></panel> in the Simple XML dashboard code):

<form>
  <label>Dashboard with Refresh Button</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label></label>
        <default>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="dropdown" token="tokDD" searchWhenChanged="true">
        <label></label>
        <choice value="a">Alpha</choice>
        <choice value="b">Beta</choice>
        <choice value="c">Charlie</choice>
        <choice value="d">Delta</choice>
        <default>a</default>
      </input>
    </panel>
    <panel ref="pp_refresh_button"></panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Click to set table drilldown token!</title>
        <search>
          <query>| makeresults</query>
        </search>
        <option name="drilldown">cell</option>
        <drilldown>
          <set token="tokTableDDTime">$click.value$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <div>
          <ul>
            <li>tokDD: $tokDD$</li>
            <li>Time Tokens: $tokTime.earliest$ | $tokTime.latest$</li>
            <li>tokServer: $tokServer$</li>
            <li>Current App Name: $env:app$</li>
            <li>Current Dashboard Name: $env:page$</li>
            <li>tokTableDDTime: $tokTableDDTime$</li>
          </ul>
        </div>
      </html>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

nagar57
Communicator

Hi @niketnilay It worked and I am amused to see this kind of hack 🙂
Only thing I want to know is that can this refresh button be placed at the top just beside the dashboard label name?

niketn
Legend

@nagar57 Even I was intrigued when I saw this posted in slack chat. I wish I could pull up who posted but definitely saw the need of documenting this.

With some simple XML standardization it becomes a reusable code for refresh button. Please find the updated Prebuilt panel code and dashboard code where you can create Refresh button as the Top Row which gets hidden. Downside is that row_refresh_panel added is outside the pre-built panel which is used to hide the empty row as Refresh button position is moved to top of the dashboard using CSS override.

<form>
  <label>Dashboard with Refresh Button</label>
  <fieldset submitButton="false"></fieldset>
  <row id="row_refresh_panel">
    <panel ref="pp_refresh_button"></panel>
  </row>
  <row>
    <panel>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label></label>
        <default>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="dropdown" token="tokDD" searchWhenChanged="true">
        <label></label>
        <choice value="a">Alpha</choice>
        <choice value="b">Beta</choice>
        <choice value="c">Charlie</choice>
        <choice value="d">Delta</choice>
        <default>a</default>
      </input>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Click to set table drilldown token!</title>
        <search>
          <query>| makeresults</query>
        </search>
        <option name="drilldown">cell</option>
        <drilldown>
          <set token="tokTableDDTime">$click.value$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <div>
          <ul>
            <li>tokDD: $tokDD$</li>
            <li>Time Tokens: $tokTime.earliest$ | $tokTime.latest$</li>
            <li>tokServer: $tokServer$</li>
            <li>Current App Name: $env:app$</li>
            <li>Current Dashboard Name: $env:page$</li>
            <li>tokTableDDTime: $tokTableDDTime$</li>
          </ul>
        </div>
      </html>
    </panel>
  </row>
</form>

Following is the updated prebuilt panel pp_refresh_button with updated CSS as mentioned above:

<panel id="panel_refresh">
  <html>
    <div id="simplexml_refresh_button">
      <a href="http://$tokServer$:$tokHTTPPort$/en-US/app/$env:app$/$env:page$">
        <i class="icon-rotate"/>
      </a>
    </div>
    <style>
      #simplexml_refresh_button{
          border-width: thin;
          border-radius: 50%;
          background: #fff;
          width: 25px;
          float: right;
          position: absolute;
          top: -35px;
          right: 220px;
          height: 25px;
      }
      #simplexml_refresh_button a{
        font-size:large;
        position:relative;
        top:2px;
        left:6px;
      }
      #row_refresh_panel .panel-element-row{
        height: 0px;
      }
    </style>
  </html>
  <table depends="$alwaysHiddenDummySearchForPreBuiltPanelTokens$">
    <search>
      <query>| rest splunk_server=local /servicesNS/-/-/server/settings
  | fields host_resolved httpport
      </query>
      <done>
        <condition match="$job.resultCount!=0$">
          <set token="tokServer">$host_resolved$</set>
          <set token="tokHTTPPort">$httpport$</set>
        </condition>
        <condition>
          <set token="tokServer">localhost</set>
          <set token="tokHTTPPort">8000</set>
        </condition>
      </done>
    </search>
  </table>
</panel>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

nagar57
Communicator

Now that's what I was exactly looking for. Thanks a ton 🙂

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