Hi Jaracan. One thing I must say up front. The newer versions of Splunk will not allow single letter values for table IDs. You'll want to change them to 2 or more letters.
// cellvalue_highlight.js
// Bringing in our required resources
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
],
function(_, $, mvc, TableView) {
// Create some arbitrary table ids to iterate on (these can be any id's you prefer, I am using A for simplicity)
var tableids = ["AA", "BB"];
// Determine how many tables we have
var tableidlength = tableids.length;
// Create our highlight function
var CellvaluerendererforAA = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return true;
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = cell.value;
// In this example I am looking at the field "component" for values of ExecProcessor, Metrics, or LMDirective.
if (cell.field == 'component') {
if (value == 'ExecProcessor') {
$td.addClass('Red');
}
if (value == 'Metrics') {
$td.addClass('Amber');
}
if (value == 'LMDirective') {
$td.addClass('Green');
}
}
// Update the cell content
$td.text(value);
}
});
var CellvaluerendererforBB = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return true;
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = cell.value;
// In this example I am looking at the field "total" for values less than 10, if less than, we make the class green otherwise it will be flagged red
if (cell.field == 'total') {
if (value <= 10) {
$td.addClass('Green');
} else {
$td.addClass('Red');
};
}
// Update the cell content
$td.text(value);
}
});
// Iterate over each table in our tableids array, we need to make sure our XML tables include one of these ids for the highlighting to work
for (var i = 0; i < tableidlength; i++) {
if (mvc.Components.get(tableids[i])) {
console.log(tableids[i])
if (tableids[i] == "AA") {
mvc.Components.get(tableids[i]).getVisualization(function(tableView) {
tableView.table.addCellRenderer(new CellvaluerendererforAA());
tableView.table.render();
});
};
if (tableids[i] == "BB") {
mvc.Components.get(tableids[i]).getVisualization(function(tableView) {
tableView.table.addCellRenderer(new CellvaluerendererforBB());
tableView.table.render();
});
};
}
}
});
This is assuming you have now named the tables "AA" and "BB". Notice the logic, if you have more tables you can use a case statement or the like (or groups or what have you). In this way it can become pretty powerful and reusable by just having a common table naming convention and adding the script and css.
... View more
