Input dropdowns not populated when base search is used and submitButton=true

[Mohit2k1]

Have a dashboard where have a timer input, drop down 1 (DD1) depends on timer input, multi-select drop down 2 (DD2) depends on  DD1. Once all the input is provided, user hits on "Submit" button and the resulting chart should be displayed.

All of this works well as long as separate search queries are used in each one of them. Once the timer changes, DD1 is searched and values are displayed. Once DD1 is selected, DD2 search starts, and corresponding values are displayed. All goes well. 

Here's a working example:

<form version="1.1" theme="light">
  <label>Technical - HTTP Metrics</label>
  <fieldset submitButton="true" autoRun="false">
    <input type="time" token="time_duration_token" searchWhenChanged="false">
      <label>Select a time range</label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="dropdown" token="service_name_token" searchWhenChanged="false">
      <label>Select microservice</label>
      <fieldForLabel>source</fieldForLabel>
      <fieldForValue>source</fieldForValue>
      <search>
        <query>
          index="cloud_world" | spath source | search event.logger="*CustomLoggingMeterRegistry*" | rex field=event.message "(?&lt;metric_name&gt;[a-z.]+)" | search metric_name="http.server.requests" | dedup source
        </query>
        <earliest>$time_duration_token.earliest$</earliest>
        <latest>$time_duration_token.latest$</latest>
      </search>
    </input>
    <input type="multiselect" token="http_uri_multiselect_token" searchWhenChanged="false">
      <label>Select URI</label>
      <fieldForLabel>http_uri</fieldForLabel>
      <fieldForValue>http_uri</fieldForValue>
      <search>
        <query>
          index="cloud_world" | spath source
          | search source=$service_name_token|s$ event.logger="*CustomLoggingMeterRegistry*" 
          | rex field=event.message "(?&lt;metric_name&gt;.*){.*,status=(?&lt;http_status&gt;[\d]{3}),uri=(?&lt;http_uri&gt;.*)}.*mean=(?&lt;mean_time&gt;[\d.]+)s\smax=(?&lt;max_time&gt;[\d.]+)"
          | search metric_name="http.server.requests"
          | top http_uri
        </query>
        <earliest>$time_duration_token.earliest$</earliest>
        <latest>$time_duration_token.latest$</latest>
      </search>
      <delimiter>,</delimiter>
      <valueSuffix>"</valueSuffix>
      <valuePrefix>"</valuePrefix>
    </input>
    <input type="checkbox" token="http_status_token">
      <label>Select HTTP status</label>
      <choice value="&quot;200&quot;, &quot;201&quot;">2xx</choice>
      <choice value="&quot;400&quot;, &quot;401&quot;">4xx</choice>
      <delimiter> </delimiter>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Mean time by URI</title>
      <chart>
        <title>Mean time</title>
        <search>
          <query>
            index="cloud_world" | spath source
          | search source=$service_name_token|s$ event.logger="*CustomLoggingMeterRegistry*" 
          | rex field=event.message "(?&lt;metric_name&gt;.*){.*,status=(?&lt;http_status&gt;[\d]{3}),uri=(?&lt;http_uri&gt;.*)}.*mean=(?&lt;mean_time&gt;[\d.]+)s\smax=(?&lt;max_time&gt;[\d.]+)"
          | search metric_name="http.server.requests"
          | where http_uri in($http_uri_multiselect_token$) AND http_status in($http_status_token$)
          | chart max(mean_time) over _time by http_uri usenull=f useother=false
        </query>
        </search>
        <option name="charting.axisTitleX.text">Time</option>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.text">Time (in ms)</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">collapsed</option>
        <option name="charting.chart">line</option>
        <option name="charting.chart.nullValueMode">connect</option>
        <option name="charting.chart.showDataLabels">minmax</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.legend.placement">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>

If you see, the same searches are used everywhere, hence I decided to use base search in input dropdown as below:

