Dashboards & Visualizations

How to assign color a table row based on a value (preferably hidden field)?

pratyush46
New Member

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..

0 Karma

aaraneta_splunk
Splunk Employee
Splunk Employee

@pratyush46 - Did the answer provided by niketnilay help provide a working solution to your question? If yes, please don't forget to resolve this post by clicking "Accept". If no, please leave a comment with more feedback. Thanks!

0 Karma

niketn
Legend

Which version of Splunk are you using? For Splunk 6.5 onwards Table cell/row highlighting is built in by default. For previous versions you will require JS and CSS.

I hope your logic to color rows based on severity is working, if not you can try refer to the Table Row Highlighting example provided with Splunk 6.x Dashboard Examples App which you can download from Splunkbase. Once you have made sure the row is getting highlighted based on range values, you can use fields option for table to show only required fields (in your case HostName).

Add the following code to table section along with other options. This will hide Severity field from the table.

<fields>HostName</fields>

Also, looking at you Splunk search query, it would be better if you filter Blank HostName upfront rather than in the final pipe.

<query>|search ApplicationID=165|table HostName,Severity| where HostName!=" "</query>

Should be changed to or if possible in your base search before collecting stats.

<query>|search ApplicationID=165 HostName!=" "|table HostName,Severity</query>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@pratyush46 is your issue resolved?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

Cuyose
Builder

This response does not appear to be correct, I can see no way to color a row based on a cell value in Splunk 7+

0 Karma

niketn
Legend

@Cuyose instead of going back after an older post with a different version, I would recommend creating a new question with specific issue that you are facing.

Table Row Highlighting option in version 6.6 onward using Simple XML CSS and JS extension along with Splunk JS stack requires setTimeout() to add a delay in the table cell rendering. You should be able to find more recent examples on Splunk Answers which do the needful.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...