Dashboards & Visualizations

JavaScript not working when using multiple tokens

PavelNed
Explorer

Hi guys,

I am currently struggling with making JS work at dashboard. My idea is to have a line graph with some data and add another line based on button clicked. I have set of buttons in html. When clicked, it calls JS function and changes token (token_foo) value to given string, which is then used in graph search. Well, this part works just fine. Until...

Now let's say I would like to color these buttons based on other tokens. Once I do it, buttons get the right color, but suddenly refuse to call the JS function. The same happens when I try to display token value by <p>$foo_color$</p>.

Shortened XML code:

 

<row>    
<panel>
      <html>
        <input type="button" id="foo" value="Foo" style="background-color:$foo_color$"/>
        <input type="button" id="boo" value="Boo" style="background-color:$boo_color$"/>
       </html>
    </panel>
  </row>
  <row>
    <panel>
      <event>
        <search>
          <done>
            <condition match="'job.resultCount' == 0">
              <set token="foo_color">#00FF00</set>
            </condition>
            <condition match="'job.resultCount' &gt; 0">
              <set token="foo_color">#FF0000</set>
            </condition>
          </done>
          <query>index="foo_index"</query>
          <earliest>$time_picker.earliest$</earliest>
          <latest>$time_picker.latest$</latest>
        </search>
        <option name="list.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </event>
    </panel>
  </row>

 

 What am I missing?

Thanks.

Labels (1)
0 Karma
1 Solution

PavelNed
Explorer

Managed to sort it out by using more js and css.

In js I watch "foo_color" token and when changed, it appends class to "foo", which has either green or red color in it.

Shortened example in js:

var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:foo_color", function () {
   if (defaultTokenModel.get("foo_color" == "Faulty" && !($("#foo").hasClass('faulty'))) {
     $("#foo").addClass('faulty');
   } else if ($("#foo").hasClass('faulty')) {  
      $("#foo").removeClass('faulty');
   }
});

 

View solution in original post

0 Karma

PavelNed
Explorer

Managed to sort it out by using more js and css.

In js I watch "foo_color" token and when changed, it appends class to "foo", which has either green or red color in it.

Shortened example in js:

var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:foo_color", function () {
   if (defaultTokenModel.get("foo_color" == "Faulty" && !($("#foo").hasClass('faulty'))) {
     $("#foo").addClass('faulty');
   } else if ($("#foo").hasClass('faulty')) {  
      $("#foo").removeClass('faulty');
   }
});

 

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...