I have a dashboard that I'm working on that requires me to conditionally format table rows based on a field. The dashboard currently has 6 identical tables (in terms of the column names) and I need to be able to apply the JavaScript to each of them. I am aware that I can just state each table in the JavaScript, however, ideally I'd like to not have to do that, as I'm going to be adding additional tables to the dashboard over time. As this will live on cloud, I don't want to have to keep uploading the app every time I make a change.
Is there a way to replace 'the get('highlight01')' with something more generic or even loop that aspect of the code for all tables on the dashboard?
requirejs([
// It's important that these don't end in ".js" per RJS convention
'../app/TA-lgw_images_and-_files/libs/jquery-3.6.0-umd-min',
'../app/TA-lgw_images_and-_files/libs/underscore-1.6.0-umd-min',
'../app/TA-lgw_images_and-_files/theme_utils',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function($, _, themeUtils, mvc, TableView) {
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer
return _(['target_met']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = parseFloat(cell.value);
// Apply interpretation for number of historical searches
if (cell.field === 'target_met') {
if (value > 0) {
$td.addClass('range-cell').addClass('range-elevated');
}
}
// Update the cell content
$td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('highlight01').getVisualization(function(tableView) {
tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
Example dashboard XML you can use
<dashboard version="1.1" script="dpi_ops_evaluation.js" stylesheet="dpi_ops_evaluation.css">
<label>DPI TEST</label>
<row>
<panel>
<table id="highlight01">
<search>
<query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
<row>
<panel>
<table id="highlight02">
<search>
<query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
<row>
<panel>
<table id="highlight03">
<search>
<query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
<row>
<panel>
<table id="highlight04">
<search>
<query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
<row>
<panel>
<table id="highlight05">
<search>
<query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
<row>
<panel>
<table id="highlight06">
<search>
<query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
</dashboard>