How to color a table row based on a cell's value?

[andrei1bc]

Hi

My search:

index="index1" OR index="4" | eval Value=if(index="index1", round(((Value-100)*-1), 0), round(Value, 0)) | where Value>50

I am trying to color the table in red, yellow, and green using the numbers returned from Value. The table has 2 columns -> test1 and test2. Value result will be listed under test2 column and the colors should be: 0-60 green , 60-80 yellow , 80-100 red.

CSS :

td.icon {
    text-align: center;
}

td.icon i {
    font-size: 25px;
    text-shadow: 1px 1px #aaa;
}
td.icon .severe {
    color: red;
}
td.icon .elevated {
    color: orange;
}
td.icon .low {
    color: green;
}
    /* Row Coloring */
#highlight tr td {
    background-color: #c1ffc3 !important;
}

#highlight tr.range-elevated td {
    background-color: orange !important;
}
#highlight tr.range-severe td {
    background-color: red !important;
}
#highlight .table td {
    border-top: 1px solid #fff;
}
#highlight td.range-severe, td.range-elevated {
    font-weight: bold;
}
.icon-inline i {
    font-size: 18px;
    margin-left: 5px;
}
.icon-inline i.icon-alert-circle {
    color: #ef392c;
}
.icon-inline i.icon-alert {
    color: #ff9c1a;
}
.icon-inline i.icon-check {
    color: #5fff5e;
}

Script file :

 require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['test2']).contains(cell.field);
        },
        render: function($td.cell) {
            var value = parseFloat(cell.value)
            if (cell.field === 'test2') {
                    if (value > 80) {
                    $td.addClass('range-cell').addClass('range-severe');
                     }
                }
            }
        }
    });
    mvc.Components.get('highlight').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
            tableView.$el.find('td.range-cell').each(function() {
               $(this).parents('tr').addClass(this.className);
            });
        });
        tableView.addCellRenderer(new CustomRangeRenderer());
    });
});

The result i get is all table rows in green, regardles of the value. Please help and thank you in advance.

[gyslainlatsa · Accepted solution]

hi andrei1bc,

that is the value for the file that use for do the test:

name     test1    test2
a          12       25
b           2        2
c           3        61
d         12       75
e           3       81
f            8       90
g          5       50
h         1       95
i          3       70

next try like this:

table_row_highlighting.xml

<dashboard script="table.js" stylesheet="table.css">
    <label>Table Row Highlighting</label>

    <row>
        <table id="highlight">
            <title>Row Coloring</title>
            <searchString>index=test |table name test1 test2</searchString>
            <earliestTime>0</earliestTime>
            <option name="drilldown">none</option>
        </table>
    </row>

</dashboard>

table.js

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 _(['test2']).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 === 'test2') {
                if (value < 60) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if(value > 60 && value < 80) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if(value > 80 && value < 100) {
                    $td.addClass('range-cell').addClass('range-higher');
                }

            }

            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });

    mvc.Components.get('highlight').getVisualization(function(tableView) {
        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).parents('tr').addClass(this.className);
            });
        });
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });

});

table.css

/* Row Coloring */
#highlight tr.range-elevated td {
    background-color: #329606 !important;               
}

#highlight tr.range-severe td {
    background-color: #F1FF70 !important;              
}

#highlight tr.range-higher td {
    background-color: #D6344D !important;              
}

#highlight td.range-severe, td.range-elevated, td.range-higher{
    font-weight: 800;
}

don't forget to restart splunkd
after restart, the result is this:

let know if it's work

please forgive my english

[PowerPacked]

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

[niketn]

@PowerPacked this is a very old question from 2016 to bump, however you should be able to apply table row coloring based on String values as well. Following is an olde answer of mine: https://answers.splunk.com/answers/581747/change-row-color-when-the-field-time-value-increas.html
or https://answers.splunk.com/answers/583047/can-i-color-a-cell-based-on-condition.html

You would need to ensure to add a setTimeout() function if you are running Splunk 6.6 or higher. Refer to another answer: https://answers.splunk.com/answers/614788/splunk-dashboard-examples-table-row-highlighting-b.html

Finally also wanted to show you purely SimpleXML based approach for table row coloring based on expression colorPalette format.: https://answers.splunk.com/answers/820403/how-to-change-font-color-based-on-a-condition-for.html

Please upvote the respective answer/s if you find them helpful 🙂

[andrei1bc]

gyslainlatsa your solution worked. Thank you.

As far as it goes with the CSS update issue, it was not related to the browser cache but to the fact that i was using the script in 3 tables instead of 1. So i added this to the script :

 mvc.Components.get('highlight_table1').getVisualization(function(tableView) {
     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).parents('tr').addClass(this.className);
         });
     });

 mvc.Components.get('highlight_table2').getVisualization(function(tableView) {
     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).parents('tr').addClass(this.className);
         });
     });

 mvc.Components.get('highlight_tabel3').getVisualization(function(tableView) {
     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).parents('tr').addClass(this.className);
         });
     });

I have also modified the CSS file to reflect the changes, this way i can use individual colors in each table.

/* Row Coloring */
#highlight_table1 tr.range-elevated td {
    background-color: #329606 !important;                  
}

#highlight_table1 tr.range-severe td {
    background-color: #F1FF70 !important;               
}

#highlight_table1 tr.range-higher td {
    background-color: #D6344D !important;               
}

#highlight_table1 td.range-severe, td.range-elevated, td.range-higher{
    font-weight: 800;
}

#highlight_table2 tr.range-elevated td {
    background-color: #329606 !important;                  
}

#highlight_table2 tr.range-severe td {
    background-color: #F1FF70 !important;               
}

#highlight_table2 tr.range-higher td {
    background-color: #D6344D !important;               
}

#highlight_table2 td.range-severe, td.range-elevated, td.range-higher{
    font-weight: 800;
}

#highlight_table3 tr.range-elevated td {
    background-color: #329606 !important;                  
}

#highlight_table3 tr.range-severe td {
    background-color: #F1FF70 !important;               
}

#highlight_table3 tr.range-higher td {
    background-color: #D6344D !important;               
}

#highlight_table3 td.range-severe, td.range-elevated, td.range-higher{
    font-weight: 800;
}

[cpt12tech]

This is a great answer because it helped me learn more about coloring rows and using it for multiple tables in a dashboard.

It wasn't working for me until I found this post:
https://answers.splunk.com/answers/318747/can-i-have-hidden-fields-in-a-tableview.html

I got two tables in the same dashboard working by creating a separate .js file for each table.
Instead of having two
mvc.Components.get()
in the same .js document I created two .js documents each with a single mvc.Component.get() named for the appropriate table.

[cpt12tech]

This was a great answer, mainly because it showed me how to run multiple tables from a .js file and learn more about how to color rows.

I was having problems getting a second table to populate in a dashboard using row highlighting.

Finally found this post here:
https://answers.splunk.com/answers/306849/rangemap-cell-formatting-for-multiple-tables.html

where someone created two .js files, one for each table. In this thread it would be three .js files. And now the .js scripts are correctly formatting the tables.

[gyslainlatsa]

thank, I'm happy for you

please don't forget to vote

[andrei1bc]

Thank you for the clear post. But the CSS does not seem to update if modified (just the color code) and restarting splunk does not fix it . Any suggestions ?

[gyslainlatsa]

hi andrei1bc,

I had the same problem when I was looking for the solution. trying to empty the cache of your browser

if it works, do not forget to vote and accept my answer.

[jeffland]

Make sure you clean your browser's cache for the page, e.g. STRG-F5 (depends on your browser).