Hi i am new to Splunk/JavaScript, Need your help for reducing my code, i have created two class for 2 fields, likewise we have 50 fields in splunk table. class is created for changing font and background color based on condition.
With this current approach i need to add/repeat 50 times (i.e.) for all the fields. Each time i need to add/call setTimeout(function() how can i customize the redundancy of the code for creating class and calling the setTimeout function for single time in javascript.
kindly find my code
enter code here
table.js
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
],
function(_, $, mvc, TableView) {
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
//return _(["LOgType"]).contains(cell.field);
return true;
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = cell.value;
// Apply interpretation for string of autorización
if (cell.field === "LOgType") {
if (value == "error") {
$td.addClass('range-cell').addClass('range-severe');
}
}
if (cell.field === "ID") {
if(value!==null) {
$td.addClass('range-con').addClass('range-low');
}
if (cell.field === "Desc") {
if(value!==null) {
$td.addClass('range-cos').addClass('range-high');
}
}
// Update the cell content
$td.text(value).addClass("string");
}
});
mvc.Components.get('Table1').getVisualization(function(tableView) {
tableView.on('rendered', function() {
setTimeout(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);
});
},100);
setTimeout(function(){
tableView.$el.find('td.range-con').each(function() {
$(this).parents('tr').addClass(this.className);
});
},100);
});
setTimeout(function(){
tableView.$el.find('td.range-cos').each(function() {
$(this).parents('tr').addClass(this.className);
});
},100);
});
`tableView.addCellRenderer(new CustomRangeRenderer()); // Add custom cell renderer, the table will re-render automatically.
});
});
table.css
#Table1 tr.range-severe td{
color: red;
}
#Table1 tr td.range-low{
background-color: #FFC597 !important;
}
#Table1 tr td.range-high{
background-color: #FFC597 !important;
}
... View more