Solved: How do you make a table that reduces in height whe...

niketn · ‎09-01-2018

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.

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

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

niketn · ‎09-01-2018

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

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

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

oleksiyg · ‎10-28-2019

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.

niketn · ‎09-01-2018

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

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

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!!!"

gabriel_vasseur · ‎06-26-2023

This solution doesn't work anymore. We're on Splunk Cloud version 9.0.2303.201. Hopefully it's just a simple update that's needed?

isoutamo · ‎06-26-2023

Can you create a new question and refer to this as not working anymore?

gabriel_vasseur · ‎06-26-2023

Done: How to change a Simple XML table height when no re... - Splunk Community

benhooper · ‎08-13-2020

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

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

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life