Dashboards & Visualizations

Colorize SimpleResultsTable rows based on field values

mw
Splunk Employee
Splunk Employee

I have a simple table on a dashboard which has various bits of info. In particular, there is a "severity" column. I'd like to colorize each row according to the severity value.

table

Tags (1)

sideview
SplunkTrust
SplunkTrust

If you're willing to use Sideview Utils 2.2, you can use the Sideview Table module instead of Splunk's SimpleResultsTable module, and this becomes quite simple.

Note that the latest version of Sideview Utils is only available from the Sideview site, whereas the version on Splunkbase is relatively old.

After downloading Sideview Utils, installing it (Manager > Apps > Install app from file) and restarting Splunk,

1) use the Table module with its "rowClass" field to use the severity value as a CSS class on each row.

<module name="Table">
  <param name="rowClass">$row.fields.severity$</param>
</module>

2) Put the background colors for each severity value into your application.css file, or into a custom CSS file referenced by your view's stylesheet attribute. Here's an example.

.Table tr.informational td {
    background-color:#72c72d;
    color:#fff;
}
.Table tr.high td {
    background-color:#e67918;
    color:#fff;
}
.Table tr.critical td {
    background-color:#ff0000;
    color:#fff;
    font-weight:bold;
}

and that's it.

sideview
SplunkTrust
SplunkTrust

The rowClass value at runtime can contain spaces, whether or not those spaces come from $field$ value(s) in there or from hardcoded parts. However in CSS this means that multiple classes are being applied indepently to the element. EG: if the rowClass value were "informational 1", then you'd be applying two classes independently, "informational", and "1". I would use eval myClassField=replace(myClassField," ","_")` either in the base search or in a postProcess search, to turn those values into "informational_1", "informational_2", etc.. That will mean they act as a single class.

0 Karma

smolcj
Builder

what if the field name is having some space or if we have to add a wild card in the field value like

    .Table tr.informational 1 td {
background-color:#72c72d;
color:#fff;
}

why i need wildcard because it can be informational 2 informational 3... etc.. something like info*.. is it possible?

0 Karma

mw
Splunk Employee
Splunk Employee

This can be done with a combination of application.js and application.css. Given the table above, and assuming it's found within the "Search" app, you can apply the following:

The table colorization will have to be setup for a specific app context. So, if you have a dashboard within the Search app, and you'd like to colorize a table within that dashboard you'll need to deal with 2 files underneath the /opt/splunk/etc/apps/search directory.

First, you'll need to create /opt/splunk/etc/apps/search/appserver/static/application.js and add a snippet similar to below, being sure to edit the dashboard name and the severity labels accordingly.

/* 
    File: /opt/splunk/etc/apps/search/appserver/static/application.js

    IMPORTANT: Edit "awesome_dashboard" below and enter the correct name of the dashboard to apply this
    logic to.  You may specify more than one 
    i.e. (Splunk.util.getCurrentView() == "dashboard1" || Splunk.util.getCurrentView() == "dashboard2")

    There is another comment section below, please don't miss that one.
*/
if ((Splunk.util.getCurrentView() == "awesome_dashboard") && Splunk.Module.SimpleResultsTable) {
    Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
        onResultsRendered: function($super) {
            var retVal = $super();
            this.myCustomHeatMapDecorator();
            return retVal;
        },
    myCustomHeatMapDecorator: function() {
            $("tr:has(td)", this.container).each(function() {
                var tr = $(this);

                /*
                    IMPORTANT: The section below applies css styling to table rows based on the
                     content of the 5th column.  The exact column number, text value, and css
                     class information will need to modified to suite your table(s).
                */
                if (tr.find("td:nth-child(5)").text() == "informational") {
                    tr.addClass("severityInformational");
                }
                if (tr.find("td:nth-child(5)").text() == "low") {
                    tr.addClass("severityLow");
                }
                if (tr.find("td:nth-child(5)").text() == "high") {
                    tr.addClass("severityHigh");
                }
            });
        },
    });
}

Next, you'll want to edit the /opt/splunk/etc/apps/search/appserver/static/application.css file and add the css classes
which were referenced within the application.js (i.e. severityInformational, severityLow, severityHigh). Of course, you
can do whatever you want with the css.

tr.severityInformational td {
}

tr.severityLow td {
    background-color:#19b3b0 !important;
    color: #fff !important;
    font-weight: bold;
}

tr.severityHigh td {
    background-color:#ed2b21 !important;
    color: #fff !important;
    font-weight: bold;
}

Of course, if you have a custom app where you'd prefer to apply this styling the paths to the application.(js|css) would change accordingly, i.e. /opt/splunk/etc/apps/your_custom_app/appserver/static/application.(js|css)

What you end up with is this: table

kasu_praveen
Communicator

smolcj, Imagine in my case there is a table column "dest", which is representing destination. I am not sure what kind of destinations possible here, So there may be 50 to 100 destinations possible. But I want to color all the rows with similar destinations with a single color.

Also, I can restrict color codes to 8. So if there is 9th variety of destination ("dest" column value), then color code for that should be 1. same as for 10th variety, color code is 2 and so on...That means color codes can repeat here.

Hope you got my question here. Thanks for looking into it.

0 Karma

smolcj
Builder

kasu_praveen, if the values are not known, how u are expecting to color ? what will be the criteria for coloring a row? I think if u explain little more , it will be good. 😄 Hope u got my question .

0 Karma

kasu_praveen
Communicator

I was looking for solution for almost same kind of problem. What if I don't know the values of "severity" column? How to proceed on this case?

0 Karma

Drainy
Champion
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...