topic Issue with image overlay on background in Dashboards & Visualizations

Issue with image overlay on background

swaroop_splunk_ — Tue, 04 Sep 2018 05:51:10 GMT

I wanted to overlay an image on my dashboard with a green light or red light (depending on a search
result). I'm putting the images and CSS in a separate folder as shown in the code attachment.

My expected output is to have light under each rectangular box and color of the light depend on search query.

I did follow the link provided by @NiketNilay, but my output is not showing up. I have attached the output i m seeing. It looks like the CSS file is not being picked or the value is not picked. I m not sure where the problem is, any help would be really grateful.

> <form
> stylesheet="/static/app/BatchDashboard/images/custom_layout_overlay_icon_mod.css">
> <label>Image Overlay with
> icons</label>   <search
> id="ST_upstream_status">
>     <query>host="swaroops-MacBook-Pro.local"
> "Total Records processed" | stats
> count</query>
>     <earliest>$earliest$</earliest>
>     <latest>$latest$</latest>
>     <preview>
>       <!--No Data - Default Icon and Value-->
>       <condition match="$job.resultCount$==0">
>         <set token="ST_upstream_icon">redlight_mod1.png</set>
>         <set token="ST_upstream_value">0</set>
>       </condition>
>       <!--Else - Set Icon based on range and set value-->
>       <condition>
>         <eval token="ST_upstream_icon">case($result.count$&gt;=1
> ,"greenlight_mod1.png")</eval>
>         <set token="ST_upstream_value">$result.count$</set>
>       </condition>
>     </preview>   </search>  <panel id="image_overlay_panel">
>       <html>
>           <div class="ingestion_pipeline">
>               <div class="image"/>
>           
>               <img src="/static/app/BatchDashboard/images/redlight_mod1.png"/>
>               <div class="singleValue" id="ST_upstream_status">$ST_upstream_value$
>                 <img src="/static/app/BatchDashboard/images/$ST_upstream_icon$"/>
>               </div>
>               <div class="singleValue" id="SOA_status">$SOA_status_value$
>                 <img src="/static/app/BatchDashboard/images/$SOA_status_icon$"/>
>               </div>
>               <div class="singleValue" id="ST_downstream_status">$ST_downstream_value$
>                 <img src="/static/app/BatchDashboard/images/$ST_downstream_icon$"/>
>               </div>

I'm unable to post the output pic, so i can just say that the output is showing up as an image that i want, but then the green/blue light is not shown, and the value for ST_upstream etc is not at the desired location. Rather, it's at the bottom after the image.

I would be grateful for any help.

Thanks
Swaroop

Re: Issue with image overlay on background

niketn — Tue, 29 Sep 2020 21:08:02 GMT

@swaroop_splunk_demo

1) Place your css file at the following path: $SPLUNK_HOME/ets/apps/BatchDashboard/custom_layout_overlay_icon_mod.css

2) Then modify the stylesheet attribute in the <form> as following to test?

  <form> stylesheet="custom_layout_overlay_icon_mod.css">

PS: This may require Splunk Refresh/bump or Restart. Also clearing up of internet browser history.

Another option for you would be to remove CSS stylesheet dependency in the form and to copy the contents of css file custom_layout_overlay_icon_mod.css to a hidden <html> panel in existing form i.e.

<row depends="$alwaysHideCSSPanel$">
     <panel>
           <html>
                 <style>
                        <!-- Contents of custom_layout_overlay_icon_mod.css file goes here -->
                 </style>
           </html>
     </panel>
</row>

PS: Since the above code brings in the CSS code to your dashboard, you would not require Splunk restart/refresh and browser history cleanup while testing 🙂

Please try out one of the approach and confirm!

Re: Issue with image overlay on background

swaroop_splunk_ — Tue, 29 Sep 2020 21:06:49 GMT

Hello Niket,
I tried both the process you mentioned and i see the CSS file is being picked up.
Thanks a ton for that.
But I m still facing the issue of the value not showing up nor the green or red light getting displayed. All it shows is something like :

$ST_upstream_value$ and instead of image its showing as a ? mark in blue box.

I am new to Splunk/HTML coding and i think the logic below is not getting executed.

<search id="ST_upstream_status">
    <query>host="swaroops-MacBook-Pro.local" "Total Records processed" | stats count</query>
    <earliest>$earliest$</earliest>
    <latest>$latest$</latest>
    <preview>
      <!--No Data - Default Icon and Value-->
      <condition match="'job.resultCount'==0">
        <set token="ST_upstream_icon">redlight_mod1.png</set>
        <set token="ST_upstream_value">0</set>
      </condition>
      <!--Else - Set Icon based on range and set value-->
      <condition>
        <eval token="ST_upstream_icon">case($result.count$>=1 ,"greenlight_mod1.png")</eval>
        <set token="ST_upstream_value">$result.count$</set>
      </condition>
    </preview>
  </search>

