Minimal working example (part 1): <form>
<label>minimalWorkingExample</label>
<description>for splunk question</description>
<fieldset submitButton="false">
<input type="time" token="date_range" searchWhenChanged="true">
<label>Date Range</label>
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
<input type="dropdown" token="env" searchWhenChanged="true">
<label>Stage</label>
<choice value="prd">Production</choice>
<choice value="tst">Test</choice>
<default>prd</default>
<initialValue>prd</initialValue>
</input>
<input type="dropdown" token="project" searchWhenChanged="true">
<label>Project</label>
<choice value="all">All</choice>
<choice value="project-one">ONE</choice>
<choice value="project-two">TWO</choice>
<change>
<condition value="all">
<set token="project-one">true</set>
<set token="project-two">true</set>
<unset token="project-not-all"></unset>
</condition>
<condition value="project-one">
<set token="project-one">true</set>
<set token="project-not-all">true</set>
<unset token="project-two"></unset>
</condition>
<condition value="project-two">
<set token="project-two">true</set>
<set token="project-not-all">true</set>
<unset token="project-one"></unset>
</condition>
</change>
<initialValue>all</initialValue>
<default>all</default>
</input>
<html>
<style>
/* Colors:
https://material.io/design/color/#tools-for-picking-colors
*/
div.html{
padding:0px !important;
}
h1, h2, h3{
margin:0px !important;
padding:20px !important;
}
h1.one{
background-color:#039BE5 !important; /* blue 600 */
}
h2.one{
background-color:#29B6F6 !important; /* blue 400 */
}
h3.one{
background-color:#81D4FA !important; /* blue 200 */
}
h1.two{
background-color:#9E9E9E !important; /* grey 500 */
}
h2.two{
background-color:#BDBDBD !important; /* grey 400 */
}
h3.two{
background-color:#E0E0E0 !important; /* grey 300 */
}
h3.help {
padding-bottom:0px !important;
}
p.help {
padding: 0px 20px 0px 20px !important;
}
</style>
</html>
</fieldset>
<![CDATA[
# ========================================================
# ONE
# ========================================================
# -->
]]>
<row depends="$project-one$">
<panel>
<html>
<h2 class="one">
Project One
</h2>
</html>
</panel>
</row>
<row depends="$project-one$">
<panel>
<title>Component XXX - stage: $env$</title>
<chart>
<search>
<query>| makeresults | eval _time=1595203200, RUNNING=1, ERROR=0, MISSING_LOGS=0
| append [ makeresults | eval _time=1595206800, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595210400, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595214000, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595217600, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595221200, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595224800, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595228400, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595232000, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595235600, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595239200, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595242800, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| fields _time, RUNNING, MISSING_LOGS, ERROR
</query>
<earliest>$date_range.earliest$</earliest>
<latest>$date_range.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.visibility">collapsed</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.abbreviation">none</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.abbreviation">none</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.abbreviation">none</option>
<option name="charting.axisY2.enabled">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">column</option>
<option name="charting.chart.bubbleMaximumSize">50</option>
<option name="charting.chart.bubbleMinimumSize">10</option>
<option name="charting.chart.bubbleSizeBy">area</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.showDataLabels">none</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">stacked100</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">none</option>
<option name="charting.fieldColors">{"ERROR":0xdc4e41, "RUNNING":0x53a051, "MISSING_LOG":0xFFFF00}</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">right</option>
<option name="charting.lineWidth">2</option>
<option name="height">107</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</chart>
</panel>
<panel>
<title>Component YYY - stage: $env$</title>
<chart>
<search>
<query>| makeresults | eval _time=1595203200, RUNNING=1, ERROR=0, MISSING_LOGS=0
| append [ makeresults | eval _time=1595206800, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595210400, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595214000, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595217600, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595221200, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595224800, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595228400, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595232000, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595235600, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595239200, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| append [ makeresults | eval _time=1595242800, RUNNING=1, ERROR=0, MISSING_LOGS=0 ]
| fields _time, RUNNING, MISSING_LOGS, ERROR
</query>
<earliest>$date_range.earliest$</earliest>
<latest>$date_range.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.visibility">collapsed</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.abbreviation">none</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.abbreviation">none</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.abbreviation">none</option>
<option name="charting.axisY2.enabled">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">column</option>
<option name="charting.chart.bubbleMaximumSize">50</option>
<option name="charting.chart.bubbleMinimumSize">10</option>
<option name="charting.chart.bubbleSizeBy">area</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.showDataLabels">none</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">stacked100</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">none</option>
<option name="charting.fieldColors">{"ERROR":0xdc4e41, "RUNNING":0x53a051, "MISSING_LOG":0xFFFF00}</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">right</option>
<option name="charting.lineWidth">2</option>
<option name="height">107</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</chart>
</panel>
</row>
<row depends="$project-one$">
<panel>
<title>Component ZZZ - stage: $env$</title>
<chart>
<search>
<query>| makeresults | eval _time=1595203200, "0"=10, "1"=5, "2"=3
| append [ makeresults | eval _time=1595206800, "0"=20, "1"=23, "2"=7 ]
| append [ makeresults | eval _time=1595210400, "0"=30, "1"=35, "2"=10 ]
| append [ makeresults | eval _time=1595214000, "0"=0, "1"=40, "2"=15 ]
| append [ makeresults | eval _time=1595217600, "0"=5, "1"=0, "2"=26 ]
| append [ makeresults | eval _time=1595221200, "0"=7, "1"=15, "2"=28 ]
| append [ makeresults | eval _time=1595224800, "0"=9, "1"=23, "2"=0 ]
| append [ makeresults | eval _time=1595228400, "0"=12, "1"=27, "2"=3 ]
| append [ makeresults | eval _time=1595232000, "0"=0, "1"=0, "2"=7 ]
| append [ makeresults | eval _time=1595235600, "0"=6, "1"=6, "2"=17 ]
| append [ makeresults | eval _time=1595239200, "0"=10, "1"=15, "2"=39 ]
| append [ makeresults | eval _time=1595242800, "0"=50, "1"=35, "2"=60 ]
| fields _time, "0", "1", "2"
</query>
<earliest>$date_range.earliest$</earliest>
<latest>$date_range.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="charting.axisTitleX.visibility">collapsed</option>
<option name="charting.chart">line</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.drilldown">none</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.legend.placement">bottom</option>
<option name="refresh.display">progressbar</option>
</chart>
</panel>
</row>
... View more