Dashboards & Visualizations

Set a dashboard token based on applied range color of single value panel

Cuyose
Builder

I am trying to work on a Dashboard that used the depends and condition tags to dynamically show or hide panels based on certain criteria. This is fairly simple based on the results count or something within the query itself, however what about something that is applied based on the resulting charting values applied of the panel based on the search results?

I want to basically end up with a multiselect where users can select panels to display based on the range color applied tot he panel.

this is what I would like to work, but I am having a tough time finding a definitive argument list for this operation. where "rangeColor" is the color applied to the panel based on the option name="rangeColors" attribute."

<progress>
        <condition match="'rangeColor'==&quot;0x65a637&quot;">
              <set token="panel_show">true</set>
            </condition>
        <condition>
              <unset token="panel_show"></unset>
            </condition>
</progress>
0 Karma

gvmorley
Contributor

Hi,

Rather than trying to use the range colour, could you not use the field/value which is driving the colour?

If you're search looked like this:

| makeresults
| fields - _time
| eval test=101
| stats sum(test) as my_result

You can access the value in the field my_result with $result.my_result$

In a condition block, you could use it like this to set a token for your depends panels:

<done>
    <condition match=" $result.my_result$ > 100">
        <set token="show_panel">true</set>
    </condition>
    <condition>
        <unset token="show_panel"></unset>
    </condition>
</done>

To see how that would look in a working example, you could paste this as source into a new Dashboard to play with:

<form>
  <label>Test - Single Value</label>
  <fieldset submitButton="false">
    <input type="radio" token="tok_input" searchWhenChanged="true">
      <label>Pick a number</label>
      <choice value="10">10</choice>
      <choice value="51">51</choice>
      <choice value="101">101</choice>
      <default>10</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults
| fields - _time
| eval test=$tok_input$
| stats sum(test) as my_result</query>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match=" $result.my_result$ > 100">
              <set token="show_panel">true</set>
            </condition>
            <condition>
              <unset token="show_panel"></unset>
            </condition>
          </done>
        </search>
        <option name="colorBy">value</option>
        <option name="rangeColors">["0x65a637","0x6db7c6","0xf7bc38","0xf58f39","0xd93f3c"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <title>Check Token for Condition</title>
      <html>
          <p>Token 'show_panel': $show_panel$</p>
        </html>
    </panel>
  </row>
  <row>
    <panel depends="$show_panel$">
      <title>'Depends' Panel</title>
      <html>
        <h1>Only show me if result > 100</h1>
      </html>
    </panel>
  </row>
</form>

I'm not sure if that's exactly what you want, but it may give you a few more ideas.

  • Example where value is <100 and colour is 'blue':

alt text

  • Example where value is >100 and colour is 'red'. The additional panel is now shown:

alt text

0 Karma

Cuyose
Builder

Thanks for you very detailed solution, I will definitely be able to implement this in places, however the panels I am using are displaying trend data over time, so using the stats, while it would work (I tried that earlier), it removes the trendline from the panel.

Another reason I wanted to use the range color, is that the dashboard will be showing many similar panels for endpoints, however the range for panels all will be different but assigned the same green/yellow/red colors.

So basically the checkboxes driving this filter would be
1)show healthy endpoints
2)show endpoints in warning
3)show endpoints in critical

0 Karma

gvmorley
Contributor

Ah,

OK, I think I'm with you now.

So you're driving your single panel elements with timechart, so that you can get a timeline.

One option then, is to create another field in the search for these panels and use this in the conditional match, to set the panel depends token.

So something like this:

        <search>
          <query>| makeresults
| eval test=$tok_input$
| append [| makeresults
| eval test=1
| eval _time=_time-86400]
| timechart span=1d sum(test) as my_result
| eventstats latest(my_result) as latest</query>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match=" $result.latest$ &gt; 100">
              <set token="show_panel">true</set>
            </condition>
            <condition>
              <unset token="show_panel"></unset>
            </condition>
          </done>
        </search>

Try that in the example above and see if it works for you. Then maybe adapt the logic to fit into your scenario.

0 Karma

gvmorley
Contributor

And finally,

This might be closer to what you want, but I'm pretty sure that it won't scale (if terms of configuration overhead) if you've got a lot of single panels.

You can set an eval / case statement in each single panel search to set the 'range'.

Again, this really is just a bit of a workaround to look at a different approach; probably not ideal for what you want.

But paste it into a blank dashboard and see if it helps:

