Add Web resources to your view

Add Web resources to your view

You can use Splunk's Web resource modules to add IFrames or HTML to your view.

Add HTML

Use the ServerSideInclude module to add HTML to your view.

1. Create an html file, for example foo.html, in $SPLUNK_HOME/etc/apps/<appname>/appserver/static.

2. Add all your Web content into the file.

3. Update your view XML to include the ServerSideInclude module:

<view>
  <module name="ServerSideInclude">
    <param name="src">foo.html</param>
  </module>
</view>

NOTE: Your view should be in the respective $SPLUNK_HOME/etc/apps/<appname>/default/data/ui/views/<view>.xml

4. View in your browser

http://<hostname>:<port>/app/<appname>/<view>

Add images

To add an image use the Mako template utility function make_url in your HTML:

<img src="${make_url('/static/app/<app_name>/<image>.png')}" />

Add links

When creating links from an HTML template included via the ServerSideInclude, there are 2 forms:

• Static: <a href=”/manager/foo/bar”>click me</a>

• Dynamic: <a href=”${make_url(‘/manager/foo/bar’)}”>click me</a>

The difference is that the dynamic version uses the ‘make_url’ method, which will properly qualify the URL to the current locale, and insert relevant modifiers for static content or proxied instances. You can also use make_url to insert run-time information like the app name:

<a href=”${make_url([‘manager’, APP[‘id’], ‘foo’, ‘bar’])}”>click me</a>

Note that this second form passes a list as the first argument, not a plain string.

Here are some common variables you can use that are available from within the HTML template system:

• current namespace: APP[‘id’]
• current app friendly label: APP[‘label’]
• current view id (what appears in the URI): VIEW[‘id’]
• current view label: VIEW[‘label’]

These are available if you link into a view with an 's=' saved search name:

• current saved search name: SAVED['name']
• current viewstate ID associated with saved search SAVED['vsid']

Style your page

Use CSS to style your page. Once you've created an HTML page, you can create a corresponding CSS file to set the style of your page.

Note: Splunk's CSS is not scoped, so if you add CSS to your page, make sure you scope your class names. Applying styles to global selectors is not recommended (eg., body {background:pink;}). Instead, use class selectors to control scope and possible collisions (eg., .myclass {background:pink;}).

1. Familiarize yourself with CSS. If you're not familiar with CSS, check out this CSS resource. Specifically, familiarize yourself with how a CSS class selector works. In your HTML document, a class selector is the XHTML element that you're going to style with CSS. For example:

<div class="bar">
  w00t!
</div>

A class selector is defined in CSS by using the "." sign followed by the value of the class attribute (no space between the "." and the name of the class). For example:

.bar {
  background:pink;
}

You can use the same class name within an XHTML document multiple times.

2. Create a CSS file, for example foo.css, in $SPLUNK_HOME/etc/apps/<appname>/appserver/static.

3. Add a CSS rule to the file:

.bar {
  background:pink;
}

Any element with a matching class attribute of "bar" will now be pink.

<div class="bar">
  <h1>I have a pink background now!</h1>
</div>

Add an IFrame

Use the IFrameInclude module to add an IFrame into your view.

1. Figure out what URI you're linking to.

2. Update your view XML to include the IFrameInclude module with a link to that URI:

<view>
  <module name="IFrameInclude">
    <param name="src">myawesomewebsite.com</param>
  </module>
</view>

3. Optionally set the height. This example sets the height to 42 pixels.

<view>
  <module name="IFrameInclude">
    <param name="src">myawesomewebsite.com</param>
    <param name="height">42/param>
  </module>
</view>

4. Optionally check if the URI exists first:

<view>
  <module name="IFrameInclude">
    <param name="src">myawesomewebsite.com</param>
    <param name="check_exists">True</param>
  </module>
</view>

• Was this topic useful?
• Post a comment