Developing Views and Apps for Splunk Web

Customize event display

There are several ways you can customize how events appear and behave in a view:

• Change formatting and add icons or decorations to the text
• Use JavaScript to change behavior of displayed events
• Use CSS to change the presentation
• Use HTML to change the structure

For example, use custom event renderers to flag all compliance events as NOT OK and display a red exclamation point next to them.

If you're not familiar with event types, you can read about them in "About event types" in the Knowledge Manager Manual.

Configuration

This section shows you several ways to customize the appearance of events.

1. Create an event type that includes the data to which you want to apply a custom renderer. For information on building event types, see "Define and maintain event types in Splunk Web" in the Knowledge Manager Manual.

Place the event type in the app directory in which you are working:

$SPLUNK_HOME/etc/apps/<app_name>/local/eventtypes.conf

2. Add a mapping to event_renderers.conf, located here:

$SPLUNK_HOME/etc/apps/<app_name>/local/event_renderers.conf

3. Add custom CSS, HTML or JavaScript to your app to determine the presentation, structure or behavior of events.

Place CSS and JavaScript here:

$SPLUNK_HOME/etc/apps/<app_name>/appserver/static

Place HTML here:

$SPLUNK_HOME/etc/apps/<app_name>/appserver/event_renderers/

event_renderers.conf

Add an event_renderers.conf file to the following location to link your HTML template to the event type you want to style:

$SPLUNK_HOME/etc/apps/<app_name>/local/event_renderers.conf

Here's an example event_renderers.conf file that creates three different event renderers.

[event_renderer_1]
eventtype = hawaiian_type
priority = 1
css_class = EventRenderer1

[event_renderer_2]
eventtype = french_food_type
priority = 1
template = event_renderer2.html
css_class = EventRenderer2

[event_renderer_3]
eventtype = japan_type
priority = 1
css_class = EventRenderer3

To write your own event renderers, add stanzas to event_renderers.con:

Name	Description
[<stanza_name>]	Unique name for the stanza, which can be anything you want.
eventtype = eventtype	Specify the event type name from eventtypes.conf.
template = valid html	Write the template and place it into the app's event_renderers directory: ($SPLUNK_HOME/etc/apps/<app_name>/appserver/event_renderers).
priority = positive integer	Set the priority for this event renderer to show on this event type. An event can have multiple event types, use the priority key to control load ordering. Highest number takes precedence. The default renderer has a priority of 100.
css_class = CSS class name	CSS class name suffix to apply to the parent event element class attribute. This can be any valid css class value. The value is appended to a standard suffix string of splEvent-. A css_class value of foo results in the parent element of the event having an html attribute class with a value of splEvent-foo (class="splEvent-foo"). You can externalize css style rules for this in: $SPLUNK_HOME/<app_name>/appserver/static/application.css. For example, to make the text red add the following to your app's application.css: .splEvent-foo { color:red; }

Add custom HTML

Add custom HTML to set up a new event renderer -- specifically, to change the order and structure of events displayed in a view. Add your HTML file to the following directory:

$SPLUNK_HOME/etc/apps/<app_name>/appserver/event_renderers

.

Make sure you reference your HTML file by name in event_renderers.conf, with the template attribute.

The custom HTML you build inherits from the default template. The default template for displaying search results is located here:

$SPLUNK_HOME/share/splunk/search_mrsparkle/modules/results/EventsViewer_default_renderer.html

.

To inherit the default file, add this to your HTML:

<%inherit file="//results/EventsViewer_default_renderer.html" />

Customize the display structure of events by overriding the settings from the default renderer and creating a custom layout. For example:

## override
<%def name="event_raw(job, event, request, options, xslt)">
    <a href="http://www.yelp.com/search?find_desc=french&find_loc=San+Francisco%2C+CA&ns=1&rpp=10" target="_blank">French restaurants in San Francisco</a>
    <img src="${make_url('/static/app/stubby/event_renderer2.jpg')}" />
</%def>

## remove
<%def name="event_fields(job, event, request, options)">
    <!-- remove all fields structural markup -->
</%def>

## parent
<%def name="event_time(job, event, request, options)">
    ${parent.event_time(job, event, request, options)}
</%def>

Here is the stanza in event_renderers.conf for this event renderer:

[event_renderer_2]
eventtype = french_food_type
priority = 1
template = event_renderer2.html
css_class = EventRenderer2

Add a custom CSS file

Create an application.css file for an app at the following location:

$SPLUNK_HOME/etc/apps/<app_name>/appserver/static

The rules in this CSS file apply only to the app in which the CSS file is located. For more information about adding CSS to Splunk apps in general, see "Customize CSS" in this section.

Here's an example application.css file that inserts a background picture and changes the size of the events:

.splEvent-EventRenderer1 {
  background:url(event_renderer1.jpg) 100px 0px no-repeat;
  height:60px;
}
.splEvent-EventRenderer1 .event, .splEvent-EventRenderer1 .fields {
  display:none;
}

Here is the stanza in event_renderers.conf for the CSS class defined in application.css:

[event_renderer_1]
eventtype = hawaiian_type
priority = 1
css_class = EventRenderer1

Add custom JavaScript

Add JavaScript to a view to specify custom actions additional functionality on specific events.

To add JavaScript, create an application.js file in the following location:

$SPLUNK_HOME/etc/apps/<app_name>/appserver/static

This file contains custom JavaScript to apply to an app. Bind the JavaScript to the CSS class in the event_renderers.conf file:

$(document).bind("splEvent-<css_class_name>", <js function name>);

The following JavaScript code creates a link to search Google in Japanese from events in Splunk.

function eventRenderer3Handler(event, options){
   var type = options.nativeEvent.type;
   var target = options.nativeEvent.target;

   //cancel all mouse hover behavior
   if(type=="click"){
       var q = encodeURIComponent($(options.nativeEvent.target).html())
       window.location.href = 
          "http://www.google.co.jp/search?hl=ja&source=hp&q="+q+"&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=&aq="+q+"&oq=;"
       options.nativeEvent.preventDefault();
   }
}
$(document).bind("splEvent-EventRenderer3", eventRenderer3Handler);

Here is the stanza in event_renderers.conf for the custom JavaScript event behavior:

[event_renderer_3]
eventtype = japan_type
priority = 1
css_class = EventRenderer3