I have a custom drop-down list that I made using HTML and CSS and want to update time tokens based on the selection. See below: Don't worry about refactoring, going for functionality first. Now the searches all run on the dashboard when loading up, but if I change the tokens, the searches don't update. What is the missing piece to make this work? Is what I am trying to do possible or do I need to use a proper time range input all the time with the searchWhenChanged=true set?
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function($,mvc) {
$(document).ready(function(){
var tokens = mvc.Components.get("default");
tokens.set("earlyTime", "-60m@m");
tokens.set("latestTime", "now");
$(".time").click(function( event ) {
$("#showBut").html(event.currentTarget.innerHTML);
var tokens = mvc.Components.get("default");
if (event.currentTarget.innerHTML == "Last Hour") {
tokens.set("earlyTime", "-60m");
tokens.set("latestTime", "now");
} else if (event.currentTarget.innerHTML == "Last 4 Hours") {
tokens.set("earlyTime", "-4h");
tokens.set("latestTime", "now");
} else if (event.currentTarget.innerHTML == "Last 24 Hours") {
tokens.set("earlyTime", "-24h");
tokens.set("latestTime", "now");
} else if (event.currentTarget.innerHTML == "RT - Last Minute") {
tokens.set("earlyTime", "rt-1m");
tokens.set("latestTime", "rtnow");
} else if (event.currentTarget.innerHTML == "RT - Last Hour") {
tokens.set("earlyTime", "rt-60m");
tokens.set("latestTime", "rtnow");
} else if (event.currentTarget.innerHTML == "RT - 24 From Midnight") {
tokens.set("earlyTime", "rt-24h@d");
tokens.set("latestTime", "rtnow");
}
var timeEarly = tokens.get("earlyTime");
var timeLate = tokens.get("latestTime");
$("#tester").html(timeEarly + " : " + timeLate);
});
});
});
Forget it, I found a solution to my problem. I manipulated the DOM to trigger click the global time range picker (hidden on my dashboard) depending on my selection. Much simpler, but I do foresee a problem if I had multiple time range pickers on a single dashboard, then my hack wouldn't work because I search the DOM for data-earliest.
Forget it, I found a solution to my problem. I manipulated the DOM to trigger click the global time range picker (hidden on my dashboard) depending on my selection. Much simpler, but I do foresee a problem if I had multiple time range pickers on a single dashboard, then my hack wouldn't work because I search the DOM for data-earliest.
So I am looking at adding the change function but unsure how I can reference every search in the dashboard....
defaultTokenModel.on("change:earlyTime", function(updateSearch, SearchManager) {
});
Would I even need to do this because I have this in my dashboard.xml
<query>index=someCoolShiz</query>
<earliest>$earlyTime$</earliest>
<latest>$latestTime$</latest>