topic Re: Javascript basesplunkview token update problem in Dashboards & Visualizations

Javascript basesplunkview token update problem

mathu — Wed, 18 Jun 2014 11:25:28 GMT

I've implemented a Splunk 6 javascript extension for a SimpleXML panel to show custom drilldown links for charts, tables, etc. The javascript dynamically inserts the link into the HTML DOM on page loading.

The extension basically works (when the page loads), but if I use dropdown tokens, my drilldown link disappears.

Here is the javascript code

define(function(require, exports, module) {
    var _ = require('underscore');
    var mvc = require('splunkjs/mvc');
    var BaseSplunkView = require("splunkjs/mvc/basesplunkview");
    require("css!./linksearch.css");

    var LinkSearch = BaseSplunkView.extend({
        options: {
            managerid: null,
            searchstring: null
        },

        initialize: function(options) {
          this.configure();
          this.$div = $('<div></div>');
          this.settings.on("change:searchstring", this.render, this);
        },

        render: function() {
          this.$div.appendTo(this.$el);
          var uri = "https://splunksh/en-US/app/example-app/";
          var searchstring = this.settings.get('searchstring');
          var query = "search?q=search%20"+encodeURIComponent(searchstring);
          var link = uri+query;
          var a = $('<a>').attr("href", link).text("Link to Details");
          a.appendTo(this.$div);
          return this;
        },
    });
    return LinkSearch;
});

and here is the Simple XML snippet

[...]
<html id="panel1">
  <h2>my panel</h2>
  <div id="htmlcontent" 
        class="splunk-view" 
        data-require="app/example-app/components/htmlcontent/linksearch" 
        data-options='{
              "managerid":    "link-manager",
              "app_name":     "example-app",
              "searchstring": "index=test source=$source$ host=$host$"
     }'/>
</html>
[...]

On a token-update, the DOM changes, but my render function does not get called.. why?

kind regards
Mathias

Re: Javascript basesplunkview token update problem

dfoster_splunk — Wed, 18 Jun 2014 17:42:17 GMT

Token replacement does not work inside HTML element attributes, such as in the "data-options" attribute above.

I'd recommend instantiating the custom view manually from a JS extension instead. For example:

Simple XML snippet:

<html id="panel1">
    <div id="htmlcontent"></div>
</html>

JS Extension:

require([
    'app/example-app/components/htmlcontent/linksearch', 'jquery', 'splunkjs/ready!'
], function(LinkSearch, $, mvc) {
    new LinkSearch({
        el: $('#htmlcontent'),
        managerid: 'link-manager',
        app_name: 'example-app',
        searchstring: mvc.tokenSafe('index=test source=$source$ host=$host$')
    }).render();
});

Re: Javascript basesplunkview token update problem

mathu — Thu, 19 Jun 2014 07:12:30 GMT

There is a way to use token replacement inside HTML panels. Have a look at:
http://answers.splunk.com/answers/109260/splunk6-custom-html-visualization-not-updating-if-form-input-changes

The trick is to use type "token_safe" and two dollar signs ($$token$$) for a token replacement instead of just one ($token$)

Re: Javascript basesplunkview token update problem

mathu — Thu, 19 Jun 2014 07:16:24 GMT

.. found the answer by myself

using double dollar signs in the simple xml and listen to the correct on-change event

[..]
this.settings.on("change:searchstring", this.render, this);
[..]


[..]
<html id="panel1">
  <div id="htmlcontent" 
        class="splunk-view" 
        data-require="app/jmx_ta/components/htmlcontent/linksearch" 
        data-options='{
            "managerid":    "link-manager",
        "app_name":     "jmx_ta",
        "searchstring": {"type": "token_safe", "value": "index=test source=$$source$$ host=$$host$$"}
     }'/>
</html>
[..]

Re: Javascript basesplunkview token update problem

ppablo — Thu, 19 Jun 2014 18:04:40 GMT

Hi @mathu

Glad you found your solution! Please be sure to accept your answer so other Splunk users with similar issues can refer to this post for help.

Patrick