topic Re: Column width in Splunk Search

Column width

jip31jip31 — Sun, 01 Apr 2018 10:37:35 GMT

i use this code in a report and i use it in a dashboard

index="*" DisplayName="RCAgentMgr" OR DisplayName="SMS Agent Host" OR DisplayName="Service de transfert intelligent en arrière-plan" Started="false" State="Stopped" | stats count by DisplayName

but i dont reach to reduce the width column
what i have to do please?
thanks

Re: Column width

niketn — Sun, 01 Apr 2018 15:59:58 GMT

[Updated Answer]

Adding Run anywhere dashboard example in Simple XML to test and confirm

@jip31jip31, you can use Splunk Dashboard Examples App which has the Table With Custom Column Width example for similar kind of use case.

Try adding the following hidden panel to your Simple XML Dashboard which sets the DisplayName width to 80% and count to 20%:

<panel depends="$alwaysHideCSSPanel$">
  <html>
    <style>
      #tableWithCustomColumnWidth th[data-sort-key=DisplayName] {
          width: 80% !important;
      }
      #customWidth th[data-sort-key=count] {
          width: 20% !important;
      }
    </style>
  </html>
</panel>

Following is the complete run anywhere dashboard example based on Splunk's _internal index

<dashboard>
  <label>Table Column Width</label>
  <row>
    <panel depends="$alwaysHideCSSPanel$">
      <html>
        <style>
          #tableWithCustomColumnWidth th[data-sort-key=component] {
              width: 80% !important;
          }
          #customWidth th[data-sort-key=count] {
              width: 20% !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="tableWithCustomColumnWidth">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO component=*
| stats count by component</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Re: Column width

jip31jip31 — Mon, 02 Apr 2018 05:38:54 GMT

hi niketnilay

do you mean i have to go in my Dashboard, do modify and open in html?
if yes i have catch the code of the concerned Dashboard (see the code below)
does i have to put your code in??? thanks

    <div id="panel1" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="element1" class="dashboard-element table" style="width: 100%">
                    <div class="panel-head">
                        <h3>SOC_Critical_Errors_Synthesis</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="row2" class="dashboard-row dashboard-row2">
    <div id="panel2" class="dashboard-cell" style="width: 50%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="element2" class="dashboard-element table" style="width: 100%">
                    <div class="panel-head">

Re: Column width

niketn — Mon, 02 Apr 2018 07:09:48 GMT

@jip31jip31, you seem to be using Splunk HTML Dashboard while my suggestion code was for Simple XML. You can add a hidden html panel to row2 just before your panel with table. The table element id is tableWithCustomColumnWidth as per my example, which you can change as per your need. The hidden html panel will have CSS override as shown below. Please try out and confirm:

 <div id="row2" class="dashboard-row dashboard-row2">
        <div id="panel1" class="dashboard-cell" style="width: 50%;" data-depends="$alwaysHideCSSPanel$">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element html" style="width: 100%">
                        <div class="panel-body html">
                                <style>
                                  #tableWithCustomColumnWidth th[data-sort-key=component] {
                                      width: 80% !important;
                                  }
                                  #customWidth th[data-sort-key=count] {
                                      width: 20% !important;
                                  }
                                </style>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel2" class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="tableWithCustomColumnWidth" class="dashboard-element table" style="width: 100%">
                         <div class="panel-head">

Re: Column width

jip31jip31 — Mon, 02 Apr 2018 09:03:30 GMT

sorry but i am totally rookie!

i have done this but there is a error in last line

  <table>
    <title>FO_Stopped_Services_Synthesis</title>
    <search ref="FO_Services_Count"></search>
    <option name="count">10</option>
    <option name="drilldown">row</option>
    <format type="color" field="count">
      <colorPalette type="sharedList"></colorPalette>
      <scale type="sharedCategory"></scale>
    </format>
     <div id="row2" class="dashboard-row dashboard-row2">

Re: Column width

niketn — Mon, 02 Apr 2018 09:40:05 GMT

@jip31jip31 I am confused whether you are using Simple XML or HTML Dashboard in Splunk as the above code example has both which is not correct.

I have updated my first answer with a Run anywhere dashboard example based on Splunk's _internal index in Simple XML. You should check out the same. If the behavior is what you need, you can convert the same to HTML dashboard and get the corresponding code in HTML which you require.

As suggested you should also check out Splunk Dashboard Examples App which already has this use case explained through an example.

Re: Column width

crawfs6 — Wed, 12 Feb 2020 16:55:41 GMT

@niketnilay I'm having trouble with the hidden panel in your example. As I read the Splunk docs, the depends attribute means that the token "$alwaysHideCSSPanel$" must be set in order to display the panel. Since the token is not set in your example the CSS panel should not appear on the dashboard, correct?

I pasted the CSS panel into a dashboard, but when I click back on UI to see the dashboard the panel is always there. Even though I haven't used the element to set the $alwaysHideCSSPanel$ token. I feel like I'm missing something... I want to use your CSS to adjust column widths, but I can't get the CSS panel to be invisible.

Thanks!