Hi
My search:
index="index1" OR index="4" | eval Value=if(index="index1", round(((Value-100)*-1), 0), round(Value, 0)) | where Value>50
I am trying to color the table in red, yellow, and green using the numbers returned from Value. The table has 2 columns -> test1 and test2. Value result will be listed under test2 column and the colors should be: 0-60 green , 60-80 yellow , 80-100 red.
CSS :
td.icon {
text-align: center;
}
td.icon i {
font-size: 25px;
text-shadow: 1px 1px #aaa;
}
td.icon .severe {
color: red;
}
td.icon .elevated {
color: orange;
}
td.icon .low {
color: green;
}
/* Row Coloring */
#highlight tr td {
background-color: #c1ffc3 !important;
}
#highlight tr.range-elevated td {
background-color: orange !important;
}
#highlight tr.range-severe td {
background-color: red !important;
}
#highlight .table td {
border-top: 1px solid #fff;
}
#highlight td.range-severe, td.range-elevated {
font-weight: bold;
}
.icon-inline i {
font-size: 18px;
margin-left: 5px;
}
.icon-inline i.icon-alert-circle {
color: #ef392c;
}
.icon-inline i.icon-alert {
color: #ff9c1a;
}
.icon-inline i.icon-check {
color: #5fff5e;
}
Script file :
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return _(['test2']).contains(cell.field);
},
render: function($td.cell) {
var value = parseFloat(cell.value)
if (cell.field === 'test2') {
if (value > 80) {
$td.addClass('range-cell').addClass('range-severe');
}
}
}
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.on('rendered', function() {
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
});
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
The result i get is all table rows in green, regardles of the value. Please help and thank you in advance.
... View more