Example: Search progress events using JavaScript for apps outside Splunk Web

This example uses JavaScript to retrieve the progress of a search, including the status of the search and the properties of the search job.

To use this code, save it as an HTML file in your own web site's directory. Be sure to update the splunkjs.config section for your own web app. The authenticate function redirects to a login_form.html example login page, which you can find here. For more, see Use SplunkJS Stack in your own web apps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Progress Events</title>

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

<body>
    <div>
        <div class="main-area">
            <p>A search (<tt>index=_internal | head 50000</tt>) runs when the page is loaded. Progress is indicated here by displaying the number of matching events.</p>
            <p>When the search has completed, an object containing the properties of the search job is displayed in the console.</p>
            <h4><div id="progresstext">...status...</div></h4>

        </div>
    </div>

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

    <script>
        // Configure SplunkJS Stack
        splunkjs.config({
            proxyPath: "/proxy",
            scheme: "https",
            host: "localhost",
            port: 8089,
            authenticate: function(done) { 
                require([
                    "jquery",
                    "jquery.cookie"
                ], function($) {
                    // Retrieve the session key and username from cookies
                    var splunkSessionKey = $.cookie("splunk_sessionkey");
                    var splunkCurrentUser = $.cookie("splunk_username");

                    // Log in using the session key and username
                    if (splunkSessionKey) {
                        done(null, {sessionKey: splunkSessionKey, username: splunkCurrentUser}); 
                    }
                    // If there is no session key, redirect to the login form
                    else {
                        window.location.replace("login_form.html");
                    }
                });
            }
        });
        
        // Configure the web site's base URL
        require.config({
            baseUrl: "static/"
        });

        // Set up the Web Framework components
        var deps = [
            "splunkjs/ready!",
            "splunkjs/mvc/searchmanager"
        ];
        require(deps, function(mvc) {
            // Load individual components
            var SearchManager = require("splunkjs/mvc/searchmanager");

            // Create the search manager
            var mysearch = new SearchManager({
                id: "search1",
                app: "search",
                cache: false,
                search: "index=_internal | head 50000" 
            });

            mysearch.on("search:failed", function(properties) {
                // Print the entire properties object
                console.log("FAILED:", properties);
                document.getElementById("progresstext").innerHTML="Failed!";
            });

            mysearch.on("search:progress", function(properties) {
                // Print just the event count from the search job
                console.log("IN PROGRESS.\nEvents so far:", properties.content.eventCount);
                document.getElementById("progresstext").innerHTML="In progress with " + properties.content.eventCount + " events...";
            });

            mysearch.on("search:done", function(properties) {
                // Print the search job properties
                console.log("DONE!\nSearch job properties:", properties.content);
                document.getElementById("progresstext").innerHTML="Done!";
            });
        });
    </script>
</body>
</html>