Solved: Is there a way to create line break in Status Indi...

pvarelab · ‎03-06-2023

Is there a way to create a line break in the label for the Status Indicator visualization.

I have the following dashboard:

<dashboard version="1.1">
<label>Test dashboard</label>
<row>
<panel>
<viz type="status_indicator_app.status_indicator">
<search>
<query>| makeresults
| eval partialA=15, totalA=57, partialB=132, totalB=543
| strcat partialA "/" totalA "V in " partialB "/" totalB "H" label
| eval icon=if(totalA=0,"check","warning")
| eval color=if(totalA=0,"green",if(partialA=0,"orange","red"))
| fields label icon color</query>
<earliest>-30d@d</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="drilldown">none</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">warning</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>
</viz>
</panel>
</row>
</dashboard>

That displays

15/57V in 132/543H

I would like it to display

15/57V
in
132/543H

I have tried using \n, <br/> and escaped versions of those to no avail.

Is there a way to do what Iwant?

Thanks!

pvarelab · ‎03-07-2023

To summarize, the solution was a combination of @richgalloway 's proposal of including the line returns in the query:

| strcat partialA "/" totalA "V 
in 
" partialB "/" totalB "H" label

plus some CSS in a row before the row containing the panels:

<html>
  <style>
    .splunk-status-indicator {
      white-space: pre;
      line-height: 100% !important;
      font-size: 2.5vw !important;
    }
  </style>
</html>

View solution in original post

pvarelab · ‎03-07-2023

To summarize, the solution was a combination of @richgalloway 's proposal of including the line returns in the query:

| strcat partialA "/" totalA "V 
in 
" partialB "/" totalB "H" label

plus some CSS in a row before the row containing the panels:

<html>
  <style>
    .splunk-status-indicator {
      white-space: pre;
      line-height: 100% !important;
      font-size: 2.5vw !important;
    }
  </style>
</html>

richgalloway · ‎03-06-2023

Try embedding literal newlines in the command.

| strcat partialA "/" totalA "V 
in 
" partialB "/" totalB "H" label

---
If this reply helps you, Karma would be appreciated.

pvarelab · ‎03-06-2023

Thanks, Rich:

I also had tried that, which had worked for me in other situations, but not in this one.

richgalloway · ‎03-06-2023

Have you tried the same thing using eval?

| eval label = partialA . "/" . totalA . "V 
in 
" . partialB . "/" . totalB . "H"

---
If this reply helps you, Karma would be appreciated.

pvarelab · ‎03-07-2023

Hi, Rich:

At the end your original solution worked but combined with a little CSS "magic". I had to add the following snippet to the xml:

 <html>
<style>
.splunk-status-indicator {
white-space: pre;
line-height: 100% !important;
font-size: 2.5vw !important;
}
</style>

Is there a way to create line break in Status Indicator visualization?

simple XML

More Control Over Your Monitoring Costs with Archived Metrics!

New in Observability Cloud - Explicit Bucket Histograms

Updated Team Landing Page in Splunk Observability