Hi
I have a table like this :
What I want to do is when I click on the "Test Case" value of a particular row, it should expand that row ( if possible only that particular cell) and display a table like this:
Also I am using token (when clicking on the Test Case) to pass value to the second table. Any help would be appreciated
Your code looks good to me. Maybe you need to do some changes in the table search. Can you please share your sample dashboard XML?
Sharing my Samlpe XML.
<dashboard script="expand_with_events.js">
<label>expand_with_events</label>
<row>
<panel>
<table id="expand_with_events">
<search>
<query>index="_internal" | stats count by source | eval "Test Case" = source. "@@". count</query>
<earliest>-1w@w1</earliest>
<latest>@w1</latest>
</search>
<option name="drilldown">row</option>
<option name="refresh.display">progressbar</option>
<drilldown>
<condition></condition>
</drilldown>
</table>
</panel>
</row>
</dashboard>
Screenshot
Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.
Im not able to click on the page 2 or Next in the expanded row
Your JS looks good and working fine.
I'm sharing js and XML both. Can you please create a new dashboard with it and trace back your code?
require([
'splunkjs/mvc/tableview',
'splunkjs/mvc/chartview',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc',
'underscore',
'splunkjs/mvc/simplexml/ready!'
], function(
TableView,
ChartView,
SearchManager,
mvc,
_
) {
console.log("HIe");
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field;
},
render: function($container, rowData) {
console.log(rowData.value);
$container.html(rowData.value)
}
});
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({
preview: false
}, { tokens: true, tokenNamespace: "submitted" });
//this._chartView = new ChartView({
// managerid: 'details-search-manager',
// 'charting.legend.placement': 'none'
//});
this._TableView = new TableView({
managerid: this._searchManager.name,
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 processCell = _(rowData.cells).find(function(cell) {
return cell.field === 'Test Case';
});
//update the search with the sourcetype that we are interested in
// this._searchManager.set({ search: 'index= "' + processCell.value + '" ' });
value = processCell.value
// value = value[value.length - 1];
var tokens = mvc.Components.get("default")
var id = tokens.get("splunk_id")
this._searchManager.set({ search: '|makeresults count=100 | eval a="A", value="'+value+'",c=1 | accum c '});
// $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._chartView.render().el);
$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.table.addCellRenderer(new CustomRangeRenderer());
tableView.render();
tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
});
<dashboard script="expand_with_events.js">
<label>expand_with_events</label>
<row>
<panel>
<table id="expand_with_events">
<search>
<query>index="_internal" | stats count by source | eval "Test Case" = source. "@@". count</query>
<earliest>-1w@w1</earliest>
<latest>@w1</latest>
</search>
<option name="drilldown">row</option>
<option name="refresh.display">progressbar</option>
<drilldown>
<condition></condition>
</drilldown>
</table>
</panel>
</row>
</dashboard>
Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.
