Example: A collection of views using JavaScript for apps outside Splunk Web

This example uses JavaScript to display the most common views on one page, shows how to sync search controls to a search manager, and shows how to populate form controls with static choices and search-based choices.

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>A Collection of Views</title>

    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/dashboard.css" />
</head>

<body>
    <div class="dashboard-body container-fluid main-section-body">
        <div class="row">
            <div class="dashboard-header clearfix">
                <p>This example shows how to set up the most common views using JavaScript on one page. Tokens are used to keep the search controls in sync with the search manager.</p>
            </div>
        </div>

        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 80%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>SearchBar</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mysearchbar"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dashboard-cell" style="width: 20%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>TimeRange<br>(also included with SearchBar)</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mytimerange"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 100%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>SearchControls</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mysearchcontrols"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 100%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>Timeline</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mytimeline"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 100%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>EventsViewer</h3>
                        </div>
                        <div class="panel-body">
                            <div id="myeventsviewer"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 100%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>Table</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mytable"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 100%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>Chart</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mychart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 33%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>Single</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mysingle"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dashboard-cell" style="width: 34%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>TextInput</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mytextinput"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dashboard-cell" style="width: 33%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>Checkbox</h3>
                        </div>
                        <div class="panel-body">
                            <p>Check me:</p>
                            <div id="mycheckbox"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>CheckboxGroup (static choices)</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mycheckboxgroup1"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>CheckboxGroup (search-based choices)</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mycheckboxgroup2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>RadioGroup (static choices)</h3>
                        </div>
                        <div class="panel-body">
                            <div id="myradiogroup1"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>RadioGroup (search-based choices)</h3>
                        </div>
                        <div class="panel-body">
                            <div id="myradiogroup2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>Dropdown (static choices)</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mydropdown1"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>Dropdown (search-based choices)</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mydropdown2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>MultiDropdown (static choices)</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mymultidropdown1"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="dashboard-element">
                        <div class="panel-head">
                            <h3>MultiDropdown (search-based choices)</h3>
                        </div>
                        <div class="panel-body">
                            <div id="mymultidropdown2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </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",
            "splunkjs/mvc/chartview",
            "splunkjs/mvc/checkboxgroupview",
            "splunkjs/mvc/checkboxview",
            "splunkjs/mvc/dropdownview",
            "splunkjs/mvc/eventsviewerview",
            "splunkjs/mvc/multidropdownview",
            "splunkjs/mvc/radiogroupview",
            "splunkjs/mvc/searchbarview",
            "splunkjs/mvc/searchcontrolsview",
            "splunkjs/mvc/singleview",
            "splunkjs/mvc/tableview",
            "splunkjs/mvc/textinputview",
            "splunkjs/mvc/timelineview",
            "splunkjs/mvc/timerangeview"
        ];
        require(deps, function(mvc) {
            // Load individual components
            var SearchManager = require("splunkjs/mvc/searchmanager");
            var TimelineView = require("splunkjs/mvc/timelineview");
            var ChartView = require("splunkjs/mvc/chartview");
            var CheckboxGroupView = require("splunkjs/mvc/checkboxgroupview");
            var CheckboxView = require("splunkjs/mvc/checkboxview");
            var DropdownView = require("splunkjs/mvc/dropdownview");
            var EventsViewer = require("splunkjs/mvc/eventsviewerview");
            var MultiDropdownView = require("splunkjs/mvc/multidropdownview");
            var RadioGroupView = require("splunkjs/mvc/radiogroupview");
            var SearchbarView = require("splunkjs/mvc/searchbarview");
            var SearchControlsView = require("splunkjs/mvc/searchcontrolsview");
            var SingleView = require("splunkjs/mvc/singleview");
            var TableView = require("splunkjs/mvc/tableview");
            var TextInputView = require("splunkjs/mvc/textinputview");
            var TimeRangeView = require("splunkjs/mvc/timerangeview");
        
            // Create a token-based search to interact with search controls
            var search1 = new SearchManager({
                id: "example-search1",
                search: mvc.tokenSafe("$searchquery$"),
                earliest_time: mvc.tokenSafe("$earlyval$"),
                latest_time: mvc.tokenSafe("$lateval$"),
                preview: true,
                cache: true,
                status_buckets: 300
            });

            // Create a stats search for chart example
            var search2 = new SearchManager({
                id: "example-search2",
                search: "index=_internal | head 1000 | stats count by sourcetype",
                preview: true,
                cache: true
            });

            // Create a search that returns a single value
            var search3 = new SearchManager({
                id: "example-search3",
                search: "index=_internal | stats count",
                preview: true,
                cache: true,
                earliest_time: "-15m",
                latest_time: "now"
            });

            // Create a search on index names for populating choices
            var search4 = new SearchManager({
                id: "example-search4",
                search: "| eventcount summarize=false index=* index=_* | dedup index | fields index",
                preview: true,
                cache: true
            });

            // Create views
            var timeline1 = new TimelineView({
                id:"example-timeline",
                managerid: "example-search1",
                el: $("#mytimeline")
            }).render();

            var searchbar1 = new SearchbarView({
                id:"example-searchbar",
                managerid: "example-search1",
                value: mvc.tokenSafe("$searchquery$"),
                default: "index=_internal | head 1000",
                timerange_earliest_time: mvc.tokenSafe("$earlyval$"),
                timerange_latest_time: mvc.tokenSafe("$lateval$"),
                el: $("#mysearchbar")
            }).render();

            var timerange1 = new TimeRangeView({
                id:"example-timerange",
                managerid: "example-search1",
                earliest_time: mvc.tokenSafe("$earlyval$"),
                latest_time: mvc.tokenSafe("$lateval$"),
                el: $("#mytimerange")
            }).render();

            var searchcontrols1 = new SearchControlsView({
                id:"example-searchcontrols",
                managerid: "example-search1",
                el: $("#mysearchcontrols")
            }).render();

            var eventsviewer1 = new EventsViewer({
                id:"example-eventtable",
                managerid: "example-search1",
                el: $("#myeventsviewer")
            }).render();

            var table1 = new TableView({
                id:"example-table",
                managerid: "example-search1",
                el: $("#mytable")
            }).render();

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

            var single1 = new SingleView({
                id:"example-single",
                managerid: "example-search3",
                beforeLabel: "Event count:",
                el: $("#mysingle")
            }).render();

            var textinput1 = new TextInputView({
                id:"example-textinput",
                default: " Type here",
                el: $("#mytextinput")
            }).render();

            var checkbox1 = new CheckboxView({
                id:"example-checkbox",
                label: "Check me",
                default: true,
                el: $("#mycheckbox")
            }).render();

            var checkboxgroup1 = new CheckboxGroupView({
                id:"example-checkboxgroup1",
                default: "Three",
                el: $("#mycheckboxgroup1")
            }).render();

            var checkboxgroup2 = new CheckboxGroupView({
                id:"example-checkboxgroup2",
                managerid: "example-search4",
                default: "main",
                labelField: "index",
                valueField: "index",
                el: $("#mycheckboxgroup2")
            }).render();

            var radiogroup1 = new RadioGroupView({
                id:"example-radiogroup1",
                default: "One",
                el: $("#myradiogroup1")
            }).render();

            var radiogroup2 = new RadioGroupView({
                id:"example-radiogroup2",
                managerid: "example-search4",
                default: "main",
                labelField: "index",
                valueField: "index",
                el: $("#myradiogroup2")
            }).render();

            var dropdown1 = new DropdownView({
                id:"example-dropdown1",
                default: "One",
                el: $("#mydropdown1")
            }).render();

            var dropdown2 = new DropdownView({
                id:"example-dropdown2",
                managerid: "example-search4",
                default: "main",
                labelField: "index",
                valueField: "index",
                el: $("#mydropdown2")
            }).render();

            var multidropdown1 = new MultiDropdownView({
                id:"example-multidropdown1",
                default: "Two",
                el: $("#mymultidropdown1")
            }).render();

            var multidropdown2 = new MultiDropdownView({
                id:"example-multidropdown2",
                managerid: "example-search4",
                default: "main",
                labelField: "index",
                valueField: "index",
                el: $("#mymultidropdown2")
            }).render();

            // Define a static list of choices for the form controls
            var staticchoices = [
                {label:" One", value: "One"},
                {label:" Two", value: "Two"},
                {label:" Three", value: "Three"}
            ];

            // Populate the form controls with the list of choices 
            checkboxgroup1.settings.set("choices", staticchoices); 
            dropdown1.settings.set("choices", staticchoices); 
            multidropdown1.settings.set("choices", staticchoices);
            radiogroup1.settings.set("choices", staticchoices); 

            // Whenever the user changes the timeline, update the search manager
            timeline1.on("change", function() {
                search1.search.set(timeline1.val());
            });
        });
    </script>
</body>
</html>