<form version="1.1" theme="light">
  <label>Technical - HTTP Metrics</label>
  <search id="httpMetricsBaseSearch">
    <query>
      index="cloud_world"
      | spath source 
      | search event.logger="*CustomLoggingMeterRegistry*"
      | rex field=event.message "(?&lt;metric_name&gt;[a-z.]+){(?&lt;metric_dimensions&gt;.*)}\s(?&lt;metric_measurements&gt;.*)"
      | search metric_name="http.server.requests"
      | rex field=metric_dimensions "status=(?&lt;http_status&gt;[\d]{3}),uri=(?&lt;http_uri&gt;.*)" 
      | rex field=metric_measurements "mean=(?&lt;mean_time&gt;[\d.]+)s\smax=(?&lt;max_time&gt;[\d.]+)"
      | table source, http_uri, http_status, max_time, mean_time, _time
    </query>
    <earliest>$time_duration_token.earliest$</earliest>
    <latest>$time_duration_token.latest$</latest>
  </search>
  <fieldset submitButton="true" autoRun="false">
    <input type="time" token="time_duration_token" searchWhenChanged="false">
      <label>Select a time range</label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="dropdown" token="service_name_token" searchWhenChanged="false">
      <label>Select microservice</label>
      <fieldForLabel>source</fieldForLabel>
      <fieldForValue>source</fieldForValue>
      <search base="httpMetricsBaseSearch">
        <query>
          | dedup source
        </query>
      </search>
    </input>
    <input type="multiselect" token="http_uri_multiselect_token" searchWhenChanged="false">
      <label>Select URI</label>
      <fieldForLabel>http_uri</fieldForLabel>
      <fieldForValue>http_uri</fieldForValue>
      <search base="httpMetricsBaseSearch">
        <query>
          | where source=$service_name_token|s$ | dedup http_uri
        </query>
      </search>
      <delimiter>,</delimiter>
      <valueSuffix>"</valueSuffix>
      <valuePrefix>"</valuePrefix>
    </input>
    <input type="checkbox" token="http_status_token">
      <label>Select HTTP status</label>
      <choice value="&quot;200&quot;, &quot;201&quot;">2xx</choice>
      <choice value="&quot;400&quot;, &quot;401&quot;">4xx</choice>
      <delimiter> </delimiter>
    </input>
  </fieldset>
</form>

In this case, if I change the time from time picker, the "Select service" dropdown is not researched. This used to happen, when searches were different. But after using base search, this just doesn't work.

It actually starts to search, once the "Submit" button is clicked, but I want to reserve that for "final" submit, i.e. when user has provided all his inputs. 

Is there a way to fix this, or is it that base search are not supposed to be used in input searches when submitButton="true" ?

[datadevops]

Hi there,

Here's a breakdown of the issue and potential solutions:

Understanding the Issue:

• Base Search and Submit Button: When using a base search within a form with submitButton="true", dependent inputs won't automatically refresh when tokens they rely on change. This is because the base search is only executed when the "Submit" button is clicked.

Solutions:

1. Trigger Base Search Manually:

   • Add a change event handler to the time picker input using JavaScript.
   • Inside the handler, manually trigger a search for the dependent dropdown using splunkjs.mvc.Components.getInstance("service_name_token").startSearch().

2. Separate Searches for Dependent Inputs:

   • Remove the base search from the dependent dropdowns.
   • Reintroduce separate searches for each, ensuring they use tokens from the time picker and any other relevant inputs. This will trigger searches automatically when tokens change.

3. Consider Alternatives to Submit Button:

   • If immediate updates are crucial for all inputs, explore removing the submit button and relying on automatic token-based searches.
   • If a final submit action is still needed, use a separate button or trigger.

Additional Recommendations:

• Review Token Dependencies: Double-check that tokens are correctly referenced in dependent searches.
• Test Thoroughly: Implement changes in a testing environment before deploying to production.
• Consult Documentation: Refer to Splunk's documentation for more details on base searches and form behavior: <invalid url documentation splunk ON docs.splunk.com>

Choose the solution that best aligns with your dashboard's requirements and desired user experience.

~ If the reply helps, a Karma upvote would be appreciated