topic Re: Advanced XML - Highlight certain values in a table (not numerical) in Splunk Search

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

MHibbin — Fri, 16 Mar 2012 08:50:40 GMT

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");
                }
            });
        }
    });
}

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

Drainy — Fri, 16 Mar 2012 09:31:49 GMT

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.

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

MHibbin — Wed, 11 Jul 2012 11:47:04 GMT

@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

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

alenseb — Thu, 27 Sep 2012 18:06:09 GMT

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!

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

alenseb — Thu, 27 Sep 2012 18:15:41 GMT

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");});

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

alenseb — Fri, 28 Sep 2012 07:31:06 GMT

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

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

sideview — Fri, 28 Sep 2012 07:35:57 GMT

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.

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

MHibbin — Fri, 28 Sep 2012 08:27:13 GMT

@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)

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

sideview — Fri, 28 Sep 2012 15:39:07 GMT

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!

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

sideview — Tue, 09 Oct 2012 20:11:23 GMT

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