Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

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

matstap
Communicator
‎03-29-2018 03:00 PM

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.

Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎03-29-2018 07:04 PM

@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

Preview file
21 KB
Reply
Solved! Jump to solution
Solution

niketn
Legend
‎03-29-2018 07:04 PM

@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!!!"
Preview file
21 KB
Reply
Solved! Jump to solution

bayuste
Explorer
‎12-20-2024 12:00 PM


We can be more direct in our manipulation of the dashboard in newer versions of Splunk.

The structure of the nested div elements for tables is as follows

    [ .splunk-view .splunk-table   -
        [ .shared-reportvisualizer   - contains the table ]
        [ .splunk-view .splunk-paginator   - contains the paginator ]
    ]

All we have to do is reverse the display order of the div elements in the .splunk-table container ...

<row depends="$always_hide_css$">
  <panel>
    <html>
      <style>
        div[id^="topPaginatorTable"] .splunk-table { display: flex; flex-wrap: wrap; }
        div[id^="topPaginatorTable"] .shared-reportvisualizer { position: relative; order: 2; }
        div[id^="topPaginatorTable"] .splunk-paginator { position: relative; order: 1; }
      </style>
    </html>
  <panel>
<row>


Then add id="topPaginatorTable1", id=topPaginatorTable2, etc, to each table in the dashboard where you want to move the paginator to the top.

I like this method better as it leaves no padding artifacts in the case that no paginator is required, and rest of the box model of HTML formats correctly for width constrained panels.

0 Karma
Reply
Get Updates on the Splunk Community!

Splunk Search APIを使えば調査過程が残せます

   このゲストブログは、JCOM株式会社の情報セキュリティ本部・専任部長である渡辺慎太郎氏によって執筆されました。 Note: This article is published in both Japanese ...

Integrating Splunk Search API and Quarto to Create Reproducible Investigation ...

 Splunk is More Than Just the Web Console For Digital Forensics and Incident Response (DFIR) practitioners, ...

Congratulations to the 2025-2026 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...