Splunk Search

Display images instead of field values

username021
Explorer

I have to replace some the table fields with strings like 'ok','warning','critical' with some images.
I have added stanzas in application.css under appserver-> static folder

SimpleResultstable. td.ok {.... }
SimpleResultstable. td.warning {.... }
SimpleResultstable. td.critacal {.... }

I have placed the images in the same directory (OS-unix), but still the dashboard doesn't show the images instead only the strings are displayed.

How can i troubleshoot this ?

Tags (1)
0 Karma
1 Solution

linu1988
Champion

Set this up in you application.css file for the respective splunk app.

.SimpleResultsTable td.warning {
    background-image: url(images/warning.gif);
    background-repeat:no-repeat;
    background-position:5px 3px;
}

.SimpleResultsTable td.ok {
        background-image: url(images/ok.gif);
        background-repeat:no-repeat;
        background-position:5px 3px;
    }

.SimpleResultsTable td.critical {
        background-image: url(images/critical.gif);
        background-repeat:no-repeat;
        background-position:5px 3px;
    }

this goes in the application.js file. Colmn Name and Values should match exactly to the value set in the dashboard. Restart the splunk instance after the change. Take care of the closing braces properly.

if (Splunk.util.getCurrentView() == "**View_Name**") {
    if (Splunk.Module.SimpleResultsTable) {;
        Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
            forEachCellInColumn: function(columnName, callback) {
                var container = this.container;
                container.find("th:contains('" + columnName + "')").each(function() {
                    // does not support colspans.
                    var columnIndex = $(this).parent().children().index($(this));

                    container.find("td:nth-child(" + (columnIndex+1)  + ")").each(function() {
                        callback($(this));
                    });
                });
            },
        onResultsRendered: function() {
            this.forEachCellInColumn("**Column_Name**", function(tdElement) {
                if (tdElement.text()=="ok") {
                    tdElement.text("").addClass("ok");
                } else if(tdElement.text()=="warning") {
                    tdElement.text("").addClass("warning");
                  else {
                    tdElement.text("").addClass("critical");
                }
                }
            });
        }
    });
}

Thanks

View solution in original post

username021
Explorer

This will work for multiple columns :

if (Splunk.util.getCurrentView() == "**View_Name**") {
    if (Splunk.Module.SimpleResultsTable) {;
        Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
            forEachCellInColumn: function(columnName, callback) {
                var container = this.container;
                container.find("th:contains('" + columnName + "')").each(function() {
                    // does not support colspans.
                    var columnIndex = $(this).parent().children().index($(this));
                container.find("td:nth-child(" + (columnIndex+1)  + ")").each(function() {
                    callback($(this));
                });
            });
        },
    onResultsRendered: function() {
        this.forEachCellInColumn("**Column_Name_1**", function(tdElement) {
            if (tdElement.text()=="ok") {
                tdElement.text("").addClass("ok");
            } else if(tdElement.text()=="warning") {
                tdElement.text("").addClass("warning");
              else {
                tdElement.text("").addClass("critical");
            }
            }
        });

this.forEachCellInColumn("**Column_Name_2**", function(tdElement) {
                if (tdElement.text()=="ok") {
                    tdElement.text("").addClass("ok");
                } else if(tdElement.text()=="warning") {
                    tdElement.text("").addClass("warning");
                  else {
                    tdElement.text("").addClass("critical");
                }
                }
            });
    }
});

}

0 Karma

linu1988
Champion

Set this up in you application.css file for the respective splunk app.

.SimpleResultsTable td.warning {
    background-image: url(images/warning.gif);
    background-repeat:no-repeat;
    background-position:5px 3px;
}

.SimpleResultsTable td.ok {
        background-image: url(images/ok.gif);
        background-repeat:no-repeat;
        background-position:5px 3px;
    }

.SimpleResultsTable td.critical {
        background-image: url(images/critical.gif);
        background-repeat:no-repeat;
        background-position:5px 3px;
    }

this goes in the application.js file. Colmn Name and Values should match exactly to the value set in the dashboard. Restart the splunk instance after the change. Take care of the closing braces properly.

if (Splunk.util.getCurrentView() == "**View_Name**") {
    if (Splunk.Module.SimpleResultsTable) {;
        Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
            forEachCellInColumn: function(columnName, callback) {
                var container = this.container;
                container.find("th:contains('" + columnName + "')").each(function() {
                    // does not support colspans.
                    var columnIndex = $(this).parent().children().index($(this));

                    container.find("td:nth-child(" + (columnIndex+1)  + ")").each(function() {
                        callback($(this));
                    });
                });
            },
        onResultsRendered: function() {
            this.forEachCellInColumn("**Column_Name**", function(tdElement) {
                if (tdElement.text()=="ok") {
                    tdElement.text("").addClass("ok");
                } else if(tdElement.text()=="warning") {
                    tdElement.text("").addClass("warning");
                  else {
                    tdElement.text("").addClass("critical");
                }
                }
            });
        }
    });
}

Thanks

username021
Explorer

Thanks linu. below Jscript will work for multiple columns.

0 Karma

username021
Explorer

yeah right. I have mentioned the exact column name.

View name is same.
class values are same.

but , it works perfectly for only 1 column , and not the other.

0 Karma

linu1988
Champion

Please mention the exact column name and the class values it will work. Don't make any duplicate which will not work.

0 Karma

username021
Explorer

HI , I guess its possible to display images for 2 or more columns . I tried by copying the whole function again and passed "Column2_name" , but I couldnt get the images for column 2.

0 Karma

linu1988
Champion

Great, mark it as answer if so 🙂

0 Karma

alacercogitatus
SplunkTrust
SplunkTrust

What is the rest of your CSS? It does make a difference. For live help, use IRC #splunk on Efnet.

0 Karma
Get Updates on the Splunk Community!

Dashboard Studio Challenge - Learn New Tricks, Showcase Your Skills, and Win Prizes!

Reimagine what you can do with your dashboards. Dashboard Studio is Splunk’s newest dashboard builder to ...

Introducing Edge Processor: Next Gen Data Transformation

We get it - not only can it take a lot of time, money and resources to get data into Splunk, but it also takes ...

Take the 2021 Splunk Career Survey for $50 in Amazon Cash

Help us learn about how Splunk has impacted your career by taking the 2021 Splunk Career Survey. Last year’s ...