Hi,
I have created a table with expandable rows:
Code for the table:
<form script="expand_alerts.js">
<label>SIEM</label>
<fieldset submitButton="false" autoRun="false">
<input type="time" token="TimeRangePicker" searchWhenChanged="true">
<label>TimeRange</label>
<default>
<earliest>@d</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row>
<panel>
<table id="expand_with_events">
<title>Alerts</title>
<search>
<query>source="*suricata*" | stats distinct_count(src_ip) AS src_ip distinct_count(dest_ip) AS dest_ip sparkline count by alert.signature_id alert.signature alert.category | sort -count | table alert.signature_id alert.signature alert.category count src_ip dest_ip sparkline</query>
<earliest>$TimeRangePicker.earliest$</earliest>
<latest>$TimeRangePicker.latest$</latest>
</search>
<option name="wrap">true</option>
<option name="rowNumbers">false</option>
<option name="drilldown">cell</option>
<option name="dataOverlayMode">none</option>
<option name="count">10</option>
</table>
</panel>
</row>
</form>
When expanded, it shows related events using EventsViewer , as follows:
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 a chart 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.
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 alertSignatureIdCell = _(rowData.cells).find(function (cell) {
return cell.field === 'alert.signature_id';
});
//update the search with the sourcetype that we are interested in
this._searchManager.set({ search: 'source="*suricata*" event_type="alert" alert.signature_id=' + alertSignatureIdCell.value });
// $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_with_events");
tableElement.getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
});
As you can see, the table depends on a time input (token TimeRangePicker ) that I am also trying to integrate in the javascript. I have already tried to write something like this:
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 a chart 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.
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 alertSignatureIdCell = _(rowData.cells).find(function (cell) {
return cell.field === 'alert.signature_id';
});
//update the search with the sourcetype that we are interested in
this._searchManager.set({
search: 'source="*suricata*" event_type="alert" alert.signature_id=' + alertSignatureIdCell.value,
earliest_time: $TimeRangePicker.earliest$,
latest_time: $TimeRangePicker.latest$
});
// $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_with_events");
tableElement.getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
});
But now, rows don't expand and the web console says $TimeRangePicker is not defined.
How can I integrate the time constraint from my time input in the javascript?
Thank you in advance for your help.
... View more