TimeRangeView

The TimeRange view

Description

The TimeRange view displays a time range picker, which is a list of preset time ranges. This view is modified by its search manager.

Note  To allow the TimeRange view to modify its search manager, you must use tokens or set up a change handler as shown in the examples below.

Documentation

Library path

Simple XML wrapper

Properties

Name

Default value

Description

id Required. The unique ID for this control.
defaultThe default value.
earliest_timeThe earliest time in the range.
latest_timeThe latest time in the range.
manageridnullThe ID of the search manager to bind this view to.
preset"alltime"The default time range for the view. When set, the time range picker starts with the selected time range.

Possible values are:

    "1 hour window"
    "1 minute window"
    "30 minute window"
    "30 second window"
    "5 minute window"
    "All time"
    "All time (real-time)"
    "Business week to date"
    "Last 15 minutes"
    "Last 24 hours"
    "Last 30 days"
    "Last 4 hours"
    "Last 60 minutes"
    "Last 7 days"
    "Month to date"
    "Other"
    "Previous business week"
    "Previous month"
    "Previous week"
    "Previous year"
    "Real-time"
    "Today"
    "Week to date"
    "Year to date"
    "Yesterday"
valueAn object containing the time range picker's "earliest_time" and "latest_time" values.

Methods

Name

Description

renderDraws the view to the screen. Called only when you create the view manually in JavaScript.
valReturns the view's value if passed no parameters. Sets the view's value if passed a single parameter.

Events

Name

Description

changeFired when the value of the view changes.

Example (Django tag)

{% block content %}
    {% timerange id="example-timerange" 
        managerid="example-search" 
        preset="Today"
        earliest_time="$earlyval$"|token_safe
        latest_time="$lateval$"|token_safe %}
{% endblock content %}

{% block managers %}
    {% searchmanager id="example-search" 
        search="index=_internal | head 100"
        earliest_time="$earlyval$"|token_safe
        latest_time="$lateval$"|token_safe
        preview=True 
        required_field_list="*" status_buckets=300
    %}
{% endblock managers %}

Example (JavaScript)

<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/timerangeview"
    ];
    require(deps, function(mvc) {
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var TimeRangeView = require("splunkjs/mvc/timerangeview");

        // Instantiate components
        var mysearch = new SearchManager({
            id: "example-search",
            preview: true,
            search: "index=_internal | head 50",
            status_buckets: 300,
            required_field_list: "*"
        });
        var mytimerange = new TimeRangeView({
            id: "example-timerange",
            managerid: "example-search",
            preset: "Today",
            el: $("#mytimerangeview")
        }).render();

        // Update the search manager when the time range changes
        mytimerange.on("change", function() {
            mysearch.search.set(mytimerange.val());
        });

    });
</script>

Code examples