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
![alt text][1]
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
Show more information on click of expansion.
|
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)
![alt text][2]
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!
[1]: /storage/temp/276802-table-view.png
[2]: /storage/temp/276803-tabs.png
↧