I'm using Splunk version 7.0.1 and I'm trying to highlight my table cell colors based off of two other fields. I have the script working, by modifying the one included in the dashboards app, but it randomly highlights some cells in the wrong color. I can't seem to figure out why.
The "Average Response Time" should be: - Red if the value is greater than or equal to the Threshold - Amber if the value is greater than or equal to the Objective but less than the Threshold - Green if the value is less than the Objective
My Table:
Transaction Count "Average Response Time" Objective Threshold
A/P - Close Module - FM1 1 7.52 2.00 6.00 **<-Colored Red and correctly**
...
A/P - Diagnosis- Run Search - FM1 2 4.01 100.00 100.00 **<- Colored Amber incorrectly**
Here is the dashboard source of the table:
<table id="response_time_highlight">
<title>NOTE: An Objective and/or Threshold of 100 indicates that an Objective and/or Threshold have not been identified for this particular transaction type.</title>
<search>
<query>index=arm sourcetype="arm:transaction" region="$region$" sitename="$sitename$" transaction_status IN ( $transaction_status$ ) username IN ( $username$ ) workstation_name IN ( $workstation_name$ ) transaction_name IN ( $transaction_name$ )
| stats count avg(response_time) AS response_time BY transaction_name objective threshold
| eval threshold=round(threshold,2)
| eval objective=round(objective,2)
| eval response_time=round(response_time,2)
| fields transaction_name count response_time objective threshold
| rename response_time AS "Average Response Time" transaction_name AS "Transaction Type" objective as Objective threshold as Threshold count as "Transaction Count"
| sort +transaction_name</query>
<earliest>$search_time.earliest$</earliest>
<latest>$search_time.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">true</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
Here is the Javascript code (modified version of the dashboard examples one):
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
var objective_value;
var threshold_value;
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
// Enable this custom cell renderer for response_time field
return _(['Average Response Time', 'Objective', 'Threshold']).contains(cell.field);
},
render: function ($td, cell) {
// Add a class to the cell based on the returned value
var value = parseFloat(cell.value);
if (cell.field === 'Objective') {
objective_value = value;
}
if (cell.field === 'Threshold') {
threshold_value = value;
}
// Apply interpretation for number of historical searches
if (cell.field === 'Average Response Time') {
if (value >= threshold_value) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value >= objective_value) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value < objective_value) {
$td.addClass('range-cell').addClass('range-low');
}
}
// Update the cell content
$td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('response_time_highlight').getVisualization(function (tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
EDIT: Added a console.log to the javascript showing the output of each field. Noticed that some are showing as undefined, and pushing the correct numbers down to the next row. Here is the output:
0 undefined undefined
8.64 100 100
7.52 2 6
0 2 6
7.52 2 6
1.11 10 25
2.28 2 6
2.92 2 6
... View more