For those of of you out there who want to have row highlighting by time, and not some obscure number, here is my modification:
Quick overview:
Results occurring less than ten minutes ago It highlights one color (specified by range-severe - usually light red)
Results occurring less than an hour ago It highlights another color (specified by range-severe - usually light orange)
All other results highlight to another color (specified by range-normal- I set it to grey (F5F5F5))
In order for [grey] highlighting to work, you have to add this to your table_decorations.css
#highlight tr.range-normal td {
background-color: #F5F5F5 !important;
}
Please forgive my childish use of substring() - I spent a couple hours on Code academy to learn the basics of Javascript before writing this.
Otherwise, here is the functioning, albeit messy script:
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 _(['_time']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
//Parse cell object for each key
for (var key in cell) {
this[key] = cell[key];
}
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
//Takes javascripts' time and converts it to Splunk format
today = yyyy+'-'+mm+'-'+dd;
//subtracts ten minutes or an hour from the current time
var today_time_minus_hour = new Date; today_time_minus_hour.setHours( today_time_minus_hour.getHours() - 1 );
var today_time_minus_hour_sub = (String(today_time_minus_hour)).substring(16,24);
var today_time_minus_ten_mins = new Date; today_time_minus_ten_mins.setMinutes( today_time_minus_ten_mins.getMinutes() - 10 );
var today_time_minus_ten_mins_sub = (String(today_time_minus_ten_mins)).substring(16,24);
//Compare's the time of the log to the current time (Minus either ten minutes or an Hour) and sets the highlighting
if (cell.field === '_time') {
if ((String(cell.value)).substring(0,10) == today) {
if (cell.value.substring(11,19) > today_time_minus_ten_mins_sub) {
$td.addClass('range-cell').addClass('range-severe');
} else if (cell.value.substring(11,19) > today_time_minus_hour_sub) {
$td.addClass('range-cell').addClass('range-elevated');
}
} else {
if (cell.value.substring(11,19) < today_time_minus_hour_sub) {
$td.addClass('range-cell').addClass('range-normal');
}
}
}
// Update the cell content
update_date = ((cell.value.substring(0,10)) + " " + (cell.value).substring(11,19));
$td.text(update_date);
}
});
mvc.Components.get('highlight').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());
});
});
... View more