Splunk Enterprise

Need a javascript for coloring cells or row based on the condition

vengat4043
Path Finder

Below table we have in a dashboard, the cells are highlighted by color using the Javascript. For each cell we wrote the separate javascript file like.,

<dashboard script="Running.js,Ready.js,Stop.js,Pause.js,Emergency.js,CF.js" stylesheet="New.css">

vengat4043_0-1614679458293.png

what we expect is the color of each cell should be same when the Match field value is "Good", if the Match field value is "Bad", Need to Highlight the whole Row.

//Sample Javascript Code:

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 the confirm field
return _(['CF']).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
if (cell.field === 'CF') {
if (value > 0) {
$td.addClass('range-cell').addClass('range-CF');
}
else {
$td.addClass('range-cell').addClass('range-White');
}
}
// Update the cell content
$td.text(value.toFixed()).addClass('numeric');
}
});

mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.addCellRenderer(new CustomRangeRenderer());
});

});

 

//Sample .CSS Code

/* Cell Highlighting */
/*
#highlight td {
background-color: #c1ffc3 !important;
}
*/
#highlight td.range-stop {
background-color: #FF1B09 !important;
}
#highlight td.range-Emergency {
background-color: #CB1708 !important;
}
#highlight td.range-Pause {
background-color: #f7bc38 !important;
}
#highlight td.range-Run {
background-color: #65a637 !important;
}
#highlight td.range-Ready {
background-color: #A2CC3E !important;
}
#highlight td.range-CF {
background-color: #6DB7C6 !important;
}
#highlight td.range-MS {
background-color: #000000 !important;
}
#highlight td.range-White {
background-color: #ffffff !important;
}
#highlight td.range-severe {
background-color: #3358FF !important;
font-weight: bold;
}

How can we do that, can you please help us?

Labels (1)
0 Karma

vengat4043
Path Finder

Hi @ITWhisperer ,

Yes that css done the great job of coloring a row based on the condition, but here we need to if condition for coloring, if Match="Good" the fields (Running, Ready,Pause, Stop, CF) have the color  respectively like(DarkGreen, Green, Orange, Red, Blue) and if Match="Bad" the entire row should be on Dark Blue color.

is it possible?

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Another example here where the colour of the cell is based on the relationship to the previous value e.g. less than, equal or greater than.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

So, rather than appending the value foreach field, have a separate eval for each field you want coloured, which appends either the state (Running, Ready,Pause, Stop, CF) which you colour based on its value, or perhaps more simply you append the name of the colour you want to be used and map that to the colour.

The key point of the technique is to use a multi-value field where you set display to none for one of the indexes, but you evaluate which colour to use based on that hidden value.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

You don't need to use javascript, this can be done with just CSS

Based on @niketnilay solution here 

 <row>
  <panel depends="$stayhidden$">
   <html>
    <style>
     #tableRowColorWithoutJS table tbody td div.multivalue-subcell[data-mv-index="1"]{
      display: none;
     }
    </style>
   </html>
  </panel>
  <panel>
   <table id="tableRowColorWithoutJS">
    <title>Colour Row by log_level: ERROR INFO and WARN</title>
     <search>
      <query>index=_internal sourcetype=splunkd
| stats count last(component) as component 
  last(statusee) as statusee last(publisher) as publisher last(eventType) as eventType by log_level
| foreach * [| eval &lt;&lt;FIELD&gt;&gt;=if("&lt;&lt;FIELD&gt;&gt;"=="log_level",log_level,mvappend('&lt;&lt;FIELD&gt;&gt;',log_level))]</query>
      <earliest>-15m</earliest>
      <latest>now</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">false</option>
     <option name="totalsRow">false</option>
     <option name="wrap">true</option>
     <format type="color">
      <colorPalette type="expression">case (match(value,"ERROR"), "#DC4E41",match(value,"WARN"), "#F8BE34",match(value,"INFO"),"#53A051",true(),"#C3CBD4")</colorPalette>
     </format>
    </table>
   </panel>
 </row>

 

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!