Solved: How to add custom option to a panel?

zeinstein · ‎02-14-2017

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!

alacercogitatus · ‎02-21-2017

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

alacercogitatus · ‎02-21-2017

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.

zeinstein · ‎02-28-2017

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

zeinstein · ‎03-01-2017

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

alacercogitatus · ‎03-01-2017

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.

zeinstein · ‎03-01-2017

Omg, it works. Thank you so much! 🙂

rjthibod · ‎02-20-2017

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.

alacercogitatus · ‎02-21-2017

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.

zeinstein · ‎02-28-2017

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!

How to add custom option to a panel?

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

Transform your security operations with Splunk Enterprise Security

Splunk Admins and App Developers | Earn a $35 gift card!