Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
Ask a Question
Solved! Jump to solution

How do you create two epoch-generating, on-submit, timepickers?

nick405060
Motivator
‎08-06-2019 03:07 PM

I'd like to implement two epoch-generating timepickers that update their earliest and latest tokens on-submit for separate buttons. I will accept any working solution where I can have two epoch-generating timepickers that do so.

However, I am guessing that the only solution to this question is to figure out, and fix, the fact that the <default> stanza breaks relative_time conversions per below.

Can anybody help me out here?

Obvious solution (with the broken default stanza):

 <form script="button_submit_portal.js">
   <label>Portal</label>
   <description></description>

   <search>
     <query>
 | makeresults | eval utc_earliest1=$earliest_epoch1$+7*60*60 | eval utc_latest1=$latest_epoch1$+7*60*60 | table utc_earliest1 utc_latest1
     </query>
     <preview>
       <set token="utc_earliest1">$result.utc_earliest1$</set>
       <set token="utc_latest1">$result.utc_latest1$</set>
     </preview>
   </search>
   <search>
     <query>
 | makeresults | eval utc_earliest2=$earliest_epoch2$+7*60*60 | eval utc_latest2=$latest_epoch2$+7*60*60 | table utc_earliest2 utc_latest2
     </query>
     <preview>
       <set token="utc_earliest2">$result.utc_earliest2$</set>
       <set token="utc_latest2">$result.utc_latest2$</set>
     </preview>
   </search>

   <row>
     <panel>
       <title>User Event Counts - Deduped by User, Minute ($events_count$)</title>
       <html depends="$hide$">
         <style>
           #submit_button1 {
             width:80px !important;
           }
           #submit_button1 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
             width:80px !important;
           }
           #submit_button1  button{
             padding: 6px 15px !important;
             border-radius: 3px !important;
             font-weight: 500 !important;
             background-color: #5cc05c !important;
             border: transparent !important;
             color: #fff !important;
           }
           #submit_button1  button:hover{
             background-color: #40a540 !important;
             border-color: transparent !important;
           }
         </style>
       </html>
       <input type="time" token="TIMERANGE1">
         <label>Period:</label>
         <default>
           <earliest>@d</earliest>
           <latest>now</latest>
         </default>
         <change>
           <eval token="earliest_epoch_onChange1">case(isnum($TIMERANGE1.earliest$), $TIMERANGE1.earliest$, $TIMERANGE1.earliest$=="now", time(), $TIMERANGE1.earliest$="", 0, true(), relative_time(time(), $TIMERANGE1.earliest$))</eval>
           <eval token="latest_epoch_onChange1">case(isnum($TIMERANGE1.latest$), $TIMERANGE1.latest$, $TIMERANGE1.latest$=="now", time(), true(), relative_time(time(), $TIMERANGE1.latest$))</eval>
         </change>
       </input>
       <input type="link" id="submit_button1">
         <label></label>
         <choice value="submit">Submit</choice>
       </input>
       <table>
         <search>
           <query>
 | makeresults
 | eval my_earliest_epoch_onChange1=strftime("$earliest_epoch_onChange1$","%Y-%m-%d %H:%M:%S") | eval my_latest_epoch_onChange1=strftime("$latest_epoch_onChange1$","%Y-%m-%d %H:%M:%S")
 | eval my_earliest_epoch_onSubmit1=strftime("$earliest_epoch1$","%Y-%m-%d %H:%M:%S") | eval my_latest_epoch_onSubmit1=strftime("$latest_epoch1$","%Y-%m-%d %H:%M:%S")
 | eval my_utc_earliest1=strftime("$utc_earliest1$","%Y-%m-%d %H:%M:%S") | eval my_utc_latest1=strftime("$utc_latest1$","%Y-%m-%d %H:%M:%S")
 | eval trigger="$submit_trigger1$" | table my_earliest_epoch_onChange1 my_latest_epoch_onChange1 my_earliest_epoch_onSubmit1 my_latest_epoch_onSubmit1 my_utc_earliest1 my_utc_latest1
           </query>
           <!--<earliest>$utc_earliest1$</earliest>
           <latest>$utc_latest1$</latest>-->
           <preview>
             <set token="events_count">$result._users_count$</set>
           </preview>
         </search>
         <option name="count">10</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">none</option>
         <option name="rowNumbers">false</option>
         <option name="wrap">true</option>
       </table>
     </panel>
   </row>
   <row>
     <panel>
       <title>Search ($search_count$)</title>
       <html depends="$hide$">
         <style>
           #search_textbox .splunk-textinput
           {
             width: 200px !important;
           }
           .fieldset .input{
             width:auto !important;
           }
           #submit_button2{
             width:80px !important;
           }
           #submit_button2 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
             width:80px !important;
           }
           #submit_button2  button{
             padding: 6px 15px !important;
             border-radius: 3px !important;
             font-weight: 500 !important;
             background-color: #5cc05c !important;
             border: transparent !important;
             color: #fff !important;
           }
           #submit_button2  button:hover{
             background-color: #40a540 !important;
             border-color: transparent !important;
           }
         </style>
       </html>
       <input type="time" token="TIMERANGE2">
         <label>Period:</label>
         <default>
           <earliest>@d</earliest>
           <latest>now</latest>
         </default>
         <change>
           <eval token="earliest_epoch_onChange2">case(isnum($TIMERANGE2.earliest$), $TIMERANGE2.earliest$, $TIMERANGE2.earliest$=="now", time(), $TIMERANGE2.earliest$="", 0, true(), relative_time(time(), $TIMERANGE2.earliest$))</eval>
           <eval token="latest_epoch_onChange2">case(isnum($TIMERANGE2.latest$), $TIMERANGE2.latest$, $TIMERANGE2.latest$=="now", time(), true(), relative_time(time(), $TIMERANGE2.latest$))</eval>
         </change>
       </input>
       <input type="text" token="network_id_onChange" id="search_textbox">
         <label>NetworkID:</label>
         <default></default>
       </input>
       <input type="link" id="submit_button2">
         <label></label>
         <choice value="submit">Submit</choice>
       </input>
       <table>
         <search>
           <query>
 | makeresults
 | eval my_earliest_epoch_onChange2=strftime("$earliest_epoch_onChange2$","%Y-%m-%d %H:%M:%S") | eval my_latest_epoch_onChange2=strftime("$latest_epoch_onChange2$","%Y-%m-%d %H:%M:%S")
 | eval my_earliest_epoch_onSubmit2=strftime("$earliest_epoch2$","%Y-%m-%d %H:%M:%S") | eval my_latest_epoch_onSubmit2=strftime("$latest_epoch2$","%Y-%m-%d %H:%M:%S")
 | eval my_utc_earliest2=strftime("$utc_earliest2$","%Y-%m-%d %H:%M:%S") | eval my_utc_latest2=strftime("$utc_latest2$","%Y-%m-%d %H:%M:%S")
 | eval trigger="$submit_trigger2$" | table my_earliest_epoch_onChange2 my_latest_epoch_onChange2 my_earliest_epoch_onSubmit2 my_latest_epoch_onSubmit2 my_utc_earliest2 my_utc_latest2
           </query>
           <!--<earliest>$utc_earliest2$</earliest>
           <latest>$utc_latest2$</latest>-->
           <preview>
             <set token="search_count">$result._count$</set>
           </preview>
         </search>
         <option name="count">10</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">none</option>
         <option name="rowNumbers">false</option>
         <option name="wrap">true</option>
       </table>
     </panel>
   </row>
 </form>

