Hi. Does anyone know how to arrange a link list fieldset and status indicator viz side by side inside a panel? Each link list corresponds to one status located at the right panel. My goal is to place them side by side.
@welderbuilder based on the details provided, you can use Simple XML CSS extension to style as per your need. If you are not using Link input for any drilldown, you can use html panel instead for similar results. Refer to Splunk Dashboard Examples App for Custom Decorations using html panel (on similar lines, you can also use Image Overlay with Single Value for better data representation).
Following is Simple XML code with the run anywhere example as per the question and two options to get to desired results:
<form theme="dark">
<label>Input Status Side By Side</label>
<fieldset submitButton="false"></fieldset>
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
div[id^="panelLabelCheck"]{
height: 50px !important;
width: 20% !important;
}
div[id^="panelLabelCheck"] .dashboard-panel,
div[id^="panelStatusCheck"] .dashboard-panel{
margin-bottom: 0px !important;
}
div[id^="panelLabelCheck"] .dashboard-panel{
margin-right: 0px !important;
}
div[id^="panelStatusCheck"]{
width: 80% !important;
}
div[data-view="views/dashboard/form/Input"] label,
div[data-view="views/dashboard/form/Input"] .splunk-choice-input-message{
display:none !important;
}
div[id^="panelLabelCheck"] .dashboard-panel,
div[id^="panelStatusCheck"] .ui-resizable,
div[id^="panelStatusCheck"] .dashboard-panel{
height: 50px !important;
min-height: 50px !important;
}
div[id^="panelStatusCheck"] .ui-resizable-handle{
visibility: hidden !important;
}
div.splunk-status-indicator {
display: flex !important;
}
div.splunk-status-indicator i{
padding-top: 5px !important;
padding-left: 20px !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel>
<html>
<h3 style="text-align:center">Option 1: Status Indicator</h3>
</html>
</panel>
</row>
<row>
<panel id="panelLabelCheck1">
<input type="link" token="tokCheck1" searchWhenChanged="true">
<label></label>
<choice value="check1">Check1</choice>
</input>
</panel>
<panel id="panelStatusCheck1">
<viz type="status_indicator_app.status_indicator">
<search>
<query>| makeresults
| fields - _time
| eval status="Green", color="green", icon="exclamation-circle"
| table status icon color</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<!-- Set tokens for HTML panel from Status Check 1 Search -->
<done>
<set token="tokStatus1">$result.status$</set>
<set token="tokColor1">$result.color$</set>
</done>
</search>
<option name="drilldown">none</option>
<option name="height">50</option>
<option name="refresh.display">progressbar</option>
<option name="status_indicator_app.status_indicator.colorBy">field_value</option>
<option name="status_indicator_app.status_indicator.fillTarget">text</option>
<option name="status_indicator_app.status_indicator.fixIcon">info-circle</option>
<option name="status_indicator_app.status_indicator.icon">field_value</option>
<option name="status_indicator_app.status_indicator.precision">0</option>
<option name="status_indicator_app.status_indicator.showOption">1</option>
<option name="status_indicator_app.status_indicator.staticColor">#555</option>
<option name="status_indicator_app.status_indicator.useColors">true</option>
<option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</viz>
</panel>
</row>
<row>
<panel id="panelLabelCheck2">
<input type="link" token="tokCheck1" searchWhenChanged="true">
<label></label>
<choice value="check1">Check2</choice>
</input>
</panel>
<panel id="panelStatusCheck2">
<viz type="status_indicator_app.status_indicator">
<search>
<query>| makeresults
| fields - _time
| eval status="Green", color="green", icon="exclamation-circle"
| table status icon color</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<!-- Set tokens for HTML panel from Status Check 2 Search -->
<done>
<set token="tokStatus2">$result.status$</set>
<set token="tokColor2">$result.color$</set>
</done>
</search>
<option name="drilldown">none</option>
<option name="height">50</option>
<option name="refresh.display">progressbar</option>
<option name="status_indicator_app.status_indicator.colorBy">field_value</option>
<option name="status_indicator_app.status_indicator.fillTarget">text</option>
<option name="status_indicator_app.status_indicator.fixIcon">check</option>
<option name="status_indicator_app.status_indicator.icon">field_value</option>
<option name="status_indicator_app.status_indicator.precision">0</option>
<option name="status_indicator_app.status_indicator.showOption">1</option>
<option name="status_indicator_app.status_indicator.staticColor">#555</option>
<option name="status_indicator_app.status_indicator.useColors">true</option>
<option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</viz>
</panel>
</row>
<row>
<panel id="panelLabelCheck3">
<input type="link" token="tokCheck1" searchWhenChanged="true">
<label></label>
<choice value="check1">Check3</choice>
</input>
</panel>
<panel id="panelStatusCheck3">
<viz type="status_indicator_app.status_indicator">
<search>
<query>| makeresults
| fields - _time
| eval status="Red", color="red", icon="exclamation-circle"
| table status icon color</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<!-- Set tokens for HTML panel from Status Check 3 Search -->
<done>
<set token="tokStatus3">$result.status$</set>
<set token="tokColor3">$result.color$</set>
</done>
</search>
<option name="drilldown">none</option>
<option name="height">50</option>
<option name="refresh.display">progressbar</option>
<option name="status_indicator_app.status_indicator.colorBy">field_value</option>
<option name="status_indicator_app.status_indicator.fillTarget">text</option>
<option name="status_indicator_app.status_indicator.fixIcon">check</option>
<option name="status_indicator_app.status_indicator.icon">field_value</option>
<option name="status_indicator_app.status_indicator.precision">0</option>
<option name="status_indicator_app.status_indicator.showOption">1</option>
<option name="status_indicator_app.status_indicator.staticColor">#555</option>
<option name="status_indicator_app.status_indicator.useColors">true</option>
<option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</viz>
</panel>
</row>
<row>
<panel id="panelLabelCheck4">
<input type="link" token="tokCheck1" searchWhenChanged="true">
<label></label>
<choice value="check1">Check4</choice>
</input>
</panel>
<panel id="panelStatusCheck4">
<viz type="status_indicator_app.status_indicator">
<search>
<query>| makeresults
| fields - _time
| eval status="Amber", color="orange", icon="exclamation-circle"
| table status icon color</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<!-- Set tokens for HTML panel from Status Check 4 Search -->
<done>
<set token="tokStatus4">$result.status$</set>
<set token="tokColor4">$result.color$</set>
</done>
</search>
<option name="drilldown">none</option>
<option name="height">50</option>
<option name="refresh.display">progressbar</option>
<option name="status_indicator_app.status_indicator.colorBy">field_value</option>
<option name="status_indicator_app.status_indicator.fillTarget">text</option>
<option name="status_indicator_app.status_indicator.fixIcon">check</option>
<option name="status_indicator_app.status_indicator.icon">field_value</option>
<option name="status_indicator_app.status_indicator.precision">0</option>
<option name="status_indicator_app.status_indicator.showOption">1</option>
<option name="status_indicator_app.status_indicator.staticColor">#555</option>
<option name="status_indicator_app.status_indicator.useColors">true</option>
<option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</viz>
</panel>
</row>
<row>
<panel>
<html>
<style>
div.html-container div.html-row{
display:flex;
padding-bottom: 10px;
}
div.html-container div.html-row div.html-column-label{
position: relative;
left: 20px;
padding-right:10px;
font-size:15px;
}
div.html-container div.html-row div.html-column-status{
position: relative;
left: 20px;
font-size:33px;
font-weight:bold;
display:flex;
}
div.html-container div.html-row div.html-column-status div.html-column-status-icon{
padding-right:5px;
}
</style>
<h3 style="text-align:center">Option 2: HTML Panel</h3>
<div class="html-container">
<div class="html-row">
<div class="html-column-label">Check 1:</div>
<div class="html-column-status" style="color:$tokColor1$">
<div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
<div class="html-column-status-value">$tokStatus1$</div>
</div>
</div>
<div class="html-row">
<div class="html-column-label">Check 2:</div>
<div class="html-column-status" style="color:$tokColor2$">
<div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
<div class="html-column-status-value">$tokStatus2$</div>
</div>
</div>
<div class="html-row">
<div class="html-column-label">Check 3:</div>
<div class="html-column-status" style="color:$tokColor3$">
<div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
<div class="html-column-status-value">$tokStatus3$</div>
</div>
</div>
<div class="html-row">
<div class="html-column-label">Check 4:</div>
<div class="html-column-status" style="color:$tokColor4$">
<div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
<div class="html-column-status-value">$tokStatus4$</div>
</div>
</div>
</div>
</html>
</panel>
</row>
</form>
PS: For Image Overlay with Single Value, there is also an example I have added to my Splunk Wiki Talks: https://wiki.splunk.com/User_talk:Niketnilay
Refer to example below with Icons (you can obviously use Splunk's built-in icons as well).
@welderbuilder based on the details provided, you can use Simple XML CSS extension to style as per your need. If you are not using Link input for any drilldown, you can use html panel instead for similar results. Refer to Splunk Dashboard Examples App for Custom Decorations using html panel (on similar lines, you can also use Image Overlay with Single Value for better data representation).
Following is Simple XML code with the run anywhere example as per the question and two options to get to desired results:
<form theme="dark">
<label>Input Status Side By Side</label>
<fieldset submitButton="false"></fieldset>
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
div[id^="panelLabelCheck"]{
height: 50px !important;
width: 20% !important;
}
div[id^="panelLabelCheck"] .dashboard-panel,
div[id^="panelStatusCheck"] .dashboard-panel{
margin-bottom: 0px !important;
}
div[id^="panelLabelCheck"] .dashboard-panel{
margin-right: 0px !important;
}
div[id^="panelStatusCheck"]{
width: 80% !important;
}
div[data-view="views/dashboard/form/Input"] label,
div[data-view="views/dashboard/form/Input"] .splunk-choice-input-message{
display:none !important;
}
div[id^="panelLabelCheck"] .dashboard-panel,
div[id^="panelStatusCheck"] .ui-resizable,
div[id^="panelStatusCheck"] .dashboard-panel{
height: 50px !important;
min-height: 50px !important;
}
div[id^="panelStatusCheck"] .ui-resizable-handle{
visibility: hidden !important;
}
div.splunk-status-indicator {
display: flex !important;
}
div.splunk-status-indicator i{
padding-top: 5px !important;
padding-left: 20px !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel>
<html>
<h3 style="text-align:center">Option 1: Status Indicator</h3>
</html>
</panel>
</row>
<row>
<panel id="panelLabelCheck1">
<input type="link" token="tokCheck1" searchWhenChanged="true">
<label></label>
<choice value="check1">Check1</choice>
</input>
</panel>
<panel id="panelStatusCheck1">
<viz type="status_indicator_app.status_indicator">
<search>
<query>| makeresults
| fields - _time
| eval status="Green", color="green", icon="exclamation-circle"
| table status icon color</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<!-- Set tokens for HTML panel from Status Check 1 Search -->
<done>
<set token="tokStatus1">$result.status$</set>
<set token="tokColor1">$result.color$</set>
</done>
</search>
<option name="drilldown">none</option>
<option name="height">50</option>
<option name="refresh.display">progressbar</option>
<option name="status_indicator_app.status_indicator.colorBy">field_value</option>
<option name="status_indicator_app.status_indicator.fillTarget">text</option>
<option name="status_indicator_app.status_indicator.fixIcon">info-circle</option>
<option name="status_indicator_app.status_indicator.icon">field_value</option>
<option name="status_indicator_app.status_indicator.precision">0</option>
<option name="status_indicator_app.status_indicator.showOption">1</option>
<option name="status_indicator_app.status_indicator.staticColor">#555</option>
<option name="status_indicator_app.status_indicator.useColors">true</option>
<option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</viz>
</panel>
</row>
<row>
<panel id="panelLabelCheck2">
<input type="link" token="tokCheck1" searchWhenChanged="true">
<label></label>
<choice value="check1">Check2</choice>
</input>
</panel>
<panel id="panelStatusCheck2">
<viz type="status_indicator_app.status_indicator">
<search>
<query>| makeresults
| fields - _time
| eval status="Green", color="green", icon="exclamation-circle"
| table status icon color</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<!-- Set tokens for HTML panel from Status Check 2 Search -->
<done>
<set token="tokStatus2">$result.status$</set>
<set token="tokColor2">$result.color$</set>
</done>
</search>
<option name="drilldown">none</option>
<option name="height">50</option>
<option name="refresh.display">progressbar</option>
<option name="status_indicator_app.status_indicator.colorBy">field_value</option>
<option name="status_indicator_app.status_indicator.fillTarget">text</option>
<option name="status_indicator_app.status_indicator.fixIcon">check</option>
<option name="status_indicator_app.status_indicator.icon">field_value</option>
<option name="status_indicator_app.status_indicator.precision">0</option>
<option name="status_indicator_app.status_indicator.showOption">1</option>
<option name="status_indicator_app.status_indicator.staticColor">#555</option>
<option name="status_indicator_app.status_indicator.useColors">true</option>
<option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</viz>
</panel>
</row>
<row>
<panel id="panelLabelCheck3">
<input type="link" token="tokCheck1" searchWhenChanged="true">
<label></label>
<choice value="check1">Check3</choice>
</input>
</panel>
<panel id="panelStatusCheck3">
<viz type="status_indicator_app.status_indicator">
<search>
<query>| makeresults
| fields - _time
| eval status="Red", color="red", icon="exclamation-circle"
| table status icon color</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<!-- Set tokens for HTML panel from Status Check 3 Search -->
<done>
<set token="tokStatus3">$result.status$</set>
<set token="tokColor3">$result.color$</set>
</done>
</search>
<option name="drilldown">none</option>
<option name="height">50</option>
<option name="refresh.display">progressbar</option>
<option name="status_indicator_app.status_indicator.colorBy">field_value</option>
<option name="status_indicator_app.status_indicator.fillTarget">text</option>
<option name="status_indicator_app.status_indicator.fixIcon">check</option>
<option name="status_indicator_app.status_indicator.icon">field_value</option>
<option name="status_indicator_app.status_indicator.precision">0</option>
<option name="status_indicator_app.status_indicator.showOption">1</option>
<option name="status_indicator_app.status_indicator.staticColor">#555</option>
<option name="status_indicator_app.status_indicator.useColors">true</option>
<option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</viz>
</panel>
</row>
<row>
<panel id="panelLabelCheck4">
<input type="link" token="tokCheck1" searchWhenChanged="true">
<label></label>
<choice value="check1">Check4</choice>
</input>
</panel>
<panel id="panelStatusCheck4">
<viz type="status_indicator_app.status_indicator">
<search>
<query>| makeresults
| fields - _time
| eval status="Amber", color="orange", icon="exclamation-circle"
| table status icon color</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<!-- Set tokens for HTML panel from Status Check 4 Search -->
<done>
<set token="tokStatus4">$result.status$</set>
<set token="tokColor4">$result.color$</set>
</done>
</search>
<option name="drilldown">none</option>
<option name="height">50</option>
<option name="refresh.display">progressbar</option>
<option name="status_indicator_app.status_indicator.colorBy">field_value</option>
<option name="status_indicator_app.status_indicator.fillTarget">text</option>
<option name="status_indicator_app.status_indicator.fixIcon">check</option>
<option name="status_indicator_app.status_indicator.icon">field_value</option>
<option name="status_indicator_app.status_indicator.precision">0</option>
<option name="status_indicator_app.status_indicator.showOption">1</option>
<option name="status_indicator_app.status_indicator.staticColor">#555</option>
<option name="status_indicator_app.status_indicator.useColors">true</option>
<option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</viz>
</panel>
</row>
<row>
<panel>
<html>
<style>
div.html-container div.html-row{
display:flex;
padding-bottom: 10px;
}
div.html-container div.html-row div.html-column-label{
position: relative;
left: 20px;
padding-right:10px;
font-size:15px;
}
div.html-container div.html-row div.html-column-status{
position: relative;
left: 20px;
font-size:33px;
font-weight:bold;
display:flex;
}
div.html-container div.html-row div.html-column-status div.html-column-status-icon{
padding-right:5px;
}
</style>
<h3 style="text-align:center">Option 2: HTML Panel</h3>
<div class="html-container">
<div class="html-row">
<div class="html-column-label">Check 1:</div>
<div class="html-column-status" style="color:$tokColor1$">
<div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
<div class="html-column-status-value">$tokStatus1$</div>
</div>
</div>
<div class="html-row">
<div class="html-column-label">Check 2:</div>
<div class="html-column-status" style="color:$tokColor2$">
<div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
<div class="html-column-status-value">$tokStatus2$</div>
</div>
</div>
<div class="html-row">
<div class="html-column-label">Check 3:</div>
<div class="html-column-status" style="color:$tokColor3$">
<div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
<div class="html-column-status-value">$tokStatus3$</div>
</div>
</div>
<div class="html-row">
<div class="html-column-label">Check 4:</div>
<div class="html-column-status" style="color:$tokColor4$">
<div class="html-column-status-icon"><i class="icon-info-circle"></i></div>
<div class="html-column-status-value">$tokStatus4$</div>
</div>
</div>
</div>
</html>
</panel>
</row>
</form>
PS: For Image Overlay with Single Value, there is also an example I have added to my Splunk Wiki Talks: https://wiki.splunk.com/User_talk:Niketnilay
Refer to example below with Icons (you can obviously use Splunk's built-in icons as well).
@welderbuilder Not sure what exactly is the output you need. But seems like you need CSS extension for the two panels. Here is a previous answer of mine which creates Links as Tabs and shows corresponding Status Indicators on click of various links : https://community.splunk.com/t5/Dashboards-Visualizations/How-can-we-create-Tabs-using-Link-List-in-...
If you need a different output, do edit the image and post as per your final requirement or any other way you want to post the mock required structure.
Hi @niketn , here's what I wanted to achieve. I'd like for each button to be aligned wih their corresponding status. Here's an illustration of what I want to do:
Status Indicator is single query with Trellis Layout? Or is it <html> panel?
Each status indicator is created using
<viz type="status_indicator_app.status_indicator">
...
<query>...</query>
...
</viz>
so, each status indicator has a different query