Dashboards & Visualizations

How to embed splunk dashboard in external web page?

friscos
Explorer

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?

Tags (1)
0 Karma

friscos
Explorer

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>
0 Karma

alemarzu
Motivator
Get Updates on the Splunk Community!

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...