Dashboards & Visualizations

How to re-position the paginator in a dashboard panel?

matstap
Communicator

I have a dashboard with a table and I want to move the paginator from the bottom-right to the top-left. How do I do this? I've tried editing $SplunkHome/share/splunk/search_mrsparkle/modules/paginator/paginator.css but haven't been able to get it right. I've tried a few things, position: absolute, top: 10px, float: left.

Can I get some help with this? Especially if you've done this before.

1 Solution

niketn
Legend

@matstap, you can use CSS within dashboard to position paginator as per your need.

PS:

  1. Following example sets Paginator using abosolute positioning from top to keep it simple (however it means for each panel you would need to adjust the top settings).

  2. If you want to apply relative positioning as per number of results in the table you would need jQuery to find total results in the table and which page is selected to decide the position of paginator. Each row in the table is 25px by default, So if you have 5 rows the relative top position would be 7*25px + 5px (including 25px for Table Header and Paginator Row each and 5px above the table) i.e. -180px. This kind of calculation is required because usually last tab will have lesser number of rows compared to previous rows.

  3. Table will require 25 px padding on top to accommodate for paginator to be displayed.

    <style>
      #table1 .splunk-table{
        padding-top:25px !important;
      }
      #table1 .splunk-table .splunk-paginator{
        position: absolute !important;
        top: -2px !important;
        padding-left: 45% !important;
      }
    </style>
    

    alt text

Following is the Simple XML code with hidden <html> <panel> having css <style> override.

<form>
  <label>Paginator Reposition</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel depends="$alwaysHideCSS$">
      <html>
        <style>
          #table1 .splunk-table{
            padding-top:25px !important;
          }
          #table1 .splunk-table .splunk-paginator{
            position: absolute !important;
            top: -2px !important;
            padding-left: 45% !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Splunkd Top Components with Errors</title>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label>Select Time</label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>
      <table id="table1">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| top 20 component showperc=f countfield="Errors"</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">5</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="tokComponent">$click.value$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row depends="$tokComponent$">
    <panel>
      <title>Error for Splunk component $tokComponent$ over selected time</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO component="$tokComponent$"
          | timechart count as "Errors"</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
        </search>
        <option name="charting.axisTitleX.text">Time</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@matstap, you can use CSS within dashboard to position paginator as per your need.

PS:

  1. Following example sets Paginator using abosolute positioning from top to keep it simple (however it means for each panel you would need to adjust the top settings).

  2. If you want to apply relative positioning as per number of results in the table you would need jQuery to find total results in the table and which page is selected to decide the position of paginator. Each row in the table is 25px by default, So if you have 5 rows the relative top position would be 7*25px + 5px (including 25px for Table Header and Paginator Row each and 5px above the table) i.e. -180px. This kind of calculation is required because usually last tab will have lesser number of rows compared to previous rows.

  3. Table will require 25 px padding on top to accommodate for paginator to be displayed.

    <style>
      #table1 .splunk-table{
        padding-top:25px !important;
      }
      #table1 .splunk-table .splunk-paginator{
        position: absolute !important;
        top: -2px !important;
        padding-left: 45% !important;
      }
    </style>
    

    alt text

Following is the Simple XML code with hidden <html> <panel> having css <style> override.

<form>
  <label>Paginator Reposition</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel depends="$alwaysHideCSS$">
      <html>
        <style>
          #table1 .splunk-table{
            padding-top:25px !important;
          }
          #table1 .splunk-table .splunk-paginator{
            position: absolute !important;
            top: -2px !important;
            padding-left: 45% !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Splunkd Top Components with Errors</title>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label>Select Time</label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>
      <table id="table1">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| top 20 component showperc=f countfield="Errors"</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">5</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="tokComponent">$click.value$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row depends="$tokComponent$">
    <panel>
      <title>Error for Splunk component $tokComponent$ over selected time</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO component="$tokComponent$"
          | timechart count as "Errors"</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
        </search>
        <option name="charting.axisTitleX.text">Time</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Get Updates on the Splunk Community!

Splunk Education - Fast Start Program!

Welcome to Splunk Education! Splunk training programs are designed to enable you to get started quickly and ...

Five Subtly Different Ways of Adding Manual Instrumentation in Java

You can find the code of this example on GitHub here. Please feel free to star the repository to keep in ...

New Splunk APM Enhancements Help Troubleshoot Your MySQL and NoSQL Databases Faster

Splunk Observability has two new enhancements to make it quicker and easier to troubleshoot slow or frequently ...