How does the time picker change the query in a dashboard URL without explicitly passing the tokens to the search?

[neiljpeterson]

So in the App: Splunk 6.x Dashboard Examples app ( Which btw is the AWESOMEST app, especially for beginners. The best way to learn IMHO) in the Time Picker Form Input Element there is an example of a time picker that does not seem to pass the time to the search in any way, but the time values end up in the URL anyways in the form of ?earliest=-24h%40h&latest=now

However in the documentation it shows using

<earliestTime>$time_tok.earliest$</earliestTime>
<latestTime>$time_tok.latest$</latestTime>

Which is more explicit and what I prefer. But I am wondering why/how the following seems to work in the examples.

---

Time Picker Form Input Element

https://splunk.web/en-US/app/simple_xml_examples/simple_form_time

<form>
  <label>Time Picker Form Input Element</label>
  <description>Top Sourcetypes by Time Period using Time Picker</description>
  <fieldset autoRun="true" submitButton="false">
    <input type="time" searchWhenChanged="true">
      <label>Select a time:</label>
      <default>Last 24 hours</default>
    </input>
  </fieldset>
  <row>
    <chart>
      <title>Chart of Top Sourcetypes between $earliest$ and $latest$</title>
      <searchString>index=_internal | top limit=100 sourcetype | eval percent = round(percent,2)</searchString>
      <option name="charting.chart">pie</option>
    </chart>
    <table>
      <title>Table of Top Sourcetypes between $earliest$ and $latest$</title>
      <searchString>index=_internal | top limit=100 sourcetype | eval percent = round(percent,2)</searchString>
    </table>
  </row>
</form>

---

[isfleming]

It might be obvious to others but as I am new it wasn't to me. I had to change the format of the original dashboard panel.

Original was:

  <row>
    <panel>
      <chart>
        <title>JVM Memory Usage</title>
        <search>
          <query>index=apm sourcetype=perflog host=$myhost$ | timechart max(total_jvm_free_memory) max(total_jvm_memory)</query>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>

The search and query blocks had to be changed to the searchString block as per the provided example in order for the time range to work. Here is the final working version.

  <row>
    <panel>
      <chart>
        <title>JVM Memory Usage</title>
        <searchString>index=apm sourcetype=perflog host=$myhost$ | timechart max(total_jvm_free_memory) max(total_jvm_memory)</searchString>
          <earliestTime>$time_tok1.earliest$</earliestTime>
          <latestTime>$time_tok1.latest$</latestTime>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>

[somesoni2]

If you're using a single 'input type="time"' without specifying any token (which is being set to 'time_tok' in the example in documentation), you don't have to explicitly use to specify 'earliestTime' and 'latestTime'. If you want to use different timerange picker for different panels, then you can define tokens for each input time and use them explicitly.

E.g. (Time Picker Form Input Element - modified)

<form>
  <label>Time Picker Form Input Element</label>
  <description>Top Sourcetypes by Time Period using Time Picker</description>
  <fieldset autoRun="true" submitButton="false">
    <input type="time"  token="time_tok1" searchWhenChanged="true">
      <label>Select a time:</label>
      <default>Last 24 hours</default>
    </input>
    <input type="time" token="time_tok2" searchWhenChanged="true">
      <label>Select a time:</label>
      <default>Last 4 hours</default>
    </input>
  </fieldset>
  <row>
    <chart>
      <title>Chart of Top Sourcetypes between $time_tok1.earliest$ and $time_tok1.latest$</title>
      <searchString>index=_internal | top limit=100 sourcetype | eval percent = round(percent,2)</searchString>
      <earliestTime>$time_tok1.earliest$</earliestTime>
        <latestTime>$time_tok1.latest$</latestTime>
      <option name="charting.chart">pie</option>
    </chart>
    <table>
      <title>Table of Top Sourcetypes between $time_tok2.earliest$ and $time_tok2.latest$</title>
      <searchString>index=_internal | top limit=100 sourcetype | eval percent = round(percent,2)</searchString>
      <earliestTime>$time_tok2.earliest$</earliestTime>
        <latestTime>$time_tok2.latest$</latestTime>
    </table>
  </row>
</form>

[anwarmian]

I really want to thank neiljpeterson and somesoni2 to post this. I was struggling with the time range picker to work on my dashboard. This post has really helped me.

[tavor999]

dito, great post