Display images instead of field values

[username021]

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 ?

[username021]

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

}

[linu1988 · Accepted solution]

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]

Thanks linu. below Jscript will work for multiple columns.

[username021]

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.

[linu1988]

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

[username021]

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.

[linu1988]

Great, mark it as answer if so 🙂

[alacercogitatus]

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