Dashboards & Visualizations

Single Value Decorations through inline code

splunkomon
Engager

I'm trying to develop on Splunk Enterprise a dashboard panel , where according to the range in which a single value result to a search is, the panel will display a success symbol (e.g. large red filled circle) with the result value next to it in red coloured font or a an error symbol (e.g. large green filled circle) with the result value in green coloured font next to it. It should be capable of adding link for drilldown.

The idea is to have a simplified panel with traffic light effect (green for all good and red for errors) for monitoring use case.  The Single Value Decorations  examples using "single_decorations.css" shown in https://www.splunk.com/en_us/blog/tips-and-tricks/shiny-icons.html is exactly what I'm looking for, but I since I cannot install apps I need an alternative. How to achieve a similar effect with inline code would be perfect.

Limitations: I do not have access to asset upload or app installation (I can't upload css/js files to the app so thus far I've been using inline css code).

Labels (6)
Tags (1)
0 Karma
1 Solution

splunkomon
Engager

I've learned that this can be done through additional search queries and adding the in text symbol as a "Unit". All through inline code and CSS was not needed after all.

Example:

<panel>
      <title>Add Text Symbol as Unit</title>
      <single>
        <title>Success Test</title>
        <search>
          <query>| makeresults | eval count=0 | eval unit=if(count=0, "🗸", "⚠")</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
          <done>
            <condition>
              <set token="p1v1unit">$result.unit$</set>
            </condition>
          </done>
        </search>
        <option name="colorBy">value</option>
        <option name="drilldown">all</option>
        <option name="field">count</option>
        <option name="rangeColors">["0x53a051","0xdc4e41"]</option>
        <option name="rangeValues">[0]</option>
        <option name="unit">$p1v1unit$</option>
        <option name="unitPosition">before</option>
        <option name="useColors">1</option>
        <drilldown>
          <link target="_blank">DRILLDOWNLINK</link>
        </drilldown>
      </single>
      <single>
        <title>Failure Test</title>
        <search>
          <query>| makeresults | eval count=33 | eval unit=if(count=0, "🗸", "⚠")</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
          <done>
            <condition>
              <set token="p1v2unit">$result.unit$</set>
            </condition>
          </done>
        </search>
        <option name="colorBy">value</option>
        <option name="drilldown">all</option>
        <option name="field">count</option>
        <option name="rangeColors">["0x53a051","0xdc4e41"]</option>
        <option name="rangeValues">[0]</option>
        <option name="unit">$p1v2unit$</option>
        <option name="unitPosition">before</option>
        <option name="useColors">1</option>
        <drilldown>
          <link target="_blank">DRILLDOWNLINK</link>
        </drilldown>
      </single>
    </panel>

 

View solution in original post

0 Karma

splunkomon
Engager

I've learned that this can be done through additional search queries and adding the in text symbol as a "Unit". All through inline code and CSS was not needed after all.

Example:

<panel>
      <title>Add Text Symbol as Unit</title>
      <single>
        <title>Success Test</title>
        <search>
          <query>| makeresults | eval count=0 | eval unit=if(count=0, "🗸", "⚠")</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
          <done>
            <condition>
              <set token="p1v1unit">$result.unit$</set>
            </condition>
          </done>
        </search>
        <option name="colorBy">value</option>
        <option name="drilldown">all</option>
        <option name="field">count</option>
        <option name="rangeColors">["0x53a051","0xdc4e41"]</option>
        <option name="rangeValues">[0]</option>
        <option name="unit">$p1v1unit$</option>
        <option name="unitPosition">before</option>
        <option name="useColors">1</option>
        <drilldown>
          <link target="_blank">DRILLDOWNLINK</link>
        </drilldown>
      </single>
      <single>
        <title>Failure Test</title>
        <search>
          <query>| makeresults | eval count=33 | eval unit=if(count=0, "🗸", "⚠")</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
          <done>
            <condition>
              <set token="p1v2unit">$result.unit$</set>
            </condition>
          </done>
        </search>
        <option name="colorBy">value</option>
        <option name="drilldown">all</option>
        <option name="field">count</option>
        <option name="rangeColors">["0x53a051","0xdc4e41"]</option>
        <option name="rangeValues">[0]</option>
        <option name="unit">$p1v2unit$</option>
        <option name="unitPosition">before</option>
        <option name="useColors">1</option>
        <drilldown>
          <link target="_blank">DRILLDOWNLINK</link>
        </drilldown>
      </single>
    </panel>

 

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