Dashboards & Visualizations

How can I implement a pseudo-searchWhenChanged functionality for inputs using a JS button?

Motivator

Hi guys,

I am looking to create and use a working JS button. I am able to put it in line with my other inputs (https://answers.splunk.com/answers/758599/is-it-possible-to-add-a-button-in-line-with-inputs.html) and am able to have it resubmit searches when tokens are not changed (https://answers.splunk.com/answers/758332/is-it-impossible-to-resubmit-a-dashboard-search-in.html )

However, I'd like a searchWhenChanged="false" functionality for inputs used in conjunction with this button. With my current code, the search still re-runs when the timepicker is updated without the button ever being clicked. I'd like the search to run only on button click.

searchWhenChanged="false" for the inputs is NOT not honored like the bug with the fieldset SubmitButton ( https://answers.splunk.com/answers/742451/searchwhenchangedfalse-not-honored-1.html ), since searchWhenChanged was only meant to be compatible with the fieldset SubmitButton, not a JS button.

<dashboard theme="light" script="button_submit.js">
  <label>Lockout Lookup Clone</label>
  <description></description>

  <row>
    <panel>
      <html depends="$hide$">
        <style>
        #submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]
        {
          width:35% !important;
        }
        #submit_button  button  {
          padding: 6px 15px !important;
          border-radius: 3px !important;
          font-weight: 500 !important;
          background-color: #5cc05c !important;
          border: transparent !important;
          color: #fff !important;
        }
        #submit_button  button:hover{
          background-color: #40a540 !important;
          border-color: transparent !important;
        }
        </style>
      </html>
      <input type="time" token="TIMERANGE" id="timepicker" searchWhenChanged="false">
        <label>Time range:</label>
        <default>
          <earliest>@d</earliest>
          <latest>now</latest>
        </default>
        <change>
          <eval token="earliest_epoch_onChange">case(isnum($earliest$), $earliest$, $earliest$=="now", time(), $earliest$="", 0, true(), relative_time(time(), $earliest$))</eval>
          <eval token="latest_epoch_onChange">case(isnum($latest$), $latest$, $latest$=="now", time(), true(), relative_time(time(), $latest$))</eval>
        </change>
      </input>
      <input type="text" token="earliest_epoch" depends="$justHideMe$">
        <default>$earliest_epoch_onChange$</default>
      </input>
      <input type="text" token="latest_epoch" depends="$justHideMe$">
        <default>$latest_epoch_onChange$</default>
      </input>
      <input type="link" id="submit_button" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>
    </panel>
  </row>

  <row>
    <panel>
      <title></title>
      <table>
        <search>
          <query>
index=wineventlog EventCode=4740 OR EventCode=4767 user="myuser" earliest=$earliest_epoch$ latest=$latest_epoch$ | sort 0 - _time | rename Caller_Computer_Name AS device | rename ComputerName as domain_controller | eval unlocker=if(EventCode=4767,src_user,"") | eval null="$submit_trigger$" | table _time user unlocker EventCode EventCodeDescription device domain_controller 
          </query>
        </search>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="drilldown">none</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">20</option>
      </table>
    </panel>
  </row>

</dashboard>

submit.js:

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var defaultTokens = mvc.Components.get("default");
     var submittedTokens = mvc.Components.get("submitted");
     $('#submit_button').on("click",function(){
         submittedTokens.set("submit_trigger", ""+Math.random());
         defaultTokens.set("submit_trigger", ""+Math.random());
     });
 });
0 Karma
1 Solution

Path Finder

Try the following
- store the inputs in their tokens as I assume you are already.
- create hidden text fields for each input but do not change them when you change the value of your inputs
- on selection of the button, assign a hidden text field to now()
- on change of the hidden text field, assign the mapped hidden text fields to the values of your inputs

View solution in original post

Motivator

@tomawest helped me a bunch with this and gave me the idea for my final solution. Basically just use your js to create a "final" token for each "initial" token submitted for each of your inputs.

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var submittedTokens = mvc.Components.get("submitted");
     $('#submit_button').on("click",function(){
         submittedTokens.set("submit_trigger", ""+Math.random());
         submittedTokens.set("my_final_token",submittedTokens.get("my_initial_token"));
     });
 });
0 Karma

Path Finder

Try the following
- store the inputs in their tokens as I assume you are already.
- create hidden text fields for each input but do not change them when you change the value of your inputs
- on selection of the button, assign a hidden text field to now()
- on change of the hidden text field, assign the mapped hidden text fields to the values of your inputs

View solution in original post

Motivator

This solution is probably better since you don't have to create and edit a separate js file for each of your dashboards like with my answer.

0 Karma