Example: Events viewers using a Simple XML extension

This example uses a Simple XML extension to display examples of each of the possible types of events viewer.

[example]

To use this code:

  1. Save the XML file under an existing app in $SPLUNK_HOME/etc/apps/app_name/local/data/ui/views/.
  2. Save the JS file under $SPLUNK_HOME/etc/apps/app_name/appserver/static/.
  3. Restart Splunk.
  4. Open Splunk Web and view the dashboard in your app. For example, to view myexample in mysplunkapp, go to http://<localhost:port>/app/mysplunkapp/myexample.

example_eventsviewers.xml

<dashboard script="example_eventsviewers.js" >
    <label>Events Viewers</label>
    <row>
        <panel>
            <html>
                <table>
                    <tr>
                        <td style="width: 60%;">
                            <h3>Events viewer: list</h3>
                            <div id="myeventsviewer-list"></div>
                        </td>
                    </tr>

                    <!-- Row for the table events viewer -->
                    <tr>
                        <td style="width: 60%;">
                            <h3>Events viewer: table</h3>
                            <div id="myeventsviewer-table"></div>
                        </td>
                    </tr>

                    <!-- Row for the raw events viewer -->
                    <tr>
                        <td style="width: 60%;">
                            <h3>Events viewer: raw</h3>
                            <div id="myeventsviewer-raw"></div>
                        </td>
                    </tr>
                </table>
            </html>
        </panel>
    </row>
</dashboard>

example_eventsviewers.js

require([
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/eventsviewerview",
    "splunkjs/mvc/simplexml/ready!"
], function(
    SearchManager,
    EventsViewer
) {

    // 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
    var 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();

    var 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();

    var 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();
});