Customize event display

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 the Event types and transactionsl chapter of the Splunk 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 "defining event types" in the Knowledge Manager Manual.

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

$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:

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 the Create custom CSS topic 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

• Was this topic useful?
• Post a comment