HI newbiesplunk
Here is an exemple of what you need
xml code:
<dashboard script="my.js" stylesheet="my.css">
<label>Log Level</label>
<description/>
<row>
<table id="highlight">
<title>Log Level</title>
<searchString>index=_internal sourcetype=splunkd | stats count log_level |table log_level count </searchString>
<earliestTime>-24h</earliestTime>
<option name="drilldown">none</option>
</table>
</row>
</dashboard>
your .js file must look at this:
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 _(['log_level']).contains(cell.field);
},
render: function($td, cell) {
// Apply interpretation for number of historical searches
if (cell.field === 'log_level') {
if (value == ERROR) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value == INFO) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value == WARM) {
$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
tableView.table.addCellRenderer(new CustomRangeRenderer());
// 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).addClass(this.className);
// });
//});
// Force the table to re-render
tableView.table.render();
});
});
Your css file must be like this:
#highlight td.range-low {
color: orange !important;
font-weight: bold;
}
#highlight td.range-elevated {
background-color: green !important;
font-weight: bold;
}
#highlight td.range-severe {
background-color: red !important;
font-weight: bold;
}
NB: You must put the css and js files in the folder ''static'' of the app that contain the xml dashboard. If there is not change, think to restart splunk to applied changes.
... View more