TimeRangeView properties in SearchBarView break co...

smichalski · ‎11-13-2020

Hey guys,

according to the Splunk documentation for compref_searchbar, the properties of the internal timerange created by the search bar are configurable via timerange_* (see URLs below) . However, when I try to set the dialogOptions property via timerange_dialogOptions (using the mypresetsettings example dictionary given in the documentation for compref_timerange), I get a JS exception within my SimpleXML dashboard:

common.js:1114 Uncaught TypeError: str.replace is not a function
    at Object.replaceTokens (common.js:1114)
    at Object.computeValue (common.js:1114)
    at child._pullPropertyValue (common.js:1114)
    at child._setBinding (common.js:1114)
    at common.js:1114
    at Function._.each._.forEach (common.js:1114)
    at child._updateBindingsForProperties (common.js:1114)
    at child.<anonymous> (common.js:1114)
    at triggerEvents (common.js:725)
    at child.trigger (common.js:725)
    at configure (dashboard.js:1178)
    at initialize (dashboard.js:1178)
    at Backbone.View (dashboard.js:669)
    at constructor (dashboard.js:1178)
    at child (dashboard.js:669)
    at _createTimeRange (dashboard.js:1178)

The basic example given in the WebFramework documention works fine otherwise. But once I try to limit the time range picker, it fails. Can anybody tell my, what (or if) I'm doing wrong? I've been trying Splunk 8.0.5 and 8.1.0 in the last version of Google Chrome - same result. The script is 1:1 identical with the documentation, except the timerange_* properties set.

I also tried defining it via the options and settings before rendering the search bar, but no visible effect. Probably, because porperties like dialogOptions or presets are only evaluated during the initialization phase, making subsequent changes useless.

EDIT from the 17-NOV-2020: After further investigations, I believe this is a bug, eventually happening in method _updateBindingsForProperties(): For some reasons, Splunk wants to replace tokens in the TimeRangeView properties when created by the SearchBarView . But once the passed property is an object or array (e. g. try passing timerange_foo: {} or timerange_foo: [] ), str.replace() will fail. Unfortunately, I may not file a bug report - would have to task a customer for this. But is any developer reading here to confirm my observation?

Dashboard: demo.xml

<form script="demo.js">
  <label>demo</label>
  <row>
    <panel>
      <html>
        <div id="mysearchbarview"></div>
      </html>
      <table>
        <search base="example-search">
          <query>| search *</query>
        </search>
      </table>
    </panel>
  </row>
</form>

Script: demo.js

require([
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/searchbarview",
    "splunkjs/mvc/simplexml/ready!"
], function(SearchManager, SearchBarView) {

    // Create the search manager
    var mysearch = new SearchManager({
        id: "example-search",
        status_buckets: 300,
        required_field_list: "*",
        preview: true,
        cache: true,
        autostart: false, // Prevent the search from running automatically
        search: "index=_internal | head 500" 
    });

    // Create the searchbar
    var mysearchbar = new SearchBarView({
        id: "example-searchbar",
        managerid: "example-search",
        timerange_earliest_time: "-24h@h",
        timerange_latest_time: "now",
        timerange_dialogOptions: {
          showPresets: false,
          showCustomRealTime: false,
          showCustomAdvanced:false
        },
        el: $("#mysearchbarview")
    }).render();

    // Listen for changes to the search query portion of the searchbar
    mysearchbar.on("change", function() {
        // Reset the search query (allows the search to run again,
        // even when the query is unchanged)
        mysearch.settings.unset("search");

        // Update the search query
        mysearch.settings.set("search", mysearchbar.val());

        // Run the search (because autostart=false)
        mysearch.startSearch();
    });

    // Listen for changes to the built-in timerange portion of the searchbar
    mysearchbar.timerange.on("change", function() {
        // Update the time range of the search
        mysearch.settings.set(mysearchbar.timerange.val()); 

        // Run the search (because autostart=false)
        mysearch.startSearch();
    });
});

https://docs.splunk.com/DocumentationStatic/WebFramework/1.5/compref_searchbar.html
https://docs.splunk.com/DocumentationStatic/WebFramework/1.5/compref_timerange.html

Thanks

TimeRangeView properties in SearchBarView break common.js - Bug?

simple XML

Splunk Web Framework

SplunkJS

Stay Connected: Your Guide to December Tech Talks, Office Hours, and Webinars!

Splunk and Fraud

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...