Solved: How to add image to splunk single value panel?

karthi25 · ‎03-11-2019

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

Can anyone please help me with some solutions.

vnravikumar · ‎03-11-2019

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 · ‎03-11-2019

@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!!!"

karthi25 · ‎03-12-2019

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

nickhills · ‎03-11-2019

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 · ‎03-11-2019

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 · ‎03-12-2019

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

vnravikumar · ‎03-12-2019

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

karthi25 · ‎03-12-2019

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

vnravikumar · ‎03-12-2019

Can you please upload the image

karthi25 · ‎03-12-2019

Yes. I have updated my question.

How to add image to splunk single value panel?

Cloud Platform | Customer Change Announcement: Email Notification Will Be Available ...

Mastering Synthetic Browser Testing: Pro Tips to Keep Your Web App Running Smoothly

Splunk Edge Processor | Popular Use Cases to Get Started with Edge Processor