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!

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

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