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.
Name | Default value | Description |
id | Required. The unique ID for this control. | |
default | The default value. | |
dialogOptions | A dictionary of values that allow you to customize the panels in the time range picker. Possible values are:
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. | |
earliest_time | The earliest time in the range. | |
latest_time | The latest time in the range. | |
managerid | null | The 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 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" |
presets | A 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. | |
value | An object containing the time range picker's earliest_time and latest_time values. |
Name | Description |
render | Draws the view to the screen. Called only when you create the view manually in JavaScript. |
val | Returns the view's value if passed no parameters. Sets the view's value if passed a single parameter. |
Name | Description |
change | Fired when the value of the view changes. |
{% 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 %}
<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>