Can you do conditional formatting in Splunk, like in Excel? (ex: have a cell color change based on percentage values in a column?)

[HattrickNZ]

Can you do conditional formatting, like in Excel, in Splunk?

For example, can I have conditional formatting on the percent column that the cell color will change based on :
if >=80% Red
if >50% and <=80 Orange
if <=50% Red
name Value percent
name1 900 90%
name2 500 50%
name3 700 70%
name4 300 30%
name5 200 20%

I know you can do heat maps in Splunk, but they do not do what I want.

[Amiel_]

This is possible now, using only xml. (EDIT, SOURCE).

Please take a look to : Simple XML Reference - Splunk Documentation

[aljohnson_splun]

The Splunk 6.x Dashboard Examples app has multiple examples of this:

Here is the table row highlighting example:

Dashboard XML

<dashboard script="table_row_highlighting.js" stylesheet="table_decorations.css">
    <label>Table Row Highlighting</label>
    <row>
        <table id="highlight">
            <title>Row Coloring</title>
            <searchString>index=_internal sourcetype=splunkd component=Metrics group=search_concurrency | eval user=coalesce(user, "system total") | bucket _time span=1h | stats avg(active_hist_searches) as active_hist_searches avg(active_realtime_searches) as active_realtime_searches by _time,user</searchString>
            <earliestTime>-24h</earliestTime>
            <option name="drilldown">none</option>
        </table>
    </row>
</dashboard>

Javascript

Place this in the app's appserver/static folder, e.g. for the search app that would be/opt/splunk/etc/apps/search/appserver/static/. Save it as table_row_highlighting.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 _(['active_hist_searches', 'active_realtime_searches']).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 === 'active_hist_searches') {
                if (value > 2) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
            }
            // 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('highlight').getVisualization(function(tableView) {
        // Add custom cell renderer
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        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);
            });
        });
        // Force the table to re-render
        tableView.table.render();
    });
});

CSS

Put this as a file in the appserver/static as well. Save it as table_decorations.css.

/* Custom Icons */
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: orangered;
}
td.icon .low {
    color: #006400;
}
/* Row Coloring */
#highlight tr td {
    background-color: #c1ffc3 !important;
}
#highlight tr.range-elevated td {
    background-color: #ffc57a !important;
}
#highlight tr.range-severe td {
    background-color: #d59392 !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;
}

[HattrickNZ]

tks but can it be done in just simle xml? without the js or css.

[aljohnson_splun]

Not yet. Maybe some day.