Dashboards & Visualizations

Issue with image overlay on background

swaroop_splunk_
New Member

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

0 Karma
1 Solution

niketn
Legend

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

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

View solution in original post

0 Karma

niketn
Legend

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

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

swaroop_splunk_
New Member

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

0 Karma

niketn
Legend

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

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

swaroop_splunk_
New Member

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

0 Karma

niketn
Legend

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.

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

swaroop_splunk_
New Member

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.

0 Karma

niketn
Legend

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.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

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