Splunk Enterprise

How to add image to splunk single value panel?

karthi25
Path Finder

Am working on Splunk xml, I need to add image to a single value panel. The image needs to change based on the results. I know that we can use html tag inside the panel , but I want to have image in a single value panel because I need to drilldown to other panel when I click on that image.

When I tried by setting background image , the result of the single value panel query is getting overrided with image as below
alt text

Can anyone please help me with some solutions.

0 Karma
1 Solution

vnravikumar
Champion

Hi @karthi25

Try the following code, it will set a background image based on the result. If it's not satisfied your requirement please give more information.

<dashboard>
  <label>testsingle</label>
  <row>
    <panel>
      <html>
        <style>
          #test{
             background-image:$path$  !important;
          }
        </style>
      </html>
      <single id="test">
        <search>
          <query>index="_internal" |stats count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <done>
            <condition match="'result.count' <200">
              <set token="path">url("/static/app/search/appLogo.png")</set>
            </condition>
            <condition match="'result.count' >=201">
              <set token="path">url("/static/app/search/appIcon.png")</set>
            </condition>
          </done>
        </search>
        <option name="drilldown">all</option>
        <drilldown>
          <link target="_blank">http://google.com</link>
        </drilldown>
      </single>
    </panel>
  </row>
</dashboard>

View solution in original post

niketn
Legend

@karthi25 are you interested in images or icons to be displayed? Is drilldown the only reason for you to have single value panel? Can you have jQuery based drilldown (if so Status Indicator and html panel both would work)?

Here is an example from one of older answers of mine on similar approach: https://answers.splunk.com/answers/590581/refresh-data-in-table-by-collecting-token-on-click.html

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

karthi25
Path Finder

I have added opacity and z-index it was working fine. Thanks

0 Karma

nickhills
Ultra Champion

If you want to use an Icon (and want to change that Icon based on the results) have you looked at:
https://splunkbase.splunk.com/app/3119/

You can use any of the 5000 icons from Font Awesome:
https://fontawesome.com/icons?from=io

If my comment helps, please give it a thumbs up!

vnravikumar
Champion

Hi @karthi25

Try the following code, it will set a background image based on the result. If it's not satisfied your requirement please give more information.

<dashboard>
  <label>testsingle</label>
  <row>
    <panel>
      <html>
        <style>
          #test{
             background-image:$path$  !important;
          }
        </style>
      </html>
      <single id="test">
        <search>
          <query>index="_internal" |stats count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <done>
            <condition match="'result.count' <200">
              <set token="path">url("/static/app/search/appLogo.png")</set>
            </condition>
            <condition match="'result.count' >=201">
              <set token="path">url("/static/app/search/appIcon.png")</set>
            </condition>
          </done>
        </search>
        <option name="drilldown">all</option>
        <drilldown>
          <link target="_blank">http://google.com</link>
        </drilldown>
      </single>
    </panel>
  </row>
</dashboard>

karthi25
Path Finder

@vnravikumar I don't have permission to add any images directly to splunk "/static/app/search" directory. Is there any way to upload the image from splunk UI.

0 Karma

vnravikumar
Champion

Hi @karthi25

Try by going to Manage Apps then click on Edit properties in your respective app. In Upload asset choose the required image and click save

0 Karma

karthi25
Path Finder

@vnravikumar It works, but the image is not properly setting its bigger in size, also the values in the single panel is also showing , i want only the image based on the value.

0 Karma

vnravikumar
Champion

Can you please upload the image

0 Karma

karthi25
Path Finder

Yes. I have updated my question.

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