Splunk Search

Alter the width of single value panel

gokool2u
New Member

How to resize the width of single value dashboard panels in case if I have only one column in a row, instead of making it to occupy 100% width which is default ?

0 Karma

niketnilay
Legend

Following is a run anywhere search based on Splunk's _internal database. In line with @rjthibod, it is setting the width of Panel containing Single value with id="singleValuePanel" to 20% instead of 100%

        <style>
          #singleValuePanel{
            width: 20% !important;
          }
        </style>

PS: <html depends="$hiddenForCSS$"> has been added to always hide the HTML panel.

  <row>
    <panel id="singleValuePanel">
      <html depends="$hiddenForCSS$">
        <style>
          #singleValuePanel{
            width: 20% !important;
          }
        </style>
      </html>
      <single>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x65a637","0x6db7c6","0xf7bc38","0xf58f39","0xd93f3c"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">inverse</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

mdmaala
Communicator

this is effective for me thanks for this!

0 Karma

rjthibod
Champion

@gokool2u, did my answer down below help you? If so, please accept it. If not, please clarify any problems.

0 Karma

rjthibod
Champion

You have to edit the CSS for the panel in the dashboard. Splunk does not provide any mechanism to set the width of a panel via SimpleXML. In fact, the Splunk Web framework tries really hard to set the panels widths so that all of the panels on a row are the same width, and it wants the row to occupy the screen.

In your dashboard, give each panel element an id, e.g., <panel id="panel_value_1">. In a custom CSS file for this dashboard, you would than do the following to set the width to 300 px:

#panel_value_1 {
  width: 300px !important;
}

Now, there is a mechanism others have come up with to use a custom JS script to set the width of panels by using a template ID for the panel. A link with the details is here: https://answers.splunk.com/answers/180028/how-to-change-the-width-of-two-dashboard-panels-in.html. The one caveat is this approach will only work for a static panel that does not toggle the visibility of the panels in any way. If you ever toggle the visibility of the panel, you will lose the custom width set by the script. In those cases, you have to use CSS settings like the one above.

gvnd
Path Finder

Its not working for me..

0 Karma

jhea10
New Member

I am running 7.2.1 and this is not working for me neither.

0 Karma

rjthibod
Champion

Splunk has decided to rework most of the JS / CSS setup in Splunk 7.2, and they broke both of the answers above in the process.

Based on my cursory glance at things in 7.2 (which is a brief glance since I don't use Splunk often these days), my guess is you will have to make the CSS adjustment in JS.

Look at the Splunk Dashboards Examples app (https://splunkbase.splunk.com/app/1603/). Open the source files and look at the dashboard custom_layout_width.xml and its accompanying JS file custom_layout_width.js. That serves as a simple example of how to adjust the width of panels.

The gist is you have to find the dashboard-cell element that belongs to your panel, and then set the width setting for it.

0 Karma