Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question

Adding javascript based date picker into dashboard

anilkapu
Observer
‎09-25-2020 12:45 AM

Hi,

I have dashboard with several visualizations. Im trying to add 2 date pickers "From", "To" to select date range so that the visualizations query events in that date range input by the user. I'm not able to use splunk's default "Time" input object because I have to limit users from selecting "From" date to maximum of 3 years from current date. 

I have been able to add the date pickers into simplexml as per suggestion in this post https://community.splunk.com/t5/Dashboards-Visualizations/Jquery-datepicker-in-splunk/m-p/361049

The thing which I'm struggling with is to set the min/max attribute of "date" type element on "change" event. To explain this...for example.. if a user selects "From" date as 09/21/2020, then the calendar in "To" date should disable all the dates before this date.. Likewise if user selects  09/21/2020 as "To" date then disable all date selections after this date in "From" date field.

Here is the code for dashboard

 

 

<dashboard script="datepicker.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>
      <eval token="strMinDate">strftime(relative_time(now(), "-3years"), "%Y-%m-%d")</eval>
      <eval token="strMaxDate">strftime(now(), "%Y-%m-%d")</eval>

    </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 - $strMinDate$ - $strMaxDate$</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" min="$strMinDate$" max="$strMaxDate$"/>
          </div>
          <div class="dateInput">
            <div>To Date:</div>
            <input id="inputToDate" type="date" min="$strMinDate$" max="$strMaxDate$"/>
          </div>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Converted Epoch Time - $tokFromDate$ $tokToDate$</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>

 

Below is the javascript

 

require([
  "jquery",
  "splunkjs/mvc",
  "splunkjs/mvc/simplexml/ready!"
], function($, mvc) {
  var submittedTokenModel = mvc.Components.get("submitted");
  var defaultTokenModel = mvc.Components.get("default");

  // 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);
//update the min value of "To" date field to selected "From" date
    if (dateText) $("#inputToDate").attr('min', 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);
//update the max value of "From" date field to selected "To" date
    if (dateText) $("#inputFromDate").attr('max', dateText);

  });
});

 

I'm using Splunk version Version:7.3.3 Build -7af3758d0d5e

Could any one suggest what am I doing wrong? Any help would be much appreciated

 

Labels (2)
Labels
0 Karma
Reply
Get Updates on the Splunk Community!

Splunk Observability Cloud's AI Assistant in Action Series: Auditing Compliance and ...

This is the third post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how to ...

Splunk Community Badges!

  Hey everyone! Ready to earn some serious bragging rights in the community? Along with our existing badges ...

What You Read The Most: Splunk Lantern’s Most Popular Articles!

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...
Top