Hello Folks,
I've tried to implement a custom timerange picker with JS but encounter some unconsitent behaviour...
Indeed I have tried both to render the input with js and get the instance in js and modify the settings.
In the first case, i achieved to modify the presets values, but dialogOptions settings is not taken into account.
In the second case, i can't either change dialogOptions and presets settings.
See bellow sample of code:
dashboard.xml
...
<fieldset submitButton="true" autoRun="false">
<html>
<div id="mytimerangeview_custom"/>
</html>
<input id="in_timerangepicker" type="time" token="field1">
<label></label>
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
<input type="dropdown" token="tkn_scope">
<label>Scope</label>
<fieldForLabel>key_text</fieldForLabel>
<fieldForValue>key_value</fieldForValue>
<search>
<query>| savedsearch "Super saved search"</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
</input>
</fieldset>
...
and script.js
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/timerangeview',
'splunkjs/mvc/simplexml/ready!'
],
function (
_,
$,
mvc,
TimeRangeView
) {
console.log("JS LOADED");
// Get timerangeview object
var timerangepicker_input = mvc.Components.get('in_timerangepicker');
console.log(timerangepicker_input);
// 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
//timerangepicker_input.settings.set('dialogOptions', mypresetsettings);
timerangepicker_input.settings.set('presets', mypresetvalues);
// Create a custom time range picker
// Instantiate a view using the custom time range picker
var mytimerange_custom = new TimeRangeView({
id: "mytimerangeview_custom",
managerid: "example-search",
presets: mypresetvalues,
dialogOptions: mypresetsettings,
el: $("#mytimerangeview_custom")
}).render();
});
mytimerangeview_custom looks like:
and in_timerangepicker looks like:
This goes without saying that I have tried all the possible combination for the dialogOptions dict.
Playing with the stylesheet.css allows me to hide the input section but i would rather go with the correct approach and more specificaly the one that just get the instance and modify the settings (allowing me to keep native splunk displaying).
Thank you all for your help 🙂
R.
