Example: Events viewers using JavaScript in a template

This example uses JavaScript to display examples of each of the possible types of events viewer.

[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 %}Events Viewers (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">
            <h2>Events viewers</h2>
        </div>
    </div>

    <!-- Row for the list events viewer -->
     <div class="dashboard-row">
        <div class="dashboard-cell" style="width: 60%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Events viewer: list</h3>
                    </div>
                    <div class="panel-body">
                        <div id="myeventsviewer-list"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Row for the table events viewer -->
     <div class="dashboard-row">
        <div class="dashboard-cell" style="width: 60%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Events viewer: table</h3>
                    </div>
                    <div class="panel-body">
                        <div id="myeventsviewer-table"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Row for the raw events viewer -->
     <div class="dashboard-row">
        <div class="dashboard-cell" style="width: 60%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Events viewer: raw</h3>
                    </div>
                    <div class="panel-body">
                        <div id="myeventsviewer-raw"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock content %}

{% block js %}
<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/eventsviewerview"
    ];
    require(deps, function(mvc) {
        // Load individual components
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var EventsViewer = require("splunkjs/mvc/eventsviewerview");

        // Set up a search manager
        var search1 = new SearchManager({
            id: "example-search",
            search: "index=_internal | head 100",
            preview: true,
            cache: true
        });

        // Create 3 events viewers: list, table, and raw
        listviewer = new EventsViewer({
            id: "example-eventsviewer-list",
            managerid: "example-search",
            type: "list",
            "list.drilldown": "outer",
            drilldownRedirect: true,
            "list.wrap": true,
            count: 3,
            pagerPosition: "top",
            showPager: true,
            rowNumbers: false,
            el: $("#myeventsviewer-list")
        }).render();

        tableviewer = new EventsViewer({
            id: "example-eventsviewer-table",
            managerid: "example-search",
            type: "table",
            "table.drilldown": true,
            drilldownRedirect: true,
            "table.sortColumn": "sourcetype",
            "table.sortDirection": "asc",
            "table.wrap": true,
            count: 3,
            showPager: false,
            rowNumbers: false,
            el: $("#myeventsviewer-table")
        }).render();

        rawviewer = new EventsViewer({
            id: "example-eventsviewer-raw",
            managerid: "example-search",
            type: "raw",
            "raw.drilldown": "inner",
            drilldownRedirect: true,
            count: 3,
            pagerPosition: "top",
            showPager: true,
            rowNumbers: false,
            el: $("#myeventsviewer-raw")
        }).render();
    });
</script>
{% endblock js %}