Dashboards & Visualizations

Multiple single values in one panel alignment

schou87
Path Finder

Hi,

I have 2 rows in my dashboard. 3 single value elements in a panel in first row and one table in second row. These 3 single values dont seem to align themselves properly. They seem to be left aligned. Is there a way to center these elements in the panel?

Regards

Labels (3)
0 Karma

schou87
Path Finder

Hi,

My single values are in trellis mode -medium. I could adjust the alignment by changing them to large.

But now I am getting vertical and horizontal scrollbar. Is there any way to get rid of them?

Regards

0 Karma

bowesmana
SplunkTrust
SplunkTrust

Can you provide an example of that - three single value elements in a single panel in a row would normally be spaced evenly, horizontally across the row.

Can you share your XML?

0 Karma

schou87
Path Finder

@bowesmana wrote:

Can you provide an example of that - three single value elements in a single panel in a row would normally be spaced evenly, horizontally across the row.

Can you share your XML?


Below is the xml.

<form theme="dark">
<label>Data</label>
<search>
<query> base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | chart limit=13 count over Date BY comp1 | sort -Date | head 6</query>
</search>
<fieldset submitButton="false"></fieldset>
<row>
<panel id="panel_layout">
<input id="input_link_split_by" type="link" token="unused">
<label>Choose a view</label>
<choice value="table">Consolidated</choice>
<choice value="chart">Daily report</choice>
<choice value="table1">Request</choice>
<default>Table</default>
<change>
<condition value="table">
<set token="showTable">true</set>
<unset token="showChart"></unset>
<unset token="showTable1"></unset>
</condition>
<condition value="chart">
<set token="showChart">true</set>
<unset token="showTable"></unset>
<unset token="showTable1"></unset>
</condition>
<condition value="table1">
<set token="showTable1">true</set>
<unset token="showChart"></unset>
<unset token="showTable"></unset>
</condition>
</change>
</input>
<html>
<style> /* This Layout Panel Bottom Padding removed to merge Link Input with horizontal line */
#panel_layout .fieldset{
padding: 10px 12px 0px 12px !important;
}
/* Increase width of Link input to have options in Single Line */
#input_link_split_by.input-link{
width: 720px !important;
}
/* Change from flex to -webkit-box for side by side layout */
#input_radio_split_by.input-link div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
display: -webkit-box !important;
}
/* Create Button Border to make them appear as Tabs */
#input_link_split_by.input-link button{
width: 200px !important;
border-top-color: rgb(255, 255, 255);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(255, 255, 255);
border-right-style: solid;
border-right-width: 1px;
border-left-color: rgb(255, 255, 255);
border-left-style: solid;
border-left-width: 1px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* Hide link input bottom message section to merge with Horizontal line */
.dashboard-panel #input_link_split_by label,
#input_link_split_by .splunk-choice-input-message{
display: none !important;
}
/* Remove padding from horizontal line */
#panel_layout .panel-body.html{
padding: 0px !important;
}
</style>
<hr style="height:1px;border-width:0;color: black;background-color: white;margin: 0px;"/>
</html>
</panel>
</row>
<row>
<panel depends="$showTable$">
<html>
<style>
.panel1 {
width: 120% !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel id="panel1">
<single depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | where comp="new comp" | stats values(percent) by comp </query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="drilldown">none</option>
<option name="height">151</option>
<option name="numberPrecision">0.00</option>
<option name="rangeColors">["0x53a051","0x53a051"]</option>
<option name="rangeValues">[100]</option>
<option name="refresh.display">progressbar</option>
<option name="showSparkline">1</option>
<option name="trellis.enabled">1</option>
<option name="trellis.size">medium</option>
<option name="trellis.splitBy">comp</option>
<option name="unit">%</option>
<option name="useColors">1</option>
</single>
<single depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | where comp="PENDING"| stats values(percent) by comp </query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="drilldown">none</option>
<option name="height">136</option>
<option name="numberPrecision">0.00</option>
<option name="rangeColors">["0xf8be34","0xf8be34"]</option>
<option name="rangeValues">[100]</option>
<option name="refresh.display">progressbar</option>
<option name="showSparkline">1</option>
<option name="trellis.enabled">1</option>
<option name="trellis.size">medium</option>
<option name="trellis.splitBy">comp</option>
<option name="unit">%</option>
<option name="useColors">1</option>
</single>
<single depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | where comp="ERROR" | stats values(percent) by comp </query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="drilldown">none</option>
<option name="height">179</option>
<option name="numberPrecision">0.00</option>
<option name="rangeColors">["0xdc4e41","0xdc4e41"]</option>
<option name="rangeValues">[100]</option>
<option name="refresh.display">progressbar</option>
<option name="showSparkline">1</option>
<option name="trellis.enabled">1</option>
<option name="trellis.size">medium</option>
<option name="trellis.splitBy">comp</option>
<option name="unit">%</option>
<option name="useColors">1</option>
</single>
</panel>
</row>
<row>
<panel depends="$showTable$">
<html>
<style>
#table1 .table th, .table td {
text-align: center!important;
}
</style>
</html>
<table id="table1" depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | chart limit=13 count over Date comp1 | sort -Date | head 6</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="dataOverlayMode">heatmap</option>
<option name="drilldown">cell</option>
<option name="rowNumbers">true</option>
<format type="color" field="new comp">
<colorPalette type="minMidMax" maxColor="#53A051" minColor="#FFFFFF"></colorPalette>
<scale type="minMidMax"></scale>
</format>
<format type="color" field="PENDING">
<colorPalette type="minMidMax" maxColor="#F8BE34" minColor="#FFFFFF"></colorPalette>
<scale type="minMidMax"></scale>
</format>
<format type="color" field="ERROR">
<colorPalette type="minMidMax" maxColor="#DC4E41" minColor="#FFFFFF"></colorPalette>
<scale type="minMidMax"></scale>
</format>
</table>
</panel>
</row>
</form>

0 Karma
Get Updates on the Splunk Community!

Fun with Regular Expression - multiples of nine

Fun with Regular Expression - multiples of nineThis challenge was first posted on Slack #regex channel ...

[Live Demo] Watch SOC transformation in action with the reimagined Splunk Enterprise ...

Overwhelmed SOC? Splunk ES Has Your Back Tool sprawl, alert fatigue, and endless context switching are making ...

What’s New & Next in Splunk SOAR

Security teams today are dealing with more alerts, more tools, and more pressure than ever.  Join us on ...