and

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var submittedTokens = mvc.Components.get("submitted");
     $("#submit_button1").click(function(){
         submittedTokens.set("submit_trigger1", ""+Math.random());
         submittedTokens.set("earliest_epoch1",submittedTokens.get("earliest_epoch_onChange1"));
         submittedTokens.set("latest_epoch1",submittedTokens.get("latest_epoch_onChange1"));
     });
     $("#submit_button2").click(function(){
         submittedTokens.set("submit_trigger2", ""+Math.random());
         submittedTokens.set("earliest_epoch2",submittedTokens.get("earliest_epoch_onChange2"));
         submittedTokens.set("latest_epoch2",submittedTokens.get("latest_epoch_onChange2"));
         submittedTokens.set("network_id2",submittedTokens.get("network_id_onChange"));
     });
 });

As mentioned the <default> stanza breaks this solution because it breaks the conversion to epoch in relative_time. I am not sure why relative_time accepts any $TIMERANGE1.earliest$ token to convert, but not the default $TIMERANGE1.earliest$ token. The funny thing is relative_time not accepting the default token doesn't just break the <eval token= and produce an error, but it actually just falsely produces "now" upon non-acceptance. So, the first time you use your timepicker, you'll get an "earliest time must be earlier than latest time" error.

Oh also this relative_time behavior does NOT occur using $earliest$ default values, just $TIMERANGE1.earliest$ default values.

Reply
1 Solution
Solved! Jump to solution
Solution

