Splunk Search

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

HattrickNZ
Motivator

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.

0 Karma

Amiel_
Engager

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

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

0 Karma

aljohnson_splun
Splunk Employee
Splunk Employee

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

alt text

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
Motivator

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

0 Karma

aljohnson_splun
Splunk Employee
Splunk Employee

Not yet. Maybe some day.

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