Dashboards & Visualizations

Drilldown back to the page which triggered the drilldown

krusovice
Path Finder

Hi all,

I've successfully create a dashboard with table based on solution given by @niketnilay (https://answers.splunk.com/answers/659499/how-to-expand-table-based-on-click-to-the-column.html)

However, I have new problem now. For example in page 3 (table is lengthy), after clicking the xxx % to expand the table column using drilldown feature, the newly loaded table is back to page 1. How to enable the feature to go back to the page where user clicked to expand/drilldown?

Thanks.

Tags (1)
0 Karma
1 Solution

niketn
Legend

@krusovice since you are interested in row specific information (a drilldown row can be on any page of the table depending on the number of rows returned). You should try the table drilldown approach to display the Customer and Volume Details for Specific Row Clicked. With the previous proposed code the parent table gets re-rendered and hence goes back to the first page of the table.

alt text

Refer to the following Run Anywhere example.

<dashboard>
  <label>Add Detail to Specific Row in the table</label>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults
|  fields - _time
| eval data="1              KR         25%           3300                XYZ                30%     4300                ABC         45% 1300                DEF;2              KR         50%           3400                ABC                20%  2300                LMN            30% 1600                ZZZ;" 
| makemv data delim=";" 
| mvexpand data 
| makemv data delim=" " 
| eval date_hour=mvindex(data,0), country=mvindex(data,1), "product_A %"=mvindex(data,2), product_A_volume=mvindex(data,3), product_A_cust=mvindex(data,4), "product_B %"=mvindex(data,5), product_B_volume=mvindex(data,6), product_B_cust=mvindex(data,7), "product_C %"=mvindex(data,8),product_C_volume=mvindex(data,9), product_C_cust=mvindex(data,10)
| fields - data
| table date_hour country "*"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <fields>["date_hour","country","product_A %","product_B %","product_C %"]</fields>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <condition field="product_A %">
            <set token="tokClicked">product_A</set>
            <set token="tokCustomerName">$row.product_A_cust$</set>
            <set token="tokCustomerVolume">$row.product_A_volume$</set>
          </condition>
          <condition field="product_B %">
            <set token="tokClicked">product_B</set>
            <set token="tokCustomerName">$row.product_B_cust$</set>
            <set token="tokCustomerVolume">$row.product_B_volume$</set>
          </condition>
          <condition field="product_C %">
            <set token="tokClicked">product_C</set>
            <set token="tokCustomerName">$row.product_C_cust$</set>
            <set token="tokCustomerVolume">$row.product_C_volume$</set>
          </condition>
          <condition>
            <!-- DO NOTHING IF PERCENT ROW IS NOT CLICKED -->
          </condition>
        </drilldown>
      </table>
    </panel>
  </row>
  <row depends="$tokClicked$">
    <panel>
      <table>
        <search>
          <query>| makeresults
          | fields - _time
          | eval "$tokClicked$_cust"=$tokCustomerName|s$
          | eval "$tokClicked$_volume"=$tokCustomerVolume|s$
          </query>
        </search>
      </table>
    </panel>
  </row>
</dashboard>

If the above works for you you can refer to the Table Row Expansion example from Splunk Dashboard Examples App which will require JS Extension (and Splunk JS Stack) to your dashboard.

I think showing the Customer and Volume row for specific page of the table would also be possible but will require significant time with Simple XML JS Extension and Splunk JS Stack. I tried to set the Simple XML Configuration <fields> with token. However, the same did not work dynamically. Even this might be possible through Simple XML JS Extension.

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

View solution in original post

0 Karma

niketn
Legend

@krusovice since you are interested in row specific information (a drilldown row can be on any page of the table depending on the number of rows returned). You should try the table drilldown approach to display the Customer and Volume Details for Specific Row Clicked. With the previous proposed code the parent table gets re-rendered and hence goes back to the first page of the table.

alt text

Refer to the following Run Anywhere example.

<dashboard>
  <label>Add Detail to Specific Row in the table</label>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults
|  fields - _time
| eval data="1              KR         25%           3300                XYZ                30%     4300                ABC         45% 1300                DEF;2              KR         50%           3400                ABC                20%  2300                LMN            30% 1600                ZZZ;" 
| makemv data delim=";" 
| mvexpand data 
| makemv data delim=" " 
| eval date_hour=mvindex(data,0), country=mvindex(data,1), "product_A %"=mvindex(data,2), product_A_volume=mvindex(data,3), product_A_cust=mvindex(data,4), "product_B %"=mvindex(data,5), product_B_volume=mvindex(data,6), product_B_cust=mvindex(data,7), "product_C %"=mvindex(data,8),product_C_volume=mvindex(data,9), product_C_cust=mvindex(data,10)
| fields - data
| table date_hour country "*"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <fields>["date_hour","country","product_A %","product_B %","product_C %"]</fields>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <condition field="product_A %">
            <set token="tokClicked">product_A</set>
            <set token="tokCustomerName">$row.product_A_cust$</set>
            <set token="tokCustomerVolume">$row.product_A_volume$</set>
          </condition>
          <condition field="product_B %">
            <set token="tokClicked">product_B</set>
            <set token="tokCustomerName">$row.product_B_cust$</set>
            <set token="tokCustomerVolume">$row.product_B_volume$</set>
          </condition>
          <condition field="product_C %">
            <set token="tokClicked">product_C</set>
            <set token="tokCustomerName">$row.product_C_cust$</set>
            <set token="tokCustomerVolume">$row.product_C_volume$</set>
          </condition>
          <condition>
            <!-- DO NOTHING IF PERCENT ROW IS NOT CLICKED -->
          </condition>
        </drilldown>
      </table>
    </panel>
  </row>
  <row depends="$tokClicked$">
    <panel>
      <table>
        <search>
          <query>| makeresults
          | fields - _time
          | eval "$tokClicked$_cust"=$tokCustomerName|s$
          | eval "$tokClicked$_volume"=$tokCustomerVolume|s$
          </query>
        </search>
      </table>
    </panel>
  </row>
</dashboard>

If the above works for you you can refer to the Table Row Expansion example from Splunk Dashboard Examples App which will require JS Extension (and Splunk JS Stack) to your dashboard.

I think showing the Customer and Volume row for specific page of the table would also be possible but will require significant time with Simple XML JS Extension and Splunk JS Stack. I tried to set the Simple XML Configuration <fields> with token. However, the same did not work dynamically. Even this might be possible through Simple XML JS Extension.

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

krusovice
Path Finder

Thanks @niketnilay as always. I'll propose this solution to my user 🙂

niketn
Legend

Let us know how it goes 🙂

Hope it works!!!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...