How to add Splunk to your own web apps using SplunkJS Stack

To integrate Splunk into your own web app, add the SplunkJS Stack libraries to it:

  1. Download SplunkJS Stack.
  2. Extract the files.
  3. Copy the contents of the SplunkJS_Stack/static/ directory to your web site's static directory.

Now you can add the Web Framework components to your app. This procedure shows how to create a sample page with SplunkJS Stack:

  1. Create an HTML file, then copy and paste the following boilerplate code to it:
  2. <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="yourstaticdirectory/splunkjs/css/bootstrap.css"/>
    </head>
    
    <body>
        <!-- Content -->
    
        <script src="yourstaticdirectory/splunkjs/config.js"></script>
    
        <script>
            splunkjs.config({
                proxyPath: // Proxy server path,
                authenticate: function(done) {
                    // TO DO: Custom authentication function
                },
                onSessionExpired: function (authenticate, done) {
                    // TO DO: Custom session expiration function
                },
                onDrilldown: function(drilldown) {
                    // TO DO: Custom drilldown action
                }
            });
    
            require.config({
                baseUrl: yourbaseurl
            });
    
            var deps = [
                "splunkjs/ready!"
                // Include additional components
            ];
            require(deps, function(mvc) {
                // Load individual components
                // Instantiate components
            });
        </script>
    
    </body>
    </html>
    
  3. Specify your web site's static directory by replacing the yourstaticdirectory placeholders.
  4. Specify your web site's base URL by replacing the yourbaseurl placeholder.
  5. Configure the way your app communicates with the Splunk server by specifying a proxy path or configure your instance of Splunk for cross-origin resource sharing (CORS). For more, see Communicate with the Splunk server for apps outside of Splunk Web.
  6. Create an authentication function, authenticate, to authenticate and log users into the Splunk server. For more, see Authenticate users for apps outside of Splunk Web.
  7. Optionally, create an onSessionExpired function, which is called when the user's session key expires. By default, the authenticate function is called for this function.
  8. Optionally, create a drilldown function, onDrilldown, to create a default drilldown action for tables, events viewers, charts, and Splunk maps. For more, see Customize drilldown actions.
  9. Require dependencies and load the SplunkJS Stack components for your page. For more, see How to create a search manager using SplunkJS Stack.

 

Example

The following code shows an example of a very basic page with a chart and an events viewer that displays results from a search. For more examples, see Splunk Web Framework code examples. For more about authenticating users and getting a session key, see Authenticate users for apps outside of Splunk Web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Basic Page</title>
    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css"/>
</head>

<body>
    <h4>A chart and an events viewer displaying results of a search</h4>
    <div id="mychart"></div>
    <div id="myeventsviewer"></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) { 
                // TO DO: Get a session key from Splunk
                // This example assumes you've stored it and the username in cookies

                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}); 
                    }
                    else {
                        // TO DO: Get a session key from Splunk
                    }
                });
            }
        });

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

        // Set up the Web Framework components
        var deps = [
            "splunkjs/ready!",
            "splunkjs/mvc/searchmanager",
            "splunkjs/mvc/chartview",
            "splunkjs/mvc/eventsviewerview"
        ];
        require(deps, function(mvc) {
            // Load individual components
            var SearchManager = require("splunkjs/mvc/searchmanager");
            var ChartView = require("splunkjs/mvc/chartview");
            var EventsViewerView = require("splunkjs/mvc/eventsviewerview");
            
            // Instantiate the views and search manager
            var mysearch = new SearchManager({
                id: "search1",
                preview: true,
                cache: true,
                status_buckets: 300,
                search: "index=_internal | head 1000 | stats count by sourcetype"
            });

            var mychart = new ChartView ({
                id: "chart1",
                managerid: "search1",
                type: "bar",
                el: $("#mychart")
            }).render();

            var myeventsviewer = new EventsViewerView ({
                id: "eviewer1",
                managerid: "search1",
                el: $("#myeventsviewer")
            }).render();
        });
    </script>

</body>
</html>