How to show a custom icon for a single value module (such as a stoplight)?

[LukeMurphey]

What is the best way to display an icon (such as a stoplight) in a dashboard that changes based on results? I'm looking for something to display status in method similar to single value except that I want something that displays an icon instead of just displaying a different colored text.

[cevyn]

Maybe its obvious to everyone else but I guess we all have gaps in our knowledge(me for sure).
1) do I add the css to dashbaord.css in splunk 6 or replace existing?
2) The XML does not seem to reference dashboard.css - is there something under the covers I'm missing?

[gracemaher]

You would need to reference the stylesheet at the top of your xml <stylesheet='nameofyourstylesheet.css">
and you can add it to the dashboard css and reference that if you like, or you can create a new css file and use that.
Just make sure you have the relevant java scripts if you need them.

Hope that helped.

[AnilPujar]

In form/dashboard tags

< form stylesheet="filename.css" script="filename.js" hideFilters="true" hideSplunkBar="true" >

Need to add in the first line of xml

and save the file in ...../appserver/static folder

[LukeMurphey · Accepted solution]

This can be done using a single value module and a little custom CSS.

Here is an example simple XML view with two single value modules:

<?xml version='1.0' encoding='utf-8'?>
<dashboard>
    <row>       
        <single>
            <searchTemplate> * | stats count by sourcetype | stats avg(count) as count | rangemap field=count low=0-1000 default=severe</searchTemplate>
            <option name="field">count</option>
            <option name="classField">range</option>
        </single>
        <single>
            <searchTemplate>* | stats count by sourcetype | stats max(count) as count | rangemap field=count low=0-1000 default=severe</searchTemplate>
            <option name="field">count</option>
            <option name="classField">range</option>
        </single>
    </row>
</dashboard>

We will stylize the single value modules using a stylesheet (CSS). Where you place the stylesheet depends on which version of Splunk you are using:

For Splunk 5.0:

Put the following in application.css ($SPLUNK_HOME//appserver/static/application.css):

.SingleValueHolder.severe{
    background-repeat: no-repeat;
    padding-left: 40px; /* Push the text over so that it doesn't sit on top of the image. Change this according to the dimensions of your image. */

    /* Replace with your image: */
    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_red.png'); /* See http://goo.gl/yxW7O */
}

.SingleValueHolder.low{
    background-repeat: no-repeat;
    padding-left: 40px;

    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_green.png'); /* See http://goo.gl/v4V1A */
}

For Splunk 6.0:

Place the following in dashboard.css ($SPLUNK_HOME//appserver/static/dashboard.css):

.single-value.low{
    background-repeat: no-repeat;
    padding-left: 40px; /* Push the text over so that it doesn't sit on top of the image. Change this according to the dimensions of your image. */
    padding-top: 16px;
    height:48px;
/* Replace with your image: */
    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_red.png'); /* See http://goo.gl/yxW7O */
}

.single-value.low{
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-top: 16px;
    height:48px;
    background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_green.png'); /* See http://goo.gl/v4V1A */
}

Customizing the CSS

The CSS above would apply to all single value modules in your app. You can update the CSS selectors to restrict it to particular views if you wish.

In my example, I refer to the image directly on the Internet. I recommend downloading the image locally to your appserver directly and referring to the local file or encoding the image in base 64 and including it directly in the CSS file. Otherwise, your icons may disappear if the image is no longer available on the Internet.

The styling in this example will produce something like: