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.
dialogOptionsA dictionary of values that allow you to customize the panels in the time range picker. Possible values are:

    showPresets: Indicates whether to show the Presets panel.
    showPresetsRealTime: Indicates whether to show the Real-time section of the Presets panel.
    showPresetsRealTimeOnly: Indicates whether to show only the Real-time section of the Presets panel.
    showPresetsRelative: Indicates whether to show the Relative section of the Presets panel.
    showPresetsAllTime: Indicates whether to show the Other section of the Presets panel.
    showCustom: Indicates whether to show the panels other than Presets.
    showCustomRealTime: Indicates whether to show the Real-time panel.
    showCustomRelative: Indicates whether to show the Relative panel.
    showCustomDate: Indicates whether to show the Date Range panel.
    showCustomDateTime: Indicates whether to show the Date & Time Range panel.
    showCustomAdvanced: Indicates whether to show the Advanced panel.
    enableCustomAdvancedRealTime: Indicates whether to allow the Advanced panel inputs to accept real-time values.
Must be set in JavaScript.
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"
presetsA dictionary containing custom preset values for the Presets panel. If not specified, the default preset values are used. The format for this dictionary is:
[{label: text, earliest_time: val1, latest_time: val2}]
Must be set in JavaScript.
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");

        // Create a search manager
        var mysearch = new SearchManager({
            id: "example-search",
            preview: true,
            search: "index=_internal | head 50",
            status_buckets: 300,
            required_field_list: "*"
        });

        // Instantiate a view using the default time range picker
        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.settings.set(mytimerange.val());
        });

        // Create a custom time range picker
        
        // Show the Presets panel, hide the Real-time and Advanced panels
        var mypresetsettings = {
            showPresets: true,
            showCustomRealTime: false,
            showCustomAdvanced:false,
        };

        // Define custom preset values
        var mypresetvalues = [
            {label: 'Last 13 minutes', earliest_time: '-13m', latest_time: 'now'},
            {label: 'Last 42 minutes', earliest_time: '-42m', latest_time: 'now'}
        ];

        // Instantiate a view using the custom time range picker
        var mytimerange_custom = new TimeRangeView({
            id: "example-timerange_custom",
            managerid: "example-search",
            presets: mypresetvalues,
            dialogOptions: mypresetsettings,
            el: $("#mytimerangeview_custom")
        }).render();

        // Update the search manager when the time range changes
        mytimerange_custom.on("change", function() {
            mysearch.settings.set(mytimerange_custom.val());
        });
    });
</script>

Code examples