Dashboards & Visualizations

How to add custom option to a panel?

Path Finder

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!

0 Karma
1 Solution

SplunkTrust
SplunkTrust

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.

View solution in original post

SplunkTrust
SplunkTrust

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.

View solution in original post

Path Finder

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

0 Karma

Path Finder

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...).

0 Karma

SplunkTrust
SplunkTrust

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.

0 Karma

Path Finder

Omg, it works. Thank you so much! 🙂

0 Karma

Champion

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.

0 Karma

SplunkTrust
SplunkTrust

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.

0 Karma

Path Finder

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!

0 Karma