Splunk Search

How to change cell colors in a dashboard table based on the value?

kpsg25690
Engager

Hello,

I'm trying to build a dashboard using Splunk 6.2 and I've hit a snag. I want to color a cell in a table depending on the value (numeric and non-numeric).

I've tried multiple answers provided in this forum as well as the dashboard example app, but haven't been able to make anything work.

The following is my dashboard xml

<dashboard script="app.js" stylesheet="app.css">
  <label>Check_Dashboard</label>
  <row>
    <panel>
      <table>
        <searchString>index=eventm* sourcetype=healthcheck | head 3 | table CellName,PrimaryRunning,PrimaryStatus,PrimaryEvents,PrimaryData,PrimaryPolicy,SecondaryRunning,SecondaryStatus,SecondaryEvents,SecondaryData,SecondaryPolicy</searchString>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="health">
        <searchString>index=eventm* sourcetype=healthcheck | head 3 | fields CellName,PrimaryRunning,PrimaryStatus,PrimaryEvents,PrimaryData,PrimaryPolicy,SecondaryRunning,SecondaryStatus,SecondaryEvents,SecondaryData,SecondaryPolicy |stats by CellName,PrimaryRunning,PrimaryStatus,PrimaryEvents,PrimaryData,PrimaryPolicy,SecondaryRunning,SecondaryStatus,SecondaryEvents,SecondaryData,SecondaryPolicy</searchString>
      </table>
    </panel>
  </row>
</dashboard>

And this is my app.js file modified a bit from the examples (I'm not well versed in javascripting):

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 _(['PrimaryRunning']).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 === 'PrimaryRunning') {
if (value == YES ) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value == NO ) {
$td.addClass('range-cell').addClass('range-low');
}
}
// Apply interpretation for number of realtime searches
//if (cell.field === 'active_realtime_searches') {
/* if (value > 1) {
$td.addClass('range-cell').addClass('range-severe');
}
 */}
// Update the cell content
$td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('health').getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});

I've tried restarting after changing the app.js and app.css files. Nothing seems to be working.

Any help is much appreciated.

Thanks.

EDIT:

Here is the app.css file:

#highlight td.range-low {
    color: #C0D9D9 !important;
}

#highlight td.range-elevated {
    background-color: #ffc57a !important;
    font-weight: bold;
}

#highlight td.range-severe {
    background-color: #d59392 !important;
    font-weight: bold;
}
0 Karma
1 Solution

stmyers7941
Path Finder

I'm assuming based on the JS that the values for the 'PrimaryRunning' field are either the string YES or NO, so your if statements need to be like:

if (value === 'YES' ) {
 $td.addClass('range-cell').addClass('range-severe');
 }
 else if (value === 'NO' ) {
 $td.addClass('range-cell').addClass('range-low');
 }

Also, post your CSS if this doesn't help...that needs to match up too.

Update:
Your CSS selector names need to match the id:

#health td.range-low {
     color: #C0D9D9 !important;
 }

 #health td.range-elevated {
     background-color: #ffc57a !important;
     font-weight: bold;
 }

 #health td.range-severe {
     background-color: #d59392 !important;
     font-weight: bold;

View solution in original post

stmyers7941
Path Finder

I'm assuming based on the JS that the values for the 'PrimaryRunning' field are either the string YES or NO, so your if statements need to be like:

if (value === 'YES' ) {
 $td.addClass('range-cell').addClass('range-severe');
 }
 else if (value === 'NO' ) {
 $td.addClass('range-cell').addClass('range-low');
 }

Also, post your CSS if this doesn't help...that needs to match up too.

Update:
Your CSS selector names need to match the id:

#health td.range-low {
     color: #C0D9D9 !important;
 }

 #health td.range-elevated {
     background-color: #ffc57a !important;
     font-weight: bold;
 }

 #health td.range-severe {
     background-color: #d59392 !important;
     font-weight: bold;

PowerPacked
Builder

Hi

Is it possible to do the same for string values in fields instead of numeric.

Am trying this but not working any help provided is appreciated.

if (cell.field !== "source_subnet") {
                 if (value !== "100%") {
                     $td.addClass("range-cell").addClass("range-severe");
                 }
                 // Update the cell content
                 $td.text(value).addClass('string');
             }

Please ignore am using "100%" as string.

Thanks

0 Karma

kpsg25690
Engager

Yes, your assumption is correct, the values in that field is YES or NO, but I have also tried this with other numeric fields to see if it's working or not and it's not.

I also tried using the format you suggested to no result.

I have updated the app.css in the original post for your reference.

0 Karma

kpsg25690
Engager

Still isn't working. Although I think it's not a problem with the CSS but with the javascript itself, I looked at the output in the console window and I couldn't see the class that was added to the field. However in the example app I can see the class.

0 Karma

piUek
Path Finder

I'd start from testing if this function goes in to first and second if.
So please try something like:

if (cell.field === 'PrimaryRunning') {
   console.log('found primaryrunning cell');
  if (cell.value === 'YES') {
    console.log('value = yes, adding class');
  }
  else if (cell.value === 'NO') {
    console.log('value = no, adding class);
  }
  else {
    console.log('value = ' + cell.value);
  }
}

Btw i've noticed that there was value = parseFloat(cell.value) in Your code, and then You are comparing this float against strings 'YES' / 'NO'? This will always evaluate to false.

kpsg25690
Engager

Got It working!! Thanks everybody!

Somehow the javascript was not getting triggered, I cleared the browser cache and everything and also restarted the splunk services and something starting working after that I just tweaked the script a bit to suit my needs.

@piUek I did know about that float value, I had changed it already to process a string but the problem was I couldn't see the script reaching that point and the console logging helped in that.

Thanks piUek and stymers7941!

0 Karma

woodcock
Esteemed Legend

This is not a complete answer but an idea to get you to an answer. Splunk has always supported the concept of heat maps which are implemented using the feature that you need. If you can figure out how splunk does heat-mapping, you should be able to copy it. Here are some places to start:

http://docs.splunk.com/Documentation/Splunk/6.3.0/Viz/Visualizationreference
https://answers.splunk.com/answers/132524/custom-heatmap-logic-in-advanced-xml.html

0 Karma

koshyk
Super Champion

I can see you are adding css class (eg: range-severe) . Hope you have app.css in correct location?

0 Karma

kpsg25690
Engager

I have the css in the appserver/static folder of the app. I have also added the css for reference.

0 Karma

stmyers7941
Path Finder

See updates in my answer - you need to adjust you CSS.

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