How do I parameterize the Count for the "Rows per Page" setting in a dashboard? - BUG

[bmnguyen]

OBJECTIVE:
I have a dashboard that shows multiple tables of data, and the number of result lines of each table varies widely. To accommodate various screen sizes of my users' devices (phones, tablets, and desktop monitors), I created a dropdown list for each table for the users to specify the number of "Rows per Page". They specify a smaller count for "Rows per Page" to make the table shorter in order to skip over to the next table.

SAMPLE CODE:
To illustrate the problem, I created the following dashboard with two tables of arbitrary data. Each table has two dropdown lists--one for time range to produce more or less data) and the other for specifying the "Rows per Page" count. I used a token to receive the user's choice from the dropdown list and feed the value to the "count" setting of the table.

<table>
  ...
  <option name="count">$iRowsPerPageA$</option>
  ...
</table>

Here is the entire Simple XML code:

<form>
  <label>Try to parameterize COUNT for Rows per Page</label>
  <description>Trying to use a dropdown to change the Rows per Page</description>
  <fieldset submitButton="false" autoRun="true"></fieldset>
  <row>
    <panel>
      <title>Table A of Some Rows</title>
      <input type="dropdown" token="sEarliestA" searchWhenChanged="true">
        <label>Select a time range:</label>
        <default>-10s</default>
        <choice value="-10s">Last 10 seconds</choice>
        <choice value="-30s">Last 30 seconds</choice>
        <choice value="-1m">Last 1 minute</choice>
        <choice value="-1h">Last 1 hour</choice>
        <choice value="-1d">Last 1 day</choice>
        <choice value="-1w">Last 1 week</choice>
        <choice value="-1mon@mon">Last 1 month</choice>
      </input>
      <input type="dropdown" token="iRowsPerPageA" searchWhenChanged="true">
        <label>Rows per Page:</label>
        <default>10</default>
        <choice value="10">10</choice>
        <choice value="20">20</choice>
        <choice value="50">50</choice>
        <choice value="100">100</choice>
      </input>
      <table>
        <search>
          <query>
            index=_internal|table _time, host, message
          </query>
          <earliest>$sEarliestA$</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">$iRowsPerPageA$</option>
        <option name="showPager">true</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">row</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <title>Table B of Some Other Rows</title>
      <input type="dropdown" token="sEarliestB" searchWhenChanged="true">
        <label>Select a time range:</label>
        <default>-10s</default>
        <choice value="-10s">Last 10 seconds</choice>
        <choice value="-30s">Last 30 seconds</choice>
        <choice value="-1m">Last 1 minute</choice>
        <choice value="-1h">Last 1 hour</choice>
        <choice value="-1d">Last 1 day</choice>
        <choice value="-1w">Last 1 week</choice>
        <choice value="-1mon@mon">Last 1 month</choice>
      </input>
      <input type="dropdown" token="iRowsPerPageB" searchWhenChanged="true">
        <label>Rows per Page:</label>
        <default>10</default>
        <choice value="10">10</choice>
        <choice value="20">20</choice>
        <choice value="50">50</choice>
        <choice value="100">100</choice>
      </input>
      <table>
        <search>
          <query>
            index="_introspection"|TABLE _time, host, data.mem_used
          </query>
          <earliest>$sEarliestB$</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">$iRowsPerPageB$</option>
        <option name="showPager">true</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">row</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</form>

THE ANOMALY:
For Table A, when I changed the value on the dropdown list of "Rows per Page", the table expanded to the specify count. However, for Table B, any change to the "Rows per Page" count, Table B was not re-rendered to the specified rows on the display.

I noticed that the endpoint did change from

http://spkprdsh1.XXX.XXX:8000/en-US/app/search/rows_per_page_count?form.sEarliestA=-10s&form.iRowsPe...

to

http://spkprdsh1.XXX.XXX:8000/en-US/app/search/rows_per_page_count?form.sEarliestA=-10s&form.iRowsPe...

If I refreshed the browser with the above URL, Table B was rendered as expected.

QUESTION:
Is it an anomaly needed to be fixed by Splunk Team, or is it something that I did in the XML code?

I greatly appreciate your help.
--B. Nguyen

[niketn · Accepted solution]

@bmnguyen Simple XML with token approach for dynamic table rows had worked for me in 7.2.x but not in 7.3.x. So ideal approach for you should be to use to Simple XML JS extension where you can add a setTimeout() of few milliseconds to table render to ensure that table is rendered only after the token is set.

Refer to answer by @vnravikumar which talks about the Simple XML JS extension with SplunkJS Stack to render table. and also Simple XML with CSS extension and token to adjust rows from UI: https://answers.splunk.com/answers/748334/removing-pagination-and-row-limit-displayed-in-a-t.html

[bmnguyen]

It is a great tip. Thank you!

Although my objective for the pagination is to allow the user to shorten the display so that (s)he can scroll to skip over, the means is still the same--to set the table's row count option to a different value. Besides, I plan to package my app, and the additional extensions may add more dependencies to the app.

I wonder if Splunk development team monitors discussions like this to find and to fix Splunk bugs, or if I have to report bugs to a specific place.

Thank you very much, and you have a wonderful day.
--B. Nguyen

[niketn]

@bmnguyen you can add BUG to the title of your question and add BUG tag to your question. However, actual step would be to reach out to Splunk support and file the bug so that it gets proper attention.

[bmnguyen]

I will reach out to Splunk Support.
I greatly appreciate your time, help, and diligence.

[woodcock]

My guess is that once a panel renders, it is done rendering until/unless the search inside it is run again, at which point it must re-render. So try adding something nonsensical like this to the end of the search in the panel that is not re-rendering:

... | eval _ThisIsToFixRenderingBug="$iRowsPerPageA$"

[bmnguyen]

Thank you very much for your response.
I tried out your tip, but the table still does not render to the new size.
Since both of my queries are to get data from index="_internal" and index="_introspection", you can see what I meant by copying the simple XML code and pasting to a test dashboard.
I greatly appreciate our help.