Example: A collection of views using Django tags

Django Bindings has been deprecated. For more, see the Deprecation Notice.

This example uses Django tags 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:port>/dj/mysplunkapp/mypage. For more about creating an app, see How to create a Web Framework app using Django Bindings.

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

{% load splunkmvc %}

{% block title %}Splunk views (Django){% 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 Django tags. Tokens are used to keep the search controls in sync with the search manager. JavaScript is used to set choices and respond to changes in the Timeline view.</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">
                        {% searchbar id="example-searchbar" managerid="example-search1"
                            value="$searchquery$"|token_safe 
                            default="index=_internal | head 1000"
                            timerange_earliest_time="$earlyval$"|token_safe
                            timerange_latest_time="$lateval$"|token_safe 
                        %}
                    </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">
                        {% timerange id="example-timerange" managerid="example-search1" 
                            earliest_time="$earlyval$"|token_safe 
                            latest_time="$lateval$"|token_safe 
                        %}
                    </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">
                        {% searchcontrols id="example-searchcontrols" managerid="example-search1" %}
                    </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">
                        {% timeline id="example-timeline" managerid="example-search1" %}
                    </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">
                        {% eventsviewer id="example-eventtable" managerid="example-search1" %}
                    </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">
                        {% table id="example-table" managerid="example-search1" %}
                    </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">
                        {% chart id="example-chart" managerid="example-search2"  type="bar" %}
                    </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">
                        {% single id="example-single" managerid="example-search3" beforeLabel="Event count:" %}
                    </div>
                </div>
            </div>
        </div>
        <!-- Cell -->
        <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">
                        {% textinput id="example-textinput" default=" Type here" %}
                    </div>
                </div>
            </div>
        </div>
        <!-- Cell -->
        <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>
                        {% checkbox id="example-checkbox" label="Check me" default=True %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Row -->
    <div class="dashboard-row">
        <!-- Cell -->
        <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">
                        {% checkboxgroup id="example-checkboxgroup1" default="Three" %}
                    </div>
                </div>
            </div>
        </div>
        <!-- Cell -->
        <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">
                        {% checkboxgroup id="example-checkboxgroup2" managerid="example-search4" 
                            default="main" labelField="index" valueField="index" %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Row -->
    <div class="dashboard-row">
        <!-- Cell -->
        <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">
                        {% radiogroup id="example-radiogroup1" default="One" %}
                    </div>
                </div>
            </div>
        </div>
        <!-- Cell -->
        <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">
                        {% radiogroup id="example-radiogroup2" managerid="example-search4" 
                            default="main" labelField="index" valueField="index" %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Row -->
    <div class="dashboard-row">
        <!-- Cell -->
        <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">
                        {% dropdown id="example-dropdown1" default="One" %}
                    </div>
                </div>
            </div>
        </div>
        <!-- Cell -->
        <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">
                        {% dropdown id="example-dropdown2" managerid="example-search4" 
                            default="main" labelField="index" valueField="index" %}
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Row -->
    <div class="dashboard-row">
        <!-- Cell -->
        <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">
                        {% multidropdown id="example-multidropdown1" default="Two" %}
                    </div>
                </div>
            </div>
        </div>
        <!-- Cell -->
        <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">
                        {% multidropdown id="example-multidropdown2" managerid="example-search4" 
                            default="main" labelField="index" valueField="index" %}
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock content %}

{% block managers %}
    {# Token-based search to interact with search controls #}
    {% searchmanager id="example-search1" 
        search="$searchquery$"|token_safe
        earliest_time="$earlyval$"|token_safe
        latest_time="$lateval$"|token_safe
        preview=True cache=True
        status_buckets=300
    %}

    {# Stats search for chart example #}
    {% searchmanager id="example-search2" 
        search="index=_internal | head 1000 | stats count by sourcetype" 
        preview=True cache=True
    %}

    {# Search that returns a single value #}
    {% searchmanager id="example-search3" 
        search="index=_internal | stats count" 
        earliest_time="-15m" latest_time="now" 
        preview=True cache=True
    %}

    {# Search on index names for populating choices #}
    {% searchmanager id="example-search4" 
        search="| eventcount summarize=false index=* index=_* | dedup index | fields index" 
        preview=True cache=True
    %}
{% endblock managers %}

{% block js %}
<script>
    var deps = [
        "splunkjs/ready!"
    ];
    require(deps, function(mvc) {
        // Define a static list of choices for the form controls
        var staticchoices = [
            {label:" One", value: "One"},
            {label:" Two", value: "Two"},
            {label:" Three", value: "Three"}
        ];
        // Get the form controls and populate them with the static list of choices 
        splunkjs.mvc.Components.getInstance("example-checkboxgroup1").settings.set("choices", staticchoices); 
        splunkjs.mvc.Components.getInstance("example-dropdown1").settings.set("choices", staticchoices); 
        splunkjs.mvc.Components.getInstance("example-multidropdown1").settings.set("choices", staticchoices);
        splunkjs.mvc.Components.getInstance("example-radiogroup1").settings.set("choices", staticchoices); 

        // Get instances of the timeline and search manager components
        var mytimeline = splunkjs.mvc.Components.getInstance("example-timeline");
        var mysearch = splunkjs.mvc.Components.getInstance("example-search1");

        // Whenever the user changes the timeline, update the search manager
        mytimeline.on("change", function() {
            mysearch.settings.set(mytimeline.val());
        });
    });
</script>
{% endblock js %}