How to embed splunk dashboard in external web page...

friscos · ‎09-28-2016

Hi, I have created a dashboard in splunk and would like to display the dashboard in external web page. Is that possible to embed dashboard in external web pages?

friscos · ‎09-29-2016

Hi, I see SplunkJS Stack can be used to embed splunk on external web pages.

I am trying the below code but could not get it working. what could be the issue?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Login Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css"/>
    <style type="text/css">
        .fail{
            color: red;
        }
        .main-area {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div class="main-area">
        <h2>Login Form</h2>
        <p>This page tests login and authentication. When you enter a 
            name and password, these credentials are used to log in 
            to Splunk.</p>
        <p>If login is successful, a session key is returned and stored 
            in a cookie, along with the username. Then, you are redirected 
            to another page that uses the same session key.</p>
        <br/>
        <p><b>Username:</b></p>
        <input id="usernamebox" type="text">
        <p><b>Password:</b></p>
        <input id="pwbox" type="password">
        <br/>
        <button class="btn" onclick="onLogin()">Log in</button>
        <br/>
        <div id="errorText"></div>
    </div>

    <script src="static/splunkjs/config.js"></script>

    <script>
        // Set the web site's base URL
        require.config({
            baseUrl: "static/"
        });

        // Log In button function
        function onLogin() {
            require([
                "jquery",
                "splunkjs/splunk",
            ], function($, jssdk) {
                alert('Inside Login');
                // Get the username and passwords
                var username = $("#usernamebox").val();
                var password = $("#pwbox").val();

                // Use the Splunk SDK for JavaScript to log in to Splunk

                // Create a Service object
                var http =  new jssdk.ProxyHttp("/proxy");
                var service = new jssdk.Service(http, {
                    username: username,
                    password: password,
                    scheme: "http",
                    host: "splunkdev", 
                    port: 8000
                });

                // Log in to Splunk
                service.login(function(err) {
                    alert('Inside Service Login');
                    // The session key and username are required for logging in
                    if (!err) {
                        var key = service.sessionKey;
                        // Save the session key and username in cookies
                        $.cookie("splunk_sessionkey", key);
                        $.cookie("splunk_username", username);

                        // Redirect to another page
                        window.location.href = "login_verify.html";  
                    }
                    else {
                        alert('Login Failed');
                        $("#errorText").empty().append("<p class='fail'><br/>Login failed! See the console for error info.</p>");
                        console.error("Login failed: ", err);
                    }              
                });
            });
        }   
    </script>
</body>
</html>

alemarzu · ‎09-28-2016

Hi there mate,

Check this out: http://docs.splunk.com/Documentation/Splunk/latest/Report/Embedscheduledreports

How to embed splunk dashboard in external web page?

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life