Example: Drilldown properties using JavaScript for apps outside Splunk Web

This example uses JavaScript to show the result of setting different combinations of drilldown properties for the views that allow drilldown actions. A default drilldown action is defined for the page in the onDrilldown function in the SplunkJS Stack configuration. The chart and table views disable the default action and use click event handlers to provide custom drilldown actions.

To use this code, save it as an HTML file in your own web site's directory. Make sure to update the splunkjs.config section for your own web app.

Notes

  • This example uses search results from a sample earthquakes lookup table, and includes fields for latitude and longitude in the search queries. To try it for yourself, download earthquakes.csv to a /lookups directory under an app in $SPLUNK_HOME/etc/apps/, such as $SPLUNK_HOME/etc/apps/search/lookups.
  • 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>Drilldown</title>
    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css" />
    <style>
        .main-area {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div class="main-area">
        <p>You can set drilldown properties for the EventsViewer, SplunkMap, Chart, and Table views.
            <br>This example shows how to define a global drilldown function that displays an alert box with drilldown data (the search query with earliest and latest times). This data object is also displayed in the console.</p>

        <h2>Raw-style events viewer</h2>
        <h4>Global drilldown: enabled</h4>
        <p>Shows how to change the type of drilldown (<tt>full | inner | outer | none</tt>).</p>
        <div id="myeventsviewer"></div>

        <h2>Splunk map</h2>
        <h4>Global drilldown: enabled</h4>
        <p>A click event handler also displays map-click info in the console.</p>
        <div id="mymap"></div>

        <h2>Bar chart</h2>
        <h4>Global drilldown: disabled using the <tt>drilldownRedirect</tt> property</h4>
        <p>Two click event handlers display chart-click and legend-click info in the console.</p>
        <div id="mychart"></div>

        <h2>Table</h2>
        <h4>Global drilldown: disabled using the <tt>preventDefault</tt> method</h4>
        <p>A click event handler displays table-click info in the console.</p>
        <div id="mytable"></div>
    </div>

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

    <script>
        // Configure SplunkJS Stack
        splunkjs.config({
            proxyPath: "/proxy",
            scheme: "https",
            host: "localhost",
            port: 8089,
            onDrilldown: function(e) {
                alert("Search query:\n" + e.q + "\n\nEarliest time: " + e.earliest + "\nLatest time: " + e.latest);
                console.log("Drilldown object: ", e);
            },
            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",
            "splunkjs/mvc/postprocessmanager",
            "splunkjs/mvc/eventsviewerview",
            "splunkjs/mvc/splunkmapview",
            "splunkjs/mvc/chartview",
            "splunkjs/mvc/tableview"
        ];
        require(deps, function(mvc) {
            // Load individual components
            var SearchManager = require("splunkjs/mvc/searchmanager");
            var PostProcessManager = require("splunkjs/mvc/postprocessmanager");
            var EventsViewer = require("splunkjs/mvc/eventsviewerview");
            var ChartView = require("splunkjs/mvc/chartview");
            var TableView = require("splunkjs/mvc/tableview");
            var SplunkMapView = require("splunkjs/mvc/splunkmapview");

            // Define search managers
            // ... for the events viewer
            var searchmain = new SearchManager({
                id: "main-search",
                search: "index=_internal | head 1000 | fields *",
                preview: true,
                cache: true
            });

            // ... for the chart
            var searchsub1 = new PostProcessManager({
                id: "subsearch1",
                managerid: "main-search",
                search: " | stats count by sourcetype"
            });

            // ... for the table
            var searchsub2 = new PostProcessManager({
                id: "subsearch2",
                managerid: "main-search",
                search: " | fields sourcetype, source, host"
            });

            // ... for the map
            var searchmap = new SearchManager({
                id: "map-search",
                search: "| inputlookup earthquakes.csv | rename Lat as lat Lon as lon | geostats count",
                preview: true,
                cache: true
            });

            // Set up an events viewer
            myeventsviewer = new EventsViewer({
                id: "example-eventsviewer",
                managerid: "main-search",
                type: "raw",
                "raw.drilldown": "inner",
                drilldownRedirect: true, 
                count: 3,
                el: $("#myeventsviewer")
            }).render();

            // Set up a Splunk map
            mymap = new SplunkMapView({
                id: "example-splunkmap",
                managerid: "map-search",
                drilldown: true, 
                drilldownRedirect: true, 
                el: $("#mymap")
            }).render();

            // Set up a chart
            mychart = new ChartView({
                id: "example-chart",
                managerid: "subsearch1",
                type: "bar",
                drilldown: "all", 
                drilldownRedirect: false, // Disable global drilldown
                el: $("#mychart")
            }).render();

            // Set up a table
            mytable = new TableView({
                id: "example-table",
                managerid: "subsearch2",
                pageSize: 3,
                wrap: true,
                drilldown: "cell",
                // drilldownRedirect: false, // Use the preventDefault() method instead
                el: $("#mytable")
            }).render();


            // Create a click event handler for the map
            mymap.on("click:marker", function(f) {
                // Display a data object in the console
                var clickdata = f.data;
                console.log("Map click event: ", clickdata["row.count"], "instances at lat: ", clickdata["click.lat.value"], ", long:", clickdata["click.lon.value"]);
            });

            // Create click event handlers for the chart and its legend
            mychart.on("click:legend", function(f) {
                // Displays a data object in the console--the legend text
                console.log("Legend click event: ", f.name2);
            });
            mychart.on("click:chart", function(f) {
                // Displays a data object in the console
                console.log("Chart click event: ", f.value);
            });

            // Create a click event handler for the table
            mytable.on("click", function(f) {
                // Bypass the global drilldown function
                f.preventDefault();

                // Display a data object in the console
                console.log("Table data object:", f.data);
            });

        });
    </script>
</body>
</html>