Splunk Search

Image Overlay with Icons based on value

guimilare
Communicator

Hello Splunkers.

I know that I can have some single values over an image, as follows:
(example from Dashboards for Splunk 6.X).
alt text
However I need to display an icon based on values, instead of displying a single value.
For example, if my search returns 1, I should display an OK icon, if it returns any other value, it should display an Error icon, something like this:
alt text

Have anyone done this yet?
Is it possible?
I'm running a cluster environment with Splunk 6.3.2.

Thanks in advance!
Best regards,

Tags (1)
1 Solution

niketn
Legend

Hi,

Please find below changes to Simple XML Examples - Image Overlay with Single Values example, which will allow you to display dynamic images instead of values. As a pre-requisite, you should remove the boxes from splunk_indexing_pipeline.png to display icons dynamically instead and place it back under the same folder. Also create red_exclaim.png and green_check.png images and place them under your Splunk App's appserver\static folder i.e. same as the splunk_indexing_pipeline.png overlay image folder.

Since job.resultCount will allow you to set conditional tokens, change your Search to either return results(green) or no results(red). Within the search query define the following condition blocks in Search Preview :

    <preview>
      <condition match="'job.resultCount'==0">
        <set token="parsing_queue_icon">red_exclaim</set>
      </condition>
      <condition match="'job.resultCount'>0">
        <set token="parsing_queue_icon">green_check</set>
      </condition>
    </preview>

In the HTML Panel code i.e. inside <html> tag, after image is included add the following <img> tag to display dynamic red exclamation or green check icon.

      <html>
          <div class="ingestion_pipeline">
              <div class="image"></div>
              <div class="singleValue" id="parsing_queue"><img src="/static/app/simple_xml_examples/$parsing_queue_icon$.png"/></div>
              <!--similarly for other blocks -->
              <!--similarly for other blocks -->
              <!--similarly for other blocks -->
          </div>
      </html>

Please let me know if this does not work or further detail is required.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

Hi,

Please find below changes to Simple XML Examples - Image Overlay with Single Values example, which will allow you to display dynamic images instead of values. As a pre-requisite, you should remove the boxes from splunk_indexing_pipeline.png to display icons dynamically instead and place it back under the same folder. Also create red_exclaim.png and green_check.png images and place them under your Splunk App's appserver\static folder i.e. same as the splunk_indexing_pipeline.png overlay image folder.

Since job.resultCount will allow you to set conditional tokens, change your Search to either return results(green) or no results(red). Within the search query define the following condition blocks in Search Preview :

    <preview>
      <condition match="'job.resultCount'==0">
        <set token="parsing_queue_icon">red_exclaim</set>
      </condition>
      <condition match="'job.resultCount'>0">
        <set token="parsing_queue_icon">green_check</set>
      </condition>
    </preview>

In the HTML Panel code i.e. inside <html> tag, after image is included add the following <img> tag to display dynamic red exclamation or green check icon.

      <html>
          <div class="ingestion_pipeline">
              <div class="image"></div>
              <div class="singleValue" id="parsing_queue"><img src="/static/app/simple_xml_examples/$parsing_queue_icon$.png"/></div>
              <!--similarly for other blocks -->
              <!--similarly for other blocks -->
              <!--similarly for other blocks -->
          </div>
      </html>

Please let me know if this does not work or further detail is required.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

niketn
Legend

I have added the above solution to my Splunk Wiki.

Topic 1: Image Overlay with Icons Example: Extends Image Ovelay with Single Values example from Splunk 6.x Dashboard Examples Splunk App: http://wiki.splunk.com/User_talk:Niketnilay

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

guimilare
Communicator

Hi niketnilay,
I'll run some tests and let you know.
Thanks!

0 Karma

niketn
Legend

guimilare... Let me know if you need example files.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

guimilare
Communicator

In this example, job.resultCount count the number of results, right?
Not the value?

example:
My result is QTD=1. In this case, I want to show the green_check icon
If the result is QTD =2, I need to show the red_exclaim.

Ho to achieve that?

0 Karma

niketn
Legend

If you want to use job.resultCount you can change the search query to perform | search=QTD=1 in the end. That way job.resultCount will be >0 only when QTD is one. But this implies you need to have one base search with several post process queries like QTD=1, QTD=2. Which is not feasible for most scenarios and is a performance bottleneck.

This was the problem I was actually working on and solved myself. Please refer to the following answer thread and vote if it works for you as well. HINT : I used eval to match to set tokens instead of condition. However, job.resultCount will still be required becase eval will not work when there are no results and default values would still need to be set.

https://answers.splunk.com/answers/464037/how-to-change-image-dynamically-based-on-search-re.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

guimilare
Communicator

I'm doing this:

<panel>
      <title>CPU</title>
      <viz type="status_indicator_app.status_indicator">
        <title>CPU</title>
        <search>
          <query>index=os sourcetype=cpu host=skyblp* | stats avg(cpu) as usage by host | where usage &gt;= 0 | stats count</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
          <preview>
            <condition>
              <eval token="tipo">if(count=0, "text", "background")</eval>
              <eval token="icone">if(count=0, "info-circle", "warning")</eval>
              <eval token="cor">if(count=0, "#00FF00", "#FF0000")</eval>
            </condition>
          </preview>
        </search>
        <option name="status_indicator_app.status_indicator.showOption">2</option>
        <option name="status_indicator_app.status_indicator.icon">fix_icon</option>
        <option name="status_indicator_app.status_indicator.fixIcon">$icone$</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.colorBy">static_color</option>
        <option name="status_indicator_app.status_indicator.staticColor">$cor$</option>
        <option name="status_indicator_app.status_indicator.fillTarget">$tipo$</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
      </viz>
    </panel>

But, somehow, the if statement is not working

0 Karma

guimilare
Communicator

BTW, I'm now using Status Indicator to do this.

0 Karma

niketn
Legend

Sure. Status Indicator works fine. However, HTML dashabord allows you to build UI the way you want and place icons/values anywhere (not restricted to panels and rows :))

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

guimilare
Communicator

Ok, I've found the problem: I was missing the match and result terms:

 <panel>
      <title>CPU</title>
      <viz type="status_indicator_app.status_indicator">
        <search>
          <query>index=os sourcetype=cpu host=skyblp* | stats avg(cpu) as usage by host | where usage &gt;= 75 | stats count</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
          <preview>
            <condition match="'job.resultCount'&gt;0">
              <eval token="tipo1">if(result.count=0, "text", "background")</eval>
              <eval token="cor1">if(result.count=0, "#228B22", "#000000")</eval>
            </condition>
          </preview>
        </search>
        <option name="status_indicator_app.status_indicator.showOption">2</option>
        <option name="status_indicator_app.status_indicator.icon">fix_icon</option>
        <option name="status_indicator_app.status_indicator.fixIcon">server</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.colorBy">static_color</option>
        <option name="status_indicator_app.status_indicator.staticColor">$cor1$</option>
        <option name="status_indicator_app.status_indicator.fillTarget">$tipo1$</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
      </viz>
    </panel>

Its working properly now!
thanks for teh help!

0 Karma

guimilare
Communicator

Hi niketnilay,
It worked perfectly!
Thank you!

0 Karma

alvincruz29
Engager

Hi! Did you get this one resolved? If so, can you please share how you were able to do it?

0 Karma

niketn
Legend

alvincruz29 Please see if my response below solves your needs.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

guimilare
Communicator

Not yet....
Tried some workarounds, but no luck so far...

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