Customize events display

Customize events display

Use the information in this topic to customize how your events look, including formatting and adding any icons or decorations to the text. Change the default event display by matching event types with custom HTML. Note that the custom HTML is built on mako templates. Read on for instructions.

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

Configuration

Here's how to customize your events:

1. Create an event type for the relevant data.

2. Add an HTML template to structure your events.

3. Create a CSS file to style your events.

4. Link the HTML template to the eventtype via event_renderers.conf.

create an event type

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.

add an HTML template

The HTML template will be loaded every time Splunk loads the specified event type. Templates use Mako (http://www.makotemplates.org/), a template library written in Python. The default template for displaying search results is located in $SPLUNK_HOME/share/splunk/search_mrsparkle/modules/results/EventsViewer_default_renderer.html.

Here is a simple example that takes events from a search and returns a simplified event display:

<%page args="host_app, client_app, event, field_list, job, segmentation" />

<% search  = event.fields['_search']            %>
<% count   = event.fields['_count']             %>
<% tags    = event.fields.get('_tags','')       %>
<% example = event.fields.get('_example','No example') %>

<span id="eventTypeForm"/>

${count} events:  <b>${search}</b><br/>

Example: ${example}<br/>

<a href="#" onclick="Splunk.Popup.createEventtypeForm($('eventTypeForm')[0], 'Save Eventtype', '${search|h}', '${tags|h}');">Save</a>
<a target=_blank href='flashtimeline?q=search+${search|h}'">Test</a> 

add custom CSS

Create a CSS file in $SPLUNK_HOME/etc/apps/search/appserver/static. This file contains CSS rules that are specific to this application. In this case, it contains CSS rules that will be used in the custom event renderer. This is actually optional if you choose to use inline CSS styling in the event renderer template itself. However, it's best practice to use a separate CSS file.

event_renderers.conf

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

Here's an example event_renderers.conf:

[test]
eventtype = test
template = _test.html
template_app = test_app
priority = 100

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 mako template
  • You can write the template and drop it into your event_renderers dir ($SPLUNK_HOME/etc/apps/<app_name>/appserver/event_renderers).

• template_app = valid installed app name
  • Name of the application that includes the event renderer template.
  • Usually this is the name of the app that includes this conf file.

• 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.

Example

Here's a quick example that you can load into the Search App that ships with Splunk. The oldman renderer makes the raw text easier to read.

1. Drop oldman.css into /etc/apps/search/appserver/static. This file contains CSS rules that are specific to this application. In this case, it contains CSS rules that will be used in the custom event renderer. This is actually optional if you choose to use inline CSS styling in the event renderer template itself. However, it's best practice to use a separate CSS file.

oldman.css:

.EventsViewer .oldman {
    font-size: 24pt;
}

2. Drop oldman.html into $SPLUNK_HOME/etc/apps/search/appserver/event_renderers.

oldman.html:

<%page args="job, event, request, options"/>
% if not event.raw:
    <!-- no raw value for this event. -->
% else:
<em class="pos">${event.offset+1}</em>
<em class="time">${event.fields.get('_time', '')}</em>
<pre class="event oldman">${event.raw}

   % if event.raw.isTruncated is True:
       <a href="${ make_route("/module", host_app=host_app, module='Splunk.Module.EventsViewer', action='render', _qs=dict(count=1, field_list=",".join(field_list), has_layout=0, max_lines=0, offset=event.offset, sid=job.sid, segmentation=segmentation)) }" class="showall">${_("Show all %s lines") % event.get('linecount', )}</a>
   % endif

% endif

 % for field_list_item in request['field_list']:  % if event.fields.has_key(field_list_item) and field_list_item[0]!='_':  % for field in event.fields[field_list_item]:
• \ ${field_list_item}=${field}\  % for tag in field.tags: ${tag}\  % endfor  % if enable_field_actions: <a href="#" class="fm">${_("Options")}</a>  % endif

           % endfor
       % endif
   % endfor

</pre> </pre>

If we change in application.css

.EventsViewer .oldman .oldman{
  color:red;
  font-size:24px;
}

This will make only the raw portion in red with font size of 24pt.

Now, say you want to change the fields to display in red with a font size of 24pt. You can do this by finding the HTML you wish to modify and then making changes to application.css. To locate the HTML you wish to modify, use Firefox to view selection source to find the class to modify. This shows the following:

<em class="pos">1</em>
<em class="time">2010-03-03T11:01:50.000-0800</em>
<pre class="event oldman">03-23-2010 13:42:06.085 INFO TcpInputProc - Connection in cooked SSL mode from IP=10.1.7.178
<ul class="fields">
<li> <em class="k">host</em>=<em class="v">splunkserver</em> <a href="#" class="fm">Options</a></li>
<li> <em class="k">sourcetype</em>=<em class="v">splunkd</em> <a href="#" class="fm">Options</a></li>
<li> <em class="k">source</em>=<em class="v">/opt/splunk/var/log/splunk/splunkd.log</em> <a href="#" class="fm">Options</a>

Looking into the view event source you will see the fields section is .fields so modify your CSS to:

.EventsViewer .oldman .fields{
  color:red;
  font-size:24px;
}

This will make all the fields red with font size of 24px.

3. Drop event_renderers.conf into /etc/apps/search/local. This conf tells splunk which event renderer to use for which eventtype. You will need to create an eventtype called ‘oldman’ for this renderer to work.

[oldman]
eventtype = oldman
template_app = search
template = oldman.html
priority = 200

In the eventtypes.conf you have the following:

[oldman]
search = index="_internal" source="*splunkd.log"
eventtype = oldman 

• Was this topic useful?
• Post a comment