<form>
  <label>Test - Single Value  2</label>
  <fieldset submitButton="false">
    <input type="radio" searchWhenChanged="true" token="tok_level">
      <label>Pick a Level to Display</label>
      <choice value="all">All</choice>
      <choice value="low">Healthy</choice>
      <choice value="medium">Warning</choice>
      <choice value="high">High</choice>
      <default>All</default>
      <change>
        <condition match=" $value$ == $single_1_result$ ">
          <set token="show_single_1">true</set>
          <unset token="show_single_2"></unset>
          <unset token="show_single_3"></unset>
        </condition>
        <condition match=" $value$ == $single_2_result$ ">
          <set token="show_single_2">true</set>
          <unset token="show_single_1"></unset>
          <unset token="show_single_3"></unset>
        </condition>
        <condition match=" $value$ == $single_3_result$ ">
          <set token="show_single_3">true</set>
          <unset token="show_single_1"></unset>
          <unset token="show_single_2"></unset>
        </condition>
        <condition match=" $value$ == &quot;all&quot; ">
          <set token="show_single_1">true</set>
          <set token="show_single_2">true</set>
          <set token="show_single_3">true</set>
        </condition>
        <condition>
          <unset token="show_single_1"></unset>
          <unset token="show_single_2"></unset>
          <unset token="show_single_3"></unset>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <single id="single_1" depends="$show_single_1$">
        <search>
          <query>
            <![CDATA[| makeresults
| eval test=30
| append [| makeresults
| eval test=1
| eval _time=_time-86400]
| timechart span=1d sum(test) as my_result
| eventstats latest(my_result) as latest
| eval level=case(latest<=30,"low",latest<=70,"medium",latest>=71,"high")]]>
          </query>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match=" $result.level$ == &quot;low&quot;">
              <set token="single_1_result">low</set>
            </condition>
            <condition match=" $result.level$ == &quot;medium&quot;">
              <set token="single_1_result">medium</set>
            </condition>
            <condition match=" $result.level$ == &quot;high&quot;">
              <set token="single_1_result">high</set>
            </condition>
          </done>
        </search>
        <option name="colorBy">value</option>
        <option name="rangeColors">["0x65a637","0x6db7c6","0xf7bc38","0xf58f39","0xd93f3c"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="useColors">1</option>
      </single>
      <single id="single_2" depends="$show_single_2$">
        <search>
          <query>
            <![CDATA[| makeresults
| eval test=70
| append [| makeresults
| eval test=1
| eval _time=_time-86400]
| timechart span=1d sum(test) as my_result
| eventstats latest(my_result) as latest
| eval level=case(latest<=30,"low",latest<=70,"medium",latest>=71,"high")]]>
          </query>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match=" $result.level$ == &quot;low&quot;">
              <set token="single_2_result">low</set>
            </condition>
            <condition match=" $result.level$ == &quot;medium&quot;">
              <set token="single_2_result">medium</set>
            </condition>
            <condition match=" $result.level$ == &quot;high&quot;">
              <set token="single_2_result">high</set>
            </condition>
          </done>
        </search>
        <option name="colorBy">value</option>
        <option name="rangeColors">["0x65a637","0x6db7c6","0xf7bc38","0xf58f39","0xd93f3c"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="useColors">1</option>
      </single>
      <single id="single_3" depends="$show_single_3$">
        <search>
          <query>
            <![CDATA[| makeresults
| eval test=101
| append [| makeresults
| eval test=1
| eval _time=_time-86400]
| timechart span=1d sum(test) as my_result
| eventstats latest(my_result) as latest
| eval level=case(latest<=30,"low",latest<=70,"medium",latest>=71,"high")]]>
          </query>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match=" $result.level$ == &quot;low&quot;">
              <set token="single_3_result">low</set>
            </condition>
            <condition match=" $result.level$ == &quot;medium&quot;">
              <set token="single_3_result">medium</set>
            </condition>
            <condition match=" $result.level$ == &quot;high&quot;">
              <set token="single_3_result">high</set>
            </condition>
          </done>
        </search>
        <option name="colorBy">value</option>
        <option name="rangeColors">["0x65a637","0x6db7c6","0xf7bc38","0xf58f39","0xd93f3c"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <title>Check Token for Condition</title>
      <html>
          <div>Token 'tok_level': $tok_level$</div>
          <hr></hr>
          <div>Token 'single_1_result': $single_1_result$</div>
          <div>Token 'single_2_result': $single_2_result$</div>
          <div>Token 'single_3_result': $single_3_result$</div>
          <hr></hr>
          <div>Token 'show_single_1': $show_single_1$</div>
          <div>Token 'show_single_2': $show_single_2$</div>
          <div>Token 'show_single_3': $show_single_3$</div>
        </html>
    </panel>
  </row>
</form>
0 Karma

Cuyose
Builder

Sorry I have been swamped. I am going to try this now and see if I can make things work. Thanks!

0 Karma

frobinson_splun
Splunk Employee
Splunk Employee

Hi @Cuyose,
When you mentioned this:
"I am having a tough time finding a definitive argument list for this operation"

Could you provide more details on what you're looking for? Are you trying to find more info on using "condition match=..."?

Also, I'm not 100% sure that this kind of event handling will work inside the "progress" element. You might have to put it inside a "done" element for when the search is done running. Just a guess--you'd need to experiment a bit with different search events.

0 Karma

Cuyose
Builder

It sounds like you are understanding my issue. I used the "progress" example, as it was taken from a working condition when it was keying off of the result count condition.

I want to instead be able to toggle panels on and off based on the rangeColor applied to the result.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...