Developing Dashboards, Views, and Apps for Splunk Web

 


Embed Splunk dashboard elements in third party software

This documentation does not apply to the most recent version of Splunk. Click here for the latest version.

Embed Splunk dashboard elements in third party software

Using HTML IFrames, you can embed Splunk views containing graphs and charts in another web application.

Starting with version 4.1, Splunk supports single sign-on (SSO). Using a URI of a view configured for SSO, you can embed Splunk views in HTML documents by passing the URI as the src attribute to the <iframe> tag of a third party document.

<iframe src ="http://myhostthroughproxy:8000/en-US/app/foo/myview" width="100%" height="300">

This topic illustrates the basic steps for embedding a Splunk view in a third party HTML document. The example uses insecure login to simplify the explanation. For security reasons, you should implement this feature using SSO.

1. Enable insecure login

Caution: The example below uses insecure login. Anyone with access to the page can get the user credentials by viewing the link url.

To enable access to the view you want to embed, configure web.conf for inseceure longin. Add the following stanza to a local version of web.conf:

[settings]
enable_insecure_login = true
...

Restart Splunk to enable the configuration setting.

If you're unfamiliar with how Splunk configuration files work, read the Admin manual topic "About configuration files."

2. Create the view in Splunk

Create the view you want to embed. The view should contain only the modules you want to display in your portal. Strip out any of the Splunk chrome.

Note: Splunk only supports Advanced XML for embedding views in third party HTML pages. You cannot use Simplified XML.

Save the view here:

$SPLUNK_HOME/etc/apps/<app_name>/local/data/ui/views/<view_name>.xml

Example view

Here's an example view with the Splunk chrome stripped out. It shows only a chart driven by a hidden search.

<view template="dashboard.html">
  <module name="HiddenSearch" autoRun="True" layoutPanel="panel_row1_col1">
    <param name="search">sourcetype=access_common | timechart span=5m count</param>
    <param name="earliest">-24h</param>
    
    <module name="HiddenChartFormatter">
      <param name="chart">line</param>
      <param name="primaryAxisTitle.text">Time</param>
      <param name="legend.placement">bottom</param>
      <param name="chartTitle">Stuff past 24 hours</param>
      
      <module name="JobProgressIndicator"/>
      <module name="FlashChart"/>
      
    </module>
  </module>
</view>

After editing the view, refresh it by loading this URI:

https://localhost:8089/servicesNS/<user_name>/<app_name>/data/ui/views?refresh=1

3. Create an IFrame in an HTML document

Embed the view in an IFrame of the HTML document using the insecurelogin endpoint as the src attribute to the <iframe> tag. The endpoint contains parameters for username, password, return_to. Replace username and password with the appropriate login values. URI escape the value of the return_to parameter. Here's a link to a third party URI encoder.

http://splunkserver:8000/account/insecurelogin?username=admin&password=changeme&return_to=/app/foo/myview

Example HTML

Here's an example of adding an IFrame into an HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Splunk Stuff</title>
</head>
<body>
<!-- content starts here -->

<h1>Hey Look At My Pretty Pictures!</h1>

<iframe src ="http://myhost:8000/account/insecurelogin?username=test_user&password=changeme&return_to=%2Fapp%2Fmy_test_app%2Fmy_view"
    width="100%" height="300">
  <p>Your browser does not support IFrames.</p>
</iframe>

<!-- content ends here -->
</body>
</html>

This documentation applies to the following versions of Splunk: 4.3 , 4.3.1 , 4.3.2 , 4.3.3 , 4.3.4 , 4.3.5 , 4.3.6 View the Article History for its revisions.


You must be logged into splunk.com in order to post comments. Log in now.

Was this documentation topic helpful?

If you'd like to hear back from us, please provide your email address:

We'd love to hear what you think about this topic or the documentation as a whole. Feedback you enter here will be delivered to the documentation team.

Feedback submitted, thanks!