I have a table and I wanted to use the "table row expansion" JavaScript (JS) function. I don't know very much about JS.
I have my table and I even have the > info symbol that shows up. However, when I click on the > symbol and the panel attempts to run the expansion search, I get the event I want but not all of the fields are shown.
I would like to get something similar to this:
https://www.aldeid.com/wiki/Splunk/table-expandable-rows-time-picker
so when I click on the > symbol in order to expand the event on within my table, I want all of the parsed fields to display. Like it would if I was using an event instead of a table.
I'm not sure what the issue is.
The dashboard is:
<dashboard script="test.js">
...
<row>
<panel>
<table id="expand_events">
<search>
<query>index=main sourcetype=syndication tag!=* | table published, source, title, summary, id</query>
......
my test.js script:
require([
'splunkjs/mvc/tableview',
'splunkjs/mvc/eventsviewerview',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc',
'underscore',
'splunkjs/mvc/simplexml/ready!'
],function(
TableView,
EventsViewer,
SearchManager,
mvc,
_
){
var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
initialize: function(args) {
// initialize will run once, so we will set up a search and events to be reused.
this._searchManager = new SearchManager({
id: 'details-search-manager',
preview: false
});
this._eventsViewer = new EventsViewer({
managerid: 'details-search-manager'
});
},
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.
console.log("RowData: ", rowData);
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 titleCell = _(rowData.cells).find(function (cell) {
//console.log("RowData: ", rowData);
return cell.field === 'title';
});
//update the search with the sourcetype that we are interested in
this._searchManager.set({
earliest_time: "$form.TimeRangePicker.earliest$",
latest_time: "$form.TimeRangePicker.latest$",
search: 'source="syndication://DarkReading Attacks-Breaches"' + titleCell.value
}, {tokens: true});
console.log("RowData: ", rowData);
// $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._eventsViewer.render().el);
}
});
var tableElement = mvc.Components.getInstance("expand_events");
tableElement.getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
});
... View more