I am trying to color my table rows based on the severity value (Critical, Major, Minor)
following is my xml:
<dashboard stylesheet="application.css" script="application.js">
<label>My Dashboard</label>
<search id="basesearch" ref="comparison_idx_appid"></search>
<row>
<panel>
<table id="highlight">
<title>165</title>
<search base="basesearch">
<query>|search ApplicationID=165|table HostName,Severity| where HostName!=" "</query>
</search>
<option name="count">50</option>
<option name="drilldown">row</option>
<option name="refresh.display">preview</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>
JS File:
// cellvalue_highlight.js
// Bringing in our required resources
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
],
function(_, $, mvc, TableView) {
// Create some arbitrary table ids to iterate on (these can be any id's you prefer, I am using A for simplicity)
var tableids = ["highlight"];
// Determine how many tables we have
var tableidlength=tableids.length;
// Create our highlight function
var Cellvaluerenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return true;
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = cell.value;
// In this example I am looking at the field "Severity" for values of Major, Minor, Critical
if (cell.field == 'Severity') {
if (value=='Minor') {
$td.addClass('range-low');
}
if (value=='Major') {
$td.addClass('range-elevated');
}
if (value=='Critical') {
$td.addClass('range-severe');
}
}
// Update the cell content
$td.text(value);
}
});
// Iterate over each table in our tableids array, we need to make sure our XML tables include one of these ids for the highlighting to work
for (var i = 0; i < tableidlength; i++) {
if (mvc.Components.get(tableids[i])){
mvc.Components.get(tableids[i]).getVisualization(function(tableView) {
tableView.table.addCellRenderer(new Cellvaluerenderer());
tableView.table.render();
});
}
}
});
CSS File:
`
/* Cell Highlighting */
/*
.highlight td {
background-color: #c1ffc3 !important;
}
*/
td.range-low {
color: #C0D9D9;
background-color: #3aea13 !important;
font-weight: bold;
}
td.range-elevated {
background-color: #ffc57a !important;
font-weight: bold;
}
td.range-severe {
background-color: #ee2d0b !important;
/d59392/
font-weight: bold;
}
`
I am only trying to color the rows in my first table. Can someone guide me on how to achieve it?
I have also tried the below in my CSS file. Still did not help much:
`#highlight tr.range-low td{
color: #C0D9D9;
background-color: #3aea13 !important;
font-weight: bold;
}
highlight tr.range-elevated td{
background-color: #ffc57a !important;
font-weight: bold;
}
highlight tr.range-severe td{
background-color: #ee2d0b !important;
/*d59392*/
font-weight: bold;
}
`
Also, I need to know how can I use the value of Severity field to calculate the color, but without showing it in my dashboard.
Any help will be much appreciated..
... View more