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!

Unlock New Opportunities with Splunk Education: Explore Our Latest Courses!

At Splunk Education, we’re dedicated to providing top-tier learning experiences that cater to every skill ...

Technical Workshop Series: Splunk Data Management and SPL2 | Register here!

Hey, Splunk Community! Ready to take your data management skills to the next level? Join us for a 3-part ...

Spotting Financial Fraud in the Haystack: A Guide to Behavioral Analytics with Splunk

In today's digital financial ecosystem, security teams face an unprecedented challenge. The sheer volume of ...