Dashboards & Visualizations

Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

mrfredman
Path Finder

Hi,

I was wondering if it was possible to have a dashboard panel expand to multiple rows. I currently have 3 panels setup on 2 rows. By default they look like:

    A | B
    C | C

Is it possible to reorganize them so they look like:

    A | B
    A | C
Tags (3)
1 Solution

ngatchasandra
Builder

Hi mrfredman,

This is not possible because, Splunk identifies rows as major breaks , so you can't expand a panel across two or more than three rows.

View solution in original post

@mrfredman, until the time this feature is released as @woodcock has mentioned, you can use CSS and HTML to design dashboard layout as per your needs, through Simple XML CSS Extension.

I have attached a sample dashboard with CSS override example. However, CSS would be based on need. I have added id to all panel and the first pie chart to override CSS easily with id selectors.

alt text

  <row depends="$alwaysHideCSS$">
    <panel>
      <html>
        <style>
          <!-- Panel1 and Panel3 to occupy 30% width -->
          #panel1.dashboard-cell.dashboard-layout-panel{
            width: 30% !important;
          }

          #panel3.dashboard-cell.dashboard-layout-panel{
            width: 30% !important;
          }
          <!-- Panel2 to occupy 70% width -->
          #panel2.dashboard-cell.dashboard-layout-panel{
            width: 70% !important;
          }
          <!-- Panel1 reduced to occupy half the height of Panel1-->
          #chart1 #pie.viz-controller
          {
            height: 50% !important;
          }
          <!-- Panel3 manual override to fit in 50% space created in Panel1-->
          #panel3 .panel-element-row
          {
              position: absolute !important;
              width: 99.3% !important;
              top: -180px !important;
          }
        </style>
       </html>
    </panel>
  </row>

Following is the complete run anywhere dashboard Simple XML code for reference:

<form>
  <label>Single Panel in 2 Rows</label>
  <fieldset submitButton="false">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row depends="$alwaysHideCSS$">
    <panel>
      <html>
        <style>
          <!-- Panel1 and Panel3 to occupy 30% width -->
          #panel1.dashboard-cell.dashboard-layout-panel{
            width: 30% !important;
          }

          #panel3.dashboard-cell.dashboard-layout-panel{
            width: 30% !important;
          }
          <!-- Panel2 to occupy 70% width -->
          #panel2.dashboard-cell.dashboard-layout-panel{
            width: 70% !important;
          }
          <!-- Panel1 reduced to occupy half the height of Panel1-->
          #chart1 #pie.viz-controller
          {
            height: 50% !important;
          }
          <!-- Panel3 manual override to fit in 50% space created in Panel1-->
          #panel3 .panel-element-row
          {
              position: absolute !important;
              width: 99.3% !important;
              top: -180px !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel id="panel1">
      <chart id="chart1">
        <title>Top 5 Splunkd Errors (excluding highest errors)</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| top 6 component showperc=f
| tail 5</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">none</option>
        <option name="height">388</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel id="panel2">
      <chart>
        <title>Error Timechart</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count by log_level</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="charting.chart">area</option>
        <option name="charting.chart.stackMode">stacked</option>
        <option name="charting.drilldown">all</option>
        <option name="height">390</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel id="panel3">
      <single>
        <title>Splunkd Errors - Single Value</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="underLabel">Splunkd Errors</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

sssignals
Path Finder

Hi niketnilay, thanks so much. Just the sample code that I needed to experiment for my work.

0 Karma

woodcock
Esteemed Legend

Splunk has an update to the Dashboard design that will allow this kind of thing but I have no idea if they are going to be releasing it or when. You should open an ER case so that you can get the details on that feature.

0 Karma

ngatchasandra
Builder

Hi mrfredman,

This is not possible because, Splunk identifies rows as major breaks , so you can't expand a panel across two or more than three rows.

Tanefo
Path Finder

hi
it is not possible because rows are based on horizontales to function.

0 Karma
Get Updates on the Splunk Community!

Splunk Forwarders and Forced Time Based Load Balancing

Splunk customers use universal forwarders to collect and send data to Splunk. A universal forwarder can send ...

NEW! Log Views in Splunk Observability Dashboards Gives Context From a Single Page

Today, Splunk Observability releases log views, a new feature for users to add their logs data from Splunk Log ...

Last Chance to Submit Your Paper For BSides Splunk - Deadline is August 12th!

Hello everyone! Don't wait to submit - The deadline is August 12th! We have truly missed the community so ...