nick405060
Motivator
‎09-06-2019 05:05 PM

Timepicker tokens suck. Especially the default timepicker tokens. Here is a solution so that you can have two epoch-generating timepickers that function on-submit. 

 <form script="test.js">
   <label>test</label>

   <search>
     <query>
 | makeresults | addinfo | eval earliest_epoch=info_min_time+7*60*60 | eval latest_epoch=if(info_max_time="+Infinity",now()+7*60*60,info_max_time+7*60*60)
     </query>
     <earliest>$TIMERANGE1.earliest$</earliest>
     <latest>$TIMERANGE1.latest$</latest>
     <preview>
       <set token="utc_earliest_onChange1">$result.earliest_epoch$</set>
       <set token="utc_latest_onChange1">$result.latest_epoch$</set>
     </preview>
   </search>
   <search>
     <query>
 | makeresults | addinfo | eval earliest_epoch=info_min_time+7*60*60 | eval latest_epoch=if(info_max_time="+Infinity",now()+7*60*60,info_max_time+7*60*60)
     </query>
     <earliest>$TIMERANGE2.earliest$</earliest>
     <latest>$TIMERANGE2.latest$</latest>
     <preview>
       <set token="utc_earliest_onChange2">$result.earliest_epoch$</set>
       <set token="utc_latest_onChange2">$result.latest_epoch$</set>
     </preview>
   </search>

  <row>
    <panel>
      <title>title1</title>
      <input type="time" token="TIMERANGE1">
        <label>Period1:</label>
        <default>
          <earliest>@d</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="link" id="submit_button1">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>
      <table>
        <search>
          <query>
 | makeresults | eval myearliest=strftime("$utc_earliest1$","%Y-%m-%d %H:%M:%S") | eval mylatest=strftime("$utc_latest1$","%Y-%m-%d %H:%M:%S") | eval trigger="$submit_trigger1$" | table myearliest mylatest trigger
          </query>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="rowNumbers">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>

   <row>
     <panel>
       <title>title2</title>

       <input type="time" token="TIMERANGE2">
         <label>Period2:</label>
         <default>
           <earliest>@w</earliest>
           <latest>now</latest>
         </default>
       </input>
       <input type="link" id="submit_button2">
         <label></label>
         <choice value="submit">Submit</choice>
       </input>
       <table>
         <search>
           <query>
 | makeresults | eval myearliest=strftime("$utc_earliest2$","%Y-%m-%d %H:%M:%S") | eval mylatest=strftime("$utc_latest2$","%Y-%m-%d %H:%M:%S") | eval trigger="$submit_trigger2$" | table myearliest mylatest trigger
           </query>
         </search>
         <option name="count">10</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">none</option>
         <option name="rowNumbers">false</option>
         <option name="wrap">true</option>
       </table>
     </panel>
   </row>

 </form>

and

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var submittedTokens = mvc.Components.get("submitted");
     $("#submit_button1").click(function(){
         submittedTokens.set("submit_trigger1", ""+Math.random());
         submittedTokens.set("utc_earliest1",submittedTokens.get("utc_earliest_onChange1"));
         submittedTokens.set("utc_latest1",submittedTokens.get("utc_latest_onChange1"));
     });
     $("#submit_button2").click(function(){
         submittedTokens.set("submit_trigger2", ""+Math.random());
         submittedTokens.set("utc_earliest2",submittedTokens.get("utc_earliest_onChange2"));
         submittedTokens.set("utc_latest2",submittedTokens.get("utc_latest_onChange2"));
         submittedTokens.set("network_id",submittedTokens.get("network_id_onChange"));
     });
 });

View solution in original post

0 Karma
Reply
Solved! Jump to solution

woodcock
Esteemed Legend
‎09-10-2019 07:34 AM

Create 2 invisible panels, each directly referencing one or the other of the 2 timepicker tokens and use this search:

| makeresults | addinfo

Then use the EVAL- construct in each panels <final> section to set a global token with each of the $restult.info_earliest$ and $results.info_latest$ field/token values, which you can then use anywhere.

0 Karma
Reply
Solved! Jump to solution
Solution

nick405060
Motivator
‎09-06-2019 05:05 PM

