[UPDATED ANSWER] Refer to the post for updated answer with generic JS to allow html date input to be added and controlled via SimpleXML without changing the JS (based on the request from@nagar57 ) : https://community.splunk.com/t5/Dashboards-Visualizations/Create-a-generalized-JavaScript-to-use-mul...
_________________________________
@michaelrosello, if you can convert from Simple XML to HTML dashboard in Splunk you can use the Splunk Dev Tutorial to add jQuery UI Accordion and on similar lines you can include jQuery Date Picker input.
However, if you need to retain Simple XMl Dashboard, you can definitely try the html date input. Refer to Splunk Blog by Jason Conger for Using HTML5 Input Type
Following is a simple Example which uses Simple XML JS extension to use jQuery to control html date input and Splunk JS stack to use and modify time tokens.
Explanation for SimpleXML:
- html_input_date_control.js Javascript has been included
- First dummy search sets the tokFromDate as yesterday and tokToDate as today on dashboard load, to be set as input value on dashboard load. The dates are string date of format YYYY-mm-dd.
- Second dummy search is used to get the string date from date inputs and convert them to epoch time to be used by Splunk searches.
- Inline <style> has been used to put the From Date and To Date inputs in the same line and have padding between them.
Following is the Simple XML code:
<dashboard script="html_input_date_control.js">
<label>HTML Date Picker</label>
<!-- Dumy Search to set From Date and To Date on load-->
<search>
<query>| makeresults
| eval fromDate=strftime(relative_time(now(),"-1d@d"),"%Y-%m-%d")
| eval toDate=strftime(now(),"%Y-%m-%d")</query>
<earliest>-1s@s</earliest>
<latest>now</latest>
<done>
<set token="tokFromDate">$result.fromDate$</set>
<set token="tokToDate">$result.toDate$</set>
</done>
</search>
<!-- Dumy Search to convert String Time to Epoch Time-->
<search>
<query>| makeresults
| eval earliestTime=strptime("$tokFromDate$","%Y-%m-%d")
| eval latestTime=strptime("$tokToDate$","%Y-%m-%d")</query>
<earliest>-1s@s</earliest>
<latest>now</latest>
<done>
<set token="tokEarliestTime">$result.earliestTime$</set>
<set token="tokLatestTime">$result.latestTime$</set>
</done>
</search>
<row>
<panel>
<title>Selected String Time - $tokFromDate$ - $tokToDate$</title>
<html>
<style>
.dateContainer{
display:flex;
}
.dateInput{
padding-right:15px;
}
</style>
<div class="dateContainer">
<div class="dateInput">
<div>From Date:</div>
<input id="inputFromDate" type="date"/>
</div>
<div class="dateInput">
<div>To Date:</div>
<input id="inputToDate" type="date"/>
</div>
</div>
</html>
</panel>
</row>
<row>
<panel>
<title>Converted Epoch Time - $tokEarliestTime$ $tokLatestTime$</title>
<chart>
<title>Splunkd errors timechart by top 5 components</title>
<search>
<query>index=_internal sourcetype="splunkd" log_level!="INFO" component="*"
| timechart count by component limit=5 usenull=f useother=f
</query>
<earliest>$tokEarliestTime$</earliest>
<latest>$tokLatestTime$</latest>
</search>
<option name="charting.axisTitleX.text">Time</option>
<option name="charting.axisTitleY.text">Count</option>
<option name="charting.chart.stackMode">stacked</option>
</chart>
</panel>
</row>
</dashboard>Following is the JavaScript code for html_input_date_control.js.
It needs to be saved to appserver/static folder i.e. $SPLUNK_HOME/etc/apps/<yourAppName>/appserver/static. If the folder appserver/static does not exist it would need to be manually created.
Since this solution approach require static file, Splunk needs to be restarted/refreshed or bumped. Internet Browser history would need to be cleared as well for the changes to reflect.
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function($,mvc) {
var defaultTokenModel = mvc.Components.get("default");
var submittedTokenModel = mvc.Components.get("submitted");
// On default model change of token tokFromDate assign the selected value to html date input inputFromDate
defaultTokenModel.on("change:tokFromDate", function(newValue) {
var tokFromDate=defaultTokenModel.get("tokFromDate");
if(tokFromDate!=="undefined"){
$('#inputFromDate').val(tokFromDate);
}
});
// On default model change of token tokToDate assign the selected value to html date input inputToDate
defaultTokenModel.on("change:tokToDate", function(newValue) {
var tokToDate=defaultTokenModel.get("tokToDate");
if(tokToDate!=="undefined"){
$('#inputToDate').val(tokToDate);
}
});
// On submitted model change of token tokFromDate assign the selected value to html date input inputFromDate
submittedTokenModel.on("change:tokFromDate", function(newValue) {
var tokFromDate=defaultTokenModel.get("tokFromDate");
if(tokFromDate!=="undefined"){
$('#inputFromDate').val(tokFromDate);
}
});
// On submitted model change of token tokToDate assign the selected value to html date input inputToDate
submittedTokenModel.on("change:tokToDate", function(newValue) {
var tokToDate=defaultTokenModel.get("tokToDate");
if(tokToDate!=="undefined"){
$('#inputToDate').val(tokToDate);
}
});
// On change of html date input inputFromDate, update the token tokFromDate in default and submitted model
$(document).on("change", "#inputFromDate",function(){
var dateText=$("#inputFromDate").val();
defaultTokenModel.set("tokFromDate",dateText);
submittedTokenModel.set("tokFromDate",dateText);
});
// On change of html date input inputToDate, update the token tokToDate in default and submitted model
$(document).on("change", "#inputToDate",function(){
var dateText=$("#inputToDate").val();
defaultTokenModel.set("tokToDate",dateText);
submittedTokenModel.set("tokToDate",dateText);
});
});Please try out and confirm!
[UPDATED ANSWER] Refer to the post for updated answer with generic JS to allow html date input to be added and controlled via SimpleXML without changing the JS (based on the request from@nagar57 ) : https://community.splunk.com/t5/Dashboards-Visualizations/Create-a-generalized-JavaScript-to-use-mul...
_________________________________
@michaelrosello, if you can convert from Simple XML to HTML dashboard in Splunk you can use the Splunk Dev Tutorial to add jQuery UI Accordion and on similar lines you can include jQuery Date Picker input.
However, if you need to retain Simple XMl Dashboard, you can definitely try the html date input. Refer to Splunk Blog by Jason Conger for Using HTML5 Input Type
Following is a simple Example which uses Simple XML JS extension to use jQuery to control html date input and Splunk JS stack to use and modify time tokens.
Explanation for SimpleXML:
- html_input_date_control.js Javascript has been included
- First dummy search sets the tokFromDate as yesterday and tokToDate as today on dashboard load, to be set as input value on dashboard load. The dates are string date of format YYYY-mm-dd.
- Second dummy search is used to get the string date from date inputs and convert them to epoch time to be used by Splunk searches.
- Inline <style> has been used to put the From Date and To Date inputs in the same line and have padding between them.
Following is the Simple XML code:
<dashboard script="html_input_date_control.js">
<label>HTML Date Picker</label>
<!-- Dumy Search to set From Date and To Date on load-->
<search>
<query>| makeresults
| eval fromDate=strftime(relative_time(now(),"-1d@d"),"%Y-%m-%d")
| eval toDate=strftime(now(),"%Y-%m-%d")</query>
<earliest>-1s@s</earliest>
<latest>now</latest>
<done>
<set token="tokFromDate">$result.fromDate$</set>
<set token="tokToDate">$result.toDate$</set>
</done>
</search>
<!-- Dumy Search to convert String Time to Epoch Time-->
<search>
<query>| makeresults
| eval earliestTime=strptime("$tokFromDate$","%Y-%m-%d")
| eval latestTime=strptime("$tokToDate$","%Y-%m-%d")</query>
<earliest>-1s@s</earliest>
<latest>now</latest>
<done>
<set token="tokEarliestTime">$result.earliestTime$</set>
<set token="tokLatestTime">$result.latestTime$</set>
</done>
</search>
<row>
<panel>
<title>Selected String Time - $tokFromDate$ - $tokToDate$</title>
<html>
<style>
.dateContainer{
display:flex;
}
.dateInput{
padding-right:15px;
}
</style>
<div class="dateContainer">
<div class="dateInput">
<div>From Date:</div>
<input id="inputFromDate" type="date"/>
</div>
<div class="dateInput">
<div>To Date:</div>
<input id="inputToDate" type="date"/>
</div>
</div>
</html>
</panel>
</row>
<row>
<panel>
<title>Converted Epoch Time - $tokEarliestTime$ $tokLatestTime$</title>
<chart>
<title>Splunkd errors timechart by top 5 components</title>
<search>
<query>index=_internal sourcetype="splunkd" log_level!="INFO" component="*"
| timechart count by component limit=5 usenull=f useother=f
</query>
<earliest>$tokEarliestTime$</earliest>
<latest>$tokLatestTime$</latest>
</search>
<option name="charting.axisTitleX.text">Time</option>
<option name="charting.axisTitleY.text">Count</option>
<option name="charting.chart.stackMode">stacked</option>
</chart>
</panel>
</row>
</dashboard>Following is the JavaScript code for html_input_date_control.js.
It needs to be saved to appserver/static folder i.e. $SPLUNK_HOME/etc/apps/<yourAppName>/appserver/static. If the folder appserver/static does not exist it would need to be manually created.
Since this solution approach require static file, Splunk needs to be restarted/refreshed or bumped. Internet Browser history would need to be cleared as well for the changes to reflect.
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function($,mvc) {
var defaultTokenModel = mvc.Components.get("default");
var submittedTokenModel = mvc.Components.get("submitted");
// On default model change of token tokFromDate assign the selected value to html date input inputFromDate
defaultTokenModel.on("change:tokFromDate", function(newValue) {
var tokFromDate=defaultTokenModel.get("tokFromDate");
if(tokFromDate!=="undefined"){
$('#inputFromDate').val(tokFromDate);
}
});
// On default model change of token tokToDate assign the selected value to html date input inputToDate
defaultTokenModel.on("change:tokToDate", function(newValue) {
var tokToDate=defaultTokenModel.get("tokToDate");
if(tokToDate!=="undefined"){
$('#inputToDate').val(tokToDate);
}
});
// On submitted model change of token tokFromDate assign the selected value to html date input inputFromDate
submittedTokenModel.on("change:tokFromDate", function(newValue) {
var tokFromDate=defaultTokenModel.get("tokFromDate");
if(tokFromDate!=="undefined"){
$('#inputFromDate').val(tokFromDate);
}
});
// On submitted model change of token tokToDate assign the selected value to html date input inputToDate
submittedTokenModel.on("change:tokToDate", function(newValue) {
var tokToDate=defaultTokenModel.get("tokToDate");
if(tokToDate!=="undefined"){
$('#inputToDate').val(tokToDate);
}
});
// On change of html date input inputFromDate, update the token tokFromDate in default and submitted model
$(document).on("change", "#inputFromDate",function(){
var dateText=$("#inputFromDate").val();
defaultTokenModel.set("tokFromDate",dateText);
submittedTokenModel.set("tokFromDate",dateText);
});
// On change of html date input inputToDate, update the token tokToDate in default and submitted model
$(document).on("change", "#inputToDate",function(){
var dateText=$("#inputToDate").val();
defaultTokenModel.set("tokToDate",dateText);
submittedTokenModel.set("tokToDate",dateText);
});
});Please try out and confirm!
