hi! I've seen @niketnilay 's example of image overlay with single values, and I tried applying it on my own usecase. Successfully I was able to put put my own image and single value panel, however, what I want is for the panels to change based on my set conditions, but when I applied it the colors are not changing bit the it displays the correct value. below is my xml code:
@mdmaala I am taking first query as an example. Does not seem like you are using any existing field or token from search which can be used as color for visualization. So you need to create the same first.
<search id="M1">
<query>|savedsearch rename1
|sort 1 -_time Machine1
|streamstats window=1 current=f last(_time) as prevTime last(Green) as RUN last(Yellow) as IDLE last(Red) as STOP by Username
|eval clock = time()
|eval rDUR = round((clock-_time)/60)
|eval RunTime = case(Green=1,rDUR,Yellow=1,rDUR,Red=1,rDUR,1=1,0)
|eval range= case(Green=1,"low", Yellow=1,"elevated", Red=1,"severe"),
color= case(Green=1,"green", Yellow=1,"yellow", Red=1,"red"),
|table RunTime range color</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<progress>
<set token="M1">$result.RunTime$</set>
<set token="M1Color">$result.color$</set>
</progress>
</search>
On similar lines change M2 search
and create token M2Color
.
Finally set the color in the HTML div using background
color for font color
. I have listed examples of each of these below. Use as per your need.
<div class="singleValue" style="background:$M1Color$;color:white;" id="M1">$M1$</div>
<div class="singleValue" style="color:$M2Color$" id="M2">$M2$</div>
@mdmaala I am taking first query as an example. Does not seem like you are using any existing field or token from search which can be used as color for visualization. So you need to create the same first.
<search id="M1">
<query>|savedsearch rename1
|sort 1 -_time Machine1
|streamstats window=1 current=f last(_time) as prevTime last(Green) as RUN last(Yellow) as IDLE last(Red) as STOP by Username
|eval clock = time()
|eval rDUR = round((clock-_time)/60)
|eval RunTime = case(Green=1,rDUR,Yellow=1,rDUR,Red=1,rDUR,1=1,0)
|eval range= case(Green=1,"low", Yellow=1,"elevated", Red=1,"severe"),
color= case(Green=1,"green", Yellow=1,"yellow", Red=1,"red"),
|table RunTime range color</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<progress>
<set token="M1">$result.RunTime$</set>
<set token="M1Color">$result.color$</set>
</progress>
</search>
On similar lines change M2 search
and create token M2Color
.
Finally set the color in the HTML div using background
color for font color
. I have listed examples of each of these below. Use as per your need.
<div class="singleValue" style="background:$M1Color$;color:white;" id="M1">$M1$</div>
<div class="singleValue" style="color:$M2Color$" id="M2">$M2$</div>
thank you so much @niketnilay ! i think this already works for me 🙂
Awesome 🙂 Yay!!!
<dashboard stylesheet="overlay.css">
<label>Machines</label>
<fieldset autoRun="true" submitButton="false">
<input type="time" searchWhenChanged="true">
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row>
<panel id="image_overlay_panel">
<search id="M1">
<query>|savedsearch rename1
|sort 1 -_time Machine1
|streamstats window=1 current=f last(_time) as prevTime last(Green) as RUN last(Yellow) as IDLE last(Red) as STOP by Username
|eval clock = time()
|eval rDUR = round((clock-_time)/60)
|eval RunTime = case(Green=1,rDUR,Yellow=1,rDUR,Red=1,rDUR,1=1,0)
|eval range= case(Green=1,"low", Yellow=1,"elevated", Red=1,"severe")
|table RunTime range</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<progress>
<set token="M1">$result.RunTime$</set>
</progress>
</search>
<search id="M2">
<query>|savedsearch rename2
|sort 1 -_time Machine1
|streamstats window=1 current=f last(_time) as prevTime last(Green) as RUN last(Yellow) as IDLE last(Red) as STOP by Username
|eval clock = time()
|eval rDUR = round((clock-_time)/60)
|eval RunTime = case(Green=1,rDUR,Yellow=1,rDUR,Red=1,rDUR,1=1,0)
|eval range= case(Green=1,"low", Yellow=1,"elevated", Red=1,"severe")
|table RunTime range</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<progress>
<set token="M2">$result.RunTime$</set>
</progress>
</search>
<html>
<div class="ingestion_pipeline">
<div class="image"></div>
<div class="singleValue" id="M1">$M1$</div>
<div class="singleValue" id="M2">$M2$</div>
</div>
</html>
</panel>
</row>
</dashboard>
Converted code to comment so that question is not marked as answered.
@mdmaala while posting code on Splunk Answers use the Code Button (101010 or shortcut Ctrl+K)
so that special characters do not escape.
A screenshot of what you currently have and what you expect would also help. Please mock/anonymize and sensitive information in your code/data shared.
I now posted below my xml code
hi at @niketnilay sure I will repost my code here. however I will not be able to post a screenshot of my codes, since I do not have enough points.
@mdmaala you can always post the image on any image sharing site like imgur
and then use the Image button <img> or shortcut Ctrl+G
to post the image using the image URL. Ensure that you mask/anonymize any sensitive information before posting the same.
i'll take note of this for the next time! 🙂