Hi there!
I have a use case where I need to put a table under a Table row expansion and I need to have the ability to drilldown from both tables (parent & child). My XML + JS code works Ok, but I'm realizing that my child table somehow inherits the drilldown settings from the parent table. I was able to reproduce my issue using the Table Row Expansion code from the Splunk Examples App.
This is how my table looks like
Let's say that when you click on "mongod" I would like open a link to google.com while if you click on a value under "_raw" I would like to open a link to yahoo.com. Here's my run anywhere code
<dashboard script="custom_table_row_expansion.js">
<label>Table Row Expansion</label>
<description>Show more information on click of expansion.</description>
<row>
<panel>
<table id="expand_with_events">
<search>
<query>index=_internal | stats count by sourcetype</query>
<earliest>-24h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">cell</option>
<option name="percentagesRow">false</option>
<option name="totalsRow">false</option>
<drilldown>
<condition field="sourcetype">
<link target="_blank">https://www.google.com</link>
</condition>
</drilldown>
</table>
</panel>
</row>
</dashboard>
require([
'splunkjs/mvc/tableview',
'splunkjs/mvc/chartview',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc',
'underscore',
'splunkjs/mvc/simplexml/ready!'],function(
TableView,
ChartView,
SearchManager,
mvc,
_
){
var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
initialize: function(args) {
// initialize will run once, so we will set up a search and a chart to be reused.
this._searchManager = new SearchManager({
id: 'details-search-manager',
preview: false
});
this._TableView = new TableView({
id: 'TestTable',
managerid: 'details-search-manager',
drilldown: 'cell'
});
},
canRender: function(rowData) {
// Since more than one row expansion renderer can be registered we let each decide if they can handle that
// data
// Here we will always handle it.
return true;
},
render: function($container, rowData) {
// rowData contains information about the row that is expanded. We can see the cells, fields, and values
// We will find the sourcetype cell to use its value
var sourcetypeCell = _(rowData.cells).find(function (cell) {
return cell.field === 'sourcetype';
});
//update the search with the sourcetype that we are interested in
this._searchManager.set({ search: 'index=_internal sourcetype=' + sourcetypeCell.value + ''});
// $container is the jquery object where we can put out content.
// In this case we will render our chart and add it to the $container
$container.append(this._TableView.render().el);
}
});
var tableElement = mvc.Components.getInstance("expand_with_events");
tableElement.getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
tableclick = splunkjs.mvc.Components.get("TestTable");
tableclick.on("click", function (e) {
e.preventDefault(); // Prevent redirecting to the Search app
window.open('www.yahoo.com','_blank');
});
});
So here's what happens ... if I click on a value under "sourcetype" the drilldown works fine and it takes me to google.com, but if I click on a value under "_raw" it automatically opens two tab on google.com + 1 tab on yahoo.com (See example below, don't worry about the page not found error)
If I switch the child object from Table to a Pie chart everything works fine , so the issue seems to be related to a child table under a Table Row Expansion situation.
Is this a bug? a design thing? what am I missing here? BTW I tested this on 7.2.1 and 8.x and got the same issue.
TIA!
