Example: Drilldown properties using a Simple XML extension

This example uses a Simple XML extension to show the result of setting different combinations of drilldown properties for the views that allow drilldown actions.

[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. This example also uses search results from a sample earthquakes lookup table for the SplunkMap view, and includes lat and lon fields in the search query. To try it for yourself, download earthquakes.csv to a /lookups directory under $SPLUNK_HOME/etc/apps/your_app_name.
  4. Restart Splunk.
  5. 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_drilldown.xml

<dashboard script="example_drilldown.js">
  <label>Drilldown properties</label>
  <row>
    <panel>
      <html>
        <div>
            <div class="main-area">
                <p>You can set drilldown properties for the EventsViewer, Chart, Table, and SplunkMap views. This example shows different ways to set these properties in JavaScript.</p>
            </div>

            <h2>EVENTS: Change drilldown to "inner", allow redirect to Search:</h2>
            <div id="myeventsviewer"></div>

            <h2>CHART: Disable redirect using the <tt>drilldownRedirect</tt> property,
            display chart-click and legend-click info in the console:</h2>
            <div id="mychart"></div>

            <h2>TABLE: Enable drilldown for table cells, disable redirect using the <tt>preventDefault</tt>
            method, and display table-click info in the console:</h2>
            <div id="mytable"></div>

            <h2>MAP: Disable redirect and display map-click info in the console:</h2>
            <div id="mymap"></div>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

example_drilldown.js

require([
    "splunkjs/mvc",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/eventsviewerview",
    "splunkjs/mvc/chartview",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/splunkmapview",
    "splunkjs/mvc/simplexml/ready!"
], function(
    mvc,
    SearchManager,
    PostProcessManager,
    EventsViewer,
    ChartView,
    TableView,
    SplunkMapView
) {

    // Define the search managers and postprocess search managers
    var searchmain = new SearchManager({
        id: "main-search",
        search: "index=_internal | head 100 | fields *",
        preview: true,
        cache: true
    });

    var searchsub1 = new PostProcessManager({
        id: "subsearch1",
        managerid: "main-search",
        search: " | stats count by sourcetype"
    });

    var searchsub2 = new PostProcessManager({
        id: "subsearch2",
        managerid: "main-search",
        search: " | fields sourcetype, source, host"
    });

    var searchmap = new SearchManager({
        id: "map-search",
        search: "| inputlookup earthquakes.csv | rename Lat as lat Lon as lon | geostats count",
        preview: true,
        cache: true
    });

    // Set up the views
    var myeventsviewer = new EventsViewer({
        id: "example-eventsviewer",
        managerid: "main-search",
        type: "raw",
        "raw.drilldown": "inner",
        count: 3,
        el: $("#myeventsviewer")
    }).render();

    var mychart = new ChartView({
        id: "example-chart",
        managerid: "subsearch1",
        type: "bar",
        drilldown: "all",
        drilldownRedirect: false,
        el: $("#mychart")
    }).render();

    var mytable = new TableView({
        id: "example-table",
        managerid: "subsearch2",
        pageSize: 3,
        wrap: true,
        drilldown: "cell",
        el: $("#mytable")
    }).render();

    var mymap = new SplunkMapView({
        id: "example-splunkmap",
        managerid: "map-search",
        drilldownRedirect: false,
        el: $("#mymap")
    }).render();

    // Set up event handlers to customize drilldown behavior
    mychart.on("click:legend", function(e) {
        // Displays a data object in the console--the legend text
        console.log("Clicked the chart legend: ", e.name2);
    });

    mychart.on("click:chart", function(e) {
        // Displays a data object in the console
        console.log("Clicked the chart: ", e.value);
    });

    mytable.on("click", function(e) {
        // Bypass the default behavior
        e.preventDefault();

        // Displays a data object in the console
        console.log("Clicked the table:", e.data);
    });

    mymap.on("click:marker", function(e) {
        // Displays a data object in the console
        console.log("Clicked the map: ", e.data['row.count'] + " earthquakes near (" + e.data['row.latitude'] + ", " +e .data['row.longitude'] + ")");
    });

});