Advanced XML - Highlight certain values in a table (not numerical)

[MHibbin]

Hi Splunkbase,

I was just wondering how I would go about highlighting a certain value in my table on a dashboard (e.g. "failed"). This is a realtime dashboard, and I need to highlight the value when it's state is "failed"... the following is an example of the table.

device state
192.168.0.1 passed
192.168.0.2 failed
192.168.2.3 passed
192.168.2.4 passed

So in this example I would like to highlight the "state" value for "192.168.0.2" (possibly the entire row).

Can this be done, if so how?

Regards,

MHibbin

EDIT: updated JS script for IE issues (e.g. with unused ",")

if ((Splunk.util.getCurrentView() === "YOURDASHBOARDXMLNAME") && 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);
                if (tr.find("td:nth-child(3)").text() === "passed") {
                    tr.addClass("passedClass");
                }
                if (tr.find("td:nth-child(3)").text() === "failed") {
                    tr.addClass("failedClass");
                }
            });
        }
    });
}

[sideview]

Sideview Utils 2.2 came out recently, and with it came the Sideview Table module. With the Table module, this sort of thing becomes dead simple.

If you have a field called "state" whose values are "passed" and "failed", then here's your Table:

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

The second piece is the CSS. Put this into application.css, or put it into a custom CSS file referenced by the stylesheet attribute in your view, or use an HTML module to embed it right into the page inside a <style type="text/css"> tag:

.Table tr.passed td {
    background-color:#d7efff;
}
.Table tr.failed td {
    background-color:#d93c3c;
    color:#fff;
}

and the third piece is optional - if you dont want the 'state' field to actually be visible in the Table, you can also add state to the "hiddenFields" param, like so:

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

Note that you can download Sideview Utils 2.2 only from the Sideview website

[Drainy · Accepted solution]

Yes, through the power of JavaScript!!

Put this in application.js in appserver/static folder of your app.

if ((Splunk.util.getCurrentView() == "YOURDASHBOARDXMLNAME") && 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);
                if (tr.find("td:nth-child(3)").text() == "passed") {
                    tr.addClass("passedClass");
                }
                if (tr.find("td:nth-child(3)").text() == "failed") {
                    tr.addClass("failedClass");
                }
            });
        },
    });
}

Just to be clear about, td:nth-child(3). Basically I am assuming you have row numbering at the left of the table, this is actually part of the table and TD in a TR is numbered sequentially from 1 so the row numbers are td:nth-child(1) and that makes your passed/failed column number 3. If you didn't have the row numbers then it would be td:nth-child(2) you need.

Then some CSS gubbins (application.css);

tr.failedClass td {
    background-color:#000000 !important;
    color: #FFFFFF !important;
}

tr.passedClass td {
    background-color:#FFFFFF !important;
    color: #000000 !important;
}

Props to Nick for this, however I can't find/remember where I first discovered this 🙂 If you want you can remove the comparison to the current view name if you just want this to be applied to all third cells across your app.

[sideview]

2.2 should come out in a few weeks depending on some scheduling. Note that the current release is free for internal use. That change happened several months ago. Go to the site ( http://sideviewapps.com/apps/sideview-utils/ ) and click "download full version (internal use only)". For a brief time right after 2.0 launched I tried a model where I charged for basic use. Anyway, you should upgrade because I've been busy and the 1.3.X version on Splunkbase dates from something like Feburuary or March of this year. Ancient!

[MHibbin]

@sideview, when are you planning to release v2.2? - will it follow the same licensing model as the current release? - i.e. a paid for product - or will you release an updated free version (as in the version available on SB)

[sideview]

As a tiny side note: the Table module coming out in Sideview Utils 2.2 will be able to do this quite easily. There is a param called 'classField', which in this case you would set like so: <param name="classField">$row.state$</param> And then you would define CSS classnames for the background colors.

[alenseb]

This problem got solved!
I had to create Home.xml and few settings.

[alenseb]

This is my requirement, i need to color the column according to the column2 values.

column1 column2
198.168.0.1 green
198.168.0.1 red
198.168.0.1 blue
This the code i am using:
myCustomHeatMapDecorator: function() {
$("tr:has(td)", this.container).each(function() {
var tr = $(this);if (tr.find("td:nth-child(3)").text() == "green") {tr.addClass("clsGreen");}
if (tr.find("td:nth-child(3)").text() == "red") {tr.addClass("clsRed");
}
if (tr.find("td:nth-child(4)").text() == "blue") { tr.addClass("clsBlue");});

[alenseb]

Hi,
I have trying to do this, but my application.js does not get called for some reason.
I have created both the .js & .css files.
Is there any other changes i need to do in order to get this working.

I am new to Splunk, any help would be great.

Thanks!

[MHibbin]

@Drainy,

Just thought I would update this, as I have used it quite a bit actually (nice bit of code). However there were some issues running it on IE8. So I ran it through JSLint (http://jslint.com/) and corrected what JSLint thought were errors. Just wanted to check you agreed really... (see above for amendments.

Cheers,

MHibbin