Dear Splunk-Community,
I want to color individual cells in a table based on their value in green, orange, and red. The table has 2 columns in question: CPU Load, Memory Usage. I based my code on the Splunk 6.x Dashboard Examples App. In the dashboard, only the column CPU Loads gets a color, the others are simply ignored.
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 _(["CPU Load", " Memory Usage"]).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = parseFloat(cell.value);
// Apply interpretation for number of historical searches
if (cell.field === "CPU Load") {
if (value > 80) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value > 50) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value > 0) {
$td.addClass('range-cell').addClass('range-low');
}
}
if (cell.field === "Memory Usage") {
if (value > 80) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value > 50) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value >= 0) {
$td.addClass('range-cell').addClass('range-low');
}
}
// Update the cell content
$td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
My CSS:
/* Cell Highlighting */
/*
#highlight td {
background-color: #c1ffc3 !important;
}
*/
#highlight td.range-low {
color: #20EE0D;
}
#highlight td.range-elevated {
color: #ffc57a;
font-weight: bold;
}
#highlight td.range-severe {
color: #ff0000;
font-weight: bold;
}
And my dashboard xml:
<dashboard script="table_cell_highlighting.js" stylesheet="table_cell_highlighting.css">
<label>System Performance</label>
<row>
<panel>
<chart>
<search>
<query>source="/home/ubuntu/performance.log" | timechart values(CPU_Load) by cluster</query>
<earliest>0</earliest>
<latest></latest>
</search>
<option name="charting.chart">line</option>
</chart>
</panel>
</row>
<row>
<panel>
<table id="highlight">
<search>
<query>source="/home/ubuntu/performance.log" cluster=Test8 | stats latest(CPU_Load) as "CPU Load" latest(Memory_Usag) as "Memory Usage" by host</query>
<earliest>0</earliest>
<latest></latest>
</search>
<option name="wrap">undefined</option>
<option name="rowNumbers">undefined</option>
<option name="drilldown">row</option>
</table>
</panel>
</row>
</dashboard>
js and css are located in $SPLUNK_HOME/etc/apps/testapp/appserver/static
xml in $SPLUNK_HOME/etc/apps/testapp/local/data/ui/views
Thanks for the support!
You have a typo here return _(["CPU Load", " Memory Usage"]).contains(cell.field);
. Try removing the space before M in Memory.