***WARNING SplunkJS focused question***
The Splunk 6.x Dashboard Examples (Table where rows expand to show more information) shows a table which drills down and expands a chart per row that was clicked.
I modified the example to use a table instead of a chart and added a click event for a hyperlink on the single detail record returned per row.
The click event works great on the first record, but afterwards it ceases to function (<-- bad pun).
That’s the problem the click event fires only on the table underneath the first row selected.The next time the '>' chevron is clicked regardless of if it’s on the same row, the click event doesn’t fire...
I removed the click event then re -added it, nothing seems to work. The console.log fires every time before and after the association. So I know its hitting the code. FYI, The detail table always renders and returns the correct info.
As a consolation here's a fully functional working example of an inline master detail table (if you comment out the click event).
any help is appreciated.
FYI,the hyperlink doesn't go to a real URL.. I just want it to work...
below is the dashboard and JavaScript html encoded/normal:
|
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,
earliest_time: "-15m@m",
latest_time: "now"
});
this._tableView = new TableView({
id: 'innerTable'
, managerid: 'details-search-manager'
, 'drilldown': 'row'
, 'drilldownRedirect': 'none'
});
},
canRender: function (rowData) {
return true;
},
render: function ($container, rowData) {
var sourcetypeCell = _(rowData.cells).find(function (cell) {
return cell.field === 'sourcetype';
});
var sQuery = ' index=_internal sourcetype=' + sourcetypeCell.value
+ ' | stats count latest(_time) as latest, earliest(_time) as earliest by sourcetype '
+ ' | eval latest=strftime(latest, "%Y-%m-%d %H:%M:%S") '
+ ' | eval earliest=strftime(earliest, "%Y-%m-%d %H:%M:%S")';
this._searchManager.set({ search: sQuery });
console.log('clear/adding click event :' + sourcetypeCell.value);
this._tableView.off().on("click", function (e) {
// Bypass the default behavior
e.preventDefault();
//weee! better to burn out than to fade away!
window.location = '/simple_xml_examples/'
+ 'custom_table_row_expansion?earliest=0&latest=&sourcetype='
+ sourcetypeCell.value;
});
$container.append(this._tableView.render().el);
}
});
var tableElement = mvc.Components.getInstance("expand_with_events");
tableElement.getVisualization(function (tableView) {
tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
});
↧