Timepicker tokens suck. Especially the default timepicker tokens. Here is a solution so that you can have two epoch-generating timepickers that function on-submit. 

 <form script="test.js">
   <label>test</label>

   <search>
     <query>
 | makeresults | addinfo | eval earliest_epoch=info_min_time+7*60*60 | eval latest_epoch=if(info_max_time="+Infinity",now()+7*60*60,info_max_time+7*60*60)
     </query>
     <earliest>$TIMERANGE1.earliest$</earliest>
     <latest>$TIMERANGE1.latest$</latest>
     <preview>
       <set token="utc_earliest_onChange1">$result.earliest_epoch$</set>
       <set token="utc_latest_onChange1">$result.latest_epoch$</set>
     </preview>
   </search>
   <search>
     <query>
 | makeresults | addinfo | eval earliest_epoch=info_min_time+7*60*60 | eval latest_epoch=if(info_max_time="+Infinity",now()+7*60*60,info_max_time+7*60*60)
     </query>
     <earliest>$TIMERANGE2.earliest$</earliest>
     <latest>$TIMERANGE2.latest$</latest>
     <preview>
       <set token="utc_earliest_onChange2">$result.earliest_epoch$</set>
       <set token="utc_latest_onChange2">$result.latest_epoch$</set>
     </preview>
   </search>

  <row>
    <panel>
      <title>title1</title>
      <input type="time" token="TIMERANGE1">
        <label>Period1:</label>
        <default>
          <earliest>@d</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="link" id="submit_button1">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>
      <table>
        <search>
          <query>
 | makeresults | eval myearliest=strftime("$utc_earliest1$","%Y-%m-%d %H:%M:%S") | eval mylatest=strftime("$utc_latest1$","%Y-%m-%d %H:%M:%S") | eval trigger="$submit_trigger1$" | table myearliest mylatest trigger
          </query>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="rowNumbers">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>

   <row>
     <panel>
       <title>title2</title>

       <input type="time" token="TIMERANGE2">
         <label>Period2:</label>
         <default>
           <earliest>@w</earliest>
           <latest>now</latest>
         </default>
       </input>
       <input type="link" id="submit_button2">
         <label></label>
         <choice value="submit">Submit</choice>
       </input>
       <table>
         <search>
           <query>
 | makeresults | eval myearliest=strftime("$utc_earliest2$","%Y-%m-%d %H:%M:%S") | eval mylatest=strftime("$utc_latest2$","%Y-%m-%d %H:%M:%S") | eval trigger="$submit_trigger2$" | table myearliest mylatest trigger
           </query>
         </search>
         <option name="count">10</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">none</option>
         <option name="rowNumbers">false</option>
         <option name="wrap">true</option>
       </table>
     </panel>
   </row>

 </form>

and

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var submittedTokens = mvc.Components.get("submitted");
     $("#submit_button1").click(function(){
         submittedTokens.set("submit_trigger1", ""+Math.random());
         submittedTokens.set("utc_earliest1",submittedTokens.get("utc_earliest_onChange1"));
         submittedTokens.set("utc_latest1",submittedTokens.get("utc_latest_onChange1"));
     });
     $("#submit_button2").click(function(){
         submittedTokens.set("submit_trigger2", ""+Math.random());
         submittedTokens.set("utc_earliest2",submittedTokens.get("utc_earliest_onChange2"));
         submittedTokens.set("utc_latest2",submittedTokens.get("utc_latest_onChange2"));
         submittedTokens.set("network_id",submittedTokens.get("network_id_onChange"));
     });
 });
0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎09-07-2019 10:57 AM

@nick405060 relative_time accepts now(). In your case I think it would be easy for community to assist you if you provided your business use case, as in When Button 1 is clicked what should be updated as earliest and latest time in Time Picker 1? Similarly for Button 2 when it is clicked what should be the value of earliest and latest time you need in Time Picker 2? What does the UI look like or what kind of Time Picker control you are trying to build?

| makeresults
| eval _time=relative_time(now(),"-1d@d")
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution

nick405060
Motivator
‎09-06-2019 01:45 PM

You can delete the default stanza to solve this question, but would like a solution where you can have default values for two timepickers.

0 Karma
Reply
Solved! Jump to solution

DalJeanis
Legend
‎09-05-2019 10:21 AM

add a name to the input -

<input type="time" token="tok_time">

then instead of

isnum($earliest$)

use

isnum($tok_time.earliest$)

0 Karma
Reply
Solved! Jump to solution

nick405060
Motivator
‎09-05-2019 10:50 AM

Per the question, I did that. Does not work.

0 Karma
Reply
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Splunk Auto Ingestion Parallel Pipeline Scaling

Why this feature matters Many Splunk environments experience ingestion pressure long before the host is fully ...

Best Practices: Splunk auto adjust pipeline queue

When you enable autoAdjustQueue in Splunk, maxSize should be understood as the queue size Splunk starts with ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...