How do I update a time picker value using javascript?

[andrewtrobec]

Hello,

My goal is to use javascript to update the "earliest" value of a time picker input to 6 months ago in the event that the user selects a time range with an "earliest" value greater than 6 months ago.  I don't want a user to be able to extract more than 6 months of data, but at the same time I want them to be able to use the flexibility of the time picker input.

So far I have:

• Create a token "tok_six_months_ago" under <init> tag on the dashboard which is  set to relative_time(now(),"-6mon@mon")
• Defined a time picker input with name "tok_data_period"
• Converted the "tok_data_period" earliest and latest values to epoch via the <change> tag
  • <eval token="tok_earliest_epoch">if(isnum('earliest'),'earliest',relative_time(now(),'earliest')</eval>
  • <eval token="tok_latest_epoch">if(isnum('latest'),'latest',relative_time(now(),'latest')</eval>
• Created a JavaScript file that monitors changes to "tok_earliest_epoch" and alerts a user when it is out of bounds (it checks earliest against "tok_six_months_ago")
  •     def_tok.on("change:tok_earliest_epoch", function() {
            if(def_tok.get("tok_earliest_epoch") < def_tok.get("tok_six_months_ago")) {
                alert("Lower time limit is out of bounds: data will only be shown for the last 6 months");
            }
        });

What I would like to do now, but I don't know how, is update the timepicker token on the form (tok_data_period.earliest) with the epoch contained in the "tok_six_months_ago".

Please can somebody help?

Thanks!

Andrew

[bowesmana]

In your javascript you can get hold of the tokens using

  var tokens = mvc.Components.get('default');
  var submittedTokens = mvc.Components.get('submitted');

where mvc is from here in your JS

require([
  'underscore',
  'jquery',
  'backbone',
  'splunkjs/mvc'  <------- HERE
], function(_, $, Backbone, mvc)

See here for description on the token models

https://dev.splunk.com/enterprise/docs/developapps/webframework/binddatausingtokens/tokenmodels/

Then you can do something like

tokens.set('tok_data_period.earliest', tokens.get('tok_six_months_ago');

This can also be done through the dashboard by using for time picker token name prefixed with 'form.', as in

    <finalized>
      <condition match=" 'job.resultCount' != 0">
        <set token="form.parm_ts.earliest">$result.start_time$</set>
      </condition>
    </finalized>

where the time token in the dashboard input is 'param_ts'. 

Hope this gets you on the right track.

[andrewtrobec]

@bowesmana Thank you for the input.  I tried to do exactly what you suggest before creating this thread, but it just doesn't work.  I cannot seem to access the timepicker token in this way.  I've even tried to interact with it directly by assigning an id "input_data_period":

var input_data_period = mvc.Components.getInstance("input_data_period");

Either way, I'm not certain how to interact with the earliest value despite many failed attempts.

Have you managed to get it working successfully somewhere?

Thanks!

Andrew

[bowesmana]

One thing you could try - I know a colleague used this technique in one of his dashboards to update the time picker search time based on the results of a search

    <finalized>
      <condition match=" 'job.resultCount' != 0">
        <set token="form.parm_ts.earliest">$result.start_time$</set>
      </condition>
    </finalized>

The time picker token is defined as token="parm_ts" but here it's setting form.parm_ts.earliest

Maybe that's the trick?

[niketn]

@bowesmana <finalized> is not supported search event handler since version 6.5 use <done> instead. Refer to the latest list of supported search event handlers: https://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference#Search_event_handlers

[bowesmana]

Oops, yes I only use <done> - that just escaped from a cut/paste 😞

[andrewtrobec]

@bowesmana That's it!  I needed to set the form.<token> so it updates both token and UI.  Amazing!   If you want to update your previous response with reference to the form token then I can accept it as the correct answer.  Thanks for the help, much appreciated!

[niketn]

@andrewtrobec Do you really need JavaScript? Or your use case is to adjust the Earliest Time in Simple XML to 6 months ago in case someone provides earliest date older than 6 month? As this use case can be implemented using Independent search in Simple XML. `<eval>` based approach can also be used in place of Independent Search, but I have illustrated only one example here. Please refer to my older post with both steps documented: https://community.splunk.com/t5/Archive/Running-one-of-two-searches-based-on-time-picker-selection/t...

Please try out the following example and confirm!

<form>
  <label>Adjust Earliest Time Input</label>
  <!-- Independent Search to adjust earliest Time for Search query to 6 months ago if older than 6 month time is selected. -->
  <search>
    <query>| makeresults
| addinfo
| eval MAX_EARLIEST_TIME=relative_time(now(),"-6mon@mon"),
       info_max_time=case(info_max_time=="+Infinity",_time,true(),info_max_time)
| eval showEarliestTimeAdjustedMsg=case(info_min_time&lt;MAX_EARLIEST_TIME,"true"),
       info_min_time=case(info_min_time&lt;MAX_EARLIEST_TIME,MAX_EARLIEST_TIME,
       true(),info_min_time)
| fields info_min_time info_max_time MAX_EARLIEST_TIME showEarliestTimeAdjustedMsg
    </query>
    <earliest>$tokTime.earliest$</earliest>
    <latest>$tokTime.latest$</latest>
    <done>
      <set token="earliestTime">$result.info_min_time$</set>
      <set token="latestTime">$result.info_max_time$</set>
      <eval token="showTimeAdj">$result.showEarliestTimeAdjustedMsg$</eval>
    </done>
  </search>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-7mon</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <html depends="$showTimeAdj$">
        <div>
          <b>Earliest time allowed can not be older than 6 months. Time adjusted!!!</b>
        </div>
      </html>
      <table>
        <search>
          <query>| makeresults 
| fields - _time 
| eval EarliestTime=strftime($earliestTime$,"%Y/%m/%d %H:%M:%S"), LatestTime=strftime($latestTime$,"%Y/%m/%d %H:%M:%S")</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</form>

Do upvote the answers if they assist you!

[andrewtrobec]

@niketn This is a great alternative, thank you for taking the time!  For my use case I need it to be JS based because there are some additional operations that I need to perform.

[niketn]

May I know those additional tasks for JS, that can not be performed in Simple XML. I can surely help you with JS but a bit later (possibly over weekend).

[andrewtrobec]

@niketn Appreciate your availability, but I've already got the other parts sorted.  I'm working on some ACL type data visibility mechanisms through JS so that users can't exploit Splunk's default features to access data that they shouldn't.

Best regards,

Andrew

[niketn]

Understood. Yes granular restrictions can be applied via JS. If users don't have access to edit Simple XML then even my proposal would also work. Consider this, if someone can edit the XML then they can also remove the JS script from bein called. from the dashboard.