Example: A collection of views using JavaScript in a template

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.

[example]

To use this code, save it as an HTML file under an existing app in $SPLUNK_HOME/etc/apps/app_name/django/app_name/templates, then view the page in Splunk. For example, to view mypage.html in mysplunkapp, go to http://localhost:8000/dj/mysplunkapp/mypage. For more about creating an app, see How to create a Web Framework app using SplunkJS Stack.

{% extends 'splunkdj:base_with_app_bar.html' %}

{% load splunkmvc %}

{% block title %}Splunk views (JavaScript){% endblock title %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}{{app_name}}/custom.css" />
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css" />
{% endblock css %}

{% block content %}
<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. 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>
{% endblock content %}

{% block js %}
<script>
    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.settings.set(timeline1.val());
        });
    });
</script>
{% endblock js %}