I have put the png file int he correct location as specified int he code.
Also "host="swaroops-MacBook-Pro.local" "Total Records processed" | stats count" is giving me a count when i m using it in search area of splunk.

I would be grateful if you can help me on this

Re: Issue with image overlay on background

niketn — Tue, 04 Sep 2018 12:52:00 GMT

2nd approach does not use CSS file so it should work. I will see if I can add a run anywhere example for that.

Re: Issue with image overlay on background

swaroop_splunk_ — Tue, 04 Sep 2018 19:41:37 GMT

Not sure if this matters , but i m using splunk 6.2.14 version. Will it make any difference ?

Re: Issue with image overlay on background

niketn — Wed, 05 Sep 2018 18:01:49 GMT

I am not sure whether Image Overlay and html panels in Simple XML existed in 6.2 or not. Unfortunately I wont be able to test 6.2 and Splunk Dashboard Examples app lists from 6.4 and above. So,

1) You might have to reach out to Splunk Support or
2) Try out examples from Simple XML Dashboard Examples app to see whether they work.

Other options would be to:

1) Convert to HTML Dashboard
2) Use Advanced XML which is deprecated now but should work with 6.2.

Re: Issue with image overlay on background

swaroop_splunk_ — Tue, 29 Sep 2020 21:13:16 GMT

Hi @niketn , i was able to add the traffic light using the Example App. Thanks a ton for the recommendation. However i ll need one more urgent help please. I have a demo this Thursday and I'm not able to figure out the way.
My code for adding an image to dashboard is using the CSS approach that you had provided. My code is as follows :

  <row>
    <panel id="image_overlay_panel">
      <title>PA63 File flow Status across IS layer</title>

      <html>
         <style>
           .ingestion_pipeline {
               position: relative;
               width: 1200px;
               height: 500px;
           }
           #image_overlay_panel .image{
               background: transparent 50% 50% no-repeat url('/static/app/BatchDashboard/images/Splunk_new.png');
               position:absolute;
               top: 0px;
               left: 0px;
               width: inherit;
               height: inherit;
           }
           .singleValue {
               font-size: 2em;
               font-weight: bold;
           }
           #image_overlay_panel #FR_ST_upstream {
              position: absolute;
              top: 128px;
              left: 154px;
           }
           #image_overlay_panel #FR_SOA {
              position: absolute;
              top: 129px;
              left: 435px;
           }
           #image_overlay_panel #FR_ST_downstream {
              position: absolute;
              top: 130px;
              left: 726px;
           }
           #image_overlay_panel #TP_ST_upstream {
              position: absolute;
              top: 278px;
              left: 435px;
           }
           #image_overlay_panel #TP_SOA {
              position: absolute;
              top: 277px;
              left: 718px;
           }
           #image_overlay_panel #TP_ST_downstream {
              position: absolute;
              top: 277px;
              left: 999px;
           }

         </style>
         <div class="ingestion_pipeline">
             <div class="image"/>


             <div class="singleValue" id="FR_ST_upstream">100</div>
             <div class="singleValue" id="FR_SOA">100</div>
             <div class="singleValue" id="FR_ST_downstream">20</div>
             <div class="singleValue" id="TP_ST_upstream">100</div>
             <div class="singleValue" id="TP_SOA">100</div>
             <div class="singleValue" id="TP_ST_downstream">20</div>
         </div>
       </html>
    </panel>
  </row>

But i need to have values for id TP_SOA or FR_ST_upstream based on a search result not a constant value as mentioned above. How can i achieve this ?
My search query will be different for for different ID but the base will be :

 <searchTemplate>
  host="swaroops-MacBook-Pro.local" "Total Records processed" 
  | stats count
  </searchTemplate>

Please help me on this or provide any suggestion.

Thanks in advance.

Re: Issue with image overlay on background

niketn — Tue, 11 Sep 2018 13:49:21 GMT

Refer to my other answer to one of your questions that Search Event Handler is not available in Splunk Enterprise 6.2

https://answers.splunk.com/answers/685488/can-i-use-jobresultcount-in-splunk-6214-1.html

You would need to use Simple XML JS extension or Splunk Advanced XML (which has already been deprecated) to access Search results and display them in your dashboard.

Since this is for a demo. May I know why upgrading to more recent Splunk Enterprise Release is not possible? Upgrading would simplify your Use case and you would be able to get more community support as well.