Hello Everyone,
I'm trying to (based on dashboard Image Overlay with Single Value from Splunk Dashboard Example app) make a dashboard, where results of searches will have different font color depends on value from search.
For now I have:
XML
<dashboard stylesheet="layout.css">
<label>Dash</label>
<description>Display workflow status visually using an image, and grouped single value elements.</description>
<fieldset autoRun="true" submitButton="false">
<input type="time" searchWhenChanged="true">
<default>
<earliest>-15m</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<search id="V7">
<query>index=main sourcetype="test" Name="V7"
|eval status = case(Value=="False", "Close",Value=="True", "Open")
|table status
|head 1</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<progress>
<set token="V7">$result.status$</set>
</progress>
</search>
<panel id="image_overlay_panel">
<html>
<div class="ingestion_pipeline">
<div class="image"/>
<div class="singleValue" id="V7">$V7$</div>
</html>
</panel>
</row>
</dashboard>
CSS
.ingestion_pipeline {
position: relative;
width: 1220px;
height: 840px;
}
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/static/app/simple_xml_examples/v2.png');
position: relative;
top: 0px;
left: 300px;
width: inherit;
height: inherit;
}
.singleValue {
font-size: 1em;
font-weight: bold;
}
#image_overlay_panel #V7 {
color: #003399;
position: absolute;
top: 748px;
left: 367px;
}
Search work fine, but do you have any idea how to change font color for example when it is True then font is green, but when it is False font is red?
Any thoughts?
Thanks in advance.
@Sethi90, instead of using a separate CSS File use hidden <html> <panel>
with <style>
tag to apply CSS override. You can pass token to CSS being applied. Following is based on your existing dashboard code (un-tested but should work).
PS: css file layout.css refernce is removed since the same has been brought inside dashboard code as hidden html panel. Token $V7Color$
has also been created in the search for setting color to green
, red
or default to grey
based on search results. You can also print the token to ensure that it being set correctly or not.
<dashboard>
<label>Dash</label>
<description>Display workflow status visually using an image, and grouped single value elements.</description>
<search id="V7">
<query>index=main sourcetype="test" Name="V7"
|eval status = case(Value=="False", "Close",Value=="True", "Open")
|table status
|head 1</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<progress>
<set token="V7">$result.status$</set>
<eval token="V7Color">case($result.status|s$=="True","green",$result.status|s$=="False","red",true(),"grey")</eval>
</progress>
</search>
<fieldset autoRun="true" submitButton="false">
<input type="time" searchWhenChanged="true">
<default>
<earliest>-15m</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
.ingestion_pipeline {
position: relative;
width: 1220px;
height: 840px;
}
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/static/app/simple_xml_examples/v2.png');
position: relative;
top: 0px;
left: 300px;
width: inherit;
height: inherit;
}
.singleValue {
font-size: 1em;
font-weight: bold;
}
#image_overlay_panel div#V7 {
color: $V7Color$;
position: absolute;
top: 748px;
left: 367px;
}
</style>
</html>
</panel>
</row>
<row>
<panel id="image_overlay_panel">
<html>
<div class="ingestion_pipeline">
<div class="image"/>
<div class="singleValue" id="V7">$V7$</div>
</html>
</panel>
</row>
</dashboard>
Please try out and confirm!
@niketnilay thanks for reply, everything is ok. I should only change this part:
<eval token="V7Color">case($result.status|s$=="True","green",$result.status|s$=="False","red",true(),"grey")</eval>
to:
<eval token="V7Color">case($result.status$=="True","green",$result.status$=="False","red",true(),"grey")</eval>
and every works fine. Thanks a lot.
@Sethi90, instead of using a separate CSS File use hidden <html> <panel>
with <style>
tag to apply CSS override. You can pass token to CSS being applied. Following is based on your existing dashboard code (un-tested but should work).
PS: css file layout.css refernce is removed since the same has been brought inside dashboard code as hidden html panel. Token $V7Color$
has also been created in the search for setting color to green
, red
or default to grey
based on search results. You can also print the token to ensure that it being set correctly or not.
<dashboard>
<label>Dash</label>
<description>Display workflow status visually using an image, and grouped single value elements.</description>
<search id="V7">
<query>index=main sourcetype="test" Name="V7"
|eval status = case(Value=="False", "Close",Value=="True", "Open")
|table status
|head 1</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<progress>
<set token="V7">$result.status$</set>
<eval token="V7Color">case($result.status|s$=="True","green",$result.status|s$=="False","red",true(),"grey")</eval>
</progress>
</search>
<fieldset autoRun="true" submitButton="false">
<input type="time" searchWhenChanged="true">
<default>
<earliest>-15m</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
.ingestion_pipeline {
position: relative;
width: 1220px;
height: 840px;
}
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/static/app/simple_xml_examples/v2.png');
position: relative;
top: 0px;
left: 300px;
width: inherit;
height: inherit;
}
.singleValue {
font-size: 1em;
font-weight: bold;
}
#image_overlay_panel div#V7 {
color: $V7Color$;
position: absolute;
top: 748px;
left: 367px;
}
</style>
</html>
</panel>
</row>
<row>
<panel id="image_overlay_panel">
<html>
<div class="ingestion_pipeline">
<div class="image"/>
<div class="singleValue" id="V7">$V7$</div>
</html>
</panel>
</row>
</dashboard>
Please try out and confirm!