Splunk Search

How do you make a table that reduces in height when your dashboard search returns no results?

SplunkTrust
SplunkTrust

How to change a Simple XML table height when no data is present? The table should be much smaller when no alerts are triggered. Table need not be hidden to show any other custom message/panel. The table itself should be reduced in height.

Attached is the screenshot of a Table with No Results Found, which consumes a lot of space.

alt text

PS: Documenting answer from Slack to Splunk Answers for future reference.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
1 Solution

SplunkTrust
SplunkTrust

An ideal approach would be to use depends and rejects attributes based on token which is either set or unset depending upon results returned from search or no results case (through job.resultCount predefined Search Event Handler Token). Refer to Splunk Documentation: http://docs.splunk.com/Documentation/Splunk/latest/Viz/tokens#Search_tokens_for_dynamic_display_exam... Or Null Search Swapper example in the Splunk Dashboard Examples App.

However, since the ask is to display the table but reduce the height, similar approach will be used but instead of hiding the table and showing a custom panel, it will be used to apply custom CSS override.

Following run anywhere example uses:

1) A hidden <html> panel to apply CSS for dashboard. The tokens $tokHeight$ and $tokAlertInfoTop$, have been used to set the table height and push the No Result Found message a bit up in the table with reduced height.

          #myTable .splunk-table{
            $tokHeight$
          }
          #myTable .alert-info{
            $tokAlertInfoTop$
          }

2) The <done> Search Event Handler is used to access predefined Search Job token i.e. $job.resultCount$ which is 0 when No Results are returned and >0 otherwise. The tokens for CSS override are set accordingly, if no results are found, otherwise the tokens remain blank.

          <done>
            <condition match="$job.resultCount$==0">
              <set token="tokHeight">height: 50px !important;</set>
              <set token="tokAlertInfoTop">position:relative; top:-130px !important;</set>
            </condition>
            <condition>
              <set token="tokHeight"></set>
              <set token="tokAlertInfoTop"></set>
            </condition>
          </done>

Table With Results

alt text
Table Without Results: Top Table for Error Count By Component has height reduced

alt text

Following is the complete Simple XML Code.

<form>
  <label>Panel Table Height change on No Result Found</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          .dashboard-row .dashboard-panel .panel-head h3{
            text-align:center !important;
            color:white !important;
            font-weight: bold !important;
            background:black !important;
          }
          #myTable .splunk-table{
            $tokHeight$
          }
          #myTable .alert-info{
            $tokAlertInfoTop$
          }
        </style>
      </html>      
    </panel>
  </row>
  <row>
    <panel>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label></label>
        <default>
          <earliest>-1s@s</earliest>
          <latest>now</latest>
        </default>
      </input>
      <table id="myTable">
        <title>Error Count By Component</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=ERROR
| stats count by component</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match="$job.resultCount$==0">
              <set token="tokHeight">height: 50px !important;</set>
              <set token="tokAlertInfoTop">position:relative; top:-130px !important;</set>
            </condition>
            <condition>
              <set token="tokHeight"></set>
              <set token="tokAlertInfoTop"></set>
            </condition>
          </done>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
    </row>
    <row>    
    <panel>
      <table>
        <title>Splunk Internal Activity by Component</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| stats count by component</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Engager

I know it's lazy, but just adding this to your XML works (it just blindly resizes any DIV elements that contain the same class as the "No results found." and "Search did not return any events." messages on the page; the DIVs with results then "push" them to be taller):

  <row depends="$alwaysHideCSSPanel$">
     <panel>
       <html>
         <style>
            .msg {
              height:30px !important;
            }
            .splunk-viz-msg {
              height:30px !important;
            }
         </style>
       </html>      
     </panel>
   </row>

However, if you do have other "message" panels in your dashboard, it will resize them as well.
,I know it's lazy, but just adding this to your XML works (it just blindly resizes the DIV elements that contain the "No results found." and "Search did not return any events." messages on the page):

  <row depends="$alwaysHideCSSPanel$">
     <panel>
       <html>
         <style>
            .msg {
              height:30px !important;
            }
            .splunk-viz-msg {
              height:30px !important;
            }
         </style>
       </html>      
     </panel>
   </row>

However, if you do have other "message" panels in your dashboard, it will resize them as well.

0 Karma

SplunkTrust
SplunkTrust

An ideal approach would be to use depends and rejects attributes based on token which is either set or unset depending upon results returned from search or no results case (through job.resultCount predefined Search Event Handler Token). Refer to Splunk Documentation: http://docs.splunk.com/Documentation/Splunk/latest/Viz/tokens#Search_tokens_for_dynamic_display_exam... Or Null Search Swapper example in the Splunk Dashboard Examples App.

However, since the ask is to display the table but reduce the height, similar approach will be used but instead of hiding the table and showing a custom panel, it will be used to apply custom CSS override.

Following run anywhere example uses:

1) A hidden <html> panel to apply CSS for dashboard. The tokens $tokHeight$ and $tokAlertInfoTop$, have been used to set the table height and push the No Result Found message a bit up in the table with reduced height.

          #myTable .splunk-table{
            $tokHeight$
          }
          #myTable .alert-info{
            $tokAlertInfoTop$
          }

2) The <done> Search Event Handler is used to access predefined Search Job token i.e. $job.resultCount$ which is 0 when No Results are returned and >0 otherwise. The tokens for CSS override are set accordingly, if no results are found, otherwise the tokens remain blank.

          <done>
            <condition match="$job.resultCount$==0">
              <set token="tokHeight">height: 50px !important;</set>
              <set token="tokAlertInfoTop">position:relative; top:-130px !important;</set>
            </condition>
            <condition>
              <set token="tokHeight"></set>
              <set token="tokAlertInfoTop"></set>
            </condition>
          </done>

Table With Results

alt text
Table Without Results: Top Table for Error Count By Component has height reduced

alt text

Following is the complete Simple XML Code.

<form>
  <label>Panel Table Height change on No Result Found</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          .dashboard-row .dashboard-panel .panel-head h3{
            text-align:center !important;
            color:white !important;
            font-weight: bold !important;
            background:black !important;
          }
          #myTable .splunk-table{
            $tokHeight$
          }
          #myTable .alert-info{
            $tokAlertInfoTop$
          }
        </style>
      </html>      
    </panel>
  </row>
  <row>
    <panel>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label></label>
        <default>
          <earliest>-1s@s</earliest>
          <latest>now</latest>
        </default>
      </input>
      <table id="myTable">
        <title>Error Count By Component</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=ERROR
| stats count by component</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match="$job.resultCount$==0">
              <set token="tokHeight">height: 50px !important;</set>
              <set token="tokAlertInfoTop">position:relative; top:-130px !important;</set>
            </condition>
            <condition>
              <set token="tokHeight"></set>
              <set token="tokAlertInfoTop"></set>
            </condition>
          </done>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
    </row>
    <row>    
    <panel>
      <table>
        <title>Splunk Internal Activity by Component</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| stats count by component</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Communicator

For anyone else, if you're using an events table, replace ".splunk-table" with ".splunk-events-viewer".

0 Karma