Dashboards & Visualizations

How to left align panels in a row without stretch to width of screen using CSS

kumaranv
Engager

kumaranv_0-1640571903363.png

 

Labels (1)
0 Karma

tscroggins
Motivator

@kumaranv 

There are many ways to accomplish this, but in the context of Simple XML, we can embed CSS to hide padding panels that reduce the width of other panels:

 

<dashboard>
  <label>Panel Width</label>
  <row>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count="WAN"</query>
        </search>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="hiddenpanel1"/>
    <panel id="hiddenpanel2"/>
    <panel id="hiddenpanel3"/>
    <panel id="hiddenpanel4"/>
  </row>
  <row>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count="LAN"</query>
        </search>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="hiddenpanel5"/>
    <panel id="hiddenpanel6"/>
    <panel id="hiddenpanel7"/>
    <panel id="hiddenpanel8"/>
  </row>
  <row id="hiddenrow">
    <html>
      <style>
        [id*="hidden"] {
          visibility: hidden;
        }
      </style>
    </html>      
  </row>
</dashboard>

 

panel_width.pngWe can also adjust the panel widths directly:

 

<dashboard>
  <label>Panel Width</label>
  <row>
    <panel id="resizepanel1">
      <single>
        <search>
          <query>| stats count 
| eval count="WAN"</query>
        </search>
      </single>
    </panel>
    <panel id="resizepanel2">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="resizepanel3">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="resizepanel4">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
  </row>
  <row>
    <panel id="resizepanel5">
      <single>
        <search>
          <query>| stats count 
| eval count="LAN"</query>
        </search>
      </single>
    </panel>
    <panel id="resizepanel6">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="resizepanel7">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="resizepanel8">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
  </row>
  <row id="hiddenrow">
    <html>
      <style>
        #hiddenrow {
          visibility: hidden;
        }
        [id*="resizepanel"] {
          width: 10% !important;
        }
      </style>
    </html>      
  </row>
</dashboard>

 

But the results aren't always perfect:

panel_width_10pct.pngpanel_width_10pct_oops.png

0 Karma
Get Updates on the Splunk Community!

Routing Data to Different Splunk Indexes in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. The OpenTelemetry project is the second largest ...

Getting Started with AIOps: Event Correlation Basics and Alert Storm Detection in ...

Getting Started with AIOps:Event Correlation Basics and Alert Storm Detection in Splunk IT Service ...

Register to Attend BSides SPL 2022 - It's all Happening October 18!

Join like-minded individuals for technical sessions on everything Splunk!  This is a community-led and run ...