Customize event display

Customize event display

Customize how your events look and behave by changing formatting, adding icons or decorations to the text, or adding custom JavaScript. Map event types you've defined to custom CSS, HTML or JavaScript. Use CSS to change the presentation, use HTML to change the structure and use JavaScript to change behavior of displayed events. For example, use custom event renderers to flag all your compliance events as NOT OK and display a red exclamation point next to them.

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

Configuration

1. First, create an event type that includes the data you want to apply a custom renderer to. If you're not familiar with how to build event types, read more about defining event types in the Knowledge Manager Manual. Put the event type in the app directory you're working in: $SPLUNK_HOME/etc/apps/<app_name>/local/eventtypes.conf.

2. Add a mapping to event_renderers.conf in $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 your events. CSS and JavaScript going into the ../appserver/static directory in your app, and HTML goes into the ../appserver/event_renderers/ directory in your app.

event_renderers.conf

Add an event_renderers.conf to $SPLUNK_HOME/etc/apps/<app_name>/local/event_renderers.conf that links your HTML template to the event type you want to style.

Here's an example event_renderers.conf 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, set the following:

• [<name>]
  • Unique stanza name.
  • Can be anything you want.

• eventtype = eventtype
  • Specify the event type name from eventtypes.conf.

• template = valid html
  • You can write the template and drop it into your event_renderers dir ($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.
  • Highest number wins.
  • The default renderer has a priority of 100.
  • An event can have multiple event types, use the "priority" key to control load ordering.

• 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 would result in the parent element of the event having an html attribute class with a value of splEvent-foo (eg., class="splEvent-foo"). You can externalize your css style rules for this in $SPLUNK_HOME/<app_name>/appserver/static/application.css. So for example to make the text red you would add to your app's application.css:

.splEvent-foo { color:red; }

Add custom HTML

Add your own custom HTML to set up a new event renderer -- specifically, to change the order and structure of events displayed in your view. Add your HTML file to $SPLUNK_HOME/etc/apps/<app_name>/appserver/event_renderers. Make sure you reference your HTML file by name in your event_renderers.conf, with the template attribute.

The custom HTML you build inherits the default template. The default template for displaying search results is located in $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" />

Then customize the display structure of events by overriding the settings from the default renderer and creating your own 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>

This will interact with the following stanza in event_renderers.conf:

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

Add custom CSS

Create an application.css file in $SPLUNK_HOME/etc/apps/search/appserver/static. CSS rules in this file are applied only to the app they're in. For more information about adding CSS to Splunk apps in general, see the Create custom CSS topic in this section.

Here's an example 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;
}

This interacts with the following stanza in event_renderers.conf:

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

Add custom JavaScript

Add JavaScript to your view that allows you to take custom actions on specific events, or add other functionality to your event view.

To add JavaScript, create an application.js file in $SPLUNK_HOME/etc/apps/search/appserver/static. This file contains JavaScript for your app. Bind your JavaScript to the CSS class from your event_renderers.conf file :

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

This will map to the following event_renderers.conf stanza:

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

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

• Was this topic useful?
• Post a comment