Dashboards & Visualizations

Drilldown with javascript in a table format and using a token

wvalente2
Explorer

Hi Splunkers,

I need a help with my dashboard because of I`m stuck in this problem. I`ve already search, tried many javascript codes and still not working.

Basically what I need is: 

After clicking in a drilldown button , the result should be a table that show me more the details about a use case.

wvalente2_0-1706909360845.png

Look at the first down arrow. When I click it should show me the details. But I cannot render a table.

The token to mue results should be the value os the use_case_name.

My javascript code:

 requirejs([
'../app/simple_xml_examples/libs/underscore-1.6.0-umd-min',
'splunkjs/mvc/tableview',
'splunkjs/mvc/chartview',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function(_, TableView, ChartView, SearchManager, mvc) {
var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
initialize: function() {
// 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({
'managerid': 'details-search-manager',
'charting.legend.placement': 'none'
});
},
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 use_case_nameCell = _(rowData.cells).find(function (cell) {
return cell.field === 'use_Case_name';
});
//update the search with the sourcetype that we are interested in
// this._searchManager.set({ search: 'index=_internal sourcetype=' + sourcetypeCell.value + ' | table user | dedup user' });
this._searchManager.set({ search: '| inputlookup XXXX.csv | search use_case_name=' + use_case_nameCell.value + ' | table XXX | transpose' });
// $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.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
tableView.table.render();
});
});

 

Thank you guys.

Labels (3)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@wvalente2 

Are you looking for this?

https://community.splunk.com/t5/Splunk-Dev/Table-row-expansion-with-dynamic-search-in-the-JS/m-p/561...

Please share more details of your requirements in case you need more details.

 

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated. 

0 Karma
Get Updates on the Splunk Community!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...