Hi @rijinc ,
In you simple XML dashboard use this code:
<dashboard script="expandRow.js">
....
<row>
<panel>
<table id="myTable">
<search id="mySearch">
<query>
|loadjob savedsearch=admin:applist:apptest
</query>
</search>
<fields>Name, Age, Hobby, Status</fields>
</table>
</panel>
</row>
Place expandRow.js file into $SPLUNK_HOME/etc/apps/<your_app>/appserver/static dir with this code:
require([
'splunkjs/mvc/tableview',
'splunkjs/mvc/postprocessmanager',
'splunkjs/mvc',
'underscore',
'splunkjs/mvc/simplexml/ready!'],function(
TableView,
PostProcessManager,
mvc,
_
){
var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
initialize: function(args) {
this._postProcessManager = new PostProcessManager({
id: 'ApplicationUsed ',
managerid: 'mySearch'
});
this._tableView = new TableView({
id: 'drop_down_table',
managerid: 'ApplicationUsed'
});
},
canRender: function(rowData) {
// always expand
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 Name cell to use its value
var username = _(rowData.cells).find(function (cell) {
return cell.field === 'Name';
});
//update the search with the Name that we are interested in
this._postProcessManager.set({ search:
'| search Name="' + username.value + '" | table ApplicationUsed '
});
// $container is the jquery object where we can put out content.
// In this case we will render our table and add it to the $container
$container.append(this._tableView.render().el);
}
});
var tableElement = mvc.Components.getInstance("myTable");
tableElement.getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
});
After that you can customize CSS for you dashboard to edit #drop_down_table params for better visualization.
... View more