topic Re: How to add custom option to a panel? in Dashboards & Visualizations

How to add custom option to a panel?

zeinstein — Tue, 14 Feb 2017 18:03:30 GMT

For Splunk 6.3.5 custom option things like:

<option name="thisIsACustomThingy">true</option>

and then using it in a js extension like:

element.options.thisIsACustomThingy

worked. Unfortunately I cannot have it do the same in 6.5.1. For the simple xml part it says "unknown option", and the js cannot find this options member, either. Any ideas on this?

Thanks!

Re: How to add custom option to a panel?

rjthibod — Mon, 20 Feb 2017 11:44:34 GMT

SplunkJS v1.4 (which is SplunkJS in 6.5) definitely changed the structure of the Chart objects. The entire options attribute is totally different, and the functions settings.set() and settings.get() seem to either not work the same way or expect something else from the old way of getting the charting options.

I can't find any documentation or explanation of how to access the options like you used to, so my fear is that this may have been deprecated.

Re: How to add custom option to a panel?

alacercogitatus — Tue, 21 Feb 2017 13:58:47 GMT

I discovered this as well. We managed to get around it using data tags. Since you don't have any other code available, we will make some assumptions. Let's say you have a chart. It's id is configured as my_chart. I then created a panel such as this:

<panel><html><div id="my_chart_settings" style="display:none;" data-thisisacustomthingy="true" /> </html></panel>

This item will store the "custom" settings for that chart. Now, in your extension JS, you can reference the data tags.

_(mvc.Components.toJSON()).chain().filter(function(el){
         var myId = $(el).attr("id"),
                custom_settings = $("#" + myId + "_settings").data();
         var my_option = custom_settings["thisisacustomthingy"];
});

Without knowing much more than what you have presented, I can't say for certain that this will work 100% out of box. But it should get you starting point. It is more obtuse, but still gives you options.

Find me on Slack/IRC if you want to discuss in real time.

Re: How to add custom option to a panel?

alacercogitatus — Tue, 21 Feb 2017 13:59:50 GMT

I contacted the Devs behind the SplunkJS, and they were unaware 1) that is was possible to do that, and 2) people were doing that. The settings are now much stricter than before, which puts us out of luck.

Re: How to add custom option to a panel?

zeinstein — Tue, 28 Feb 2017 17:26:31 GMT

Neat, I'll try it, thanks!
(Btw, all the option name things work if I convert my whole dashboard to HTML.)

Re: How to add custom option to a panel?

zeinstein — Tue, 28 Feb 2017 17:28:09 GMT

That's strange. I mean, it sounds like the new SplunkJS has less possibilities now than the previous one had... Thanks for contacting the Devs and letting me know this!

Re: How to add custom option to a panel?

zeinstein — Wed, 01 Mar 2017 11:53:22 GMT

Hey, so I've tried the following:

require([
    'jquery',
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, _, mvc) {
    _(mvc.Components.toJSON()).chain().each(function(el) {
        console.log($(el).attr("id"));
    });
});

but it's not giving me anything for

<dashboard script="test.js">
  <label>test</label>
  <row>
    <panel>
      <title>Test</title>
      <chart id="my_chart">
        <search>
          <query>index=_internal | stats count by sourcetype</query>
          <earliest>-1d@d</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="height">357</option>
      </chart>
      <html id="my_chart_settings">
        <div style="display:none;" data-thisisacustomthingy="true" />
      </html>
    </panel>
  </row>
</dashboard>

I could get close to data-thisisacustomthingy by

_(mvc.Components.toJSON()).chain().filter(function(el){
    if(el.id && (el.id.match(/_settings$/) != null)) { return el;}
}).each(function(el){
    console.log(el.$(el).prevObject[0].children[0].firstChild);
(...)

but that looks so ugly (and it's not even there yet...).

Re: How to add custom option to a panel?

alacercogitatus — Wed, 01 Mar 2017 12:37:16 GMT

so yeah, do that 😄

_(mvc_chain_function){
          return el;
}.each(function(el) {
    var elId = el.settings.get("id"),
           data =  $("#" + elId + "_settings").data();
 /// do stuff with data
});

And your div needs to be:

<div id="my_chart_settings" data-thisisacustomthingy="true" />

Don't name the HTML panel, name the element with the data.

Re: How to add custom option to a panel?

zeinstein — Wed, 01 Mar 2017 15:51:25 GMT

Omg, it works. Thank you so much! 🙂